-
Notifications
You must be signed in to change notification settings - Fork 18
Expand file tree
/
Copy pathindex.html
More file actions
460 lines (458 loc) · 20.4 KB
/
index.html
File metadata and controls
460 lines (458 loc) · 20.4 KB
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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Home Page - Code Paster</title>
</head>
<body>
<!-- / navbar / -->
<nav class="navbar">
<svg class="navbar__logo">
<use xlink:href="assets/sprite.svg#codepaster-logo"></use>
</svg>
<div class="navbar__list-container">
<button class="navbar__cta-button" onclick="location.href='app.html'">
Get Started
<svg class="navbar__cta-button__icon">
<use xlink:href="assets/sprite.svg#arrow-icon"></use>
</svg>
</button>
<ul class="navbar__list">
<li class="navbar__list__item">
<a href="#credits">Credits</a>
</li>
<li class="navbar__list__item">
<a href="#license">License</a>
</li>
</ul>
</div>
</nav>
<!-- / main / -->
<main>
<!-- / instructions / -->
<div class="top-container border-bottom">
<div class="instructions-container">
<div class="cta-button-container">
<button class="cta-button" onclick="location.href='app.html'">
Get started
<svg class="cta-button__icon">
<use xlink:href="assets/sprite.svg#arrow-icon"></use>
</svg>
</button>
</div>
<article class="instructions">
<h2 class="instructions__title">
Code paster is a free online app
</h2>
<h3 class="instructions__subtitle">What can I use it for?</h3>
<p class="instructions__text">
You can use Code Paster to share code or any kind of text with
partners, students, colleagues, etc. The trainer role (who can be
one or more people) is allowed to write and read text. However,
the student role is only allowed to read it. This particularity
makes Code Paster a great and simple application to be used in any
kind of online activity which requires text to be shared.
</p>
<h3 class="instructions__subtitle">How does it work?</h3>
<ol class="instructions__list">
<li class="instructions__text">
Press "Get started" button to navigate to the app
</li>
<li class="instructions__text">
Press "Create session" button to start a private room for you
and your people
</li>
<li class="instructions__text">
Share the links on the top of the website which other people,
taking care of use "student" or "trainer" role as needed
</li>
<li class="instructions__text">
Start typing within the "Trainer Textarea" and the other people
in the room will be able to see whatever you have writen in it
</li>
</ol>
<div class="video-container">
<video
class="video"
src="./assets/codepaster.mp4"
controls
/></video>
</div>
</article>
</div>
</div>
<!-- / credits / -->
<div class="box-content border-bottom" id="credits">
<article>
<h2 class="heading">Credits</h2>
<div class="container">
<div class="card">
<div class="card__img">
<img
class="avatar"
src="./assets/miguel-angel-vazquez.jpg"
alt="Miguel Ángel Vazquez"
/>
</div>
<div class="card__text">
<h3>Miguel Ángel Vázquez</h3>
<p>
With an extensive career in artistic production and academic
research, in 2019 he decided to retrain as a web developer.
After finishing the Front-end master from Lemoncode, he
participated in some open source projects. Currently, he is
working as a front-end developer.
</p>
</div>
</div>
<hr class="divider" />
<div class="card">
<div class="card__img">
<img
class="avatar"
src="./assets/miguel-angel-romero.jpg"
alt="Miguel Ángel Romero"
/>
</div>
<div class="card__text">
<h3>Miguel Ángel Romero</h3>
<p>
After a professional evolution from Java developer in banking
environments to management tasks, a few years ago I decided to
continue my professional life doing what I like the most,
programming. After a recycling through a Master in Frontend, I
am currently passionate about React and Javascript world,
especially the pure "backend" code aspects.
</p>
</div>
</div>
<hr class="divider" />
<div class="card">
<div class="card__img">
<img
class="avatar"
src="./assets/alberto-caparros.jpg"
alt="Alberto Caparrós Trigo"
/>
</div>
<div class="card__text">
<h3>Alberto Caparrós Trigo</h3>
<p>
Software developer - Frontend, Backend and Mobile Apps from
Almería, Spain. I love to live different experiences all
around the world and learn all I can about coding.
</p>
</div>
</div>
<hr class="divider" />
<div class="card">
<div class="card__img">
<img
class="avatar"
src="./assets/sergio-conde-ortega.png"
alt="Sergio Conde Ortega"
/>
</div>
<div class="card__text">
<h3>Sergio Conde Ortega</h3>
<p>
Software Engineer with more than 18 years of experience having
worked for the public administration and international
companies, now focused on .NET and Javascript based projects.
</p>
</div>
</div>
<hr class="divider" />
<div class="card">
<div class="card__img">
<img
class="avatar"
src="./assets/alicia-ga.png"
alt="Alicia Guardeño Albertos"
/>
</div>
<div class="card__text">
<h3>Alicia Guardeño Albertos</h3>
<p>
Disabled software engineer 👩🦼 living in south Spain. ☀️ Now
Frontend React developer looking for work in a 100% remote
friendly company that supports open source sustainability. 🙌
Previously worked on game development as a 2D generic/pixel
artist, 🖌️ and mostly C# & unity programmer in indie games. 🎮
I'm a huge nerd/geek, Pokemon TCG player, and D&D5 DM. 🤓
</p>
</div>
</div>
<hr class="divider" />
<div class="card">
<div class="card__img">
<img
class="avatar"
src="./assets/juan-pablo.jpg"
alt="Juan Pablo Martínez"
/>
</div>
<div class="card__text">
<h3>Juan Pablo Martínez</h3>
<p>
Front-End developer, ui/ux designer and Lemoncoder. Guitarist
and heavy metal singer in my free time 🤘
</p>
</div>
</div>
<hr class="divider" />
<div class="card">
<div class="card__img">
<img
class="avatar"
src="./assets/braulio-diez.png"
alt="Braulio Díez"
/>
</div>
<div class="card__text">
<h3>Braulio Díez</h3>
<p>
JavaScript / Typescript developer (old hand coming from .net
background), trainer, writter and speaker. More than 20 years
involved on international projects.
</p>
</div>
</div>
<hr class="divider" />
<div class="card">
<div class="card__img">
<img
class="avatar"
src="./assets/daniel-sanchez.png"
alt="Daniel Sánchez"
/>
</div>
<div class="card__text">
<h3>Daniel Sánchez</h3>
<p>
Technical Telecommunications Engineer, Master's Degree in Web
Engineering (RIAtec) at the University of Málaga, Front-End
(React) senior developer.
</p>
</div>
</div>
</div>
</article>
</div>
<!-- / contact / -->
<div class="box-content border-bottom" id="contact">
<article class="contact-container">
<h2 class="heading">Contact</h2>
<div class="container">
<form onsubmit="event.preventDefault()">
<div class="input-field">
<label for="name">Name</label>
<input id="name" type="text" />
</div>
<div class="input-field">
<label for="email">Email</label>
<input id="email" type="email" />
</div>
<div class="input-field">
<label for="message">Your Message</label>
<textarea
name="message"
id="message"
cols="30"
rows="10"
></textarea>
</div>
<input type="submit" class="btn-submit" value="send" />
</form>
</div>
</article>
</div>
<!-- / license / -->
<div class="box-content" id="license">
<article>
<h2 class="heading">license</h2>
<div class="container">
<h3>Notice to user:</h3>
<p>
Please, read this carefully. By using all or any portion of the
Software you accept all the terms and conditions of this
Agreement. If you do not agree, do not use this Software.
</p>
<h3>1. DEFINITIONS</h3>
<p>
When used in this Agreement, the following terms shall have the
respective meanings indicated, such meanings to be applicable to
both the singular and plural forms of the terms defined:
“Licensor” means Eltima Software. “Licensee” means You or Your
Company, unless otherwise indicated. “Software” means (a) all of
the contents of the files, disk(s), CD-ROM(s) or other media with
which this Agreement is provided, including but not limited to
((i) registration information, i.e. License key which is unique
for a registration name of the Licensee; (ii) related explanatory
written materials or files (“Documentation”); and (iii) Software
setup files and code samples (if any); and (b) upgrades, modified
versions, updates, additions, and copies of the Software, if any,
licensed to you by Eltima Software (collectively, “Updates”).
“Use” or “Using” means to access, install, download, copy or
otherwise benefit from using the functionality of the Software in
accordance with the Documentation. “System” means Windows OS,
GNU/Linux or Mac OS X, or any virtual machine.
</p>
<h3>2. GENERAL USE</h3>
<p>
You are granted a non-exclusive License to Use the downloaded
Software for any purposes for an unlimited period of time. The
software product under this License is provided free of charge.
Even though a license fee is not paid for the use of such
software, it does not mean that there are no conditions for using
such software. 2.1. The Software may be installed and Used by the
Licensee for any legal purpose. 2.2. The Software may be installed
and Used by the Licensee on any number of systems. 2.3. The
Software can be copied and distributed under the condition that
original copyright notice and disclaimer of warranty will stay
intact and the Licensee will not charge money or fees for the
Software product, except to cover distribution costs. 2.4. The
Licensee will not have any proprietary rights in and to the
Software. The Licensee acknowledges and agrees that the Licensor
retains all copyrights and other proprietary rights in and to the
Software. 2.5 Use within the scope of this License is free of
charge and no royalty or licensing fees shall be paid by the
Licensee.
</p>
<h3>3. INTELLECTUAL PROPERTY RIGHTS</h3>
<p>
3.1 This License does not transmit any intellectual rights on the
Software. The Software and any copies that the Licensee is
authorized by the Licensor to make are the intellectual property
of and are owned by the Licensor. 3.2 The Software is protected by
copyright, including without limitation by Copyright Law and
international treaty provisions. 3.3 Any copies that the Licensee
is permitted to make pursuant to this Agreement must contain the
same copyright and other proprietary notices that appear on or in
the Software. 3.4 The structure, organization and code of the
Software are the valuable trade secrets and confidential
information of the Licensor. The Licensee agrees not to decompile,
disassemble or otherwise attempt to discover the source code of
the Software. 3.5 Any attempts to reverse-engineer, copy, clone,
modify or alter in any way the installer program without the
Licensor’s specific approval are strictly prohibited. The Licensee
is not authorized to use any plug-in or enhancement that permits
to save modifications to a file with software licensed and
distributed by the Licensor. 3.6 Trademarks shall be used in
accordance with accepted trademark practice, including
identification of trademarks owners’ names. Trademarks can only be
used to identify printed output produced by the Software and such
use of any trademark does not give the Licensee any rights of
ownership in that trademark.
</p>
<h3>4. WARRANTY</h3>
<p>
4.1 The Licensor warrants that: 4.1.1 The Licensor owns the
Software and documentation and/or is in possession of valid and
existing licenses that support the terms of this Agreement; 4.1.2
the Software conforms to specifications and functionality as
specified in Documentation; 4.1.3 to the best of the Licensor’s
knowledge, the Software does not infringe upon or violate any
intellectual property right of any third party; 4.1.4 the Software
does not contain any routine, intentionally designed by the
Licensor to disable a computer program, or computer instructions
that may alter, destroy or inhibit the processing environment. 4.2
Except those warranties specified in section 4.1 above, the
Software is being delivered to the Licensee “AS IS” and the
Licensor makes no warranty as to its use or performance. The
Licensor does not and cannot warrant the performance or results
the Licensee may obtain by using the Software. The entire risk
arising out of use or performance of the Software remains with the
Licensee. The Licensor gives no warranty, express or implied, that
(i) the Software will be of satisfactory quality, suitable for any
particular purpose or for any particular use under specified
conditions, notwithstanding that such purpose, use, or conditions
may be known to the Licensor; or (ii) that the Software will
operate error free or without interruption or that any errors will
be corrected.
</p>
<h3>5. LIMITATION OF LIABILITY</h3>
<p>
In no event will the Licensor be liable for any damages, claims or
costs whatsoever or any consequential, indirect, incidental
damages, or any lost profits or lost savings, even if the Licensor
has been advised of the possibility of such loss, damages, claims
or costs or for any claim by any third party. In no event will the
Licensee be liable to the Licensor on condition that the Licensee
complies with all terms and conditions stated in this License.
</p>
<h3>6. NON-WAIVER</h3>
<p>
If a portion of this agreement is held unenforceable, the
remainder shall be valid. It means that if one section of the
Agreement is not lawful, the rest of the Agreement is still in
force. A party’s failure to exercise any right under this
Agreement will not constitute a waiver of (a) any other terms or
conditions of this Agreement, or (b) a right at any time
thereafter to require exact and strict compliance with the terms
of this Agreement.
</p>
</div>
</article>
</div>
</main>
<footer class="footer">
<div class="footer-container">
<nav>
<ul class="footer__list">
<li class="footer__list__item">
<a href="#credits">Credits</a>
</li>
<li class="footer__list__item">
<a href="#license">License</a>
</li>
</ul>
</nav>
<svg class="footer__logo">
<use xlink:href="assets/sprite.svg#lemoncode-logo"></use>
</svg>
</div>
<div class="footer__bottom-container">
<nav>
<ul class="footer__icon-list">
<li class="footer__icon-list-item">
<a href="https://github.com/Lemoncode" target="_blank">
<svg class="footer__icon">
<use xlink:href="assets/sprite.svg#github-icon"></use>
</svg>
</a>
</li>
<li class="footer__icon-list-item">
<a href="https://twitter.com/lemoncoders" target="_blank">
<svg class="footer__icon">
<use xlink:href="assets/sprite.svg#twitter-icon"></use>
</svg>
</a>
</li>
<li class="footer__icon-list-item">
<a href="https://lemoncode.net/" target="_blank">
<svg class="footer__icon">
<use xlink:href="assets/sprite.svg#website-icon"></use>
</svg>
</a>
</li>
<li class="footer__icon-list-item">
<a href="mailto:formacion@lemoncode.net" target="_blank">
<svg class="footer__icon">
<use xlink:href="assets/sprite.svg#mail-icon"></use>
</svg>
</a>
</li>
</ul>
</nav>
<span class="footer__copyright">© 2020 Lemoncode</span>
</div>
</footer>
</body>
</html>