-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
216 lines (212 loc) · 8.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
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<html>
<head>
<title>FrontlineSMS Developers</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fsms.css" />
<link rel="stylesheet" href="css/font-awesome.min.css">
<script type="text/javascript" src="FontLoader.js"></script>
<script type="text/javascript">
var elapsed;
var animationLength = 1400;
var initTime;
var intrvl;
var canvas;
var ctx;
var requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function init() {
elapsed = 0;
initTime = new Date().getTime();
canvas = document.getElementById('animatedLogo');
ctx = canvas.getContext('2d');
animate();
};
function animate() {
requestAnimationFrame(draw);
};
function transfEasingDecelerate(startPos, endPos, startFrame, endFrame) {
if(elapsed < startFrame) {
return startPos;
}
else if(endFrame < elapsed) {
return endPos;
}
else {
return startPos + ((endPos - startPos) * Math.pow((elapsed - startFrame) / (endFrame - startFrame), transf(1.0, 0.1, startFrame, endFrame)));
}
};
function transf(startPos, endPos, startFrame, endFrame) {
if(elapsed < startFrame) {
return startPos;
}
else if(endFrame < elapsed) {
return endPos;
}
else {
return startPos + ((endPos - startPos) * (elapsed - startFrame) / (endFrame - startFrame));
}
};
function draw() {
elapsed = new Date().getTime() - initTime;
currentColour = "rgba(156, 27, 109, " + transf(0.0, 1.0, 0, animationLength/2) +")";
if (ctx){
var grd=ctx.createLinearGradient(0,0,transf(180, 208, 0, 1400), transf(200, 240, 0, 1400));
grd.addColorStop(0,"rgba(156, 27, 109, 255)");
grd.addColorStop(0.5,currentColour);
grd.addColorStop(1,"rgba(156, 27, 109, 255)");
var thickness = 8;
ctx.beginPath();
ctx.lineWidth = thickness;
ctx.strokeStyle = grd;
// Start from callout
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0,0, 208, 240);
ctx.moveTo(155 + thickness/2,225 + thickness/2);
ctx.lineTo(transf(155, 140, 0, 100) + thickness/2,transf(225, 200, 0, 100) + thickness/2);
if (elapsed > 100) {
ctx.lineTo(transf(140, 10, 100, 300) + thickness/2,200 + thickness/2);
}
if(elapsed > 300) {
ctx.arc(10 + thickness/2, 190 + thickness/2, 10, 0.5 * Math.PI, transf(0.5 * Math.PI, Math.PI, 300, 350), false);
}
if(elapsed > 350) {
ctx.lineTo(0 + thickness/2,transf(190, 10, 350, 550) + thickness/2);
}
if(elapsed > 550) {
ctx.arc(10 + thickness/2, 10 + thickness/2, 10, Math.PI, transf(Math.PI, 1.5 * Math.PI, 550, 600), false);
}
if(elapsed > 600) {
ctx.lineTo(transf(10, 190, 600, 800) + thickness/2,0 + thickness/2);
}
if(elapsed > 800) {
ctx.arc(190 + thickness/2, 10 + thickness/2, 10, 1.5 * Math.PI, transf(1.5 * Math.PI, 2 * Math.PI, 800, 850), false);
}
if(elapsed > 850) {
ctx.lineTo(200 + thickness/2,transf(10, 190, 850, 1050) + thickness/2);
}
if(elapsed > 1050) {
ctx.arc(190 + thickness/2, 190 + thickness/2, 10, 0, transf(0, 0.5 * Math.PI, 1050, 1100), false);
}
if(elapsed > 1100) {
ctx.lineTo(transf(190, 170, 1100, 1150) + thickness/2,200 + thickness/2);
}
if(elapsed > 1150) {
ctx.lineTo(transf(170, 155, 1150, 1200) + thickness/2,transf(200, 225, 1150, 1200) + thickness/2);
}
if(elapsed > 1200) {
ctx.lineTo(transf(155, 140, 1200, 1350) + thickness/2,transf(225, 200, 1200, 1350) + thickness/2);
}
ctx.stroke();
//Rotate
ctx.translate(100 + thickness/2, 100 + thickness/2);
ctx.rotate(transfEasingDecelerate(0.0, 2 * Math.PI, 0, 1350));
ctx.translate(-108, -120);
ctx.font = "145px FontAwesome";
ctx.fillStyle = grd;
ctx.fillText("\uf013", 45, 172);
ctx.translate(100, 100);
ctx.rotate(transfEasingDecelerate(0.0, 0-(2 * Math.PI), 0, 1200));
ctx.translate(-(108 + thickness/2), -(120 + thickness/2));
}
if(elapsed < animationLength) {
animate();
}
}
</script>
</head>
<body>
<section id="header" class="centred">
<img id="logo" src="images/devlogo.png"/>
<canvas id="animatedLogo" width="208" height="240">
</canvas>
<h1>FrontlineSMS Dev Team</h1>
</section>
<section id="intro" class="centred">
<p>We're a dev team based in Nairobi, Kenya. Our main focus is developing <a href="http://www.frontlinesms.com">FrontlineSMS</a>, a desktop and web-based mobile messaging automation system.</p>
</section>
<section id="links" class="centred">
<ul>
<li><a href="#products">our products</a></li>
<li><a href="#opensource">open source</a></li>
<li><a href="#jobs">jobs</a></li>
</ul>
</section>
<section id="products" class="centred grid">
<h2>Our Products</h2>
<ol>
<li>
<a href="http://www.frontlinesms.com/technologies/download/">FrontlineSMS</a>
<p>
Our free and open source client for Linux, Mac and Windows. Automate SMS and missed calls sent and received via USB modem or tethered mobile phones, or via FrontlineSync on Android.
</p>
</li>
<li>
<a href="https://cloud.frontlinesms.com">FrontlineCloud</a>
<p>
Our web client. Extends FrontlineSMS Desktop functionality to support multiple online aggregators, allowing operation at greater scale.
</p>
</li>
<li>
<a href="https://play.google.com/store/apps/details?id=com.simlab.frontlinesync">FrontlineSync</a>
<p>
Allows users to connect their Android device to either FrontlineCloud or FrontlineSMS in order to use their mobile device as a connection for sending and receiving SMSs and tracking missed calls.
</p>
</li>
</ol>
</section>
<section id="opensource" class="centred grid">
<h2>Open Source</h2>
<ol>
<li>
<p>
<a href="https://github.com/frontlinesms/frontlinesms2">FrontlineSMS2 Core & Radio</a>
Every release of FrontlineSMS 2.x for Desktop. Built in Groovy using the Grails framework
</p>
</li>
<li>
<p>
<a href="http://frontlinesms.github.io/frontlinesms-multiselector">Frontlinesms-Multiselector</a>
jQuery plugin that provides a multi-object selector, based on <a href="http://sliptree.github.io/bootstrap-tokenfield/">Tokenfield for Bootstrap</a>. The core development for this project was done by <a href="https://github.com/SolDevelo/frontlinesms-multiselector">SolDevelo</a>.
</p>
</li>
<li>
<p>
<a href="https://github.com/frontlinesms/SugarMock">SugarMock</a>
A mocking library for <a href="http://satyan.github.io/sugar/">SugarORM</a>, an ORM library for SQLite on Android
</p>
</li>
<li>
<p>
<a href="https://github.com/frontlinesms/cookbook">Cookbook</a>
An open document format for defining automated systems based on SMS and missed calls.
</p>
</li>
<li>
<p>
<a href="https://github.com/frontlinesms/bails">Bails</a>
A set of bash scripts to aid Grails development, packaged as a Grails plugin.
</p>
</li>
<li>
<a href="https://github.com/frontlinesms">More available on our Github organisation page</a>
</li>
</ol>
</section>
<section id="jobs" class="centred">
<h2>Jobs</h2>
<p>We're always looking for good developers, and people with the skills and experience to bring the best out of them. You can find the latest news on all vacancies on <a href="http://www.frontlinesms.com/connect-with-us/jobs-and-internships/">our organisation website</a>, or you can send an email to <a href="mailto:[email protected]">[email protected]</a>.
</p>
</section>
<div id="fa-hidden"><i class="fa fa-cog"></i></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).bind("load", function() {
init();
});
</script>
</body>
</html>