summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xserver.py13
-rw-r--r--templates/index.html223
2 files changed, 236 insertions, 0 deletions
diff --git a/server.py b/server.py
new file mode 100755
index 0000000..b5b33b7
--- /dev/null
+++ b/server.py
@@ -0,0 +1,13 @@
1#!/usr/bin/env python
2
3import flask
4
5app = flask.Flask(__name__)
6
7@app.route("/")
8def index():
9 return flask.render_template("index.html")
10
11
12if __name__ == "__main__":
13 app.run(host="0.0.0.0", port=9881, debug=True)
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..0c5627c
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,223 @@
1<!doctype html>
2<html class="no-js" lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="x-ua-compatible" content="ie=edge">
6 <title>Goals</title>
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <style type="text/css">
9 body {
10 font-family: Verdana, sans-serif;
11 font-size: 12px;
12 }
13 form label {
14 display: inline-block;
15 width: 10em;
16 font-weight: bolder;
17 }
18 .globals {
19 position: absolute;
20 top: 1em;
21 right: 1em;
22 margin: 0;
23 padding: 0;
24 }
25 .globals a:visited {
26 color: blue;
27 }
28 .globals li {
29 list-style: none;
30 display: inline-block;
31 }
32 .globals li:after {
33 content: "|";
34 color: #999999;
35 padding: 0 0 0 0.3em;
36 }
37 .globals li:last-child:after {
38 content: "";
39 }
40 .goal {
41 position: relative;
42 background-color: #CCCCCC;
43 padding: 0.1em 1em;
44 margin: 0 0 1em 0;
45 }
46 .goal .actions {
47 position: absolute;
48 right: 0.5em;
49 top: 0.5em;
50 }
51 .goal button {
52 line-height: 2em;
53 min-width: 2em;
54 border: 0;
55 color: white;
56 }
57 .goal button.add {
58 background-color: #4286f4;
59 }
60 .goal button.delete {
61 background-color: #d60000;
62 }
63 .goal p.label {
64 font-weight: bolder;
65 }
66 .progressbar {
67 display: inline-block;
68 text-align: center;
69 height: 2em;
70 line-height: 2em;
71 width: 100%;
72 border: 1px solid black;
73 margin: 10px 0;
74 }
75 .progressbar.more-than-half {
76 /* gte 70% */
77 background: linear-gradient(90deg, #1cb600 70%, #FFFFFF 70%);
78 }
79 .progressbar.done {
80 /* 100% */
81 background-color: #ffaa00;
82 }
83 .progressbar.half {
84 /* gte 50% lt 70% */
85 background: linear-gradient(90deg, #fff000 50%, #FFFFFF 50%);
86 }
87 .progressbar.less-than-half {
88 /* lt 50% */
89 background: linear-gradient(90deg, #d60000 20%, #FFFFFF 20%);
90 }
91
92 .goal .overlay {
93 position: absolute;
94 top: 0;
95 left: 0;
96 height: 100%;
97 width: 100%;
98 background-color: #CCCCCC;
99 opacity: 0.9;
100 z-index: 1;
101 }
102 .goal .overlay p {
103 margin: 0.5em 0;
104 display: block;
105 text-align: center;
106 font-size: 200%;
107 font-weight: bolder;
108 }
109 .goal .overlay button, form button {
110 margin: 0.5em 0;
111 background-color: black;
112 color: white;
113 width: 20%;
114 }
115 form button {
116 width: 30%;
117 }
118 .goal .add-progress form {
119 padding-top: 1em;
120 text-align: center;
121 }
122
123 @media only screen and (max-width: 500px) {
124 h1 {
125 margin: 0;
126 }
127 .globals {
128 position: initial;
129 line-height: 2em;
130 margin-bottom: 1em;
131 }
132 .goal button {
133 line-height: 2.5em;
134 }
135 form label {
136 width: 30%;
137 }
138 }
139 </style>
140 </head>
141 <body>
142 <h1>Week of August 28</h1>
143 <ul class="globals">
144 <li><a href="#">Create Goal</a></li>
145 <li><a href="#">Retrospective</a></li>
146 <li>mcrute</li>
147 </ul>
148 <div class="goal">
149 <p class="label">Create Goal</p>
150 <form>
151 <div class="row"><label for="goal_name">Goal Name:</label><input id="goal_name" name="goal_name" type="text"/></div>
152 <div class="row"><label for="goal_value">Goal Value:</label><input id="goal_value" name="goal_value" type="text" pattern="\d*"/></div>
153 <div class="row"><label for="units">Units: </label><input id="units" name="units" type="text"/></div>
154 <div class="row"><label for="time_period">Time Period:</label><select id="time_period" name="time_period">
155 <option>Day</option>
156 <option>Week</option>
157 <option>Month</option>
158 <option>Year</option>
159 </select>
160 </div>
161 <div class="row">
162 <button type="submit">Create Goal</button>
163 <button class="cancel">Cancel</button>
164 </div>
165 </form>
166 </div>
167 <div class="goal">
168 <div class="overlay delete-confirm">
169 <p>Really delete?</p>
170 <p>
171 <button class="yes">Yes</button>
172 <button class="yes">No</button>
173 </p>
174 </div>
175 <p class="label">Exercise (150 minutes / week):</p>
176 <div class="actions">
177 <p>
178 <button class="delete" type="submit">-</button>
179 <button class="add" type="submit">+</button>
180 </p>
181 </div>
182 <p><div class="progressbar less-than-half">30 minutes (25%)</div></p>
183 </div>
184 <div class="goal">
185 <div class="overlay add-progress">
186 <form>
187 <div class="row"><label for="progress">Progress (minutes):</label><input type="text" pattern="\d*" /></div>
188 <div class="row"><button class="yes">Save</button></div>
189 </form>
190 </div>
191 <p class="label">Exercise (150 minutes / week):</p>
192 <div class="actions">
193 <button class="delete" type="submit">-</button>
194 <button class="add" type="submit">+</button>
195 </div>
196 <div class="progressbar half">75 minutes (50%)</div>
197 </div>
198 <div class="goal">
199 <p class="label">Exercise (150 minutes / week):</p>
200 <div class="actions">
201 <button class="delete" type="submit">-</button>
202 <button class="add" type="submit">+</button>
203 </div>
204 <div class="progressbar half">75 minutes (50%)</div>
205 </div>
206 <div class="goal">
207 <p class="label">Exercise (150 minutes / week):</p>
208 <div class="actions">
209 <button class="delete" type="submit">-</button>
210 <button class="add" type="submit">+</button>
211 </div>
212 <div class="progressbar more-than-half">100 minutes (80%)</div>
213 </div>
214 <div class="goal">
215 <p class="label">Exercise (150 minutes / week):</p>
216 <div class="actions">
217 <button class="delete" type="submit">-</button>
218 <button class="add" type="submit">+</button>
219 </div>
220 <div class="progressbar done">Goal Completed!</div>
221 </div>
222 </body>
223</html>