Skip to content

Commit 467643e

Browse files
dylan-sutton-chavezdylan-sutton-chavez
committed
Chore: Optimize index.html for frontend.
1 parent 754695b commit 467643e

1 file changed

Lines changed: 74 additions & 49 deletions

File tree

‎demo/index.html‎

Lines changed: 74 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,64 +5,89 @@
55
<head>
66

77
<meta charset="UTF-8">
8-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9-
10-
<title>Edge Python Demo</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
10+
<meta name="color-scheme" content="dark">
11+
<meta name="theme-color" content="#161616">
12+
<meta name="format-detection" content="telephone=no">
13+
<meta name="referrer" content="strict-origin-when-cross-origin">
14+
15+
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
16+
<meta name="googlebot" content="index, follow">
17+
<meta name="author" content="Dylan Sutton Chavez">
18+
<meta name="generator" content="Edge Python">
19+
20+
<title>Edge Python - Online Playground for a Python 3.13 Compiler in Rust</title>
21+
<meta name="description" content="Run Python 3.13 in your browser. Edge Python is a single-pass SSA compiler with adaptive inline caching and template memoization, compiled to WebAssembly. Free, open source, no signup.">
22+
<link rel="canonical" href="https://demo.edgepython.com/">
23+
24+
<link rel="preconnect" href="https://cdn.tailwindcss.com" crossorigin>
25+
<link rel="dns-prefetch" href="https://cdn.tailwindcss.com">
26+
<link rel="modulepreload" href="./main.js">
27+
<link rel="preload" href="./compiler_lib.wasm" as="fetch" type="application/wasm" crossorigin>
28+
29+
<link rel="preconnect" href="https://cdn.tailwindcss.com" crossorigin>
30+
<link rel="dns-prefetch" href="https://cdn.tailwindcss.com">
31+
<link rel="modulepreload" href="./main.js">
32+
<link rel="preload" href="./compiler_lib.wasm" as="fetch" type="application/wasm" crossorigin>
33+
34+
<link rel="icon" type="image/svg+xml" href="./icon.svg">
1135

36+
<link rel="stylesheet" href="./style.css">
1237
<script src="https://cdn.tailwindcss.com"></script>
1338
<script type="module" src="./main.js" defer></script>
1439

15-
<link rel="icon" type="image/svg" href="icon.svg">
16-
<link rel="stylesheet" href="./style.css">
17-
1840
</head>
1941

2042
<body class="bg-[#161616] text-[#ffffff] h-screen flex flex-col p-4 gap-4 overflow-hidden">
2143

22-
<div class="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[70] basis-0 overflow-hidden">
23-
24-
<div class="bg-[#1c1c1c] border-t border-[#2d2d2d] flex justify-between items-center">
25-
<div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full">
26-
27-
<section class="px-3 py-2">
28-
<p>editor</p>
29-
</section>
30-
31-
<section class="px-1.5 py-0.5 ml-auto">
32-
<button id="run" disabled class="flex items-center gap-2 px-2.5 py-0.5 bg-[#d97757] text-[#ffffff] rounded-md hover:bg-[#c16644] disabled:opacity-40 disabled:cursor-not-allowed transition">
33-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-2.5">
34-
<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
35-
</svg>
36-
37-
<span>Run</span>
38-
</button>
39-
</section>
40-
41-
</div>
42-
</div>
43-
44-
<div class="flex flex-1 code-font text-sm overflow-hidden">
45-
<pre id="ln" class="no-scrollbar pt-2 pb-2 text-[#525252] text-center bg-[#2d2d2d] select-none border-r border-[#2d2d2d] overflow-y-hidden flex-none w-[35px]"></pre>
46-
47-
<textarea id="ed"
48-
class="no-scrollbar w-full bg-transparent p-2 outline-none resize-none text-[#c2c2c2] placeholder-[#404040] overflow-y-auto"
49-
spellcheck="false"
50-
placeholder="Type your Python code here...">
51-
</textarea>
52-
</div>
53-
</div>
54-
55-
<div class="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[30] basis-0 overflow-hidden">
56-
57-
<div class="bg-[#1c1c1c] border-b border-[#2d2d2d] px-3 py-2 flex justify-between items-center">
58-
<div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full">
59-
<p>terminal</p>
60-
<span id="status" class="ml-auto text-[#525252]">loading wasm…</span>
44+
<h1 class="sr-only">Edge Python — Online Python 3.13 Playground</h1>
45+
46+
<main class="contents">
47+
<section aria-label="Code editor" class="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[70] basis-0 overflow-hidden">
48+
<header class="bg-[#1c1c1c] border-t border-[#2d2d2d] flex justify-between items-center">
49+
<div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full">
50+
<span class="px-3 py-2">
51+
<p aria-hidden="true">editor</p>
52+
</span>
53+
54+
<span class="px-1.5 py-0.5 ml-auto">
55+
<button id="run" type="button" disabled aria-label="Run Python code" class="ml-auto flex items-center gap-2 px-2.5 py-0.5 bg-[#d97757] text-[#ffffff] rounded-md hover:bg-[#c16644] disabled:opacity-40 disabled:cursor-not-allowed transition">
56+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-2.5" aria-hidden="true" focusable="false">
57+
<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
58+
</svg>
59+
<span>Run</span>
60+
</button>
61+
</span>
62+
</header>
63+
64+
<div class="flex flex-1 code-font text-sm overflow-hidden">
65+
<pre id="ln" aria-hidden="true" class="no-scrollbar pt-2 pb-2 text-[#525252] text-center bg-[#2d2d2d] select-none border-r border-[#2d2d2d] overflow-y-hidden flex-none w-[35px]"></pre>
66+
67+
<label for="ed" class="sr-only">Python source code</label>
68+
<textarea id="ed"
69+
class="no-scrollbar w-full bg-transparent p-2 outline-none resize-none text-[#c2c2c2] placeholder-[#404040] overflow-y-auto"
70+
spellcheck="false"
71+
autocomplete="off"
72+
autocorrect="off"
73+
autocapitalize="off"
74+
aria-label="Python source code editor"
75+
placeholder="Type your Python code here..."></textarea>
6176
</div>
62-
</div>
63-
64-
<div id="term" class="code-font text-sm p-3 text-[#c2c2c2] flex-1 overflow-y-auto no-scrollbar whitespace-pre-wrap"></div>
65-
</div>
77+
</section>
78+
79+
<section aria-label="Output terminal" aria-live="polite" class="w-full bg-[#222222] border border-[#2d2d2d] rounded-md flex flex-col flex-[30] basis-0 overflow-hidden">
80+
<header class="bg-[#1c1c1c] border-b border-[#2d2d2d] px-3 py-2 flex justify-between items-center">
81+
<div class="text-[12px] tracking-tighter font-semibold text-zinc-500 flex items-center gap-1 w-full">
82+
<h2 class="sr-only">Terminal</h2>
83+
<p aria-hidden="true">terminal</p>
84+
<span id="status" role="status" class="ml-auto text-[#525252]">loading wasm…</span>
85+
</div>
86+
</header>
87+
88+
<output id="term" class="code-font text-sm p-3 text-[#c2c2c2] flex-1 overflow-y-auto no-scrollbar whitespace-pre-wrap block"></output>
89+
</section>
90+
</main>
6691

6792
</body>
6893

0 commit comments

Comments
 (0)