index.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Workout Tracker</title>
  7. <link rel="stylesheet" href="/index.css">
  8. <link rel="icon" href="/logo.svg" type="image/svg+xml">
  9. </head>
  10. <body>
  11. <svg class="logo" width="90" height="60" viewBox="10 20 80 50" xmlns="http://www.w3.org/2000/svg">
  12. <defs>
  13. <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="0%">
  14. <stop offset="0%" stop-color="#e57600" />
  15. <stop offset="10%" stop-color="#f46036" />
  16. <stop offset="100%" stop-color="#d7263d" />
  17. </linearGradient>
  18. </defs>
  19. <path d="M10,40 Q25,20 50,30 Q75,40 90,30 Q75,50 50,60 Q25,70 10,60 Q25,50 10,40" fill="url(#logoGradient)" />
  20. </svg>
  21. <p id="notifier" style="display:none"></p>
  22. <div id="registerPage" class="page" style="display:none">
  23. <form id="registerForm" class="standardForm">
  24. <h1>Create Account</h1>
  25. <label>Name
  26. <input
  27. id="registerName"
  28. type="text"
  29. placeholder="Name"
  30. required
  31. >
  32. </label>
  33. <label>Email
  34. <input
  35. id="registerEmail"
  36. type="email"
  37. placeholder="Email"
  38. required
  39. >
  40. </label>
  41. <label>Password
  42. <input
  43. id="registerPass"
  44. type="password"
  45. placeholder="Password"
  46. required
  47. >
  48. </label>
  49. <label>Confirm Password
  50. <input
  51. id="registerConfirmPass"
  52. type="password"
  53. placeholder="Confirm Password"
  54. required
  55. >
  56. </label>
  57. <button>Create</button>
  58. </form>
  59. <button id="registerToLogin" class="link">Log In</button>
  60. </div>
  61. <div id="loginPage" class="page">
  62. <form id="loginForm" class="standardForm">
  63. <h1>Log In</h1>
  64. <label>Email
  65. <input
  66. id="loginEmail"
  67. type="email"
  68. placeholder="Email"
  69. required
  70. >
  71. </label>
  72. <label>Password
  73. <input
  74. id="loginPass"
  75. type="password"
  76. placeholder="Password"
  77. required
  78. />
  79. </label>
  80. <button>Log In</button>
  81. </form>
  82. <button id="loginToRegister" class="link">Register</button>
  83. </div>
  84. <div id="homePage" class="page" style="display:none">
  85. <button id="homeNewWorkout" class="button">+ Workout</button>
  86. <h1>My Workouts</h1>
  87. <div id="workoutList"></div>
  88. <button id="homeLogout" class="link">Log Out</button>
  89. </div>
  90. <div id="newWorkoutPage" class="page" style="display:none">
  91. <button id="newWorkoutBack" class="button">Cancel</button>
  92. <div id="newWorkoutInputs">
  93. <label>Name of Workout:
  94. <input
  95. id="newWorkoutName"
  96. type="text"
  97. placeholder="Name"
  98. >
  99. </label>
  100. </div>
  101. <button id="newWorkoutFinish" class="button">Create Workout</button>
  102. </div>
  103. <div id="workoutMenuPage", class="page" style="display:none">
  104. <h1 id="workoutMenuTitle"></h1>
  105. <div class="workoutMenuButtons">
  106. <button id="menuStartWorkout" class="button">Start Workout</button>
  107. <button id="menuReturnHome" class="button">Back</button>
  108. </div>
  109. <div id="resumeWorkoutContainer" style="display:none">
  110. <h2>You have a previously unfinished session for this workout. What would you like to to?</h2>
  111. <button id="resumeWorkoutCancel" class="button">Cancel</button>
  112. </div>
  113. </div>
  114. <div id="sessionPage" class="page" style="display:none">
  115. <h1 id="sessionExerciseName"></h3>
  116. <p id="previousSession"></p>
  117. <div id="sessionButtonBox">
  118. <button id="sessionNotesBtn" class="button">Notes</button>
  119. <button id="sessionAddSet" class="button">Add Set</button>
  120. </div>
  121. <div id="sessionNotesText" style="display:none">
  122. <textarea id="sessionTextArea"></textarea>
  123. <button id="sessionNotesDone" class="button">Done</button>
  124. </div>
  125. <div id="sessionSets"></div>
  126. <button id="nextSessionBtn" class="button">Next Exercise</button>
  127. <button id="finishSessionBtn" class="button">Finish Workout</button>
  128. <template id="weightSet">
  129. <div class="weightSet">
  130. <button class="weightSetDelete">X</button>
  131. <h3></h3>
  132. <label>Weight
  133. <input class="weightSetWeight" type="number" step="1">
  134. </label>
  135. <label>Reps
  136. <input class="weightSetReps" type="number" step="1">
  137. </label>
  138. </div>
  139. </template>
  140. </div>
  141. <script src="/index.js"></script>
  142. </body>
  143. </html>