-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
executable file
·305 lines (298 loc) · 24.7 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
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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!doctype html>
<html lang="en" class="bg-gray-900" hidden>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OpenEmu - Multiple Video Game System</title>
<meta name="description" content="Console and Arcade video game emulator for macOS" />
<meta name="keywords" content="openemu, console emulator, arcade emulator" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/favicons/favicon-152.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/favicons/favicon-144.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/favicons/favicon-120.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/favicons/favicon-114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/favicons/favicon-72.png" />
<link rel="apple-touch-icon-precomposed" href="img/favicons/favicon-57.png" />
<link rel="icon" href="favicon.ico" sizes="16x6 32x32 48x48" />
<!-- Facebook -->
<meta property="og:title" content="OpenEmu" />
<meta property="og:site_name" content="OpenEmu - Multiple Video Game System" />
<meta property="og:url" content="http://openemu.org/" />
<meta property="og:type" content="site" />
<meta property="og:description" content="Console and Arcade video game emulator for macOS." />
<link href="https://fonts.gstatic.com" rel="preconnect" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/font-awesome@^4.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:9999;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(50,50,50,.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:768px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
</style>
</head>
<body class="bg-gray-900 text-gray-200 text-sm overflow-y-scroll overflow-x-hidden" style="background-image: url('img/grunge.png');">
<div class="page bg-no-repeat bg-top" style="background-image: url('img/retro-grid.jpg');" v-cloak>
<header class="mb-32">
<div class="mx-auto px-4 max-w-screen-xl relative">
<nav class="w-full font-bold text-lg">
<ul class="lg:h-48 flex flex-wrap items-center justify-center lg:justify-between">
<li class="logo w-full lg:w-auto lg:flex-1 text-center lg:order-3"><a href="/" class="inline-block hover:(-translate-y-[3px]) focus:(-translate-y-[3px]) transition duration-300 transform"><img src="img/logo.png" alt="OpenEmu" /></a></li>
<li class="mx-2 lg:mx-0 lg:order-1"><a href="#overview" class="overview-nav text-red-500 hover:text-red-400 focus:text-red-400 transition duration-300">Overview</a></li>
<li class="mx-2 lg:mx-24 lg:order-2"><a href="http://github.com/OpenEmu" class="text-red-500 hover:text-red-400 focus:text-red-400 transition duration-300">GitHub</a></li>
<li class="mx-2 lg:mx-24 lg:order-4"><a href="http://github.com/OpenEmu/OpenEmu/wiki" class="text-red-500 hover:text-red-400 focus:text-red-400 transition duration-300">Help</a></li>
<li class="mx-2 lg:mx-0 lg:order-5"><a href="#donate-modal" class="donate-nav text-red-500 hover:text-red-400 focus:text-red-400 transition duration-300">Donate</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="overview" class="overview py-12">
<div class="mx-auto px-4 max-w-screen-xl lg:flex">
<div class="mx-auto lg:mr-16 pt-3 lg:w-1/3 max-w-md">
<h1 class="mb-4 text-xl font-bold text-gray-100">OpenEmu is about to change the world of video game emulation. One console at a time...</h1>
<p>For the first time, the 'It just works' philosophy now extends to open source video game emulation on the Mac. With OpenEmu, it is extremely easy to add, browse, organize and with a compatible gamepad, play those favorite games (ROMs) you already own.</p>
<ul class="mb-8 text-center lg:text-left">
<li>
<p class="mb-4 flex items-center justify-center lg:justify-start">
<a :href="download.latest" class="py-3 px-8 bg-gradient-to-b from-red-400 to-transparent bg-red-500 bg-btn hover:bg-red-400 focus:bg-red-400 text-gray-100 font-bold inline-block rounded shadow-btn transition-all duration-300">Download Now</a>
<b class="ml-4 text-xs"><a :href="'./rnotes/' + details.version + '.html'" class="text-current hover:text-gray-100 focus:text-gray-100 opacity-25 hover:opacity-100 focus:opacity-100 transition duration-300" title="Release Notes">v{{ details.version }}</a></b>
</p>
<ul class="mb-2 text-xs font-bold">
<li class="mr-4 inline-block"><a :href="download.experimental" class="text-red-500 hover:text-red-400 focus:text-red-400"><i class="fa fa-fw fa-download text-gray-100 opacity-50 transition duration-300"></i> Experimental</a></li>
<li class="inline-block"><a href="files/press-pack-v2.zip" class="text-red-500 hover:text-red-400 focus:text-red-400"><i class="fa fa-fw fa-download text-gray-100 opacity-50 transition duration-300"></i> Press Pack</a></li>
</ul>
</li>
<li>
<small class="block opacity-75">
For macOS (OS X) {{ details.req }} or above.<br />
Please read <a href="https://support.apple.com/kb/PH25088?locale=en_US" class="text-gray-100 hover:text-gray-600 focus:text-gray-600 font-bold transition duration-300">special instructions</a> for opening.
</small>
</li>
</ul>
<ul class="gallery intro-th mb-8 -ml-5 lg:mb-0 flex lg:flex-wrap">
<li v-for="img in intro" class="lg:mb-5 ml-5 lg:w-auto relative">
<a href="#" :class="{ active: img.active }" :data-src="'img/'+ img.main">
<img :src="'img/'+ img.th" alt="screenshot thumbnail" class="img-border transition duration-300" :class="{'opacity-50': !img.active}" />
<i v-if="img.active" class="-m-[3px] absolute inset-0 shadow-ring rounded-sm transition duration-300"></i>
</a>
</li>
</ul>
</div>
<div class="flex-1 relative">
<div class="gallery lg:w-screen text-center lg:text-left lg:absolute lg:inset-0">
<img src="img/intro-nes-grid.png" alt="screenshot" class="intro-img lg:sticky top-0" />
</div>
</div>
</div>
</section>
<section id="controls" class="controls pt-16 lg:pt-0 h-[800px] bg-repeat-x relative overflow-hidden" style="background-image: url('img/wood.jpg');">
<div class="mx-auto max-w-[940px] lg:flex justify-center lg:justify-end relative">
<div class="controls-prefs mx-auto mb-4 lg:(mx-0 pt-0 max-w-full text-left absolute) max-w-xs text-center top-[87px] -left-[216px] z-20 opacity-0 rounded-[10px] shadow-prefs transition duration-1000"><img src="img/controls-prefs.png" alt="prefs" /></div>
<div class="controls-intro mx-auto lg:mx-0 py-0 lg:py-32 px-4 lg:px-2 max-w-xs text-gray-900 relative z-20 opacity-0 transition duration-1000">
<h3 class="mb-1 pt-16 text-xl font-bold transition duration-300">Take Control</h3>
<h4 class="mb-4 text-lg font-normal">Up, Up, Down, Down, Left, Right, Left, Right, B, A, Start</h4>
<p>Why restrict yourself to just the keyboard? Although it is not a requirement, OpenEmu is best used with a peripheral gamepad or controller to interact with your games.</p>
<p>Via the Controller Preferences, simply auto- magically assign buttons with any generic HID compliant USB or Bluetooth game controller.</p>
<p>Plug in your gamepad, select it from the list… and press start to begin your adventures!</p>
<p><a href="https://github.com/OpenEmu/OpenEmu/wiki#supported-controllers" class="font-bold text-current hover:text-gray-100 focus:text-gray-100 transition duration-300">Learn More <i class="fa fa-fw fa-chevron-right" role="presentation" aria-hidden="true"></i></a></p>
</div>
<div class="controller controller-sms hidden lg:block absolute top-0 -left-[548px] transition-all duration-1000"><img src="img/controls-sms.png" alt="sega master system" /></div>
<div class="controller controller-gb hidden lg:block absolute top-[350px] -left-[463px] transition-all duration-1000"><img src="img/controls-gb.png" alt="gameboy" /></div>
<div class="controller controller-nes hidden lg:block absolute top-0 -left-[181px] transition-all duration-1000"><img src="img/controls-nes.png" alt="nes" /></div>
<div class="controller controller-snes hidden lg:block absolute top-0 right-[200px] transition-all duration-1000"><img src="img/controls-snes.png" alt="snes" /></div>
<div class="controller controller-gba hidden lg:block absolute top-[241px] right-[137px] transition-all duration-1000"><img src="img/controls-gba.png" alt="gameboy advance" /></div>
<div class="controller controller-md hidden lg:block absolute -top-[64px] -right-[137px] transition-all duration-1000"><img src="img/controls-md.png" alt="mega drive" /></div>
</div>
</section>
<section id="process" class="process bg-repeat-x bg-top" style="background-image: url('img/grunge-top.png');">
<div class="py-32 px-4 lg:px-0 bg-repeat-x bg-bottom" style="background-image: url('img/grunge-bot.png');">
<div class="mx-auto pb-12 max-w-screen-sm text-center">
<h3 class="mb-0 text-gray-100 text-xl font-bold">Time To Get Organized</h3>
<h5 class="mb-4 text-gray-100 text-base font-normal">Everything in its place. Automatically</h5>
<p>We combine some of the best emulation projects together into one beautiful unified application that simply organizes your personal games library. Watch as you drop in backups of your games (ROMs) & they are gracefully added to their appropriate library along with original box art!</p>
</div>
<div class="mx-auto px-4 max-w-screen-lg">
<div class="lg:flex justify-between text-center">
<div class="mx-auto lg:mx-0 max-w-[260px]">
<p class="mb-8 py-2 px-4 inline-block bg-red-600 bg-btn text-gray-900 text-lg rounded shadow-lg text-shadow-gray-100 shadow-btn">1</p>
<p><img src="img/org-step1.jpg" alt="step 1" /></p>
<p class="mb-12 lg:mb-0 px-2">Drag n’ Drop a backup game (ROM) from your Mac desktop.</p>
</div>
<div class="mx-auto lg:mx-0 max-w-[260px]">
<p class="mb-8 py-2 px-4 inline-block bg-red-600 bg-btn text-gray-900 text-lg rounded shadow-lg text-shadow-gray-100 shadow-btn">2</p>
<p><img src="img/org-step2.jpg" alt="step 1" /></p>
<p class="mb-12 lg:mb-0 px-2">OpenEmu 'scans' your game and begins the organisation process.</p>
</div>
<div class="mx-auto lg:mx-0 max-w-[260px]">
<p class="mb-8 py-2 px-4 inline-block bg-red-600 bg-btn text-gray-900 text-lg rounded shadow-lg text-shadow-gray-100 shadow-btn">3</p>
<p><img src="img/org-step3.jpg" alt="step 1" /></p>
<p class="px-2">Your game is now neatly organized and you are ready to start playing!</p>
</div>
</div>
</div>
</div>
</section>
<section id="features" class="features py-32 px-4 lg:px-0 bg-repeat-x bg-bottom" style="background-image: url('img/grunge-bot.png');">
<div class="mx-auto px-4 max-w-screen-lg">
<h3 class="mb-1 text-lg text-center lg:text-left font-bold">Features Overview</h3>
<p class="mb-16 text-center lg:text-left">An exciting world of video games is within your grasp.</p>
<div class="lg:flex justify-between">
<div class="mx-auto lg:mx-0 lg:pr-12 max-w-lg flex-1">
<ul class="mb-16 flex items-start">
<li class="mr-4"><img src="img/feature-book.png" alt="feature" /></li>
<li class="flex-1">
<h4 class="mb-1 font-bold">Library</h4>
<p>One of the standout features of OpenEmu is how it organizes all your games into one unique, unified games library. Watch as backups of the games (ROMs) you already own are gracefully added to their appropriate library and box art is magically added. You can even create your own ‘collections’ mix and matched from different consoles.</p>
</li>
</ul>
<ul class="mb-16 flex items-start">
<li class="mr-4"><img src="img/feature-controls.png" alt="feature" /></li>
<li class="flex-1">
<h4 class="mb-1 font-bold">Controls & Controllers</h4>
<p>Any generic HID compliant USB or Bluetooth game controller should work with OpenEmu out of the box. OpenEmu now automatically maps controls for the following recognized devices in our database:</p>
<ul class="feature-controls mb-4 divide(y gray-500 opacity-25) text-xs lg:text-sm">
<li v-for="control in controls" class="p-1"><b>{{ control.name }}</b></li>
</ul>
<a href="https://github.com/OpenEmu/OpenEmu/wiki#supported-controllers" class="font-bold text-gray-100 hover:text-gray-600 focus:text-gray-600 transition duration-300">Learn More <i class="fa fa-fw fa-chevron-right" role="presentation" aria-label="hidden"></i></a>
</li>
</ul>
</div>
<div class="mx-auto lg:mx-0 lg:pl-12 max-w-lg flex-1">
<ul class="flex items-start">
<li class="mr-4"><img src="img/feature-chip.png" alt="feature" /></li>
<li class="flex-1">
<h4 class="mb-1 font-bold">Cores & Systems</h4>
<p>OpenEmu is modular, and thanks to the work of other great open source projects, it can emulate a wide variety of video game systems (we call them 'cores'). OpenEmu emulates the following systems:</p>
<ul class="feature-systems mb-4 divide(y gray-500 opacity-25) text-xs lg:text-sm">
<li v-for="system in systems" class="p-1 flex items-center justify-between">
<b title="System">{{ system.name }}</b>
<small class="opacity-50" title="Core">{{ system.core }}</small>
</li>
</ul>
<a href="https://github.com/OpenEmu/OpenEmu/wiki#supported-systems" class="font-bold text-gray-100 hover:text-gray-600 focus:text-gray-600 transition duration-300">Learn More <i class="fa fa-fw fa-chevron-right" role="presentation" aria-label="hidden"></i></a>
</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<footer class="py-32 px-4 lg:px-0">
<div class="mx-auto px-4 max-w-screen-xl lg:flex">
<div class="mb-8 lg:mb-0 flex-1 text-center lg:text-left"><a href="/"><img src="img/foot-logo.png" alt="OpenEmu" class="inline-block" /></a></div>
<ul class="mb-0 flex justify-center text-gray-600 text-xl font-bold">
<li>Sitemap
<ul class="pt-2 text-base">
<li class="lg:py-2"><a href="#overview" class="overview-nav text-gray-700 hover:text-gray-100 focus:text-gray-100 transition duration-300">Overview</a></li>
<li class="lg:py-2"><a href="http://github.com/OpenEmu" class="text-gray-700 hover:text-gray-100 focus:text-gray-100 transition duration-300">GitHub</a></li>
<li class="lg:py-2"><a href="http://github.com/OpenEmu/OpenEmu/wiki" class="text-gray-700 hover:text-gray-100 focus:text-gray-100 transition duration-300">Help</a></li>
<li class="lg:py-2"><a href="#donate-modal" class="donate-nav text-gray-700 hover:text-gray-100 focus:text-gray-100 transition duration-300">Donate</a></li>
</ul>
</li>
<li class="ml-4 lg:ml-16">Download
<ul class="pt-2 text-base">
<li class="lg:py-2"><a :href="download.latest" class="text-gray-700 hover:text-gray-100 focus:text-gray-100 transition duration-300">Application</a></li>
<li class="lg:py-2"><a href="/files/press-pack-v2.zip" class="text-gray-700 hover:text-gray-100 focus:text-gray-100 transition duration-300">Press Pack</a></li>
</ul>
</li>
<li class="ml-4 lg:ml-16">Social
<ul class="pt-2 text-base">
<li class="lg:py-2"><a href="http://twitter.com/openemu" class="text-gray-700 hover:text-gray-100 focus:text-gray-100 transition duration-300">Twitter</a></li>
</ul>
</li>
</ul>
</div>
</footer>
<div id="donate-modal" class="modal p-4" aria-hidden="true">
<div class="modal-content text-gray-700 text-shadow-none">
<h3 class="m-0 font-bold text-lg text-center">Donate to OpenEmu</h3>
<ul class="mx-auto pt-6 sm:flex flex-wrap text-center">
<li v-for="item in donate" class="mb-4 px-4 sm:w-1/2 flex items-center">
<a :href="item.url" class="p-2 border border-gray-200 hover:border-red-600 focus:border-red-600 block text-xxs text-gray-700 hover:text-gray-100 focus:text-gray-100 bg-transparent hover:bg-red-400 focus:bg-red-400 rounded-lg transition duration-300" :title="item.name">
<img :src="'img/'+ item.img" class="svg mb-1 px-16 w-full h-auto fill-current" /><br />
<small>{{ item.caption }}</small>
</a>
</li>
</ul>
<p><img src="img/qr.png" alt="QR Code" class="mx-auto" /></p>
</div>
</div>
</div>
<script src="./js/twind.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/main.js"></script>
<script src="data.js"></script>
<script>
twind.setup({
mode: "silent",
theme: {
screens: {
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
},
extend: {
colors: {
gray: {
50: '#EFEFEF',
100: '#EFF3FD',
200: '#D1DDF4',
300: '#F1F5F8',
400: '#DAE1E7',
500: '#B8C2CC',
600: '#919090',
700: '#555555',
800: '#3D4852',
900: '#101010',
},
red: {
50: '#F5EAEA',
100: '#F5EAEA',
200: '#F5EAEA',
300: '#D7A9AD',
400: '#D12733',
500: '#9C2931',
600: '#8C252C',
700: '#5E191D',
800: '#2F0C0F',
900: '#2F0C0F',
},
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
},
boxShadow: {
'btn': 'inset 0 1px 0 rgba(255,255,255,0.25)',
'prefs': '0 0 0 1px rgba(0,0,0,.2), 0 0 40px rgba(0,0,0,.75)',
'ring': 'inset 0 1px 0 rgba(255,255,255,0.25), inset 0 0 0 4px #9C2931, inset 0 0 0 5px rgba(0,0,0,0.5), inset 0 0 12px #000, 0 0 6px #000',
},
},
},
})
twind.tw(() => ({
'@global': {
'a:not([class])': { '@apply': 'text-red-500 hover:(text-red-400 underline) focus:(text-red-400 underline) dark:(text-gray-400 hover:text-gray-300 focus:text-gray-300) font-bold transition duration-300', },
'p:not([class]),ul:not([class]),ol:not([class]),table:not([class])': { '@apply': 'mb-5 border-current', },
'ul:not([class]) ul:not([class]),ul:not([class]) ol:not([class]),ol:not([class]) ol:not([class]),ol:not([class]) ul:not([class])': { '@apply': 'mb-0', },
'ul:not([class])': { '@apply': 'ml-5 list-disc', },
'ol:not([class])': { '@apply': 'ml-5 list-decimal', },
'hr:not([class])': { '@apply': 'mb-5 border-current opacity-25', },
'h1:not([class]),h2:not([class]),h3:not([class]),h4:not([class]),h5:not([class]),h6:not([class])': { '@apply': 'mb-5 text-4xl text-gray-900 dark:text-gray-100 font-bold', },
'h2:not([class])': { '@apply': 'text-3xl text-gray-800 dark:text-gray-200', },
'h3:not([class])': { '@apply': 'text-2xl text-gray-700 dark:text-gray-300', },
'h4:not([class])': { '@apply': 'text-xl text-gray-600 dark:text-gray-400', },
'h5:not([class])': { '@apply': 'text-lg text-gray-500 dark:text-gray-500', },
'h6:not([class])': { '@apply': 'text-base text-gray-400 dark:text-gray-600', },
'.explode .controller-sms': { 'left': '-750px' },
'.explode .controller-gb': { 'left': '-532px' },
'.explode .controller-snes': { 'right': '-228px' },
'.explode .controller-gba': { 'right': '-505px' },
'.explode .controller-md': { 'right': '-764px' },
'.modal': { '@apply': 'hidden z-[9999]', },
':root [v-cloak]': { '@apply': 'hidden', },
}
}))
twindObserve.observe(document.documentElement);
document.documentElement.removeAttribute('hidden');
</script>
</body>
</html>