Pomodoro-Clock-Beta/index.html at master · tacotoemeck/Pomodoro-Clock-Beta · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Pomodoro Timer</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel='stylesheet' type='text/css' media='screen' href='styles2.css'>
    <link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/794b746eef.js" crossorigin="anonymous"></script>
    <script src='displayMobile.js'></script>
</head>
<body>
        <audio id="myAudio">
                <source src="sounds/finished.wav" type="audio/ogg">
                Your browser does not support the audio element.
              </audio>

    <div class="container">

        <nav id="settings">
            <div class="logo"><i class="fas fa-apple-alt"></i></div>
            <h1 id="pomodoro">POMODORO</h1>
            <div id="burger">
                <div class="line1"></div>
        		<div class="line2"></div>
        		<div class="line3"></div>
            </div>
        </nav>


             <div class="settingsElement">

                    <form name="settingsForm" id="myForm" >

                <h3 class="settingsSetup">WORK: <span id="showValueWorkDuration"></span></h3>
                <input id="workDuration" class="slider" type="range" name="newTimeWork" min="1" max="100" value="25">


                <h3 class="settingsSetup">BREAK: <span id="showValueShortDuration"></span></h3>
                <input id="shortDuration" class="slider" type="range" name="newShortTime" min="1" max="100" value="25">

                <h3 class="settingsSetup">LONG BREAK: <span id="showValueLongDuration"></span></h3>
                <input id="longDuration" class="slider" type="range" name="newLongTime" min="1" max="100" value="25">

                <h3 class="settingsSetup">ROUNDS: <span id="showValueRoundCounter"></span></h3>
                <input id="numberOfSessionsCount" class="slider" type="range" name="newSessionsTotal" min="1" max="10" value="2">

                <div class="switches">
                    <span>
                <h3 class="settingsSetup">SOUND  <label class="switch">
                        <input id ="soundSwitch" type="checkbox">
                        <span class="sliderOnOff round"></span>
                      </label>
                    </h3>
                </span>
                <span>
                <h3 class="settingsSetup">AUTO-PLAY  <label class="switch">
                        <input id ="autoPlaySwitch" type="checkbox">
                        <span class="sliderOnOff round"></span>
                      </label>
                    </h3>
                </span>
                </div>


            </form>
            <button id="resetButton" class="formButton">RESET</button>


            </div>


        <div class="elements">


            <div class="counter">
                <div class="timerTimeLeft">
                    Select Pomodoro
                </div>
                <div class="timerButtons">
                    <button class="timerButtonClass red borderLeft" id="work">WORK</button>
                    <button class="timerButtonClass goldenrod" id="break">BREAK</button>
                    <button class="timerButtonClass venomGreen" id="longBreak">LONG BREAK</button>
                </div>
            </div>

            <div class="playPause">
                <button class="formButton playPauseButton" id="play"><i class="fas fa-play"></i></button>
                <button class="formButton playPauseButton" id="pause"><i class="fas fa-pause"></i></button>
                <button class="formButton playPauseButton" id="skip"><i class="fas fa-step-forward"></i></button>
            </div>

            <div class="log">
                <div class="logTop"><h3 id="h3log">LOG</h3></div>
                <div class="logDisplay">
                    <div class="fullCyclesLog"><p class="logPleft">FULL CYCLES</p><p class="logPs"><span class="logSpans" id="fullCycleCounter"></span>/<span class="logSpans" id="totalFullCycleNumber"></span></p></div>
                    <div class="fullCyclesLog"><p class="logPleft">WORK SESSIONS</p><p class="logPs"><span class="logSpans" id="workCycleCounter"></span>/<span class="logSpans" id="totalWorkCycleNumber"></span></p></div>
                    <div class="fullCyclesLog"><p class="logPleft">BREAKS</p><p class="logPs"><span class="logSpans" id="breakCycleCounter"></span>/<span class="logSpans" id="totalBreakCycleNumber"></span></p></div>
                    <div class="fullCyclesLog"><p class="logPleft">LONG BREAKS</p><p class="logPs"><span class="logSpans" id="longBreaks">0</span>
                </div>
            </div>

        </div>


    </div>
    <footer>
            Made by TomW <a href="https://github.com/tacotoemeck    "> <i class="fab fa-twitter"></i></a>
            <a href="https://twitter.com/TomaszWagner1"><i class="fab fa-github"></i></a>

        </footer>
<script src='displayMobile.js'></script>
<script src='timer1.js'></script>
</body>
</html>