-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (69 loc) · 3.66 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Program with Pokémon friends!">
<meta name="apple-mobile-web-app-title" content="Pokémon Programming">
<meta property="og:title" content="Pokémon Programming">
<meta property="og:type" content="website">
<meta property="og:image" content="/pokemon-programming/pika/images/pm0025_00_Mouth1.png">
<meta property="og:site_name" content="Pokémon Programming">
<meta property="og:description" content="Program with Pokémon friends!">
<meta property="og:locale" content="en_US">
<!-- IP theft from big companies is fine, probably. -->
<link rel="shortcut icon" href="PTVLogoBG.svg">
<script type="module" src="/src/main.ts"></script>
<title>Pokémon Programming</title>
</head>
<body class="w-screen h-screen bg-editor-background text-white">
<div id="about" class="w-full h-full flex bg-black/50 justify-center items-center fixed z-50">
<div class="bg-white max-w-[50rem] mx-8 p-2 box rounded-lg">
<div class="p-4 text-black font-[Pokemon] flex gap-2 flex-col framed box-border">
<h1 class="text-sm md:text-3xl text-center">Pokémon Programming</h1>
<p class="text-xs md:text-sm text-center">
Welcome to Pokémon programming!
<br />
<br />
On the left are the instructions for your first programming challenge.
On the right is a code editor to write your solution for the challenge.
But most importantly, a cute Pokémon friend is here too!
Do your best on the programming challenges to cheer up your Pokémon pal.
</p>
</div>
</div>
</div>
<div class="w-full h-full flex flex-col gap-4 p-8">
<div class="flex justify-between">
<div id="title" class="flex gap-2 items-center cursor-pointer group">
<img class="h-8 md:h-12 bg-white p-1 rounded-lg" src="PTVLogo.svg" alt="pokemon">
<button class="text-left md:text-4xl font-bold group-hover:underline">Pokémon Programming!</button>
</div>
<div class="flex gap-2 items-center">
<a target="_blank" href="https://github.com/KooShnoo/pokemon-programming">
<img class="h-6 md:h-8 hover:bluified transition-[filter] duration-75" src="github.svg" alt="github">
</a>
<a target="_blank" href="https://www.linkedin.com/in/ishan-chawla/">
<img class="h-6 md:h-8 hover:bluified transition-[filter] duration-75" src="linkedin.svg" alt="github">
</a>
</div>
</div>
<div class="flex-grow flex flex-col md:flex-row gap-8 overflow-scroll">
<div class="md:w-1/2 flex flex-col gap-8">
<div id="instructions" class="p-4 border-2 border-widget-border rounded-lg flex-1 flex gap-2 flex-col overflow-scroll">
<h1>Loading...</h1>
<noscript>Please enable Javascript.</noscript>
</div>
<div class="bg-[#f85149]/60 max-h-[25%] p-2 rounded-lg flex items-center justify-center">
<div id="errors" class="h-full overflow-scroll"></div>
</div>
<button id="next" class="bg-green-600/50 p-2 rounded-lg hover:bg-green-800/50" hidden>Next Problem</button>
</div>
<div class="min-h-[50vh] flex-1 relative">
<div id="three" class="w-full h-full absolute top-0 left-0 pointer-events-none z-20"></div>
<div id="editor" class="w-full h-full absolute top-0 left-0 border-2 border-widget-border rounded-lg overflow-hidden"></div>
</div>
</div>
</div>
</body>
</html>