-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (126 loc) · 6.15 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
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Fictional UI</title>
<link rel="icon" href="favicon/x32.png" sizes="32x32" type="image/png" />
<link href='http://fonts.googleapis.com/css?family=Share+Tech+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="container">
<h1>Graphical Web Advent Calendar 2013</h1>
<div class="svg_container-corner_top-left">
<svg width="80" height="80" viewBox="0 0 80 80">
<polygon points="0 0,80 0,80 1,1 1,1 80,0 80,0 0"/>
</svg>
</div>
<div class="svg_container-corner_top-right">
<svg width="80" height="80" viewBox="0 0 80 80">
<polygon points="0 0,80 0,80 80,79 80,79 1,0 1,0 0"/>
</svg>
</div>
<div class="svg_container-corner_bottom-right">
<svg width="80" height="80" viewBox="0 0 80 80">
<polygon points="79 0,80 0,80 80,0 80,0 79,79 79,79 0"/>
</svg>
</div>
<div class="svg_container-corner_bottom-left">
<svg width="80" height="80" viewBox="0 0 80 80">
<polygon points="0 0,1 0,1 79,80 79,80 80,0 80,0 0"/>
</svg>
</div>
<ul class="hexSighters">
<li class="hexSighter">
<ul class="precisions">
<li></li>
<li></li>
</ul>
<svg width="126" height="136" viewBox="-10 -10 126 136">
<defs>
<filter id="hex1" x="0" y="0" width="120" height="120">
<feGaussianBlur stdDeviation="1" result="blur"/>
<feOffset in="blur" dx="17" dy="21" result="img"/>
<feBlend in="img" mode="screen"/>
</filter>
<filter id="hex2" x="0" y="0" width="120" height="120">
<feGaussianBlur stdDeviation="1" result="blur"/>
<feOffset in="blur" dx="46" dy="50" result="img"/>
<feBlend in="img" mode="screen"/>
</filter>
<filter id="hex3" x="0" y="0" width="120" height="120">
<feGaussianBlur stdDeviation="1" result="blur"/>
<feOffset in="blur" dx="88" dy="92" result="img"/>
<feBlend in="img" mode="screen"/>
</filter>
<filter id="plus" x="0" y="0" width="120" height="120">
<feOffset in="SourceGraphic" dx="8" dy="8" result="img1"/>
<feOffset in="SourceGraphic" dx="46" dy="8" result="img2"/>
<feOffset in="SourceGraphic" dx="86" dy="8" result="img3"/>
<feOffset in="SourceGraphic" dx="8" dy="46" result="img4"/>
<feOffset in="SourceGraphic" dx="46" dy="46" result="img5"/>
<feOffset in="SourceGraphic" dx="86" dy="46" result="img6"/>
<feOffset in="SourceGraphic" dx="8" dy="86" result="img7"/>
<feOffset in="SourceGraphic" dx="46" dy="86" result="img8"/>
<feOffset in="SourceGraphic" dx="86" dy="86" result="img9"/>
<feMerge>
<feMergeNode in="img1"/>
<feMergeNode in="img2"/>
<feMergeNode in="img3"/>
<feMergeNode in="img4"/>
<feMergeNode in="img5"/>
<feMergeNode in="img6"/>
<feMergeNode in="img7"/>
<feMergeNode in="img8"/>
<feMergeNode in="img9"/>
</feMerge>
</filter>
<filter id="tri" x="0" y="0" width="8" height="50">
<feOffset in="SourceGraphic" dx="0" dy="112"/>
</filter>
<filter id="corner1" x="-2" y="-2" width="124" height="124">
<feGaussianBlur stdDeviation="1" result="blur"/>
<feOffset in="blur" dx="-2" dy="-2" result="img"/>
<feBlend in="img" mode="screen"/>
</filter>
<filter id="corner2" x="-2" y="-108" width="124" height="124">
<feGaussianBlur stdDeviation="1" result="blur"/>
<feOffset in="blur" dx="-2" dy="-108" result="img"/>
<feBlend in="img" mode="screen"/>
</filter>
<filter id="corner3" x="-108" y="-108" width="124" height="124">
<feGaussianBlur stdDeviation="1" result="blur"/>
<feOffset in="blur" dx="-108" dy="-108" result="img"/>
<feBlend in="img" mode="screen"/>
</filter>
<filter id="corner4" x="-108" y="-2" width="124" height="124">
<feGaussianBlur stdDeviation="1" result="blur"/>
<feOffset in="blur" dx="-108" dy="-2" result="img"/>
<feBlend in="img" mode="screen"/>
</filter>
</defs>
<rect class="svg_rect" x="0" y="0" width="106" height="106"/>
<polygon class="svg_corner" filter="url(#corner1)" points="0 0,16 0,16 4,4 4,4 16,0 16,0 0"/>
<polygon class="svg_corner" filter="url(#corner2)" points="0 0,16 0,16 4,4 4,4 16,0 16,0 0" transform="rotate(90)"/>
<polygon class="svg_corner" filter="url(#corner3)" points="0 0,16 0,16 4,4 4,4 16,0 16,0 0" transform="rotate(180)"/>
<polygon class="svg_corner" filter="url(#corner4)" points="0 0,16 0,16 4,4 4,4 16,0 16,0 0" transform="rotate(270)"/>
<polygon class="svg_tri" filter="url(#tri)" points="0 0,8 3,0 5"/>
<polygon class="svg_plus" filter="url(#plus)" points="5 0,6 0,6 5,11 5,11 6,6 6,6 11,5 11,5 6,0 6,0 5,5 5"/>
<polygon class="svg_hex" filter="url(#hex1)" points="20,70 0,35 20,0 60,0 80,35 60,70" transform="translate(0,0),scale(0.9)"/>
<polygon class="svg_hex" filter="url(#hex2)" points="20,70 0,35 20,0 60,0 80,35 60,70" transform="translate(0,0),scale(0.6)"/>
<polygon class="svg_hex" filter="url(#hex3)" points="20,70 0,35 20,0 60,0 80,35 60,70" transform="translate(0,0),scale(0.4)"/>
</svg>
</li>
</ul>
<ul id="log">
</ul>
<footer>
<span id="title">Fictional UI</span>
<span class="version">Ver.0.0.1</span>
<small id="copyright">© 2013 <a href="http://saucer.jp" class="saucer-web">SAUCER.JP</a></small>
</footer>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>