Hugging Face's logo

Spaces:
hemanth8705
/
the_espada
Sleeping

App Files Community
the_espada
File size: 4,073 Bytes 
45a65b7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
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>