-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
75 lines (69 loc) · 3.55 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CoderDojo Certificate Generator</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" async="" src="js/index.js"></script>
<script type="text/javascript" async="" src="js/cookies.js"></script>
<script type="text/javascript" async="" src="https://printathpi.quelltext.eu/printathpi.js"></script>
<!--<script type="text/javascript" async="" src="http://localhost:8001/printathpi.js"></script>-->
<script type="text/javascript" async="" src="js/print.js"></script>
</head>
<body>
<div id="headerDiv" class="text-center">
<h1 id="header">CoderDojo Certificate Generator</h1>
</div>
<div id="infoDiv">
<p id="infoText">Fill out the input boxes below to create your very own certificate!</p>
</div>
<div id="left-side">
<div class="variables">
<div class="variable">
<p>Certificate Header:</p><input type="text" id="text-cert" class="update" value placeholder="Certificate of Achievement" />
</div>
<div class="variable">
<p>Name:</p><input type="text" id="text-name" class="update" value placeholder="John Doe"/>
</div>
<div class="variable">
<p>(Expandable) Text:</p><textarea id="text-achieve" class="update"></textarea>
</div>
<div class="variable">
<p>Diploma:</p><input type="text" id="text-diploma" class="update" value placeholder="DIPLOMA" />
</div>
<div class="variable">
<p>Champion:</p><input type="text" id="text-champion" class="update" value placeholder="Alice Mentor" />
</div>
<div class="variable">
<p>Big Logo:
<a class="image-choice" href="javascript:changeText('logo-big', '')"><img src="img/coderdojo-logo-light-bg.png"/></a>
<a class="image-choice" href="javascript:changeText('logo-big', 'coderdojo-potsdam-logo-inline.png')"><img src="img/coderdojo-potsdam-logo-inline.png"/></a>
</p>
<input type="text" id="logo-big" class="update" value placeholder="http://image.com/mylogo.svg" />
</div>
<div class="variable">
<p>Logo in Medal:
<a class="image-choice" href="javascript:changeText('logo-small', '')"><img src="img/logo-small.png"/></a>
<a class="image-choice" href="javascript:changeText('logo-small', 'Scratchcat2.png')"><img src="img/Scratchcat2.png"/></a>
<a class="image-choice" href="javascript:changeText('logo-small', 'soldering.png')"><img src="img/soldering.png"/></a>
</p>
<input type="text" id="logo-small" class="update" value http="placeholder://image.com/logo-small.svg" />
</div>
</div>
</div>
<div id="right-side">
<div class="result">
<a href="#" id="save-link">Save Settings</a>
<label>Format:</label><a class="preview-link" src="img/coderdojocertificate.svg" target="_blank">A4 landscape</a>
<a class="preview-link" src="img/coderdojocertificate-a4-rotated.svg" target="_blank">A4 Portrait</a>
<a id="printathpi-link" href="javascript:printSVGCertificateAtHPI()">Print@HPI</a>
<iframe width="100%" src="img/coderdojocertificate.svg" scrolling="no" id="preview"></iframe>
</div>
</div>
<div id="footerDiv">
<a href="https://github.com/CoderDojoPotsdam/certificate">Source Code, your contributions welcome</a>
<br />
<a href="https://github.com/CoderDojoPotsdam/certificate/issues">report problem</a>
</div>
</body>
</html>