-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (131 loc) · 6.27 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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Tiny Art</title>
<style>
html, body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
article {
max-width: 480px;
padding: 10px;
margin: 0 auto;
}
h1 {
padding-left: 10px;
}
section {
display: flex;
justify-content: space-between;
align-items: stretch;
}
#left {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
canvas {
display: block;
flex-grow: 1;
min-height: 300px;
min-width: 300px;
border: solid 1px gray;
}
form {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
margin-left: 20px;
}
#examples {
max-height: 224px;
overflow-y: scroll;
}
textarea {
flex-grow: 1;
padding: 4px;
border: solid 1px gray;
}
#output {
height: 100px;
padding: 4px;
border: solid 1px gray;
margin-top: 20px;
}
footer {
position: fixed;
bottom: 4px;
left: 20px;
}
p {
margin-bottom: 0;
}
</style>
</head>
<body>
<article>
<h1>Tiny Art</h1>
<section>
<div id="left">
<canvas id="canvas" width="500" height="500"></canvas>
<div id="output"></div>
</div>
<form>
<textarea id="code" rows="10"></textarea>
<div id="examples">
<p>Beispiele:</p>
<ul>
<li><a href="/#paper%2090">(leer)</a></li>
<li><a href="/#https://tinyart.github.io/examples/fourlines.dbn">Vier Linien</a></li>
<li><a href="/#https://tinyart.github.io/examples/calculate.dbn">Calculate</a></li>
<li><a href="/#https://tinyart.github.io/examples/commands.dbn">Commands</a></li>
<li><a href="/#https://tinyart.github.io/examples/dots.dbn">Dots</a></li>
<li><a href="/#https://tinyart.github.io/examples/grainsofrain.dbn">Grainsofrain</a></li>
<li><a href="/#https://tinyart.github.io/examples/line.dbn">Line</a></li>
<li><a href="/#https://tinyart.github.io/examples/looping.dbn">Looping</a></li>
<li><a href="/#https://tinyart.github.io/examples/nesting1.dbn">Nesting1</a></li>
<li><a href="/#https://tinyart.github.io/examples/nesting2.dbn">Nesting2</a></li>
<li><a href="/#https://tinyart.github.io/examples/paper.dbn">Paper</a></li>
<li><a href="/#https://tinyart.github.io/examples/questions.dbn">Questions</a></li>
<li><a href="/#https://tinyart.github.io/examples/repeating.dbn">Repeating</a></li>
<li><a href="/#https://tinyart.github.io/examples/rocket2.dbn">Rocket2</a></li>
<li><a href="/#https://tinyart.github.io/examples/rockettime.dbn">Rockettime</a></li>
<li><a href="/#https://tinyart.github.io/examples/time1.dbn">Time1</a></li>
<li><a href="/#https://tinyart.github.io/examples/time2.dbn">Time2</a></li>
<li><a href="/#https://tinyart.github.io/examples/variable.dbn">Variable</a></li>
</ul>
<p>Tut's noch nicht:</p>
<ul>
<li><a href="/#https://tinyart.github.io/examples/amoebic.dbn">amoebic</a></li>
<li><a href="/#https://tinyart.github.io/examples/bandedclock.dbn">bandedclock</a></li>
<li><a href="/#https://tinyart.github.io/examples/dancinguy.dbn">dancinguy</a></li>
<li><a href="/#https://tinyart.github.io/examples/dancingy.dbn">dancingy</a></li>
<li><a href="/#https://tinyart.github.io/examples/graymachine.dbn">graymachine</a></li>
<li><a href="/#https://tinyart.github.io/examples/headsortails.dbn">headsortails</a></li>
<li><a href="/#https://tinyart.github.io/examples/intersecting.dbn">intersecting</a></li>
<li><a href="/#https://tinyart.github.io/examples/meeber.dbn">meeber</a></li>
<li><a href="/#https://tinyart.github.io/examples/merging.dbn">merging</a></li>
<li><a href="/#https://tinyart.github.io/examples/nervousguy.dbn">nervousguy</a></li>
<li><a href="/#https://tinyart.github.io/examples/painting.dbn">painting</a></li>
<li><a href="/#https://tinyart.github.io/examples/paramecium.dbn">paramecium</a></li>
<li><a href="/#https://tinyart.github.io/examples/plaid.dbn">plaid</a></li>
<li><a href="/#https://tinyart.github.io/examples/probing.dbn">probing</a></li>
<li><a href="/#https://tinyart.github.io/examples/quantitative.dbn">quantitative</a></li>
<li><a href="/#https://tinyart.github.io/examples/raininglines.dbn">raininglines</a></li>
<li><a href="/#https://tinyart.github.io/examples/reactive.dbn">reactive</a></li>
<li><a href="/#https://tinyart.github.io/examples/rockettime.dbn">rockettime</a></li>
<li><a href="/#https://tinyart.github.io/examples/thehunt.dbn">thehunt</a></li>
<li><a href="/#https://tinyart.github.io/examples/tuftball.dbn">tuftball</a></li>
</ul>
</div>
</form>
</section>
<footer>
© 2020 - Olav Schettler. This is open source - <a href="https://github.com/tinyart/tinyart.github.io">Clone it on Github</a>.
</footer>
</article>
<script src="build/app.js"></script>
</body>