diff --git a/Signin.css b/Signin.css
new file mode 100644
index 0000000..66919c4
--- /dev/null
+++ b/Signin.css
@@ -0,0 +1,212 @@
+:root {
+ /* COLORS */
+ --white: #e9e9e9;
+ --gray: #333;
+ --blue: #0367a6;
+ --lightblue: #008997;
+
+ /* RADII */
+ --button-radius: 0.7rem;
+
+ /* SIZES */
+ --max-width: 758px;
+ --max-height: 420px;
+
+ font-size: 16px;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+ Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+body {
+ align-items: center;
+ background-color: var(--white);
+ background-image: url(../WhatsApp\ Image\ 2024-07-09\ at\ 16.24.57.jpeg);
+ background-attachment: fixed;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ display: grid;
+ height: 90vh;
+ place-items: center;
+}
+
+.form__title {
+ font-weight: 300;
+ margin: 0;
+ margin-bottom: 1.25rem;
+}
+
+.link {
+ color: var(--gray);
+ font-size: 0.9rem;
+ margin: 1.5rem 0;
+ text-decoration: none;
+}
+
+.container {
+ background-color: var(--white);
+ border-radius: var(--button-radius);
+ box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
+ 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
+ height: var(--max-height);
+ max-width: var(--max-width);
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+}
+
+.container__form {
+ height: 100%;
+ position: absolute;
+ top: 0;
+ transition: all 0.6s ease-in-out;
+}
+
+.container--signin {
+ left: 0;
+ width: 50%;
+ z-index: 2;
+}
+
+.container.right-panel-active .container--signin {
+ transform: translateX(100%);
+}
+
+.container--signup {
+ left: 0;
+ opacity: 0;
+ width: 50%;
+ z-index: 1;
+}
+
+.container.right-panel-active .container--signup {
+ animation: show 0.6s;
+ opacity: 1;
+ transform: translateX(100%);
+ z-index: 5;
+}
+
+.container__overlay {
+ height: 100%;
+ left: 50%;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ transition: transform 0.6s ease-in-out;
+ width: 50%;
+ z-index: 100;
+}
+
+.container.right-panel-active .container__overlay {
+ transform: translateX(-100%);
+}
+
+.overlay {
+ background-color: var(--lightblue);
+ background: url("../WhatsApp\ Image\ 2024-07-09\ at\ 16.24.57.jpeg");
+ background-attachment: fixed;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ height: 100%;
+ left: -100%;
+ position: relative;
+ transform: translateX(0);
+ transition: transform 0.6s ease-in-out;
+ width: 200%;
+}
+
+.container.right-panel-active .overlay {
+ transform: translateX(50%);
+}
+
+.overlay__panel {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: center;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ transform: translateX(0);
+ transition: transform 0.6s ease-in-out;
+ width: 50%;
+}
+
+.overlay--left {
+ transform: translateX(-20%);
+}
+
+.container.right-panel-active .overlay--left {
+ transform: translateX(0);
+}
+
+.overlay--right {
+ right: 0;
+ transform: translateX(0);
+}
+
+.container.right-panel-active .overlay--right {
+ transform: translateX(20%);
+}
+
+.btn {
+ background-color: var(--blue);
+ background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
+ border-radius: 20px;
+ border: 1px solid var(--blue);
+ color: var(--white);
+ cursor: pointer;
+ font-size: 0.8rem;
+ font-weight: bold;
+ letter-spacing: 0.1rem;
+ padding: 0.9rem 4rem;
+ text-transform: uppercase;
+ transition: transform 80ms ease-in;
+}
+
+.form > .btn {
+ margin-top: 1.5rem;
+}
+
+.btn:active {
+ transform: scale(0.95);
+}
+
+.btn:focus {
+ outline: none;
+}
+
+.form {
+ background-color: var(--white);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0 3rem;
+ height: 100%;
+ text-align: center;
+}
+
+.input {
+ background-color: #fff;
+ border: none;
+ padding: 0.9rem 0.9rem;
+ margin: 0.5rem 0;
+ width: 100%;
+}
+
+@keyframes show {
+ 0%,
+ 49.99% {
+ opacity: 0;
+ z-index: 1;
+ }
+
+ 50%,
+ 100% {
+ opacity: 1;
+ z-index: 5;
+ }
+}
diff --git a/Signin.js b/Signin.js
new file mode 100644
index 0000000..2b041bc
--- /dev/null
+++ b/Signin.js
@@ -0,0 +1,21 @@
+const signInBtn = document.getElementById("signIn");
+const signUpBtn = document.getElementById("signUp");
+const fistForm = document.getElementById("form1");
+const secondForm = document.getElementById("form2");
+const container = document.querySelector(".container");
+const user_signup= document.querySelector(".user-signup")
+
+
+
+
+signInBtn.addEventListener("click", () => {
+ container.classList.remove("right-panel-active");
+});
+
+signUpBtn.addEventListener("click", () => {
+ container.classList.add("right-panel-active");
+});
+
+fistForm.addEventListener("submit", (e) => e.preventDefault());
+secondForm.addEventListener("submit", (e) => e.preventDefault());
+
diff --git a/User-Profile.css b/User-Profile.css
new file mode 100644
index 0000000..7055daa
--- /dev/null
+++ b/User-Profile.css
@@ -0,0 +1,123 @@
+*{
+ padding: 0%;
+ margin: 0%;
+}
+body{
+ background-color: #48CAE4;
+}
+nav{
+ background-color: #ADE8F4;
+ color: black;
+ display: flex;
+ justify-content: space-around;
+ height: 7vh;
+}
+.icon-text{
+ background-color: #ADE8F4;
+ color: black;
+ margin-top: 10px;
+}
+.option{
+ margin-top: 15px;
+}
+.option>a{
+ background-color: #ADE8F4;
+ color: black;
+ width: 400px;
+ margin: 10px;
+ text-decoration: none;
+}
+.option>a:hover{
+ color: #03045E;
+}
+.log-out{
+ height: 70%;
+ margin-top: 7px;
+ padding: 5px;
+ border-radius: 20%;
+ color: black;
+ background-color: #EDAC61;
+}
+.log-out:hover{
+ background-color: #ec9f47;
+}
+.card{
+ display: flex;
+ justify-content: space-around;
+ background: rgba( 255, 255, 255, 0.25 );
+ box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+ backdrop-filter: blur( 8px );
+ -webkit-backdrop-filter: blur( 8px );
+ border-radius: 10px;
+ border: 1px solid rgba( 255, 255, 255, 0.18 );
+ width: 45%;
+ margin: 6%;
+ margin-left: 27%;
+ display: flex;
+ height: 35vh;
+}
+h3{
+ text-align: center;
+ font-size: x-large;
+ margin-top: 15px;
+}
+p{
+ text-align: center;
+ font-size: large;
+ margin-top: 5px;
+}
+.primary{
+ width: 15vw;
+}
+.call,.mail,.location{
+ display: flex;
+ color: black;
+ margin: 15px;
+ justify-content: space-around;
+}
+.call-sign,.mail-sign,.location-sign{
+ margin-top: 5px;
+}
+.call{
+ margin-top: 20px;
+}
+.mail>a{
+ color: black;
+ text-decoration: none;
+}
+.logo{
+ margin-top: 20%;
+ margin-left: -40%;
+ height: 100px;
+ width: 100px;
+}
+img{
+ height: 200%;
+ width: 200%;
+ border-radius: 50%;
+}
+.btn{
+ margin-left: 45%;
+ margin-top: -3%;
+}
+.btn>button{
+ background-color: #EDAC61;
+ color: black;
+ padding: 5px;
+}
+.btn>button:hover{
+ background-color: #ec9f47;
+}
+footer{
+ position: absolute;
+ width: 100vw;
+ top: 80%;
+ display: flex;
+ justify-content: space-around;
+ background-color: #ADE8F4;
+ color: black;
+ height: 20vh;
+}
+.foot1>p,.foot2>p{
+ margin: 10px;
+}
\ No newline at end of file
diff --git a/chart-code.js b/chart-code.js
new file mode 100644
index 0000000..c1f93cf
--- /dev/null
+++ b/chart-code.js
@@ -0,0 +1,33 @@
+const ctx = document.getElementById('Chart-canvas');
+const day1 = parseInt(document.getElementById('num1').value);
+const day2 = parseInt(document.getElementById('num2').value);
+const day3 = parseInt(document.getElementById('num3').value);
+const day4 = parseInt(document.getElementById('num4').value);
+const day5 = parseInt(document.getElementById('num5').value);
+const day6 = parseInt(document.getElementById('num6').value);
+const day7 = parseInt(document.getElementById('num7').value);
+const reloadButton= document.querySelector('.predict');
+
+const userdata= [day1,day2,day3,day4,day5,day6,day7]
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6','Day 7'],
+ datasets: [{
+ label: 'Sales for the last week',
+ data: userdata,
+ borderWidth: 0.5
+ }]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+
+reloadButton.addEventListener('click', function(){
+ location.reload();
+ });
\ No newline at end of file
diff --git a/landingpage.css b/landingpage.css
new file mode 100644
index 0000000..aba7b2c
--- /dev/null
+++ b/landingpage.css
@@ -0,0 +1,25 @@
+body{
+ height: 90vh;
+ width: 90vw;
+ background: url(../graphs\ image.jpg);
+ background-size: cover;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+}
+h1{
+ text-align: center;
+ font-size: 8vh;
+}
+p{
+ font-size: 2vh;
+}
+button{
+ background-color: rgb(228, 109, 12);
+ color: white;
+ padding: 15px;
+ border-radius: 50%;
+ margin-left: 50%;
+ margin-top: 5%;
+}
\ No newline at end of file
diff --git a/main-page.css b/main-page.css
new file mode 100644
index 0000000..0ab11b7
--- /dev/null
+++ b/main-page.css
@@ -0,0 +1,77 @@
+*{
+ padding: 0%;
+ margin: 0%;
+}
+body{
+ background-color: #ADE8F4;
+}
+nav{
+ background-color: #ffddd2;
+ color: black;
+ display: flex;
+ justify-content: space-between;
+ height: 7vh;
+}
+a{
+ margin: 5px;
+ color: black;
+ text-decoration: none;
+ font-size: x-large;
+ margin-top: 15px;
+}
+.option,.icon-text{
+ margin-top: 10px;
+}
+input{
+ height: 7vh;
+ width: 7vh;
+ font-size: large;
+ text-align: center;
+}
+input::-webkit-inner-spin-button, input ::-webkit-outer-spin-button{
+ -webkit-appearance: none;
+ margin: 0;
+ }
+.top-box{
+ width: 80vw;
+ padding-left: 20vw;
+ padding-top: 5vh;
+ background-color: #ADE8F4
+}
+h2{
+ margin-left: 29%;
+}
+.input-div{
+ padding-top: 3vh;
+ padding-left: 10vw;
+ flex-wrap: wrap;
+}
+input{
+ margin: 10px;
+}
+.predict{
+ height: 5vh;
+ width: 10vw;
+ margin: 10px;
+ font-size: large;
+ margin-left: 44vw;
+ margin-right: 46vw;
+}
+.chart{
+
+ margin-left: 40vw;
+ margin-right: 0;
+}
+footer{
+ position: absolute;
+ width: 100vw;
+ top: 80%;
+ display: flex;
+ justify-content: space-around;
+ background-color: #ffddd2;
+ color: black;
+ height: 20vh;
+}
+.foot1>p,.foot2>p{
+ margin: 10px;
+}
\ No newline at end of file