/
index.html
74 lines (74 loc) · 2.11 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
<title>CHIEF - {{ app_name }}</title>
<style>
body {
text-align: center;
}
button {
background: url(/static/bigred.png) no-repeat center center,
-moz-linear-gradient(center top , #DB3E36, #8A1F1A) repeat scroll 0 0 transparent;
border-radius: 100%;
box-shadow: 0 12px 3px rgba(0, 0, 0, 0.2),
0 6px 1px rgba(0, 0, 0, 0.8),
0 2px 0 rgba(255, 255, 255, 0.5) inset,
0 12px 48px rgba(255, 100, 16, 0.8) inset,
0 -12px 0 rgba(0, 0, 0, 0.2) inset;
color: #FFFFFF;
margin-top: 1em;
border: 0;
display: block;
font-size: 48px;
height: 220px;
letter-spacing: -3px;
line-height: 52px;
outline: medium none;
text-align: center;
margin: 1em auto;
text-decoration: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
text-transform: uppercase;
width: 220px;
position: relative;
cursor: pointer;
}
button:before {
content: '';
display: block;
width: 217px;
height: 220px;
top: 0;
left: 0;
z-index: -1;
border-radius: 100%;
-moz-transition: .7s box-shadow ease;
box-shadow: 0 0 transparent;
}
button:hover:before {
box-shadow: 0 0 50px red;
}
button:active {
border-radius: 100% 100% 100% 100%;
box-shadow: 0 12px 3px rgba(0, 0, 0, 0.2),
0 2px 1px rgba(0, 0, 0, 0.8),
0 2px 0 rgba(255, 255, 255, 0.5) inset,
0 12px 48px rgba(255, 100, 16, 0.8) inset,
0 -12px 0 rgba(0, 0, 0, 0.2) inset;
top: 4px;
}
</style>
<h1>Hi, I'm the chief of {{ app_name }}.</h1>
{% if form.errors %}
<ul class="errors">
{% for field_name, field_errors in form.errors if field_errors %}
{% for error in field_errors %}
<li>{{ form[field_name].label }}: {{ error }}</li>
{% endfor %}
{% endfor %}
</ul>
{% endif %}
<form method="post" action="">
{{ form.tag(placeholder=form.tag.label) }}
{{ form.password(placeholder=form.password.label) }}
{{ form.who(placeholder=form.who.label) }}
<br>
<button title="BIG RED BUTTON"></button>
</form>