-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
130 lines (92 loc) · 3.93 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PyKidos</title>
<!-- ACE EDITOR -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<!-- PYODIDE -->
<script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"></script>
<!-- PAKO -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.3/pako.min.js"></script>
<!-- EMOJI PICKER -->
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
<!-- COLOR PICKER -->
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css" />
<!-- CUSTOM STYLES -->
<link rel="stylesheet" href="styles/styles.css">
<!-- CUSTOM SCRIPT -->
<script type="module" src="scripts/main.js"></script>
</head>
<body>
<div id="dispatcher"></div>
<div class="container">
<!-- HAMBURGER BUTTON -->
<div id="menu-toggle" class="hamburger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<!-- LEFT PANEL -->
<div class="panel left-panel">
<!-- NEW BUTTON -->
<div id="new-item" class="item">New</div>
<!-- SELECTOR -->
<div id="selector">
</div>
</div>
<!-- MIDDLE PANEL -->
<div class="panel middle-panel">
<!-- BUTTONS BAR -->
<div id="buttons-bar">
<!-- EMOJI BUTTON -->Emoji
<a href="#" id="emoji-button">😀</a>
—
<!-- COLOR PICKER BUTTON -->
Color
<input type="text" data-coloris id="color-button" value="rgb(0,0,0)">
—
<button id="decrease-font-size-button" title="Decrease editor's font size">🗛</button><button id="increase-font-size-button" title="Increase editor's font size">🗚</button>
<!-- EMOJI PICKER POPUP -->
<emoji-picker id="emoji-picker" class="light"></emoji-picker>
</div>
<!-- CODE EDITOR -->
<div id="code-editor"></div>
</div>
<!-- RIGHT PANEL -->
<div class="panel right-panel">
<!-- GRID VISUAL COMPONENT -->
<div class="subpanel">
<div id="grid">
<div id="grid-table" tabindex="0">
</div>
</div>
</div>
<!-- OUTPUT TERMINAL -->
<textarea readonly class="subpanel" id="terminal-output"></textarea>
<!-- CONTROL PANEL -->
<div class="subpanel control-panel">
<button id="run-button" title="Play/Stop (Control + Enter)">►</button>
—
<button id="share-button" title="Copy the URL to the clipboard, with the code encoded in the URL">Share</button>
<button id="download-button" title="Download the Python script locally">Download</button>
</div>
<!-- CONFIDENTIALITY -->
<div class="subpanel" id="confidentiality">
Your code is stored locally in your browser's local storage.
It is never sent to any server.
Backup your data with the Download button.
</div>
<!-- CREDITS -->
<div class="subpanel" id="credits">
<a href="https://pykidos.github.io">PyKidos</a> —
<a href="https://cyrille.rossant.net/">Cyrille Rossant</a> —
<a href="https://github.com/pykidos/pykidos.github.io">GitHub repo</a> —
2024
</div>
</div>
</div>
</body>
</html>