-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (153 loc) · 4.1 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Synergy</title>
<script src="lib/jquery-2.1.3.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>
<script src="lib/coffee-script.js"></script>
<style>
* {
font-family: "Open Sans", sans-serif;
}
h1, h1 * {
vertical-align: middle;
}
h1 canvas {
padding-right: 5px;
}
h1 img {
-webkit-animation: slideIn 2.5s cubic-bezier(.05,.73,.24,1);
}
@-webkit-keyframes slideIn {
0% { transform: translateX(-175px) skewX(-50deg); opacity: 0; }
80% { transform: translateX(-175px) skewX(-50deg); opacity: 0; }
100% { transform: none; opacity: 1; }
}
img {
pointer-events: none;
}
body {
-webkit-user-select: none;
}
.screen {
overflow: hidden;
outline: 1px solid rgba(255,255,255,0.2);
background-color: #004C64; /* the color of reserved operating system space */
color: white;
}
.screen .work-area {
background-color: #3C97BA; /* the main screen area color */
color: white;
}
.overlap {
background-color: red;
opacity: 0.23;
/* NOTE: should probably ditch the opacity */
/* since there are now various colors that can go behind this */
box-shadow: 0px 0px 0px 1px #a00 inset;
background-size: 30px 30px;
background-image: -webkit-linear-gradient(
45deg,
rgba(0, 0, 0, 0.2) 25%,
rgba(0, 0, 0, 0.0) 25%,
rgba(0, 0, 0, 0.0) 50%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.2) 75%,
rgba(0, 0, 0, 0.0) 75%,
rgba(0, 0, 0, 0.0)
);
}
.edge {
background-color: lime;
opacity: 0.5;
box-shadow:
0px 0px 1px 0.4px white,
0px 0px 1px 1px lime,
0px 0px 4px 1px rgba(0,160,0,0.8);
/*box-shadow:
0px 0px 1px 0.4px white,
0px 0px 1px 1px lime,
0px 0px 4px 1px rgba(0,160,0,0.8),
0px 0px 10px 1px rgba(0,160,0,1),
0px 0px 16px 2px rgba(0,160,50,1);*/
}
.window {
background: #98C53C;
opacity: 0.5;
}
</style>
<link rel="icon" href="images/icon.png">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin" rel="stylesheet">
</head>
<body>
<h1><canvas id="logo" width=50 height=50></canvas><img src="images/logotype.png" alt="Synergy"></h1>
<script src="node_modules/nw-dev/lib/dev.js"></script>
<script type="text/coffeescript">
$logo = $('#logo')
canvas = $logo.get(0)
ctx = canvas.getContext("2d")
tau = Math.PI*2
t = 0
rot_global = 0
lwidth = 0
do a = ->
t += 0.1
requestAnimationFrame a
w = canvas.width
h = canvas.height
ctx.clearRect(0, 0, w, h)
ctx.save()
ctx.scale(w/2, h/2)
ctx.translate(1, 1)
slowness = 50
turns = 1.52 # one whole turn plus half to get the colors in the right places plus a tiny bit to balance the bumps
rot_global = (rot_global*slowness + turns*tau) / (slowness+1)
ctx.rotate(rot_global)
colors = ["#5D7DBE", "#156260", "#3C97BA", "#98C53C"]
for color, i in colors
i1 = i
i2 = i + Math.min(t/10, 0.98)
rot1 = i1/colors.length * tau
rot2 = i2/colors.length * tau
slowness = 50
lwidth = (lwidth*slowness + 0.35) / (slowness+1)
louter = 1
lcenter = 1 - lwidth/2
linner = 1 - lwidth
ctx.beginPath()
# main outer curve
ctx.arc(0, 0, louter, rot1, rot2, no)
# bump in (to inner curve)
ctx.arc(
Math.cos(rot2)*lcenter
Math.sin(rot2)*lcenter
lwidth/2
rot2
rot2+tau/2
yes
)
# main inner curve
ctx.arc(0, 0, linner, rot2, rot1, yes)
# bump out (to outer curve)
ctx.arc(
Math.cos(rot1)*lcenter
Math.sin(rot1)*lcenter
lwidth/2 * 0.95 # * 0.95 makes it worse at high resolutions, but better at low resolutions
rot1+tau/2
rot1
no
)
ctx.fillStyle = color
ctx.fill()
ctx.restore()
</script>
<script type="text/coffeescript" src="app.coffee"></script>
<script type="text/coffeescript">
nw = require "nw.gui"
nwin = nw.Window.get()
nwin.show() unless nwin.shown
nwin.shown = yes
</script>
</body>
</html>