Craig Erskine
224 lines
16 KiB
HTML
Executable File
224 lines
16 KiB
HTML
Executable File
<!doctype html>
|
||
<html lang="en">
|
||
<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="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
|
||
<link href="css/main.css" rel="stylesheet" />
|
||
</head>
|
||
<body class="bg-black text-grey-lightest text-sm leading-normal text-shadow 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');">
|
||
<header class="mb-32">
|
||
<div class="mx-auto max-w-xl relative">
|
||
<h3 class="logo m-0 h-32 lg:h-48 flex items-center text-center justify-center relative z-10"><a href="/"><img src="img/logo.png" alt="OpenEmu" /></a></h3>
|
||
<nav class="w-full font-bold text-lg lg:absolute lg:pin-t z-20">
|
||
<ul class="list-reset lg:h-48 flex items-center justify-center">
|
||
<li class="mx-2 lg:mx-0"><a href="#overview" class="overview-nav text-red hover:text-red-light focus:text-red-light">Overview</a></li>
|
||
<li class="mx-2 lg:mx-0 lg:ml-24"><a href="http://github.com/OpenEmu" class="text-red hover:text-red-light focus:text-red-light">GitHub</a></li>
|
||
<li class="mx-2 lg:mx-0 lg:ml-auto"><a href="http://github.com/OpenEmu/OpenEmu/wiki" class="text-red hover:text-red-light focus:text-red-light">Help</a></li>
|
||
<li class="mx-2 lg:mx-0 lg:ml-24"><a href="#donate-modal" class="donate-nav text-red hover:text-red-light focus:text-red-light">Donate</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<main>
|
||
<section id="overview" class="overview py-12">
|
||
<div class="mx-auto px-4 lg:px-0 max-w-xl lg:flex">
|
||
<div class="lg:mr-16 pt-3 lg:w-1/3">
|
||
<h1 class="text-xl font-normal text-white">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="list-reset mb-8 text-center lg:text-left">
|
||
<li>
|
||
<p class="flex items-center justify-center lg:justify-start">
|
||
<a :href="download.latest" class="py-3 px-8 bg-red bg-btn hover:bg-red-light focus:bg-red-light text-white font-bold inline-block rounded shadow-btn">Download Now</a>
|
||
<b class="ml-4 text-xs opacity-25">v{{ details.version }}</b>
|
||
</p>
|
||
<ul class="mb-1 list-reset text-xs font-bold">
|
||
<li class="mr-4 inline-block"><a :href="download.experimental" class="text-red hover:text-red-light focus:text-red-light"><i class="fa fa-fw fa-download text-white opacity-50"></i> Experimental</a></li>
|
||
<li class="inline-block"><a href="files/press-pack-v2.zip" class="text-red hover:text-red-light focus:text-red-light"><i class="fa fa-fw fa-download text-white opacity-50"></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-white hover:text-grey-dark focus:text-grey-dark font-bold">special instructions</a> for opening.
|
||
</small>
|
||
</li>
|
||
</ul>
|
||
<ul class="gallery intro-th list-reset 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" :class="{'opacity-50': !img.active}" />
|
||
<i v-if="img.active" class="ring -m-3px absolute pin rounded-sm shadow-ring transition"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="flex-1 relative">
|
||
<div class="gallery lg:w-screen text-center lg:text-left lg:absolute lg:pin">
|
||
<img src="img/intro-nes-grid.png" alt="screenshot" class="intro-img lg:sticky pin-t" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="controls" class="controls h-800 bg-repeat-x relative overflow-hidden" style="background-image: url('img/wood.jpg');">
|
||
<div class="mx-auto max-w-940 lg:flex justify-center lg:justify-end relative">
|
||
<div class="controls-prefs mx-auto lg:mx-0 mb-4 pt-16 lg:pt-0 max-w-xs lg:max-w-full text-center lg:text-left lg:absolute z-20 opacity-0 transition-slow"><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-black text-shadow-white relative z-20 opacity-0 transition-slow">
|
||
<h3 class="mb-1 pt-16 text-xl transition-slow">Take Control</h3>
|
||
<h4 class="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-white focus:text-white">Learn More <i class="fa fa-fw fa-chevron-right" role="presentation" aria-hidden="true"></i></a></p>
|
||
</div>
|
||
<div class="controller controller-sms lg:block"><img src="img/controls-sms.png" alt="sega master system" /></div>
|
||
<div class="controller controller-gb lg:block"><img src="img/controls-gb.png" alt="gameboy" /></div>
|
||
<div class="controller controller-nes lg:block"><img src="img/controls-nes.png" alt="nes" /></div>
|
||
<div class="controller controller-snes lg:block"><img src="img/controls-snes.png" alt="snes" /></div>
|
||
<div class="controller controller-gba lg:block"><img src="img/controls-gba.png" alt="gameboy advance" /></div>
|
||
<div class="controller controller-md lg:block"><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-sm text-center">
|
||
<h3 class="mb-0 text-white text-xl">Time To Get Organized</h3>
|
||
<h5 class="text-white 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 max-w-xl">
|
||
<div class="lg:flex justify-between text-center">
|
||
<div class="mx-auto lg:mx-0 max-w-xxs">
|
||
<p class="mb-8 py-2 px-4 inline-block bg-red-dark bg-btn text-black text-lg rounded shadow-lg text-shadow-white shadow-btn">1</p>
|
||
<p><img src="img/org-step1.jpg" alt="step 1" class="img-border" /></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-xxs">
|
||
<p class="mb-8 py-2 px-4 inline-block bg-red-dark bg-btn text-black text-lg rounded shadow-lg text-shadow-white shadow-btn">2</p>
|
||
<p><img src="img/org-step2.jpg" alt="step 1" class="img-border" /></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-xxs">
|
||
<p class="mb-8 py-2 px-4 inline-block bg-red-dark bg-btn text-black text-lg rounded shadow-lg text-shadow-white shadow-btn">3</p>
|
||
<p><img src="img/org-step3.jpg" alt="step 1" class="img-border" /></p>
|
||
<p class="px-2">Your game is now neatly organised 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 max-w-xl">
|
||
<h3 class="mb-1 text-center lg:text-left">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-sm">
|
||
<ul class="list-reset 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 text-base">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="list-reset flex items-start">
|
||
<li class="mr-4"><img src="img/feature-controls.png" alt="feature" /></li>
|
||
<li class="flex-1">
|
||
<h4 class="mb-1 text-base">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 list-reset mb-4 text-xs lg:text-sm">
|
||
<li v-for="control in controls" class="p-1 border-b border-grey-darkest"><b>{{ control.name }}</b></li>
|
||
</ul>
|
||
<a href="https://github.com/OpenEmu/OpenEmu/wiki#supported-controllers" class="font-bold text-white hover:text-grey-dark focus:text-grey-dark">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-sm">
|
||
<ul class="list-reset flex items-start">
|
||
<li class="mr-4"><img src="img/feature-chip.png" alt="feature" /></li>
|
||
<li class="flex-1">
|
||
<h4 class="mb-1 text-base">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 list-reset mb-4 text-xs lg:text-sm">
|
||
<li v-for="system in systems" class="p-1 border-b border-grey-darkest 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-white hover:text-grey-dark focus:text-grey-dark">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 max-w-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" /></a></div>
|
||
<ul class="list-reset mb-0 flex justify-center text-grey-dark text-xl font-bold">
|
||
<li>Sitemap
|
||
<ul class="list-reset pt-2 text-base">
|
||
<li class="lg:py-2"><a href="#overview" class="overview-nav text-grey-darker hover:text-white focus:text-white">Overview</a></li>
|
||
<li class="lg:py-2"><a href="http://github.com/OpenEmu" class="text-grey-darker hover:text-white focus:text-white">GitHub</a></li>
|
||
<li class="lg:py-2"><a href="http://github.com/OpenEmu/OpenEmu/wiki" class="text-grey-darker hover:text-white focus:text-white">Help</a></li>
|
||
<li class="lg:py-2"><a href="#donate-modal" class="donate-nav text-grey-darker hover:text-white focus:text-white">Donate</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="ml-4 lg:ml-16">Download
|
||
<ul class="list-reset pt-2 text-base">
|
||
<li class="lg:py-2"><a href="http://github.com/OpenEmu/OpenEmu/releases/download/v2.0.6.1/OpenEmu_2.0.6.1.zip" class="text-grey-darker hover:text-white focus:text-white">Application</a></li>
|
||
<li class="lg:py-2"><a href="/files/press-pack-v2.zip" class="text-grey-darker hover:text-white focus:text-white">Press Pack</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="ml-4 lg:ml-16">Social
|
||
<ul class="list-reset pt-2 text-base">
|
||
<li class="lg:py-2"><a href="http://twitter.com/openemu" class="text-grey-darker hover:text-white focus:text-white">Twitter</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
|
||
<div id="donate-modal" class="modal p-4" aria-hidden="true">
|
||
<div class="modal-content text-grey-darker text-shadow-none">
|
||
<h3 class="m-0 text-center">Donate to OpenEmu</h3>
|
||
<ul class="list-reset 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-grey-lightest hover:border-red-dark focus:border-red-dark block text-xxs text-grey-darker hover:text-white focus:text-white bg-transparent hover:bg-red-light focus:bg-red-light rounded-lg" :title="item.name">
|
||
<img :src="'img/'+ item.img" class="svg mb-1 px-16 w-full h-auto fill-current" /><br />
|
||
{{ item.caption }}
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<p class="text-center"><img src="img/qr.png" alt=""></p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script src="./js/main.js"></script>
|
||
<script src="data.js"></script>
|
||
</body>
|
||
</html> |