Merge pull request #1 from Monika-1082005/main

Added Files

frontend/challenges.css

@@ -0,0 +1,230 @@
+@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Domine:wght@500&family=Libre+Baskerville&family=Lora:ital,wght@1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Lora:ital,wght@1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Domine:wght@500&family=Libre+Baskerville&family=Lora:ital,wght@1,400;1,700&family=Poppins:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Protest+Revolution&display=swap');
+
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  #logo{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 60px;
+    width: 130px;
+}
+  .container{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.navbar{
+
+    background-color: rgb(11, 11, 40);
+    padding: 30px 0px;
+    transition: transform 0.5s ease-in-out;
+    width: 35vw;
+    height: 100vh;
+}
+.navbar li{
+    list-style: none;
+    padding: 25px;
+    /* font-size: 20px; */
+    font-size: 1rem;
+    font-weight: 700;
+
+}
+
+.navbar ul li a{
+    text-decoration: none;
+    color: white;
+    position: relative;
+}
+.navbarGo{
+    position: absolute;
+    transform: translate(-220px,0px);
+}
+.ham{
+    position: absolute;
+    left: 10px;
+    top: 10px;
+
+}
+.close{
+        position: absolute;
+        top: 10px;
+        left: 110px;
+
+
+}
+header{
+    height: 50px;
+}
+
+.navheader{
+    background-color: rgb(11,11,40);
+    height: 60px;
+    width: 100vw;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-family: 'Poppins', sans-serif;
+    color: white;
+}
+
+.navheader li a{
+    text-decoration: none;
+    color: white;
+    position: relative;
+}
+
+.navheader li{
+    list-style: none;
+    margin-right: 35px;
+
+}
+.navheader ul{
+    display: flex;
+
+}
+.navheader ul li a::after{
+    content: '';
+    width: 0;
+    height: 3px;
+    background-color: blueviolet;
+    position: absolute;
+    left: 0;
+    bottom: -7px;
+    transition: 0.5s;
+}
+.navheader ul li a:hover::after{
+    width: 100%;
+}
+.icons{
+    color: white;
+}
+@media(min-width:1466px) {
+
+    .icons,
+    .navbar {
+        display: none;
+    }
+
+
+}
+
+
+  section {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 350px;
+  }
+
+  .section1 {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 350px;
+    margin-top: 90px;
+  }
+
+  .card {
+    width: 250px;
+    height: 250px;
+    padding: 10px;
+    margin: 10px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    /* transition: transform 2s ease-in-out 3s ; */
+  }
+  /* .allPrograms{
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      flex-direction: column;
+    } */
+  .program1 {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-direction: column;
+
+  }
+
+  .card1:hover .i1 {
+    height: 275px;
+    width: 275px;
+    cursor: pointer;
+    /* transform: scale(1.5); */
+  }
+
+  .card2:hover .i2 {
+    height: 275px;
+    width: 275px;
+    cursor: pointer;
+    /* transform: translate(-100px); */
+
+
+  }
+
+  .card3:hover .i3 {
+    height: 275px;
+    width: 275px;
+    cursor: pointer;
+
+  }
+
+  .card4:hover .i4 {
+    height: 275px;
+    width: 275px;
+    cursor: pointer;
+
+  }
+
+  .card5:hover .i5 {
+    height: 275px;
+    width: 275px;
+    cursor: pointer;
+
+  }
+
+  .card6:hover .i6 {
+    height: 275px;
+    width: 275px;
+    cursor: pointer;
+
+  }
+
+  .card7:hover .i7 {
+    height: 275px;
+    width: 275px;
+    cursor: pointer;
+
+  }
+
+  .card8:hover .i8 {
+    height: 275px;
+    width: 275px;
+    cursor: pointer;
+
+  }
+
+  .card9:hover .i9 {
+    height: 275px;
+    width: 275px;
+    cursor: pointer;
+
+  }
+
+  .card1:hover .card {
+    opacity: 0.2;
+  }

frontend/challenges.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Challenges</title>
+    <link rel="stylesheet" href="challenges.css">
+</head>
+
+<body>
+    <div class="challengesSection">
+        <div class="container">
+            <div class="navbar navbarGo">
+                <nav>
+                    <ul>
+                        <li><a href="index.html">Home</a></li>
+                        <li><a href="workout.html">Workouts</a></li>
+                        <li><a href="#">Challenges</a></li>
+                        <li><a href="news.html">News/Trends</a></li>
+                        <li><a href="dashboard.html">Dashboard</a></li>
+                        <li><a href="login.html" id="login" onclick="openLogin()">Login</a></li>
+                    </ul>
+                </nav>
+            </div>
+            <header>
+                <div class="navheader" id="navheader">
+                    <div class="left"><img src="./images/logo1.png" alt="" id="logo"></div>                    <div class="right">
+                        <ul>
+                            <li><a href="index.html">Home</a></li>
+                            <li><a href="workout.html">Workouts</a></li>
+                            <li><a href="#">Challenges</a></li>
+                            <li><a href="news.html">News/Trends</a></li>
+                            <li><a href="dashboard.html">Dashboard</a></li>
+                            <li><a href="login.html" id="login" onclick="openLogin()">Login</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </header>
+        </div>
+
+
+        <section class="section1">
+            <div class="card1 "><img class="i1" src="./images/img1.jpg" width="250" height="250" alt=""></div>
+            <div class="card2"><img class="i2" src="./images/img2.jpg" width="250" height="250" alt=""></div>
+            <div class="card3"><img class="i3" src="./images/img3.jpg" width="250" height="250" alt=""></div>
+            <div class="card4"><img class="i4" src="./images/img4.jpg" width="250" height="250" alt=""></div>
+            <div class="card5"><img class="i5" src="./images/img5.jpg" width="250" height="250" alt=""></div>
+        </section>
+
+        <section>
+            <div class="card6"><img class="i6" src="./images/img6.jpg" width="250" height="250" alt=""></div>
+            <div class="card7"><img class="i7" src="./images/img7.jpg" width="250" height="250" alt=""></div>
+            <div class="card8"><img class="i8" src="./images/img8.jpg" width="250" height="250" alt=""></div>
+            <div class="card9"><img class="i9" src="./images/img9.jpg" width="250" height="250" alt=""></div>
+        </section>
+    </div>
+</body>
+
+</html>

frontend/config.js

@@ -0,0 +1,25 @@
+const mongoose = require('mongoose'); 
+const connect = mongoose.connect("mongodb://localhost:27017/login");
+
+connect.then(() => {
+    console.log("database connected successfully");
+})
+.catch(()=> {
+    console.log("database can not be connected successfully");
+});
+// creating a schema
+const loginSchema = new mongoose.Schema({
+    name: {
+        type: String,
+        required: true
+    },
+    password: {
+        type: String,
+        required: true
+    }
+});
+
+
+//create mod and collction
+const collection = new mongoose.model("users",loginSchema);
+module.exports=collection;

frontend/dashboard.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="container">
+        <div class="navbar navbarGo">
+            <nav>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="workout.html">Workouts</a></li>
+                    <li><a href="challenges.html">Challenges</a></li>
+                    <li><a href="news.html">News/Trends</a></li>
+                    <li><a href="#">Dashboard</a></li>
+                    <li><a href="login.html" id="login" onclick="openLogin()">Login</a></li>
+                </ul>
+            </nav>
+        </div>
+        <header>
+            <div class="navheader" id="navheader">
+                <div class="left"><img src="./images/logo1.png" alt="" id="logo"></div>                <div class="right">
+                    <ul>
+                        <li><a href="index.html">Home</a></li>
+                        <li><a href="workout.html">Workouts</a></li>
+                        <li><a href="challenges.html">Challenges</a></li>
+                        <li><a href="news.html">News/Trends</a></li>
+                        <li><a href="#">Dashboard</a></li>
+                        <li><a href="login.html" id="login" onclick="openLogin()">Login</a></li>
+                    </ul>
+                </div>
+            </div>
+        </header>
+
+        <div class="vedioSection">
+            <video  autoplay class="video" loop>
+                <source src="./images/dashboard-video.mp4" type="video/mp4">
+                Your browser does not support the video tag.
+              </video>
+        </div>
+    </div>
+
+</body>
+</html>