This repository has been archived by the owner on Sep 7, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
concept.html
65 lines (65 loc) · 3.8 KB
/
concept.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
<!-- NEEDS TAILWINDCSS 2.0 WITH ALL COLORS -->
<div class="bg-warmGray-100 h-full" >
<div class="p-4 mx-auto sm:p-8 min-h-screen max-w-3xl">
<h1 class="mt-12 text-3xl font-bold font-mono select-none cursor-default" style="font-family: Inter, 'Segoe UI Emoji'">🕹 Emojigamble</h1>
<p class="font-serif italic max-w-2xl my-6">Emojigamble is a fun collection of traditional paper games like TicTacToe, 4wins and Battleship, but <b>instead of using X and O you play with emojis</b>. Each emoji has either a passive or active ability, which can be used during or at the end of each game.<br/> Have fun! <span class="not-italic">🤓😜😎</span></p>
<div class="mt-12" style="font-family: Inter, 'Segoe UI Emoji'">
<pre class="mb-2 ml-5 select-none cursor-default" style="font-family: monospace, 'Segoe UI Emoji'">🎙 PUBLIC GAMES</pre>
<div class="grid sm:grid-cols-2 md:grid-cols-6 max-w-3xl">
<div class="md:col-span-2 m-1 px-2 py-4 cursor-pointer shadow-sm hover:shadow-md bg-white transition duration-200 flex rounded-lg">
<div class="bg-green-600 my-auto sm:mb-auto ml-3 mr-2 rounded-full h-4 w-4">
<div class="h-4 w-4 animate-ping rounded-full bg-green-500"></div>
</div>
<div class="ml-1">
<p class="font-bold">🎲 TicTacToe</p>
</div>
</div>
<div class="md:col-span-2 m-1 px-2 py-4 cursor-pointer shadow-sm hover:shadow-md bg-white transition duration-200 flex rounded-lg">
<div class="bg-green-600 my-auto sm:mb-auto ml-3 mr-2 rounded-full h-4 w-4">
<div class="h-4 w-4 animate-ping rounded-full bg-green-500"></div>
</div>
<div class="ml-1">
<p class="font-bold">⛵️ Battleship</p>
</div>
</div>
<div class="md:col-span-2 m-1 px-2 py-4 cursor-pointer shadow-sm hover:shadow-md bg-white transition duration-200 flex rounded-lg">
<div class="bg-green-600 my-auto sm:mb-auto ml-3 mr-2 rounded-full h-4 w-4">
<div class="h-4 w-4 animate-ping rounded-full bg-green-500"></div>
</div>
<div class="ml-1">
<p class="font-bold">🏆 4wins</p>
</div>
</div>
<div class="md:col-span-3 m-1 px-2 py-4 cursor-pointer shadow-sm hover:shadow-md bg-white transition duration-200 flex rounded-lg">
<div class="bg-teal-500 my-auto sm:mb-auto ml-3 mr-2 rounded-full h-4 w-4">
<div class="h-4 w-4 animate-ping rounded-full bg-teal-400"></div>
</div>
<div class="ml-1">
<p class="font-normal">👁 Spectate</p>
</div>
</div>
<div class="sm:col-span-2 md:col-span-3 m-1 px-2 py-4 cursor-pointer shadow-sm hover:shadow-md bg-white transition duration-200 flex rounded-lg">
<div class="bg-blue-500 my-auto sm:mb-auto ml-3 mr-2 rounded-full h-4 w-4">
<div class="h-4 w-4 animate-ping rounded-full bg-blue-400"></div>
</div>
<div class="ml-1">
<p class="font-normal">🙈 Random game</p>
</div>
</div>
</div>
</div>
<div class="mt-8" style="font-family: Inter, 'Segoe UI Emoji'">
<pre class="mb-2 ml-5 select-none cursor-default" style="font-family: monospace, 'Segoe UI Emoji'">🎭 PRIVATE GAMES</pre>
<div class="max-w-3xl">
<div class="m-1 px-2 py-4 cursor-pointer shadow-sm hover:shadow-md bg-white transition duration-200 flex rounded-lg">
<div class="bg-amber-500 my-auto sm:mb-auto ml-3 mr-2 rounded-full h-4 w-4">
<div class="h-4 w-4 animate-ping rounded-full bg-amber-400"></div>
</div>
<div class="ml-1">
<p class="font-normal">🌳 New private Game</p>
</div>
</div>
</div>
</div>
</div>
</div>