-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
91 lines (87 loc) · 3.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>36c3 Generator</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="hexhex.js">
</script>
<script src="opentype.js"></script>
<script src="decomp.js"></script>
<script src="matter.js"></script>
<script src="paper-full.js"></script>
<script src="generator.js"></script>
</head>
<body>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Copy this URL and share :)</p>
<textarea id="sharetext">Some text in the Modal..</textarea>
</div>
</div>
<div id="infobox">
<a href="https://twitter.com/Bleeptrack">by bleeptrack</a> - <a href="https://github.com/bleeptrack/36c3-generator">Code on Github</a>
</div>
<div class="zoom">
<button onclick="zoomIn()">+</button></br></br>
<button onclick="zoomOut()">-</button>
</div>
<div class="menue">
<div class="stage orange" id="one">
<div class="number">1</div>
<h2 class="orange" >Add Text or upload SVG</h2>
<div class="stagecontent">
<span style="margin: 0 auto;"><input type="text" id="simulationtext" placeholder="your word" autocomplete="off" maxlength="14" onkeypress="onEnter(event)"></input><button onclick="updateText()">></button></span>
<p>- or -</p>
<span style="margin: 0 auto;"><input type="file" id="svgupload" name="svgupload" accept="image/svg+xml" onchange="handleFiles(this.files)"><label for="svgupload" />choose a svg file</label><button onclick="handleFiles()">></button></span>
</div>
</div>
<div class="stage orange" id="two">
<div class="number">2</div>
<h2 class="orange" >Finish Simulation</h2>
<div class="stagecontent">
<p>Await the physics<br>doing its work.</p>
<p>- or -</p>
<button onclick="stopSimulation()">stop Simulation</button>
</div>
</div>
<div class="stage orange disabled" id="three">
<div class="number">3</div>
<h2 class="orange" >Add a caption</h2>
<div class="stagecontent">
<textarea name="" id="caption" cols="20" rows="3" autocomplete="off" placeholder="add your caption linebreaks allowed :)"></textarea></br>
<button onclick="setCaption(true)">insert</button>
</div>
</div>
<div class="stage orange disabled" id="four">
<div class="number">4</div>
<h2 class="orange" >Click to Crack</h2>
<div class="stagecontent">
<p>Move your mouse</br> over the broken letters</br> and add additional cracks</br> by clicking.</p>
</br>
<p>The red dot</br>shows the selected</br>place.</p>
</br>
<p>drag the caption elements<br> to your desired position</p>
</div>
</div>
<div class="stage orange disabled" id="five">
<div class="number">5</div>
<h2 class="orange" >Choose your style</h2>
<div class="stagecontent">
<button class="orangestyle" onclick="setDestruction()">destruction</button>
<p>- or -</p>
<button class="greenstyle" onclick="setHope()">hope</button>
</div>
</div>
<div class="stage orange" id="six">
<div class="content">
<button onclick="downloadPNG()">save PNG</button>
<button onclick="downloadSVG()">save SVG</button>
<button onclick="share()" id="shareButton">share</button>
</div>
</div>
</div>
<canvas id="paperCanvas" resize="true"></canvas>
</body>
</html>