diff --git a/App/static/views.html b/App/static/views.html new file mode 100644 index 000000000..975fc435e --- /dev/null +++ b/App/static/views.html @@ -0,0 +1,55 @@ + + + + + + + + + + + Document + + + +
+ +
+
+
+

Routines

+
+
+
+ {% for workout in workouts %} + +
+

{{workout.workout.name}}

+

3 Workouts day

+
+
+
+ + {% endfor %} +
+
+
+ Edit + Delete +
+
+ + + + diff --git a/App/static/viewstyles.css b/App/static/viewstyles.css new file mode 100644 index 000000000..158095014 --- /dev/null +++ b/App/static/viewstyles.css @@ -0,0 +1,166 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + } + + body { + background: white; + } + + .header { + position: relative; + top: 0; + left: 0; + width: 100%; + padding: 25px 12.5%; + background: #dee1e5; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 100; + } + + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } + + .right-side img { + max-width: 160px; + max-height: 50px; + } + + .right-side { + display: flex; + list-style: none; + margin: 0; + padding: 0; + } + + .right-side li { + margin-right: 15px; /* Adjust as needed for spacing between items */ + } + + .left-side { + display: flex; + list-style: none; + margin: 0; + padding: 0; + } + + .left-side li { + margin-right: auto; /* Push the "Logout" link to the left */ + } + + .navbar a { + position: relative; + font-size: 16px; + color: black; + text-decoration: none; + font-weight: 500; + margin-right: 30px; + transition: 0.3s; + } + + .navbar a:hover, + .navbar a.active { + color: #02bdd6; + } + + .split{ + display: flex; + align-items: center; + justify-content: center; + } + + .card { + margin-right: 50px; + margin-bottom: 50px; + background-color: white; + display: flex; + justify-content: flex-start; + border-radius: 10px; + overflow: hidden; + box-shadow: Opx 2px 4px rgba(0, 0, 0, 0.2); + } + + .card-workouts { + margin-top: 20px; + margin-right: 50px; + background-color: #f0f0f0; + display: flex; + justify-content: space-between; + border-radius: 10px; + overflow: hidden; + box-shadow: Opx 2px 4px rgba(0, 0, 0, 0.2); + text-decoration: none; + } + + .card-workouts:hover { + box-shadow: 0 5px 35px 0px rgba(0, 0, 0, 0.1); + } + .card-workouts:hover::before, + div:hover::after { + display: block; + content: ""; + position: absolute; + background: #face30; + border-radius: 10px; + z-index: -1; + animation: 1s; + } + .card-workouts:hover:after { + background: #ff7200; + animation: 2s; + } + + .workout-container { + height: 400px; + width: 1000px; + overflow: auto; + overflow-y: scroll; + } + + .card-text { + margin-left: 100px; + color: black; + } + + .text-container { + margin-top: 20px; + margin-left: 50px; + margin-bottom: 40px; + } + + .button-container{ + + display: flex; + justify-content: center; + align-items: center; + } + + .button-container a{ + display: flex; + justify-content: center; + align-items: center; + width: 100px; + margin-right: 80px; + margin-left: 80px; + padding: 10px; + margin-top: 20px; + background-color: #5cb85c; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + text-decoration: none; + font-size: 10px; + } + + .button-container a:hover { + background-color: #4cae4c; + } \ No newline at end of file