diff options
-rwxr-xr-x | server.py | 13 | ||||
-rw-r--r-- | templates/index.html | 223 |
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 | |||
3 | import flask | ||
4 | |||
5 | app = flask.Flask(__name__) | ||
6 | |||
7 | @app.route("/") | ||
8 | def index(): | ||
9 | return flask.render_template("index.html") | ||
10 | |||
11 | |||
12 | if __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> | ||