-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (105 loc) · 3.72 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
<!DOCTYPE html>
<html lang="en-NZ">
<head>
<meta charset="utf8">
<title>The div Programming Language</title>
<style>
html {
font-family: sans-serif;
background-color: #eee;
}
h1 {
text-align: center;
margin: auto;
margin-top: 1em;
color: skyblue;
font-weight: lighter;
font-size: 3.5em;
text-shadow: #ccc 0 0 5px;
}
strong {
font-weight: bold;
text-shadow: #ccc 0 0 10px;
color: rgba(255, 136, 0, 0.822);
}
iframe {
display: block;
width: 90%;
margin: auto;
margin-top: 5em;
margin-bottom: 5em;
background-color: white;
border: none;
border-radius: 2em;
padding: 2em;
}
button {
padding: 0.5em;
border: none;
border-radius: 0.5em;
background-color: skyblue;
color: white;
}
button:hover {
box-shadow: #ccc 5px 5px 5px;
}
button:active {
transform: scale(0.9)
}
label {
color: skyblue;
}
.container {
width: 80%;
margin: auto;
}
.control {
margin-top: 5em;
margin-bottom: 5em;
display: flex;
justify-content: space-evenly;
align-items: center;
}
</style>
</head>
<body>
<h1>The <strong>div</strong> Programming Language</h1>
<div class="container">
<div class="control">
<label>
Example:
<select name="example" id="example">
<option value="helloworld">Hello World</option>
<option value="helloworld-div">Hello World(using only divs)</option>
<option value="loveyou365">Love You 365</option>
<option value="gcd">Greatest Common Divisor</option>
<option value="gcd-div">Greatest Common Divisor(using only divs)</option>
<option value="factorial">Factorial</option>
<option value="fibonacci">Fibonacci</option>
<option value="primes">Primes</option>
</select>
</label>
<div>
<button class="button" id="code">View source code</button>
<button class="button" id="doc">View documentation</button>
</div>
</div>
<iframe src="./examples/helloworld.html" id="demo"></iframe>
</div>
<script>
const demo = document.getElementById('demo');
const example = document.getElementById('example');
const code = document.getElementById('code');
const doc = document.getElementById('doc')
example.addEventListener('change', (e) => {
demo.src = `./examples/${e.target.value}.html`
});
code.addEventListener('click', () => {
window.open(`https://github.com/CoderYihaoWang/Div/tree/master/examples/${example.value}.html`, '_blank');
});
doc.addEventListener('click', () => {
window.open(`https://github.com/CoderYihaoWang/Div`, '_blank');
});
</script>
</body>
</html>