lee
/
workout-tracker


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a1a">
    <meta name="description" content="Minimalistic application for logging, tracking, monitoring and improving your workouts">
    <title>Workout Tracker</title>
    <link rel="stylesheet" href="/index.css">
    <link rel="icon" href="/logo.svg" type="image/svg+xml">
    <link rel="manifest" href="/manifest.json">
</head>
<body>
    <svg class="logo" width="90" height="60" viewBox="10 20 80 50" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#e57600" />
          <stop offset="10%" stop-color="#f46036" />
          <stop offset="100%" stop-color="#d7263d" />
        </linearGradient>
      </defs>
      <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)" />
    </svg>

    <p id="notifier" style="display:none"></p>

    <div id="registerPage" class="page" style="display:none">
        <form id="registerForm" class="standardForm">
            <h1>Create Account</h1>

            <label>Name
                <input
                    id="registerName"
                    type="text"
                    placeholder="Name"
                    required
                >
            </label>

            <label>Email
                <input
                    id="registerEmail"
                    type="email"
                    placeholder="Email"
                    required
                >
            </label>

            <label>Password
                <input
                    id="registerPass"
                    type="password"
                    placeholder="Password"
                    required
                >
            </label>

            <label>Confirm Password
                <input
                    id="registerConfirmPass"
                    type="password"
                    placeholder="Confirm Password"
                    required
                >
            </label>

            <button>Create</button>
        </form>

        <button id="registerToLogin" class="link">Log In</button>
    </div>

    <div id="loginPage" class="page" style="display:none">
        <form id="loginForm" class="standardForm">
            <h1>Log In</h1>

            <label>Email
                <input
                    id="loginEmail"
                    type="email"
                    placeholder="Email"
                    required
                >
            </label>

            <label>Password
                <input
                    id="loginPass"
                    type="password"
                    placeholder="Password"
                    required
                />
            </label>

            <button>Log In</button>
        </form>

        <button id="loginToRegister" class="link">Register</button>
    </div>

    <div id="homePage" class="page" style="display:none">
        <button id="homeNewWorkout" class="button">+ Workout</button>
        <button id="installPwa" class="button">Install App</button>

        <h1>My Workouts</h1>

        <div id="workoutList"></div>

        <button id="homeLogout" class="link">Log Out</button>
    </div>

    <div id="newWorkoutPage" class="page" style="display:none">
        <button id="newWorkoutBack" class="button">Cancel</button>

        <div id="newWorkoutInputs">
            <label>Name of Workout:
                <input
                    id="newWorkoutName"
                    type="text"
                    placeholder="Name"
                >
            </label>
        </div>

        <button id="newWorkoutFinish" class="button">Create Workout</button>
    </div>

    <div id="workoutMenuPage", class="page" style="display:none">
        <h1 id="workoutMenuTitle"></h1>
        <div id="workoutMenuButtons"></div>

        <div id="resumeWorkoutContainer" style="display:none">
            <h2>You have a previously unfinished session for this workout. What would you like to to?</h2>
            <button id="resumeWorkoutCancel" class="button">Cancel</button>
        </div>

        <div id="deleteWorkoutModal" style="display:none">
            <h1>Are you sure that you want to delete this workout?</h1>
            <h2>All workout sessions associated with the workout will also be deleted</h2>
            <h2 class="dangerText">THIS CANNOT BE UNDONE</h2>

            <button id="confirmDeleteWorkoutBtn" class="button">Delete Workout</button>
            <button id="cancelDeleteWorkoutBtn" class="button">Cancel</button>
        </div>
    </div>

    <div id="sessionPage" class="page" style="display:none">
        <h1 id="sessionExerciseName"></h1>

        <p id="previousSession"></p>

        <div id="sessionButtonBox">
            <button id="sessionNotesBtn" class="button">Notes</button>
            <button id="sessionAddSet" class="button">Add Set</button>
        </div>

        <button id="sessionExercisesBtn" class="button">Exercises</button>

        <div id="sessionExercisesList" style="display:none">
            <button id="closeExerciseList">X</button>
        </div>

        <div id="sessionNotesText" style="display:none">
            <textarea id="sessionTextArea"></textarea>
            <button id="sessionNotesDone" class="button">Done</button>
        </div>

        <div id="sessionSets"></div>

        <button id="nextSessionBtn" class="button">Next Exercise</button>

        <button id="finishSessionBtn" class="button">Finish Workout</button>

        <template id="weightSet">
            <div class="weightSet">
                <button class="weightSetDelete">X</button>
                <h3></h3>
                <label>Weight
                    <input class="weightSetWeight" type="number" step="1">
                </label>
                <label>Reps
                    <input class="weightSetReps" type="number" step="1">
                </label>
            </div>
        </template>
    </div>

    <div id="editWorkoutPage" class="page" style="display:none">
        <button
            id="editWorkoutAddExercise"
            aria-label="Add Exercise"
            class="button"
        >+ Exercise</button>

        <h1></h1>

        <div id="editWorkoutExercises"></div>

        <div id="newExerciseContainer" style="display:none">
            <input
                id="newExerciseInput"
                type="text"
                placeholder="New Exercise"
            />

            <button id="newExerciseSubmit">&#10003;</button>
        </div>

        <button id="editWorkoutSubmit" class="button">Finish</button>

        <button id="editWorkoutBack" class="button">Cancel</button>

        <template id="editWorkoutExercise">
            <div class="editWorkoutExercise">
                <div class="workoutMove">
                    <button class="workoutMoveUp" aria-label="Move up">&#9650;</button>
                    <button class="workoutMoveDown" aria-label="Move down">&#9660;</button>
                </div>
                <p></p>
                <button class="editWorkoutDelete" aria-label="Delete">X</button>
            </div>
        </template>
    </div>

    <script src="/index.js"></script>
</body>
</html>