diff options
Diffstat (limited to 'index.html')
-rw-r--r-- | index.html | 322 |
1 files changed, 322 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 00000000..44f8ec7e --- /dev/null +++ b/index.html | |||
@@ -0,0 +1,322 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html> | ||
8 | |||
9 | <head lang="en"> | ||
10 | |||
11 | <title>Ninja</title> | ||
12 | |||
13 | <meta charset="utf-8"/> | ||
14 | <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> | ||
15 | <meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate" /> | ||
16 | <meta http-equiv="Pragma" content="no-store, no-cache" /> | ||
17 | <meta http-equiv="Expires" content="0" /> | ||
18 | |||
19 | <link rel="icon" href="images/favicon.png" sizes="16x16"> | ||
20 | |||
21 | <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Sans+Mono' rel='stylesheet' type='text/css'> | ||
22 | |||
23 | <style type="text/css"> | ||
24 | |||
25 | html, body | ||
26 | { | ||
27 | width: 100%; | ||
28 | height: 100%; | ||
29 | overflow: hidden; | ||
30 | background: #000; | ||
31 | margin: 0; | ||
32 | padding: 0; | ||
33 | } | ||
34 | |||
35 | body | ||
36 | { | ||
37 | position: absolute; | ||
38 | top: 0%; | ||
39 | left: 0%; | ||
40 | width: 100%; | ||
41 | height: 100%; | ||
42 | background-image: -webkit-radial-gradient(center, ellipse cover, rgba(40, 40, 40, 1) 0%, rgba(5, 5, 5, 1) 50%, rgba(0, 0, 0, 1) 100%); | ||
43 | background-size: auto, 115%; | ||
44 | background-color: rgba(150, 0, 0, 1); | ||
45 | background-position: center center; | ||
46 | background-repeat: no-repeat;/* | ||
47 | |||
48 | -webkit-animation-name: background-animation; | ||
49 | -webkit-animation-duration: 3s; | ||
50 | -webkit-animation-iteration-count: infinite; | ||
51 | -webkit-animation-timing-function: linear; | ||
52 | */ | ||
53 | } | ||
54 | |||
55 | .montage-app-loaded body | ||
56 | { | ||
57 | background: #000; | ||
58 | background-image: none; | ||
59 | } | ||
60 | |||
61 | .main | ||
62 | { | ||
63 | opacity: 0; | ||
64 | -webkit-transition: opacity 250ms ease-in-out; | ||
65 | /* This is a hack, trying to smooth the draw */ | ||
66 | -webkit-transition-delay: 500ms; | ||
67 | } | ||
68 | |||
69 | .montage-app-loaded .main | ||
70 | { | ||
71 | opacity: 1; | ||
72 | } | ||
73 | |||
74 | #ninja_logo | ||
75 | { | ||
76 | width: 320px; | ||
77 | height: 320px; | ||
78 | position: absolute; | ||
79 | top: 50%; | ||
80 | left: 50%; | ||
81 | margin: -160px 0px 0px -160px; | ||
82 | overflow: visible; | ||
83 | -webkit-animation-name: zoom; | ||
84 | -webkit-animation-duration: 3s; | ||
85 | -webkit-animation-iteration-count: infinite; | ||
86 | -webkit-animation-timing-function: ease-in-out; | ||
87 | } | ||
88 | |||
89 | #ninja_logo .gradient | ||
90 | { | ||
91 | background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 0, 0, 1) 0%, rgba(102, 0, 0, .5) 100%); | ||
92 | width: 312px; | ||
93 | height: 312px; | ||
94 | border: 4px solid #000000; | ||
95 | border-radius: 50%; | ||
96 | position: absolute; | ||
97 | top: 0px; | ||
98 | left: 0px; | ||
99 | } | ||
100 | |||
101 | #ninja_logo .gradient span | ||
102 | { | ||
103 | display: block; | ||
104 | width: 292px; | ||
105 | height: 292px; | ||
106 | border: 3px solid #000000; | ||
107 | border-radius: 50%; | ||
108 | margin: 7px; | ||
109 | } | ||
110 | |||
111 | #ninja_logo .solid | ||
112 | { | ||
113 | background: #000; | ||
114 | width: 312px; | ||
115 | height: 312px; | ||
116 | border: 4px solid #000000; | ||
117 | border-radius: 50%; | ||
118 | position: absolute; | ||
119 | top: 0px; | ||
120 | left: 0px;/* | ||
121 | |||
122 | -webkit-animation-name: solid-animation; | ||
123 | -webkit-animation-duration: 3s; | ||
124 | -webkit-animation-iteration-count: infinite; | ||
125 | -webkit-animation-timing-function: linear; | ||
126 | */ | ||
127 | } | ||
128 | |||
129 | #ninja_logo canvas | ||
130 | { | ||
131 | position: absolute; | ||
132 | margin: -45px -110px;/* | ||
133 | |||
134 | -webkit-animation-name: rotate; | ||
135 | -webkit-animation-duration: 1.5s; | ||
136 | -webkit-animation-iteration-count: infinite; | ||
137 | -webkit-animation-timing-function: linear; | ||
138 | */ | ||
139 | } | ||
140 | |||
141 | @-webkit-keyframes solid-animation { | ||
142 | 0% {background: #000;} | ||
143 | 50% {background: #666;} | ||
144 | 100% {background: #000;} | ||
145 | } | ||
146 | |||
147 | @-webkit-keyframes background-animation { | ||
148 | 0% {background-size: 200%} | ||
149 | 50% {background-size: 100%} | ||
150 | 100% {background-size: 200%} | ||
151 | } | ||
152 | |||
153 | @-webkit-keyframes rotate { | ||
154 | 0% {-webkit-transform: rotate(0deg); margin: -45px -110px;} | ||
155 | 25% {-webkit-transform: rotate(90deg); margin: -90px -55px;} | ||
156 | 50% {-webkit-transform: rotate(180deg); margin: -55px 0px;} | ||
157 | 75% {-webkit-transform: rotate(270deg); margin: 0px -55px;} | ||
158 | 100% {-webkit-transform: rotate(360deg); margin: -45px -110px;} | ||
159 | } | ||
160 | |||
161 | @-webkit-keyframes zoom { | ||
162 | 0% {-webkit-transform: scale(.9);} | ||
163 | 50% {-webkit-transform: scale(.5);} | ||
164 | 100% {-webkit-transform: scale(.9);} | ||
165 | } | ||
166 | |||
167 | </style> | ||
168 | |||
169 | <script type="text/javascript"> | ||
170 | window.onload = function() { | ||
171 | // | ||
172 | var star = document.getElementById('star'); | ||
173 | // | ||
174 | njstar(star.getContext("2d")); | ||
175 | } | ||
176 | function njstar (ctx) { | ||
177 | ctx.save(); | ||
178 | ctx.translate(0,0); | ||
179 | ctx.beginPath(); | ||
180 | ctx.moveTo(0,0); | ||
181 | ctx.lineTo(550,0); | ||
182 | ctx.lineTo(550,400); | ||
183 | ctx.lineTo(0,400); | ||
184 | ctx.closePath(); | ||
185 | ctx.clip(); | ||
186 | ctx.translate(0,0); | ||
187 | ctx.translate(0,0); | ||
188 | ctx.scale(1,1); | ||
189 | ctx.translate(0,0); | ||
190 | ctx.strokeStyle = 'rgba(0,0,0,0)'; | ||
191 | ctx.lineCap = 'butt'; | ||
192 | ctx.lineJoin = 'miter'; | ||
193 | ctx.miterLimit = 4; | ||
194 | ctx.save(); | ||
195 | ctx.beginPath(); | ||
196 | ctx.moveTo(275.05,187.4); | ||
197 | ctx.bezierCurveTo(271.05,187.4,267.63300000000004,188.817,264.8,191.65); | ||
198 | ctx.bezierCurveTo(261.967,194.483,260.55,197.9,260.55,201.9); | ||
199 | ctx.bezierCurveTo(260.55,205.9,261.967,209.316,264.8,212.15); | ||
200 | ctx.bezierCurveTo(267.63300000000004,214.983,271.05,216.4,275.05,216.4); | ||
201 | ctx.bezierCurveTo(279.05,216.4,282.467,214.983,285.3,212.15); | ||
202 | ctx.bezierCurveTo(288.134,209.316,289.55,205.9,289.55,201.9); | ||
203 | ctx.bezierCurveTo(289.55,197.9,288.134,194.483,285.3,191.65); | ||
204 | ctx.bezierCurveTo(282.467,188.817,279.05,187.4,275.05,187.4); | ||
205 | ctx.closePath(); | ||
206 | ctx.moveTo(351.55,126.15); | ||
207 | ctx.bezierCurveTo(351.55,123.917,351.366,121.783,351,119.75); | ||
208 | ctx.lineTo(450.1,99.95); | ||
209 | ctx.lineTo(384.451,176.85000000000002); | ||
210 | ctx.bezierCurveTo(378.418,171.61700000000002,371.317,169.00000000000003,363.151,169.00000000000003); | ||
211 | ctx.bezierCurveTo(354.117,169.00000000000003,346.401,172.20000000000002,340.00100000000003,178.60000000000002); | ||
212 | ctx.bezierCurveTo(333.60100000000006,185.00000000000003,330.401,192.717,330.401,201.75000000000003); | ||
213 | ctx.bezierCurveTo(330.401,210.78300000000004,333.6,218.50000000000003,340.00100000000003,224.90000000000003); | ||
214 | ctx.bezierCurveTo(346.401,231.29900000000004,354.117,234.50000000000003,363.151,234.50000000000003); | ||
215 | ctx.bezierCurveTo(371.48400000000004,234.50000000000003,378.701,231.78300000000002,384.8,226.35000000000002); | ||
216 | ctx.lineTo(451.55,302.35); | ||
217 | ctx.lineTo(352.15,283.95); | ||
218 | ctx.bezierCurveTo(352.483,282.01599999999996,352.65,280.01599999999996,352.65,277.95); | ||
219 | ctx.bezierCurveTo(352.65,268.917,349.45,261.2,343.049,254.79999999999998); | ||
220 | ctx.bezierCurveTo(342.44899999999996,254.2,341.832,253.61599999999999,341.19899999999996,253.04999999999998); | ||
221 | ctx.bezierCurveTo(335.16599999999994,247.81699999999998,328.06499999999994,245.2,319.89899999999994,245.2); | ||
222 | ctx.bezierCurveTo(310.86499999999995,245.2,303.14899999999994,248.39999999999998,296.74899999999997,254.79999999999998); | ||
223 | ctx.bezierCurveTo(290.349,261.2,287.14899999999994,268.917,287.14899999999994,277.95); | ||
224 | ctx.bezierCurveTo(287.14899999999994,286.983,290.34799999999996,294.7,296.74899999999997,301.099); | ||
225 | ctx.bezierCurveTo(300.51599999999996,304.866,304.73199999999997,307.51599999999996,309.39899999999994,309.049); | ||
226 | ctx.lineTo(276.94899999999996,404.74899999999997); | ||
227 | ctx.lineTo(243.24899999999997,309.59899999999993); | ||
228 | ctx.bezierCurveTo(247.11599999999996,308.23299999999995,250.66599999999997,306.09899999999993,253.89899999999997,303.19999999999993); | ||
229 | ctx.bezierCurveTo(254.39899999999997,302.73299999999995,254.89899999999997,302.24999999999994,255.39899999999997,301.74999999999994); | ||
230 | ctx.bezierCurveTo(260.33299999999997,296.8159999999999,263.366,291.09999999999997,264.49899999999997,284.59999999999997); | ||
231 | ctx.bezierCurveTo(264.832,282.667,264.99899999999997,280.667,264.99899999999997,278.59999999999997); | ||
232 | ctx.bezierCurveTo(264.99899999999997,269.56699999999995,261.799,261.84999999999997,255.39899999999997,255.45099999999996); | ||
233 | ctx.bezierCurveTo(254.79899999999998,254.84999999999997,254.18199999999996,254.26699999999997,253.54899999999998,253.70099999999996); | ||
234 | ctx.bezierCurveTo(247.516,248.46799999999996,240.41599999999997,245.84999999999997,232.24899999999997,245.84999999999997); | ||
235 | ctx.bezierCurveTo(223.21599999999998,245.84999999999997,215.49899999999997,249.04999999999995,209.09899999999996,255.45099999999996); | ||
236 | ctx.bezierCurveTo(202.69899999999996,261.84999999999997,199.49899999999997,269.56699999999995,199.49899999999997,278.59999999999997); | ||
237 | ctx.bezierCurveTo(199.49899999999997,280.83299999999997,199.69899999999996,282.984,200.09899999999996,285.04999999999995); | ||
238 |