Craig - qrayg
305 lines
25 KiB
HTML
Executable File
305 lines
25 KiB
HTML
Executable File
<!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> |