-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathplayground.html
More file actions
198 lines (152 loc) · 8.9 KB
/
Copy pathplayground.html
File metadata and controls
198 lines (152 loc) · 8.9 KB
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blink JS</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<link rel="apple-touch-icon" href="assets/js-logo.png">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs/loader.js"></script>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
<style>
#editorContainer,
#consoleContainer {
min-width: 0;
min-height: 0;
overflow: visible;
}
#editor,
#consoleOutput {
overflow: auto;
}
#mainContainer {
gap: 0;
}
</style>
</head>
<body class="bg-black text-white h-screen overflow-hidden">
<nav class="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-black pt-4 px-4 gap-2">
<div class="flex items-center flex-shrink-0 text-white">
<span class="font-semibold text-lg sm:text-xl text-green-500">
BlinkJS - JS Playground
</span>
</div>
<div class="flex flex-col sm:flex-row sm:items-center gap-2 w-full sm:w-auto">
<div class="flex items-center gap-2 flex-wrap justify-center sm:justify-end">
<label class="hidden sm:flex items-center gap-2 font-mono px-3 py-1
text-black bg-green-500 hover:bg-green-400
rounded-md transition-all font-semibold
cursor-pointer select-none">
<input type="checkbox" id="autoCompileToggle" checked class="w-4 h-4 accent-black cursor-pointer" />
Auto Compile
</label>
<button id="switchPositionBtn" class="font-mono w-9 h-9 flex items-center justify-center
text-black bg-green-500 hover:bg-green-400
rounded-md transition-colors font-semibold" aria-label="Toggle editor/console positions">
<!-- Inline SVG placeholder -->
<svg id="switchIcon" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h8M8 12h8M8 17h8" />
</svg>
</button>
<button id="switchOrientationBtn" class="font-mono px-3 py-1 text-black bg-green-500
hover:bg-green-400 rounded-md transition-all font-semibold"
aria-label="Toggle horizontal/vertical layout">
Switch Orientation
</button>
<button id="homeBtn" onclick="window.location.href='index.html'" class="font-mono px-3 py-1 text-black bg-green-500
hover:bg-green-400 rounded-md transition-all font-semibold">
Home
</button>
</div>
<!-- Run (BOTTOM on mobile, INLINE on desktop) -->
<div class="flex justify-center sm:justify-end pt-1 sm:pt-0">
<button id="runBtn" class="font-mono px-6 py-2 sm:px-3 sm:py-1
text-black bg-green-500 hover:bg-green-400
rounded-md transition-all font-semibold active:scale-95">
Run
</button>
</div>
</div>
</nav>
<div class="flex flex-col h-[calc(100vh-6rem)] w-full p-4" id="mainContainer">
<div id="editorContainer"
class="draggable-block rounded-lg shadow-lg border border-green-500 border-opacity-30 flex flex-col overflow-visible"
style="min-height: 0; flex: 1;">
<div id="editorHeader"
class="header-drag-handle bg-black bg-opacity-60 backdrop-blur-lg px-4 py-2 border-b border-green-500 border-opacity-30 flex items-center cursor-move transition-all duration-300 hover:bg-opacity-80 hover:border-opacity-60 flex-shrink-0 overflow-visible relative z-[10000]">
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
<span class="text-green-400 font-mono select-none">script.js</span>
</div>
<div class="flex items-center gap-2">
<button id="clearEditorDesktopBtn" class="hidden sm:inline-flex items-center font-mono px-3 py-1
text-black bg-green-500 hover:bg-green-400 rounded-md
transition-all font-semibold active:scale-95">
Clear
</button>
<div id="editorMenuWrapper" class="relative sm:hidden">
<button id="editorMenuBtn" class="inline-flex items-center font-mono px-2 py-1
text-black bg-green-500 hover:bg-green-400 rounded-md
transition-all font-semibold active:scale-95">
⋯
</button>
<div id="editorMenu" class="hidden absolute right-0 mt-2 w-44
rounded-lg border border-green-500/30
bg-black/90 backdrop-blur-lg shadow-xl
overflow-hidden z-[20000]">
<label class="flex items-center gap-2 px-4 py-2
font-mono text-sm text-green-300
hover:bg-green-500 hover:text-black
cursor-pointer select-none">
<input type="checkbox" id="autoCompileToggleMobile"
class="w-4 h-4 accent-green-500 cursor-pointer" />
Auto Compile
</label>
<div class="border-t border-green-500/20"></div>
<button id="clearEditorBtn" class="w-full text-left px-4 py-2
font-mono text-sm text-green-300
hover:bg-green-500 hover:text-black transition">
Clear
</button>
</div>
</div>
</div>
</div>
</div>
<div id="editor" class="flex-1 overflow-hidden"></div>
</div>
<div id="dragHandle"
class="resize-handle cursor-ns-resize h-1 bg-gradient-to-r from-transparent via-green-500 to-transparent transition-all duration-300 hover:via-green-400 flex-shrink-0"
style="margin: 8px 0;"></div>
<div id="consoleContainer"
class="draggable-block rounded-lg shadow-lg border border-green-500 border-opacity-30 flex flex-col"
style="min-height: 0; flex: 1;">
<div id="consoleHeader"
class="header-drag-handle bg-black bg-opacity-60 backdrop-blur-lg px-4 py-2 border-b border-green-500 border-opacity-30 flex justify-between items-center cursor-move hover:bg-opacity-80 hover:border-opacity-60 flex-shrink-0">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-green-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span class="text-green-400">Console</span>
</div>
<button id="clearConsoleBtn" onclick="clearConsole()"
class="font-mono px-3 py-1 text-black bg-green-500 hover:bg-green-400 rounded-md transition-all font-semibold">
Clear
</button>
</div>
<div id="consoleOutput" class="p-3 overflow-auto flex-1"></div>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>