Spaces:

hemanth8705
/

the_espada

Sleeping

App Files Files Community

HEMANTH commited on Dec 14, 2024

Commit

45a65b7

1 Parent(s): abc9746

static json and templates

Browse files

Files changed (8) hide show

static/diet.json +37 -0
static/feedback.json +152 -0
templates/currentprogress.html +141 -0
templates/diet.html +146 -0
templates/feed_back.html +173 -0
templates/index.html +313 -0
templates/workout.html +178 -0
templates/workouts_List.html +190 -0

static/diet.json ADDED Viewed

	@@ -0,0 +1,37 @@

+{
+  "Breakfast": [
+    {
+      "description": "3 scrambled eggs with spinach and a slice of whole-wheat toast topped with avocado",
+      "time": "7:00 AM"
+    }
+  ],
+  "Lunch": [
+    {
+      "description": "Grilled chicken breast with quinoa, steamed broccoli, and a side of hummus",
+      "time": "12:30 PM"
+    }
+  ],
+  "Snacks": [
+    {
+      "description": "Greek yogurt with mixed berries and a handful of almonds",
+      "time": "4:00 PM"
+    }
+  ],
+  "Dinner": [
+    {
+      "description": "Baked salmon with roasted sweet potatoes and sautéed asparagus",
+      "time": "7:30 PM"
+    }
+  ],
+  "dietSuggestions": [
+    {
+      "tip": "Prioritize protein intake to support muscle growth. Aim for 1.2-1.6 grams of protein per kilogram of body weight daily."
+    },
+    {
+      "tip": "Include complex carbohydrates like brown rice, quinoa, and sweet potatoes for sustained energy."
+    },
+    {
+      "tip": "Don't forget healthy fats from sources like avocado, nuts, seeds, and olive oil."
+    }
+  ]
+}

static/feedback.json ADDED Viewed

	@@ -0,0 +1,152 @@

+{
+  "daily_progress": [
+    {
+      "day": "Day 1",
+      "progress": 60,
+      "rest_time": 8,
+      "workout_time": 2
+    },
+    {
+      "day": "Day 2",
+      "progress": 65,
+      "rest_time": 0,
+      "workout_time": 2.5
+    },
+    {
+      "day": "Day 3",
+      "progress": 70,
+      "rest_time": 7,
+      "workout_time": 3
+    },
+    {
+      "day": "Day 4",
+      "progress": 75,
+      "rest_time": 6.5,
+      "workout_time": 3.5
+    },
+    {
+      "day": "Day 5",
+      "progress": 80,
+      "rest_time": 7,
+      "workout_time": 3
+    },
+    {
+      "day": "Day 6",
+      "progress": 85,
+      "rest_time": 7.5,
+      "workout_time": 2.5
+    },
+    {
+      "day": "Day 7",
+      "progress": 90,
+      "rest_time": 7,
+      "workout_time": 3
+    },
+    {
+      "day": "Day 8",
+      "progress": 98,
+      "rest_time": 4,
+      "workout_time": 4
+    },
+    {
+      "day": "Day 9",
+      "progress": 66,
+      "rest_time": 5,
+      "workout_time": 2
+    },
+    {
+      "day": "Day 10",
+      "progress": 70,
+      "rest_time": 7,
+      "workout_time": 4
+    },
+    {
+      "day": "Day 11",
+      "progress": 73,
+      "rest_time": 6,
+      "workout_time": 1
+    },
+    {
+      "day": "Day 12",
+      "progress": 98,
+      "rest_time": 6,
+      "workout_time": 2
+    },
+    {
+      "day": "Day 13",
+      "progress": 77,
+      "rest_time": 5,
+      "workout_time": 3
+    },
+    {
+      "day": "Day 14",
+      "progress": 69,
+      "rest_time": 5,
+      "workout_time": 5
+    },
+    {
+      "day": "Day 15",
+      "progress": 93,
+      "rest_time": 10,
+      "workout_time": 4
+    },
+    {
+      "day": "Day 16",
+      "progress": 96,
+      "rest_time": 7,
+      "workout_time": 5
+    },
+    {
+      "day": "Day 17",
+      "progress": 57,
+      "rest_time": 8,
+      "workout_time": 3
+    },
+    {
+      "day": "Day 18",
+      "progress": 65,
+      "rest_time": 7,
+      "workout_time": 2
+    },
+    {
+      "day": "Day 19",
+      "progress": 88,
+      "rest_time": 6,
+      "workout_time": 2
+    },
+    {
+      "day": "Day 20",
+      "progress": 92,
+      "rest_time": 8,
+      "workout_time": 1
+    },
+    {
+      "day": "Day 21",
+      "progress": 79,
+      "rest_time": 10,
+      "workout_time": 4
+    },
+    {
+      "day": "Day 22",
+      "progress": 51,
+      "rest_time": 6,
+      "workout_time": 1
+    },
+    {
+      "day": "Day 23",
+      "progress": 53,
+      "rest_time": 7,
+      "workout_time": 5
+    },
+    {
+      "day": "Day 24",
+      "progress": 58,
+      "rest_time": 10,
+      "workout_time": 3
+    }
+  ],
+  "weekly_summary": {
+    "rest_time": 160.0,
+    "workout_time": 70.5
+  }
+}

templates/currentprogress.html ADDED Viewed

	@@ -0,0 +1,141 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Dashboard</title>
+    <style>
+        /* Styling for the user interface */
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #000000; /* Black background */
+            color: #ffa500; /* Orange text */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-image: url('{{ url_for('static', filename='progress_background.jpg') }}'); /* Reference the image */
+            background-size: cover;
+            background-position: center;
+        }
+        .container {
+            width: 100%;
+            max-width: 900px;
+            padding: 30px;
+            background-color: rgba(51, 51, 51, 0.8); /* Dark background with opacity */
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        h3 {
+            text-align: center;
+            color: #cc8400; /* Orange color */
+            margin-bottom: 20px;
+        }
+        .progress-bar-container {
+            margin-bottom: 30px;
+        }
+        .progress-bar {
+            width: 100%;
+            background-color: #222222;
+            height: 20px;
+            border-radius: 10px;
+            margin: 10px 0;
+        }
+        .progress {
+            height: 100%;
+            background-color: #cc8400;
+            border-radius: 10px;
+        }
+        .action-buttons {
+            display: flex;
+            justify-content: space-around;
+            flex-wrap: wrap;
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .card {
+            background-color: #444;
+            padding: 15px;
+            text-align: center;
+            border-radius: 10px;
+            width: 45%;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .card img {
+            width: 100%;
+            height: 150px;
+            object-fit: cover;
+            border-radius: 10px;
+        }
+        .card button {
+            background-color: #cc8400;
+            border: none;
+            color: white;
+            padding: 10px;
+            margin-top: 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        .card button:hover {
+            background-color: #ffa500;
+        }
+        .card button:focus {
+            outline: none;
+        }
+        @media (max-width: 600px) {
+            .card {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Progress Bar Section -->
+        <div class="progress-bar-container">
+            <h3>Your Progress</h3>
+            <div class="progress-bar">
+                <div class="progress" style="width: 70%;"></div> <!-- Static Progress -->
+            </div>
+            <p style="text-align: center;">Completed: {{ sum }}%</p> <!-- Static progress percentage -->
+        </div>
+        <!-- Action Buttons Section -->
+        <div class="action-buttons">
+            <div class="card">
+                <img src="{{ url_for('static', filename='diet.jpg') }}" alt="Diet Plan">
+                <button onclick="window.location.href='/diet'">Diet Plan</button>
+            </div>
+            <div class="card">
+                <img src="{{ url_for('static', filename='progress_workout.jpg') }}" alt="Start Workout">
+                <button onclick="handleClick('{{ workouts_List }}')">Start Workout</button>
+            </div>
+        </div>
+    </div>
+    <script>
+    // Function to handle plan selection (on card click)
+    function handleClick(planName) {
+      // Redirect to the plan's details page or trigger any other action
+      planName = planName.trim();
+      planName = planName.replace(/ /g,"-")
+      console.log(planName)
+      window.location.href = '/' + 'weight-gain'; // Ensure the plan name is URL-safe
+    }
+    </script>
+</body>
+</html>

templates/diet.html ADDED Viewed

	@@ -0,0 +1,146 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DIET PLAN</title>
+    <style>
+         body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-image: url('{{ url_for('static', filename='vegetable-salad-wooden-board-with-measuring-tape-table.jpg') }}'); /* Page background image */
+            background-size: cover;
+            background-position: center;
+            background-attachment: fixed; /* Makes the background image stay in place */
+            color: #ffa500;
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 2.5em;
+            text-shadow: 2px 2px 5px #000;
+        }
+        .card-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+            justify-content: center;
+        }
+        .card {
+            background-color: rgba(34, 34, 34, 0.9);
+            border: 2px solid #b4b2ad;
+            border-radius: 10px;
+            padding: 20px;
+            color: #ffffff;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+            width: 300px;
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+        .card h2 {
+            margin: 0 0 10px;
+            font-size: 1.5em;
+            text-shadow: 1px 1px 3px #000;
+        }
+        .card p {
+            margin: 5px 0;
+        }
+        .card:hover {
+            transform: scale(1.05);
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
+        }
+        .suggestions-container {
+            margin-top: 40px;
+            padding: 20px;
+            background-color: rgba(51, 51, 51, 0.9);
+            border-radius: 10px;
+            border: 2px solid #c2c0bc;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+        }
+        .suggestions-container h2 {
+            text-align: center;
+            margin-bottom: 20px;
+            text-shadow: 2px 2px 5px #000;
+        }
+        .suggestion {
+            background-color: rgba(34, 34, 34, 0.8);
+            padding: 10px;
+            border-radius: 5px;
+            margin: 5px 0;
+            border: 1px solid #c9c8c4;
+            color: #fff;
+            transition: background-color 0.3s, transform 0.3s;
+        }
+        .suggestion:hover {
+            background-color: rgba(51, 51, 51, 0.9);
+            transform: scale(1.03);
+            box-shadow: 0 4px 10px rgba(255, 165, 0, 0.8);
+        }
+    </style>
+</head>
+<body>
+    <h1>DIET PLAN</h1>
+    <div class="card-container" id="diet-container"></div>
+    <div class="suggestions-container">
+        <h2>Diet Suggestions</h2>
+        <div id="diet-suggestions"></div>
+    </div>
+    <script>
+        // Fetch and render diet plan from Flask
+        fetch('/diet-data')
+            .then(response => response.json())
+            .then(data => {
+                const dietContainer = document.getElementById('diet-container');
+                const dietSuggestions = document.getElementById('diet-suggestions');
+                // Render meal cards for Breakfast, Lunch, Snacks, Dinner
+                for (const [meal, items] of Object.entries(data)) {
+                    if (meal !== 'dietSuggestions') {
+                        items.forEach(item => {
+                            const card = document.createElement('div');
+                            card.classList.add('card');
+                            const heading = document.createElement('h2');
+                            heading.textContent = meal;
+                            card.appendChild(heading);
+                            const description = document.createElement('p');
+                            description.innerHTML = `<strong>Description:</strong> ${item.description}`;
+                            card.appendChild(description);
+                            const time = document.createElement('p');
+                            time.innerHTML = `<strong>Time:</strong> ${item.time}`;
+                            card.appendChild(time);
+                            dietContainer.appendChild(card);
+                        });
+                    }
+                }
+                // Render diet suggestions
+                data.dietSuggestions.forEach(suggestion => {
+                    const suggestionDiv = document.createElement('div');
+                    suggestionDiv.classList.add('suggestion');
+                    suggestionDiv.textContent = suggestion.tip;
+                    dietSuggestions.appendChild(suggestionDiv);
+                });
+            })
+            .catch(error => {
+                console.error('Error fetching diet data:', error);
+            });
+    </script>
+</body>
+</html>

templates/feed_back.html ADDED Viewed

	@@ -0,0 +1,173 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Progress</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #000;  /* Black background */
+            background-image: url('pexels-pranjall-kumar-150768-7849087.jpg'); /* Optional: Add your background image here */
+            background-size: cover;  /* Cover the entire page */
+            background-position: center;
+            color: #fff;  /* White text for contrast */
+            margin: 0;
+            padding: 20px;
+        }
+        .container {
+            max-width: 900px;
+            margin: auto;
+            text-align: center;
+        }
+        h1 {
+            color: #fff;
+        }
+        canvas {
+            max-width: 100%;
+            height: 200px;  /* Smaller pie charts */
+            margin-top: 20px;
+        }
+        .chart-container {
+            display: inline-block;
+            width: 250px; /* Smaller pie chart size */
+            margin: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>User Progress</h1>
+        <!-- Daily Pie Chart -->
+        <div class="chart-container">
+            <h3>Daily Rest vs. Workout Time</h3>
+            <canvas id="dailyPieChart"></canvas>
+        </div>
+        <!-- Weekly Pie Chart -->
+        <div class="chart-container">
+            <h3>Weekly Rest vs. Workout Time</h3>
+            <canvas id="weeklyPieChart"></canvas>
+        </div>
+        <!-- Daily Progress Bar Chart -->
+        <h3>Daily Progress</h3>
+        <canvas id="dailyProgressChart"></canvas>
+    </div>
+    <script>
+        // Fetch the data from feedback.json
+        fetch('static/feedback.json')
+            .then(response => response.json())
+            .then(data => {
+                const dailyProgress = data.daily_progress;
+                const weeklySummary = data.weekly_summary;
+                // Daily Pie Chart (Rest vs. Workout)
+                const dailyRestTime = dailyProgress.map(item => item.rest_time);
+                const dailyWorkoutTime = dailyProgress.map(item => item.workout_time);
+                const ctxDailyPie = document.getElementById('dailyPieChart').getContext('2d');
+                new Chart(ctxDailyPie, {
+                    type: 'pie',
+                    data: {
+                        labels: ['Rest Time', 'Workout Time'],
+                        datasets: [{
+                            data: [
+                                dailyRestTime.reduce((a, b) => a + b, 0),
+                                dailyWorkoutTime.reduce((a, b) => a + b, 0)
+                            ],
+                            backgroundColor: ['#ffa500', '#9E9E9E']  /* Orange and Grey */
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'top',
+                                labels: {
+                                    color: '#fff'  /* White text for legend */
+                                }
+                            }
+                        }
+                    }
+                });
+                // Weekly Pie Chart (Rest vs. Workout)
+                const ctxWeeklyPie = document.getElementById('weeklyPieChart').getContext('2d');
+                new Chart(ctxWeeklyPie, {
+                    type: 'pie',
+                    data: {
+                        labels: ['Rest Time', 'Workout Time'],
+                        datasets: [{
+                            data: [weeklySummary.rest_time, weeklySummary.workout_time],
+                            backgroundColor: ['#ffa500', '#9E9E9E']  /* Orange and Grey */
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'top',
+                                labels: {
+                                    color: '#fff'  /* White text for legend */
+                                }
+                            }
+                        }
+                    }
+                });
+                // Daily Progress Bar Chart (with points touching)
+                const labels = dailyProgress.map(item => item.day);
+                const progressData = dailyProgress.map(item => item.progress);
+                const ctxBar = document.getElementById('dailyProgressChart').getContext('2d');
+                new Chart(ctxBar, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: 'Daily Progress (%)',
+                            data: progressData,
+                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                            borderColor: 'rgba(75, 192, 192, 1)',
+                            borderWidth: 1,
+                            fill: true,
+                            tension: 0.4,  // Smooth the line
+                            pointBackgroundColor: 'rgba(75, 192, 192, 1)',  // Points will touch the line
+                            pointBorderWidth: 2
+                        }]
+                    },
+                    options: {
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    stepSize: 10
+                                },
+                                grid: {
+                                    color: '#9E9E9E'  /* Grey grid lines */
+                                }
+                            },
+                            x: {
+                                grid: {
+                                    color: '#9E9E9E'  /* Grey grid lines */
+                                }
+                            }
+                        },
+                        plugins: {
+                            legend: {
+                                labels: {
+                                    color: '#fff'  /* White legend text */
+                                }
+                            }
+                        }
+                    }
+                });
+            })
+            .catch(error => console.error('Error loading the feedback data:', error));
+    </script>
+</body>
+</html>

templates/index.html ADDED Viewed

	@@ -0,0 +1,313 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NRI HACKS</title>
+    <style>
+        /* Basic Reset */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #000000; /* Black background */
+            color: #ffa500; /* Orange text */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-image: url('{{ url_for('static', filename='index.jpg') }}'); /* Add your image path here */
+            background-size: cover; /* Ensure the image covers the entire background */
+            background-position: center; /* Center the image */
+        }
+        .form-container {
+            width: 100%;
+            max-width: 450px;
+            background-color: rgba(51, 51, 51, 0.8); /* Dark background with opacity for the form */
+            padding: 20px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+        }
+        h2 {
+            text-align: center;
+            color: #ffa500; /* Orange text */
+            margin-bottom: 20px;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .form-group label {
+            font-size: 14px;
+            color: #ffa500; /* Orange text */
+            display: block;
+        }
+        .form-group input,
+        .form-group select {
+            width: 100%;
+            padding: 10px;
+            font-size: 14px;
+            border: 1px solid #ffa500; /* Orange border */
+            border-radius: 5px;
+            margin-top: 5px;
+            background-color: #222222; /* Dark background for input fields */
+            color: #ffa500; /* Orange text in inputs */
+        }
+        .form-group input[type="submit"] {
+            background-color: #ffa500; /* Orange background for submit button */
+            color: black;
+            border: none;
+            cursor: pointer;
+        }
+        .form-group input[type="submit"]:hover {
+            background-color: #cc8400; /* Darker orange on hover */
+        }
+        .switch-form {
+            text-align: center;
+            font-size: 14px;
+        }
+        .switch-form span {
+            color: #d5d2cd; /* Orange text */
+            cursor: pointer;
+            font-weight: bold;
+        }
+        .form-content {
+            display: none;
+        }
+        .form-content.active {
+            display: block;
+        }
+        #registration-form .form-group {
+            display: block;
+        }
+        #registration-form .form-group input,
+        #registration-form .form-group select {
+            width: 100%;
+        }
+        #registration-form .form-group input[type="submit"] {
+            margin-top: 10px;
+        }
+        /* Gender dropdown style (no default selection) */
+        #registration-form .form-group select {
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ffa500; /* Orange border */
+        }
+        /* Fixing the age input size issue */
+        #registration-form .form-group input#age {
+            width: 100%;
+        }
+        /* Style for the age, height, weight fields side by side */
+        #registration-form .form-group input#height,
+        #registration-form .form-group input#weight {
+            width: 48%;
+        }
+        #registration-form .form-group {
+            display: flex;
+            justify-content: space-between;
+            gap: 4%;
+        }
+        /* Mobile responsiveness */
+        @media (max-width: 500px) {
+            .form-container {
+                width: 90%;
+            }
+            #registration-form .form-group {
+                display: block;
+            }
+            #registration-form .form-group input,
+            #registration-form .form-group select {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="form-container">
+        <!-- Login Form -->
+        <div id="login-form" class="form-content active">
+            <h2>Login</h2>
+            <form id="login-form-element" method="post">
+                <div class="form-group">
+                    <label for="login-email">Email:</label>
+                    <input type="email" id="login-email" name="email" required />
+                </div>
+                <div class="form-group">
+                    <label for="login-password">Password:</label>
+                    <input type="password" id="login-password" name="password" required />
+                </div>
+                <div class="form-group">
+                    <input type="submit" value="Login" />
+                </div>
+                <p class="switch-form">Don't have an account? <span id="to-register">Sign up</span></p>
+            </form>
+        </div>
+        <!-- Registration Form -->
+        <div id="registration-form" class="form-content">
+            <h2>Sign Up</h2>
+            <form id="registration-form-element" method="post">
+                <div class="form-group">
+                    <label for="name">Name:</label>
+                    <input type="text" id="name" name="name" required />
+                </div>
+                <div class="form-group">
+                    <label for="email">Email:</label>
+                    <input type="email" id="email" name="email" required />
+                </div>
+                <div class="form-group">
+                    <label for="password">Password:</label>
+                    <input type="password" id="password" name="password" required />
+                </div>
+                <div class="form-group">
+                    <label for="age">Age:</label>
+                    <input type="number" id="age" name="age" required />
+                </div>
+                <div class="form-group">
+                    <label for="height">Height (cm):</label>
+                    <input type="number" id="height" name="height" required />
+                </div>
+                <div class="form-group">
+                    <label for="weight">Weight (kg):</label>
+                    <input type="number" id="weight" name="weight" required />
+                </div>
+                <div class="form-group">
+                    <label for="max-pullups">Max Pullups:</label>
+                    <input type="number" id="max-pullups" name="maxPullups" required />
+                </div>
+                <div class="form-group">
+                    <label for="min-pullups">Min Pullups:</label>
+                    <input type="number" id="min-pullups" name="minPullups" required />
+                </div>
+                <div class="form-group">
+                    <label for="gender">Gender:</label>
+                    <select id="gender" name="gender" required>
+                        <option value="male">Male</option>
+                        <option value="female">Female</option>
+                        <option value="other">Other</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <input type="submit" value="Sign Up" />
+                </div>
+                <p class="switch-form">Already have an account? <span id="to-login">Login</span></p>
+            </form>
+        </div>
+    </div>
+    <script>
+        document.getElementById("to-register").addEventListener("click", function() {
+            document.getElementById("login-form").classList.remove("active");
+            document.getElementById("registration-form").classList.add("active");
+        });
+        document.getElementById("to-login").addEventListener("click", function() {
+            document.getElementById("registration-form").classList.remove("active");
+            document.getElementById("login-form").classList.add("active");
+        });
+        // Registration form submit
+        document.getElementById("registration-form-element").addEventListener("submit", function(event) {
+            event.preventDefault();  // Prevent the form from submitting normally
+            const name = document.getElementById("name").value;
+            const email = document.getElementById("email").value;
+            const password = document.getElementById("password").value;
+            const age = document.getElementById("age").value;
+            const height = document.getElementById("height").value;
+            const weight = document.getElementById("weight").value;
+            const maxPullups = document.getElementById("max-pullups").value;
+            const minPullups = document.getElementById("min-pullups").value;
+            const gender = document.getElementById("gender").value;
+            fetch("/register", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    name,
+                    email,
+                    password,
+                    age,
+                    height,
+                    weight,
+                    maxPullups,
+                    minPullups,
+                    gender
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.message) {
+                    // alert(data.message);
+                    window.location.href = "/home";  // Redirect after successful registration
+                } else {
+                    // alert(data.error);
+                }
+            })
+            .catch(error => {
+                console.error("Error during registration:", error);
+                alert("An error occurred during registration");
+            });
+        });
+        // Login form submit
+        document.getElementById("login-form-element").addEventListener("submit", function(event) {
+    event.preventDefault(); // Prevent the form from submitting normally
+    const email = document.getElementById("login-email").value;
+    const password = document.getElementById("login-password").value;
+    fetch("/login", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            email: email,
+            password: password
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.message) {
+            window.location.href = "/home"; // Redirect after successful login
+        } else {
+            alert(data.error);
+        }
+    })
+    .catch(error => {
+        console.error("Error during login:", error);
+        alert("An error occurred during login");
+    });
+});
+    </script>
+</body>
+</html>

templates/workout.html ADDED Viewed

	@@ -0,0 +1,178 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Fitness Plan Recommendation</title>
+  <style>
+    /* Basic Reset */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+    font-family: Arial, sans-serif;
+    color: #ffa500; /* Orange text */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-image: url('{{ url_for('static', filename='new_user.jpg') }}'); /* Reference the image */
+    background-size: cover; /* Ensure the image covers the entire background */
+    background-position: center; /* Center the image */
+  }
+    .container {
+      width: 90%;
+      max-width: 800px;
+      background-color: rgba(51, 51, 51, 0.8); /* Transparent black */
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+      text-align: center;
+    }
+    h1 {
+      font-size: 2.5em;
+      color: #ffa500; /* Orange text */
+      margin-bottom: 20px;
+    }
+    p {
+      font-size: 1.2em;
+      color: #f0e68c; /* Lighter yellowish color for description */
+      margin-bottom: 30px;
+    }
+    .plan-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      justify-content: center;
+    }
+    .plan-card {
+      background-color: #222222; /* Dark card background */
+      border: 2px solid #ffa500; /* Orange border */
+      border-radius: 8px;
+      width: 300px;
+      padding: 20px;
+      text-align: center;
+      color: #ffa500; /* Orange text */
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      transition: transform 0.3s, background-color 0.3s;
+    }
+    .plan-card:hover {
+      transform: scale(1.05);
+      background-color: #333333;
+    }
+    .plan-card h2 {
+      font-size: 1.8em;
+      margin-bottom: 10px;
+    }
+    .plan-card p {
+      font-size: 1em;
+      margin-bottom: 20px;
+      color: #f0e68c;
+    }
+    .select-btn {
+      background-color: #ffa500; /* Orange button */
+      color: black; /* Black text */
+      font-size: 1.1em;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+    }
+    .select-btn:hover {
+      background-color: #cc8400; /* Darker orange on hover */
+    }
+    /* Recommended Plan Card Styling */
+    .recommended-plan {
+      background-color: #444444; /* Darker background for recommended plan */
+      border: 2px solid #09ef20; /* Lighter red-orange border */
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
+    }
+    #selected-plan {
+      display: none;
+      font-size: 1.5em;
+      color: #ffa500;
+      margin-top: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>Welcome to Your Personalized Fitness Plan</h1>
+      <p>Please choose your fitness goal to get started:</p>
+    </header>
+    <div class="plan-options">
+        <div class="plan-card recommended-plan" onclick="handleClick({{ recommended_plan }})">
+            <h2>Recommended Plan: {{ recommended_plan }}</h2>
+            <p>Based on your preferences, we recommend the <strong>{{ recommended_plan }}</strong> plan to help you achieve your fitness goals!</p>
+            <button class="select-btn" onclick="handleClick('{{ recommended_plan }}')">Select Plan</button>
+        </div>
+        <!-- Available Plans Selection -->
+        <div class="plan-selection">
+            <!-- Loop through available plans -->
+            {% for plan in available_plans %}
+              <div class="plan-card">
+                <h2>{{ plan.name }}</h2>
+                <p>{{ plan.description }}</p>
+                <!-- Correct the onclick attribute -->
+                <button class="select-btn" onclick="handleClick('{{ plan.name }}')">Select Plan</button>
+              </div>
+            {% endfor %}
+             <div class="plan-card">
+              <h2>Progress Track</h2>
+              <p>Tracks the information about user workouts</p>
+              <button class="select-btn" onclick="handleClick('progress')">Show</button>
+             </div>
+        </div>
+    </div>
+    <!-- Display Recommended Plan -->
+  </div>
+  <script>
+    // Function to handle plan selection (on card click)
+    function handleClick(planName) {
+      // Redirect to the plan's details page or trigger any other action
+      planName = planName.trim();
+      planName = planName.replace(/ /g,"-")
+      console.log(planName)
+      window.location.href = '/' +planName; // Ensure the plan name is URL-safe
+    }
+  </script>
+</body>
+</html>

templates/workouts_List.html ADDED Viewed

	@@ -0,0 +1,190 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Exercise Video Upload</title>
+  <style>
+    /* Basic Reset */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background-image: url('{{ url_for('static', filename='workouts_list.jpg') }}'); /* Replace with your image URL */
+      background-size: cover; /* Ensure the image covers the entire background */
+      background-position: center; /* Center the image */
+      background-attachment: fixed; /* Keep the background fixed while scrolling */
+      color: #ffa500; /* Orange text */
+      padding: 20px;
+      text-align: center;
+    }
+    h1, h2 {
+      color: #ffa500; /* Orange text */
+      margin-bottom: 20px;
+    }
+    .exercise-container {
+      display: flex;
+      flex-direction: column; /* Stack cards vertically */
+      justify-content: center;
+      align-items: center;
+      gap: 30px; /* Spacing between cards */
+      max-width: 800px; /* Limit container width */
+      margin: 0 auto; /* Center the container */
+      overflow-y: auto; /* Enable scrolling if needed */
+      padding: 10px;
+    }
+    .exercise-card {
+      background-color: rgba(34, 34, 34, 0.8); /* Dark background with transparency */
+      border: 2px solid #ffa500; /* Orange border */
+      border-radius: 8px;
+      width: 100%; /* Full width of container */
+      max-width: 500px; /* Restrict maximum width */
+      padding: 20px;
+      text-align: center;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+      transition: transform 0.3s, box-shadow 0.3s;
+    }
+    .exercise-card:hover {
+      transform: translateY(-10px);
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    }
+    .exercise-card h2 {
+      font-size: 1.5em;
+      color: #ffa500; /* Orange text */
+      margin-bottom: 10px;
+    }
+    .exercise-card p {
+      font-size: 1.2em;
+      color: #ddd; /* Lighter text */
+      margin-bottom: 15px;
+    }
+    .upload-container {
+      display: flex;
+      flex-direction: column; /* Stack elements vertically */
+      align-items: center; /* Center align elements */
+      gap: 10px; /* Space between input and button */
+    }
+    /* Hidden file input */
+    .hidden-file-input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+    /* Upload icon styling */
+    .upload-symbol {
+      background-color: #ffa500; /* Orange background */
+      color: black;
+      border: none;
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      font-size: 1.5em;
+      transition: background-color 0.3s;
+    }
+    .upload-symbol:hover {
+      background-color: #cc8400; /* Darker orange on hover */
+    }
+    /* Upload button styling */
+    .upload-btn {
+      background-color: #ffa500; /* Orange button */
+      color: black;
+      font-size: 1em;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+    }
+    .upload-btn:hover {
+      background-color: #cc8400; /* Darker orange on hover */
+    }
+    /* Finish button styling */
+    .finish-btn {
+      background-color: #ffa500; /* Orange button */
+      color: black;
+      font-size: 1em;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+      margin-top: 15px; /* Space from the other buttons */
+    }
+    .finish-btn:hover {
+      background-color: #cc8400; /* Darker orange on hover */
+    }
+    /* Card scrolling animation */
+    @keyframes scroll-animation {
+      0% {
+        opacity: 0;
+        transform: translateY(50px);
+      }
+      100% {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .exercise-card {
+        width: 90%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Exercise List</h1>
+    <p>Upload a video for each exercise you perform!</p>
+  </header>
+  <div class="exercise-container">
+    <!-- Dynamically render exercises -->
+    {% for exercise in exercises %}
+      <div class="exercise-card">
+        <h2>{{ exercise.name }}</h2>
+        <p>Repetitions: {{ exercise.reps }}</p>
+        <form class="upload-container" action="/upload-video/{{ exercise.name }}" method="POST" enctype="multipart/form-data">
+          <!-- Hidden file input -->
+          <input type="file" name="video" accept="video/*" class="hidden-file-input" id="upload-{{ loop.index }}" required>
+          <!-- Custom label acting as the upload button -->
+          <label for="upload-{{ loop.index }}" class="upload-symbol">📤</label>
+          <!-- Submit button -->
+          <button type="submit" class="upload-btn">Start</button>
+        </form>
+      </div>
+    {% endfor %}
+    <button class="finish-btn" onclick="window.location.href='/daily-report'">Finish</button>
+</div>
+  <h2>Live Processed Video</h2>
+  <div>
+    <img id="videoStream" src="/video_feed" alt="Live Processed Video" style="width: 100%; max-width: 800px; margin-top: 20px;">
+  </div>
+</body>
+</html>