-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
160 lines (120 loc) · 5.78 KB
/
index.html
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!doctype html>
<html>
<head>
<!-- Page Title -->
<title>PotatoTimer</title>
<meta charset="UTF-8">
<!-- Viewport for a responsive mobile first site. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fav Icon -->
<link rel="icon" type="image/png" href="https://image.flaticon.com/icons/svg/1652/1652077.svg">
<!-- Google -->
<meta name="description" content="Pomodoro Clock created by MichaelCharl.es/Aubrey as a project for FreeCodeCamp."/>
<meta name="keywords" content="pomodoro,clock,freecodecamp"/>
<meta name="application-name" content="Pomodoro Clock"/>
<!-- Facebook -->
<meta property="og:title" content="Pomodoro Clock"/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="https://mca62511.github.io/pomodoro/img/share.jpg"/>
<meta property="og:description"
content="Pomodoro Clock created by MichaelCharl.es/Aubrey as a project for FreeCodeCamp."/>
<!-- Twitter -->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Pomodoro Clock"/>
<meta name="twitter:description"
content="Pomodoro Clock created by MichaelCharl.es/Aubrey as a project for FreeCodeCamp."/>
<meta name="twitter:image" content="https://mca62511.github.io/pomodoro/img/share.jpg"/>
<!-- Normalize.css for cross browser consistency -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.min.css">
<!-- CSS libraries and frameworks -->
<!-- Material Design Lite -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.amber-deep_orange.min.css"/>
<!-- Fonts -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<!-- Theme Color -->
<meta name="theme-color" content="#FFC107"/>
<!-- Stylesheet -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Page conents -->
<div id="pomodoro" class="mdl-card mdl-shadow--2dp">
<div class="mdl-card--expand mdl-card__title mdl-color--primary">
<p id="counter">50:00</p>
<p id="message"></p>
<button id="vert-menu-button" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="vert-menu-button">
<li class="mdl-menu__item" id="about">About</li>
<!-- <li class="mdl-menu__item" id="ti255">Reset</li> -->
</ul>
</div>
<div class="mdl-card__supporting-text">
<div id="options">
<div class="option-row">
<div>Session</div>
<div>
<button id="session-minus" class="mdl-button mdl-js-button mdl-js-ripple-effect"><i
class="material-icons">remove</i></button>
<span id="session-length">50</span> <span id="session-min">minutes</span>
<button id="session-plus" class="mdl-button mdl-js-button mdl-js-ripple-effect"><i
class="material-icons">add</i></button>
</div>
</div>
<div class="option-row">
<div>Break</div>
<div>
<button id="break-minus" class="mdl-button mdl-js-button mdl-js-ripple-effect"><i
class="material-icons">remove</i></button>
<span id="break-length">10</span> <span id="break-min">minutes</span>
<button id="break-plus" class="mdl-button mdl-js-button mdl-js-ripple-effect"><i
class="material-icons">add</i></button>
</div>
</div>
<div class="option-row sound-row">
<div>Sound</div>
<div>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-sound">
<input type="checkbox" id="switch-sound" class="mdl-switch__input" checked>
</label>
</div>
</div>
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
<a id="action1" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Start
</a>
<a id="action2" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Stop
</a>
</div>
</div>
<!-- Modal -->
<div id="overlay">
<div id="modal" class="mdl-card mdl-shadow--16dp">
<div class="mdl-card__supporting-text">
<h2 class="mdl-card__title-text mdl-color-text--grey-900">About</h2><br>
<p>This Pomodoro Clock was created by <a href="http://michaelcharl.es/aubrey" target="_blank">MichaelCharl.es/Aubrey</a>
for <a href="http://freecodecamp.com" target="_blank">FreeCodeCamp</a><br/>and<br/>Wraped into
Electron app by <a href="http://github.com/p32929" target="_blank">p32929<br/>(http://github.com/p32929)</a></p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a id="close" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Close
</a>
</div>
</div>
</div>
<!-- Load third party JavaScript frameworks or libraries. -->
<!-- jQuery -->
<script>window.$ = window.jQuery = require('jquery');</script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<!-- Custom JavaScript -->
<script src="js/script.js"></script>
</body>
</html>