<!-- Keyword = Genesis Augmented Reality, Genesis AR --><!-- Subkeywords = Augmented Reality Games --><!DOCTYPE HTML><html lang="en-US"> <head> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-T9JTTMW');</script> <!-- End Google Tag Manager --> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-J2071KH1J8"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-J2071KH1J8'); </script> <!-- End Google tag (gtag.js) --> <!-- Google optimise --> <script async src="https://www.googleoptimize.com/optimize.js?id=OPT-58KTG86"></script> <!-- Meta Pixel Code --> <!-- Start Google optimise --> <!-- Welcome to the Genesis AR Official Site | Genesis Augmented Reality --> <title>Play Augmented Reality Games - Genesis AR Card Game | Genesis Augmented Reality</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content="Click here to play Genesis Augmented Reality Games. Players experience a real-time skill based combat system. Collect Genesis AR Cards of gods, warriors, beasts and aliens and use them to fight your way across a randomly generated Galaxy."> <meta name="author" content="Genesis Augmented Reality"> <meta name=”robots” content=”index, follow”> <meta property="fb:app_id" content="1684621208533373" /> <meta name="facebook-domain-verification" content="g0t62496f0lvy1bbspu5as7drz1px0" /> <!-- END Meta Pixel Code --> <meta property="og:title" content="Play Augmented Reality Games - Genesis AR Card Game | Genesis Augmented Reality" /> <meta property="og:url" content="https://genesisaugmented.com/" /> <meta property="og:image" content="https://genesisaugmented.com/img/aurora-banner_star.webp" /> <meta property="og:type" content="website" /> <meta property="og:description" content="Click here to play Genesis Augmented Reality Games. Players experience a real-time skill based combat system. Collect Genesis AR Cards of gods, warriors, beasts and aliens and use them to fight your way across a randomly generated Galaxy." /> <meta property="og:locale" content="en_GB" /> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 0:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="apple-touch-icon" sizes="180x180" href="assets/ico/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/ico/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/ico/favicon-16x16.png"> <link rel="manifest" href="assets/ico/site.webmanifest"> <link rel="canonical" href="https://genesisaugmented.com/" /> <!-- Bootstrap core CSS --> <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="css/bootstrap.min.css" rel="stylesheet"> <noscript><link rel="stylesheet" href="css/bootstrap.min.css"></noscript> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> --> <!-- <link rel="stylesheet" type="text/css" href="plugins/zoom/fonts/feather/style.css"> --> <!-- General demo styles & header --> <link rel="stylesheet" type="text/css" href="plugins/zoom/css/demo.css" /> <!-- Component styles --> <link rel="stylesheet" type="text/css" href="plugins/zoom/css/component.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <!-- Custom styles --> <link href="css/main.css" rel="stylesheet"> <link href="css/modal-video.min.css" rel="stylesheet"> <link href="https://vjs.zencdn.net/6.2.4/video-js.css" rel="stylesheet"> <!-- <link rel="stylesheet" href="plugins/footer/demo.css"> --> <link rel="stylesheet" href="plugins/footer/footer-distributed-with-address-and-phones.css"> <link rel="stylesheet" type="text/css" href="css/custom.css" /> <link rel="stylesheet" type="text/css" href="css/popup.css"/> <script defer src="plugins/zoom/js/modernizr.custom.js"></script> <link rel="stylesheet" type="text/css" href="css/wheel-of-fortune.css"/> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- <script src="assets/js/ie-emulation-modes-warning.js"></script> --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> <script type="application/ld+json"> { "@context" : "https://schema.org", "@type" : "WebSite", "name" : "Genesis Augmented Reality", "alternateName" : "Genesis AR", "url" : "https://genesisaugmented.com/" } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "Genesis Augmented Reality", "alternateName": "Genesis AR", "legalName": "Genesis Augmented Pty Ltd", "foundingDate": "2016-10-04", "founders": [ { "@type": "Person", "name": "Long Roos" } ], "description": "Genesis Augmented Reality is an Australian video game publisher based in Gold Coast, Queensland. The company was founded by Long Roos in 2016 and primarily works in mixed reality software - augmented reality, metaverse and virtual reality. The company is a video game developer and self-publishes its titles.", "email": "long@genesisaugmented.com", "telephone": "+61450638556", "url": "https://genesisaugmented.com/", "logo": "https://genesisaugmented.com/img/logo_light_space_sm.webp", "image": "https://genesisaugmented.com/img/aurora-banner_star.webp", "sameAs": [ "https://www.facebook.com/genesisaugmented/", "https://www.youtube.com/c/GenesisAugmented", "https://www.linkedin.com/company/genesis-augmented/", "https://www.instagram.com/genesis_augmented_reality/?hl=en", "https://twitter.com/x_genesisar" ] } </script> </head> <body> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T9JTTMW" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <!-- Messenger Chat Plugin Code --> <div id="fb-root"></div> <!-- Your Chat Plugin code --> <div id="fb-customer-chat" class="fb-customerchat"> </div> <script> var chatbox = document.getElementById('fb-customer-chat'); chatbox.setAttribute("page_id", "218568771494488"); chatbox.setAttribute("attribution", "biz_inbox"); </script> <!-- Your SDK code --> <script> window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v14.0' }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="wheel-of-fortune-container exit-intent-popup"> <img id="wheel-of-fortune-close-btn" width="64" height="64" src="https://img.icons8.com/badges/96/circled-x.png" alt="circled-x"/> <svg id="wheel" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="48" fill="none" stroke-width="1" stroke="currentColor" /> <!-- add an id to the underlying circle as this depicts the final slice, and as to add a random color --> <circle id="slice" cx="50" cy="50" r="47" fill="#7bed9f" /> <g id="slices"></g> </svg> <svg id="pin" viewBox="0 0 50 50"><path fill="#7bed9f" d="M 0 25 L 50 0 V 50" /></svg> <h1 id="result-output" class="isHidden">#ffffff00</h1> <div class="instructions"> <!-- <style> .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 95%; height: 100%; } </style> --> <!-- <div class='embed-container'> --> <div class="dual-container"> <iframe src="https://www.youtube.com/embed/huVu9V6QkoU" frameborder="0" title="Genesis AR Cards - Gameplay Trailer | Genesis Augmented Reality" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <!-- <iframe src="https://www.youtube.com/embed/N4jayxGcUHQ" frameborder="0" title="Genesis AR Cards - Gameplay Trailer | Genesis Augmented Reality" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> --> <div class="wheel-of-fortune-text"> <h1>🎉 Win a Genesis AR TCG<br /> Booster Pack</h1> <h2>Enter your email to spin the wheel</h2> <input style="color:black;" placeholder="player@genesis.com" type="text" id="wheel-of-fortune-email-input" /> <p id="wheel-of-fortune-error-output">Invalid email. Please try again</p> <button>Spin!</button> </div> </div> </div> </div> <!-- <div id="exit-intent"></div> --> <nav id="navbar-main-container" class="navbar navbar-inverse navbar-fixed-top"></nav> <style> .hero-container__main_content_layer { background-color: rgba(0, 0, 0, 0.74); position: absolute; z-index: 52; top: 6.5vh; left: 0; right: 0; width: 100%; height: 90vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero-container__main_overlay_layer { background-color: rgba(0, 0, 0, 0.34); position: absolute; z-index: 51; top: 6.5vh; left: 0; right: 0; width: 100%; height: 90vh; overflow: hidden; } .hero-container__main_video_layer { position: absolute; z-index: 50; top: 6.5vh; left: 0; right: 0; width: 100%; height: 90vh; overflow: hidden; } @media only screen and (max-width: 1000px) { body { background-color: black !important; } } /* @media only screen and (max-width: 320px) { .hero-container__main_content_layer, .hero-container__main_overlay_layer, .hero-container__main_video_layer { top: 11vh; } } */ </style> <div class="hero-container__main_content_layer"> <h1 style="font-weight: 700; font-size: 5em; margin-top: 0; padding-top: 0; padding-bottom:0;">GENESIS</h1> <h3 style="font-weight: 700; font-size: 1.4em; margin-top: 0; padding-top:0;">- AUGMENTED REALITY -</h3> <div> <div class="btn-group"> <a href="#play-genesis-augmented-reality"> <button style="font-weight: 600; min-width: 100px; color: black;" type="button" class="btn btn-light" > <!-- <button style="font-weight: 600; min-width: 100px; background-color: #6c5ce7; color: white;" type="button" class="btn" > --> <span>Play Free Now</span> </button> </a> </div> <div class="btn-group"> <a href="#Awards"> <button style="font-weight: 600; min-width: 100px; color: black;" type="button" class="btn btn-light" > <!-- <button style="font-weight: 600; min-width: 100px; background-color: #6c5ce7; color: white;" type="button" class="btn" > --> <span>Watch Gameplay Trailer</span> </button> </a> </div> </div> <!-- <h5 style="font-weight: 700; font-size: 0.7em; margin-top: 0; margin-bottom: 0; padding-bottom: 0; padding-top:0;">Alpha v0.6.0</h5> --> </div> <div class="hero-container__main_overlay_layer"> </div> <div class="hero-container__main_video_layer"> <style> @media only screen and (max-width: 1200px) { .embed-container iframe { left: -20% !important; width: 140% !important; } } @media only screen and (max-width: 800px) { .embed-container iframe { left: -75% !important; width: 250% !important; } } @media only screen and (max-width: 400px) { .embed-container iframe { left: -150% !important; width: 400% !important; } } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; height: 100%; } </style> <div class="embed-container" style="position:absolute; width: 100%; height: 100%;"> <div id="video-bg"> </div> </div> <!-- <iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/J9Je48dk7FU?autoplay=1&controls=0&showinfo=0&autohide=1" > </iframe> --> </div> <div style="margin-top: 90vh;visibility:hidden;" id="latest-news-genesis-augmented-reality" class="jumbotron"> <div class="container"> <div id="latest-news-header" class="row"> <div style="padding: 0 1em 0 1em; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"> <h1 class="what-is-genesis-header">LATEST NEWS</h1> <!-- <div style="margin-top: 0; padding-bottom: 0;" class="btn-group"> <a class="href-nodelta" target="_blank" href="https://genesisaugmentedreality.myshopify.com/"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> --> </div> </div> <!-- <div class="row"> <div class="row" style="text-align:center"> <h1>Single Item</h1> --> <div class="slick-news-slider slick-slider"> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img alt="A street with an augmented reality zombie" src="img/ID_Zombies_Thumb.webp" /> <div class="slider-item-header"> <h3>AR TCG v0.6<br />iOS and Android Release</h3> <span>Announcement - 3<sup>rd</sup> Apr 2024</span> </div> <div style="overflow-y: scroll;" class="slider-item-body"> <!-- <span>Code name <span style="color: #6c5ce7; font-weight: 600;">Indigo Moon.</span></span> --> <!-- <br /><br /> --> <span>+ Code Name<span style="color: #130f40; font-weight: 700;"> Silver Cortex</span></span> <br /><br /> <span>+ Zombie Invasion Mode</span> <br /><br /> <span>+ Mastery Rankings (Go from apprentice to supreme grandmaster)</span><br /> <span>+ 0.01x - Miniature Mode</span><br /> <span>+ Point Cloud Mapping System</span><br /> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" href="#play-genesis-augmented-reality"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img alt="Megasuper cryptocurrency in the Genesis Augmented Reality Game. A blue energy ball with the letter M in the middle" style="object-position: center center;" src="wiki/img/timecorporation_aeon_stadium_2.webp" /> <div class="slider-item-header"> <h3>MEGASUPER CRYPTOCURRENCY<br /> Release</h3> <span>Announcement - 6<sup>th</sup> Feb 2024</span> </div> <div style="overflow-y: scroll;" class="slider-item-body"> <!-- <span>Code name <span style="color: #6c5ce7; font-weight: 600;">Indigo Moon.</span></span> --> <!-- <br /><br /> --> <span>+ <span style="color: #F3BA2F; font-weight: 700; text-shadow: none;">10 BNB</span> Liquidity Added</span> <br /><br /> <span>+ Initial Price Set on PancakeSwap</span> <br /><br /> <span>+ Added Getting Started Guide</span><br /> <!-- <span>+ Xamash - Master of Rhymestheim</span><br /> <span>+ Hyperxyon - Mecha-King Quantum</span><br /> --> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" href="crypto/megasuper/"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img src="img/indigo-moon-news.webp" /> <div class="slider-item-header"> <h3>AR TCG v0.5<br />iOS and Android Release</h3> <span>Announcement - 1<sup>st</sup> Feb 2024</span> </div> <div style="overflow-y: scroll;" class="slider-item-body"> <span>Code name <span style="color: #6c5ce7; font-weight: 600;">Indigo Moon.</span></span> <br /><br /> <span>+ Apple Vision Pro compatible</span> <br /><br /> <span>+ Aeomir - Warmage of Aesgaard</span><br /> <span>+ Xamash - Master of Rhymestheim</span><br /> <span>+ Hyperxyon - Mecha-King Quantum</span><br /> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" href="#play-genesis-augmented-reality"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img src="img/hyperxyon-news-thumb.webp" /> <div class="slider-item-header"> <h3>Documented <br /> Hyperxyon Origins</h3> <span>Lore - 18<sup>th</sup> Jan 2024</span> </div> <div class="slider-item-body"> <span>Added origin story and memory fragment #1 to the Hyperxyon research dossier</span> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="wiki/list-of-time-monsters/hyperxyon/"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img src="wiki/img/xmega-logo-xl.webp" /> <div class="slider-item-header"> <h3>Released <br /> XMEGA BANKING PORTAL</h3> <span>Announcement - 11<sup>th</sup> Jan 2024</span> </div> <div class="slider-item-body"> <span>WEB<sup>3</sup> BANK ACCOUNT access is now open to the public.</span> <br /><br /> <span>Providing currency and security for the most elite members of society, XMEGA bank is managed by a powerful group of Individuals with an ancient bloodline.</span> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="wiki/list-of-mega-corporations/xmega-bank/"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img data-lazy="wiki/img/rhymestheim.webp" /> <div class="slider-item-header"> <h3>Documented <br /> Xamash Origins</h3> <span>Lore - 25<sup>th</sup> Dec 2023</span> </div> <div class="slider-item-body"> <span>Added origin story to the Xamash research dossier</span> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="wiki/list-of-time-monsters/xamash/"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img data-lazy="wiki/img/xomtek_logo.webp" /> <div class="slider-item-header"> <h3>Documented <br /> Xomtek Industries</h3> <span>Lore - 14<sup>th</sup> August 2023</span> </div> <div class="slider-item-body"> <span>Added a research dossier for Xomtek Industries to mega corporations</span> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="wiki/list-of-mega-corporations/xomtek/"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img data-lazy="wiki/img/megacity-01.webp" /> <div class="slider-item-header"> <h3>Added <br /> Mega Corporations</h3> <span>Lore - 11<sup>th</sup> August 2023</span> </div> <div class="slider-item-body"> <span>Added a list of Mega Corporations we have documented. Mega corporations exist in the post-time future. Due to the invention of time manipulation, the mega elite of society travelled to new layers of reality. They exist outside of time and no longer abide by it's rules.</span> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="wiki/list-of-mega-corporations/"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img data-lazy="feed/img/cards.webp" /> <div class="slider-item-header"> <h3>First Edition<br />Summoning Cards</h3> <span>Announcement - 20<sup>th</sup> July 2023</span> </div> <div class="slider-item-body"> <span>We are now shipping 1st edition augmented reality booster packs. Only a few units remain in our pre-sale. Purchase one before they are sold out. Only 500 first edition units will ever be manufactured.</span> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="genesis-ar-cards/"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img data-lazy="feed/img/ar-tcg.webp" /> <div class="slider-item-header"> <h3>AR TCG iOS <br />Version Released</h3> <span>Announcement - 20<sup>th</sup> July 2023</span> </div> <div class="slider-item-body"> <span>AR TCG (Augmented Reality Trading Card Game) is now approved for release on the Apple App Store. Compatible with most modern iPhones and iPads (Starting at iPhone 7).</span> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="https://apps.apple.com/us/app/ar-tcg/id6451303990"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img data-lazy="feed/img/ar-tcg-v-0-4-4.webp" /> <div class="slider-item-header"> <h3>AR TCG v0.4.4 - <br />Android Released</h3> <span>Announcement - 9<sup>th</sup> July 2023</span> </div> <div class="slider-item-body"> <span>* Support for Augmented Reality cards - used with AR TCG</span><br /> <span>+ Level up your trading cards by winning battles</span><br /> <span>* AR and AI upgrades</span><br /> <span>* Added Endless Mode - Upload your high score to the global leaderboard</span><br /> <span>* Added Daily Challenge mode</span> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="https://play.google.com/store/apps/details?id=com.ffs.artcg&hl=en_US"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img data-lazy="feed/img/ar-tcg-v-0-4-1-7.webp" /> <div class="slider-item-header"> <h3>AR TCG v0.4.1.7 <br />Android Released</h3> <span>Announcement - 16<sup>th</sup> May 2023</span> </div> <div class="slider-item-body"> <span>+ Added persistent wins / defeats</span><br /> <span>+ Added 5 difficulty modes</span><br /> <span>* Easy</span><br /> <span>* Normal</span><br /> <span>* Heroic</span><br /> <span>* Legendary</span><br /> <span>* Insane</span> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="https://play.google.com/store/apps/details?id=com.ffs.artcg&hl=en_US"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img data-lazy="feed/img/ar-tcg-v-0-3-9-8.webp" /> <div class="slider-item-header"> <h3>AR TCG v0.3.9.8 <br />Android Released</h3> <span>Announcement - 4<sup>th</sup> May 2023</span> </div> <div class="slider-item-body"> <span>*Localisation Update - Supports 24 Languages</span><br /> <span>+ Added language selection GUI at the top right of the main menu</span><br /> <span>+ Added localisation support for 23 Languages</span> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="https://play.google.com/store/apps/details?id=com.ffs.artcg&hl=en_US"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> <div class="slider-item"> <div class="slider-item-d-flex"> <div class="slider-item-information"> <img data-lazy="feed/img/fightcorp-chapter-cover-one.webp" /> <div class="slider-item-header"> <h3>Fightcorp X added to<br />Comic Shop</h3> <span>Lore - 1<sup>st</sup> May 2023</span> </div> <div class="slider-item-body"> <span>Fightcorp X is the story of a group of Time Travellers and how they interact with a young man and woman in the future.</span> <span>It is about the Earth in the year 8120 AD, after the discovery of Time Travel.</span> <span>It is about the Mega Corporations that protect and guide the People of Earth.</span> <!-- <span>How they made their fortunes.</span> --> <!-- <span>And it is a story about the people that rule the world.</span> --> </div> </div> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="wiki/comic/"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-success" > Read More </button> </a> </div> </div> </div> </div> <!-- </div> </div> --> <!-- <div class="download-app-column" class="col-lg-12"> <h3>Genesis</h3> <img onClick="(function(){alert('🥷 Coming Soon');})();" class="img-responsive download-ios half-opacity-btn download-ios-btn" src="img/badges/ios.svg" /> <a onClick="(function(){alert('⚡️ App is unavailable until May 2023 due to major system upgrades');})();" href="https://play.google.com/store/apps/details?id=com.ffs.genesis&hl=en" target="_blank"> <img class="img-responsive download-android download-android-btn half-opacity-btn" src="img/badges/google-play.svg" /> </a> </div> <div class="download-app-column" class="col-lg-12"> <h3>AR TCG</h3> <a href="https://apps.apple.com/us/app/ar-tcg/id6451303990?uo=2" target="_blank"> <img style="opacity:1;" class="img-responsive download-ios download-ios-btn" src="img/badges/ios.svg" /> </a> <a href="https://play.google.com/store/apps/details?id=com.ffs.artcg" target="_blank"> <img class="img-responsive download-android download-android-btn" src="img/badges/google-play.svg" /> </a> </div> --> <!-- <div class="download-app-column" class="col-lg-12"> <h3>777</h3> <img style="visibility:hidden;" onClick="(function(){alert('🥷 Coming Soon');})();" class="img-responsive half-opacity-btn download-ios download-ios-btn" src="img/badges/ios.svg" /> <a href="wiki/" target="_blank"> <img class="img-responsive download-android download-android-btn" src="img/badges/google-play.svg" /> </a> </div> --> <!-- </div> --> <!-- <form> <input type="email" placeholder="email" /> <input tyep="submit" value="Submit" /> </form> --> <!-- <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> --> </div> <!-- <div style="height: auto; width: 100%; background-color: black; z-index: -1;"></div> --> </div> <div id="play-genesis-augmented-reality" class="jumbotron storyline-background"> <div class="container story-container"> <h1 class="what-is-genesis-header">WHAT IS THE GENESIS AR TCG</h1> <!-- <p style="font-weight: 500; width: 80%; margin: 4vh auto;">Genesis isn’t like any game you’ve ever seen. With Augmented Reality players experience a real-time skill based combat system. Collect heroes and fight your way across a randomly generated Multiverse.</p> --> <!-- <p>Battle, collect and navigate your way across a randomly generated Cosmos. Venture into uncharted Solar Systems, and do battle with some of the most powerful beings inhabiting Space & Time.</p> --> <p>Collect trading cards of powerful monsters from across Space and Time. Summon them into battle using your Augmented Reality compatible smartphone. Control them with a joystick and attack buttons to destroy all your opponents monsters. Join competitive tournaments and win cryptocurrency.</p> <!-- <p>Genesis' new hack'n'slash literally builds the world around you using Augmented Reality. --> <div class="row"> <!-- <div class="download-app-column" class="col-lg-12"> <h3>Genesis</h3> <img onClick="(function(){alert('🥷 Coming Soon');})();" class="img-responsive download-ios half-opacity-btn download-ios-btn" src="img/badges/ios.png" /> <a onClick="(function(){alert('🥷 Coming Soon');})();" href="https://play.google.com/store/apps/details?id=com.ffs.genesis&hl=en" target="_blank"> <img class="img-responsive download-android download-android-btn half-opacity-btn" src="img/badges/google-play.svg" /> </a> </div> --> <style> #app-download-ipad-column { padding: 3em; } #app-download-ipad-column h3 { /* width: 100%; */ text-align:left; padding: 0; margin: 0; } #app-download-ipad-column > a:last-of-type > img { padding-right: 0; } @media only screen and (max-width: 990px) { #app-download-ipad-column { padding: 1em; } } @media only screen and (max-width: 800px) { #app-download-ipad-column { padding: 1em; } } @media only screen and (max-width: 754px) { #app-download-ipad-column h3 { width: 100%; text-align:center; padding-bottom: 1.1em; } #app-download-ipad-column > a:last-of-type > img { padding-top: 0; padding-right: 1em; } } </style> <div id="app-download-ipad-column" class="download-app-column" class="col-lg-12"> <h3>SELECT YOUR PLATFORM</h3> <!-- <h3>AR TCG</h3> --> <a href="https://apps.apple.com/us/app/ar-tcg/id6451303990?uo=2" target="_blank"> <img style="opacity:1;" class="img-responsive download-ios download-ios-btn" src="img/badges/ios.png" /> </a> <a href="https://play.google.com/store/apps/details?id=com.ffs.artcg" target="_blank"> <img class="img-responsive download-android download-android-btn" src="img/badges/google-play.svg" /> </a> </div> <!-- <div class="download-app-column" class="col-lg-12"> <h3>777</h3> <img style="visibility:hidden;" onClick="(function(){alert('🥷 Coming Soon');})();" class="img-responsive half-opacity-btn download-ios download-ios-btn" src="img/badges/ios.svg" /> <a href="wiki/" target="_blank"> <img class="img-responsive download-android download-android-btn" src="img/badges/google-play.svg" /> </a> </div> --> </div> <!-- <form> <input type="email" placeholder="email" /> <input tyep="submit" value="Submit" /> </form> --> <!-- <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> --> </div> <!-- <div style="height: auto; width: 100%; background-color: black; z-index: -1;"></div> --> </div> <style> .features-block h3 { font-size: 3em; } .features-block li { font-size: 1.4em; } @media only screen and (max-width: 1280px) { .features-block h3 { font-size: 2em; } .features-block li { font-size: 1em; } } @media only screen and (max-width: 980px) { .feature-img-container { width: 50% !important; } .feature-text-container { width: 50% !important; } } @media only screen and (max-width: 830px) { .features-block > div { flex-direction: column !important; } .feature-img-container { width: 80% !important; } .feature-img-container p { text-align: left; } .feature-text-container { width: 80% !important; justify-content: center !important; } .feature-text-container > div { width: 100% !important; } } </style> <div style="background-color: black; padding: 3em 0;"> <div class="features-block" style="background-color: black; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: center;" class="row"> <div style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;" class="banner-container col-md-10 col-sm-10"> <div class="feature-img-container" style="width: 30%; height: auto;"> <img alt="A 1v1 match in the Genesis AR TCG (Augmented Reality Trading Card Game). Tyrant using tail slash to defeat Ronin." style="width: 100%; margin-top: 2em; margin-bottom: 2em;" src="feed/img/ar-tcg-v-0-3-9-8.webp" /> <!-- <img style="width: 100%; margin-top: 2em; margin-bottom: 2em;" src="feed/img/ar-tcg-v-0-4-4-3.png" /> --> <img alt="Two Barons from the Genesis AR TCG (Augmented Reality Trading Card Game) fighting on a tabletop" style="width: 100%; margin-top: 2em; margin-bottom: 2em;" src="img/ar-tcg/tabletop-battle.webp" /> </div> <div class="feature-text-container" style="width: 70%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" class="row"> <div style="width: 90%;" class="col-md-12 col-sm-12"> <h3 style="color:white; font-weight: 700; text-align: left;">Unlike any other trading card game you've ever played</h3> <ol style="text-align: left; color: white;font-weight: 600; padding-left: 0.2em; list-style-type: none;"> <br /> <li> Featuring cutting edge mobile Augmented Reality technology. Engage the action from every angle. </li> <!-- <br /> --> <!-- <li> Map your surrounding environment and summon your card into augmented reality </li> --> <br /> <li> You will experience an addictive skill based real-time battle system. <!-- Realtime combat - Use joystick to move and buttons to command attacks --> </li> <li> Each of your cards is equipped with a number of attacks; some reliant on brute force and others on mystic or dark capabilities allowing for a perfect combination of skill, strategy and foresight. </li> </ol> </div> </div> </div> </div> <div class="features-block" style="background-color: black; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: center;" class="row"> <div style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;" class="banner-container col-md-10 col-sm-10"> <img alt="The Aurora trading card from the Genesis AR TCG (Augmented Reality Trading Card Game) held in a mans hand" class="feature-img-container" style="width: 30%; margin-top: 2em; margin-bottom: 2em;" src="feed/img/card_single.webp" /> <div class="feature-text-container" style="width: 70%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" class="row"> <div style="width: 90%;" class="col-md-12 col-sm-12"> <h3 style="color:white; font-weight: 700; text-align: left;">Made from superior card stock</h3> <ol style="text-align: left; color: white;font-weight: 600; padding-left: 0.2em; list-style-type: none;"> <br /> <li> Black Core - Features a extra black layer sandwiched right in the middle of the cards, which blocks light rays from shining through. This technology produces a vivid and crisp looking card, optimised for pro augmented reality. </li> <br /> <li> Made from 330gsm extra durable card stock </li> <br /> <li> Coated with a matte finish (reduced gloss) for an enhanced augmented reality experience. </li> </ol> </div> </div> </div> </div> <div class="features-block" style="background-color: black; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: center;" class="row"> <div style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;" class="banner-container col-md-10 col-sm-10"> <div class="feature-img-container" style="width: 30%; margin-top: 2em; margin-bottom: 2em;"> <img alt="The Osirus trading card from the Genesis AR TCG (Augmented Reality Trading Card Game)" style="width: 100%; height: 100%;" src="img/cards/production-card.webp" /> <a style="text-decoration: none;" href="#play-genesis-augmented-reality"><p style="font-weight: 600; padding: 0.5em 1em;">This is the community card. Scan him inside the AR TCG app and you will own him for a while.</p></a> </div> <div class="feature-text-container" style="width: 70%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" class="row"> <div style="width: 90%;" class="col-md-12 col-sm-12"> <h3 style="color:white; font-weight: 700; text-align: left;">Souls-like cards</h3> <ol style="text-align: left; color: white;font-weight: 600; padding-left: 0.2em; list-style-type: none;"> <br /> <li> Each and every card features a unique QR identifier. </li> <br /> <li> Each QR code tracks card statistics such as kill count, experience points (souls), battle and trade history and successful mutations. </li> <br /> <li> Every time a card is destroyed in battle. It's gathered experience points (souls) will be reset to zero. </li> <br /> <li> When a card is destroyed in a multiplayer match, it's experience points will be transferred to the winner. </li> </ol> </div> </div> </div> </div> </div> <style> .special-offer-container__main { background-color: white; } .special-offer-container { width: 80%; margin: 0 auto; display: flex; flex-direction:row; justify-content: space-between; align-items: center; background-color: white; padding: 3em 0; } .special-offer-container h1 { padding-right: 1em; text-align: left; font-weight: 700; font-size: 1.6em; color: black; text-shadow: none; } .special-offer-container button { font-weight: 600; font-size: 1.6em; min-width: 100px; color:white; font-weight: 600; background-color: #192a56; } @media only screen and (max-width: 780px) { .special-offer-container { flex-direction:column; justify-content: flex-start; align-items: center; } .special-offer-container h1 { padding-bottom: 1em; padding-right: 0; font-size: 2em; text-align: center; } } @media only screen and (max-width: 360px) { .special-offer-container button { white-space: normal; } } </style> <div class="special-offer-container__main"> <div class="special-offer-container"> <h1>Free shipping on orders over $50 AUD</h1> <a class="href-nodelta" href="genesis-ar-cards/"> <button type="button" class="btn btn-secondary" > Grab your booster packs now </button> </a> </div> </div> <div id="Awards" class="jumbotron"> <div class="container awards-container"> <!-- <span class="genesis-emoji">△</span> --> <span class="genesis-emoji">🜛</span> <!-- <a class="genesis-gsb" style="width: 250px;" href="http://blog.up.co/2015/12/07/global-startup-battle-2015-champions-track-finalists/" target="_blank"><img class="img-responsive download-android" src="img/gsb-icon_xl.png" style="width: 180px; display: inline;"/></a> <a class="genesis-ks" href="https://www.kickstarter.com/projects/ryanneale/genesis-augmented-reality-gaming-the-right-way" target="_blank"><img class="img-responsive download-ios" src="img/ks-button-transparent.png" style="padding: 10px; width: 250px; display: inline;" /></a> --> </div> </div> <div id="gameplay-trailer" class="this-is-genesis"> <div class="container"> <div class="row"> <style> .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 95%; height: 100%; } </style> <div class='embed-container'> <iframe src="https://www.youtube.com/embed/jxPQsKsAvE4" frameborder="0" title="Genesis AR Cards - Gameplay Trailer | Genesis Augmented Reality" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <!-- <iframe src="" data-src='https://www.youtube.com/embed/jxPQsKsAvE4' frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> --> </div> <div class="col-md-4 hidden-sm hidden-xs"> <!-- <img class="img-responsive" src="img/summon.png" /> --> <img loading="lazy" class="img-responsive" alt="Genesis Augmented Reality hero Hyperxyon holding a red magic staff and a purple sword" src="img/hyperxyon.webp" style="width: 100%; margin-top: 5vh; transform: scaleX(-1);" /> <!-- <img loading="lazy" class="img-responsive" alt="Play Augmented Reality Games. Genesis Augmented Reality hero Erebus reaching for a moon" src="img/erebus-sprite.webp" style="width: 100%; margin-top: 5vh;" /> --> </div> <div class="col-md-8 col-sm-12 col-xs-12 column-container" style="margin-top: 7vh; text-align: left;"> <!-- <div class="row"> <div class="col-sm-12"> <h1>Battle, collect and navigate your way across the great expanse of the cosmos. Use your powers to dominate the tainted beings of the mysterious rift, building an army of powerful warriors, beasts and gods from across the Aeons.</h1> <h1>Genesis is set in a universe where time itself is being torn apart. Tainted warrior, beasts and gods from the past & future are pouring into our timeline through the cracks.</h1> </div> </div> --> <style> .column-text { line-height: 1.6em; } .narrative-text { width: 100%; margin: 2em auto 0 auto; } @media only screen and (max-width: 767px) { .narrative-text { padding: 0 2em !important; } .narrative-col { padding: 0 !important; } } @media only screen and (max-width: 700px) { .narrative-text { padding: 0 !important; } } /* .story-header { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; } */ </style> <div class="row narrative-text"> <div class="narrative-col col-sm-12"> <div class="story-header"> <h2>The story so far ...</h2> </div> <hr /> </div> </div> <div class="row narrative-text" style="margin-top: 1vh;"> <div class="narrative-col col-lg-6 col-md-6 col-sm-6 col-xs-12"> <p class="column-text"><i>From the ashes of eternal chaos and darkness a Great Harmony of light was kindled ... </i>However that was many Aeons ago, and much has changed.</p> <br /> <hr /> <p class="column-text">Time no longer flows as it should; the fabric of reality has been torn apart, creating wormholes known as Rifts – passageways that span across spacetime, connecting different Ages and Worlds; bringing death, chaos and apocalypse to the Multiverse.</p> </div> <div class="narrative-col col-lg-6 col-md-6 col-sm-6 col-xs-12"> <p class="column-text">Beings that travel through these Rifts are mutated by an ancient darkness, changing them in terrifying, unexpected ways.</p> <!-- Do you accept your duty? You are an agent of Creation, sent to purge the malformed darkness flowing from the depths of Time itself ... --> <!-- TimeKeeper --> <!-- <p class="column-text">You are what is known as a Master, a mortal chosen by Genesis to bring stability back to spacetime.</p> --> <p class="column-text">In Augmented Reality - Build your army of warriors, beasts, gods & aliens from across space and time.</p> <!-- <p class="column-text">In Augmented Reality - Battle, collect and navigate your way across a randomly generated galaxy. Building an army of warriors, beasts, gods & aliens from across space and time.</p> --> <p class="column-text"><i>Your story begins today ...</i></p> <div class="slider-item-actionbar btn-group"> <a class="href-nodelta" target="_blank" href="wiki/mythos/"> <button style="font-weight: 600; min-width: 100px; color:black;" type="button" class="btn btn-light" > Read Complete Origin Mythos </button> </a> </div> </div> </div> </div> </div> </div> </div> <div id="play-genesis-augmented-reality" class="jumbotron occult-bg"> <div class="container story-container" style="background-color: rgba(0, 0, 0, 0.74); border-radius: 1em;"> <h2 style="color:white;" class="what-is-genesis-header">Our Partners</h2> <!-- <h2 class="what-is-genesis-header">Please note, </h3> --> <!-- <p style="font-weight: 500; width: 80%; margin: 4vh auto;">Genesis isn’t like any game you’ve ever seen. With Augmented Reality players experience a real-time skill based combat system. Collect heroes and fight your way across a randomly generated Multiverse.</p> --> <!-- <p style="font-weight: 500; width: 80%; margin: 4vh auto;"></p> --> <!-- <p>Genesis' new hack'n'slash literally builds the world around you using Augmented Reality. --> <style> .img-responsive { padding: 1em; } .genesis-hero-cards .img-responsive { padding: 0 !important; } .partner-container { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } .badge-container { width: 280px; display: flex; flex-direction: column; justify-content: center; align-items: center; /* width: 20%; height: auto; */ background-color: black; border-radius: 0.6em; padding: 0.5em; margin-top: 0.5em; margin-right: 0.3em; } .badge-container img { max-height: 80px; width: auto !important; } </style> <div class="partner-container"> <div class="badge-container"> <img alt="Genesis Augmented Reality funded with Kickstarter badge" class="img-responsive download-android" src="img/badges/kickstarter.png" style="width: 280px; display: inline;"/> </div> <div class="badge-container"> <img alt="Genesis Augmented Reality Global Startup Battle (GSB) Winner Badge" class="img-responsive download-android" src="img/badges/gsb-icon_xl.webp" style="width: 280px; display: inline;"/> </div> <div class="badge-container"> <img alt="Unity game engine logo" class="img-responsive download-android" src="img/badges/unity.png" style="width: 280px; display: inline;"/> </div> <div class="badge-container"> <img alt="Dappradar logo" class="img-responsive download-android" src="img/badges/DappRadar.png" style="width: 280px; display: inline;"/> </div> <div class="badge-container"> <img alt="NFTKey logo" class="img-responsive download-android" src="img/badges/nftkey.png" style="width: 280px; display: inline;"/> </div> <div class="badge-container"> <img alt="Binance smart chain logo" class="img-responsive download-android" src="img/badges/binance_logo.png" style="width: 280px; display: inline;"/> </div> <div class="badge-container"> <img alt="Genesis Augmented Reality LADBible partnership badge" class="img-responsive download-android" src="img/badges/LADbible_logo.png" style="width: 280px; display: inline;"/> </div> <div class="badge-container"> <img alt="Genesis Augmented Reality UNILAD partnership badge" class="img-responsive download-android" src="img/badges/UNILAD_logo.png" style="width: 280px; max-height: 74px; display: inline;"/> </div> <div class="badge-container"> <img alt="Genesis Augmented Reality NewsWatch partnership badge" class="img-responsive download-android" src="img/badges/newswatch.png" style="width: 280px; max-height: 74px; display: inline;"/> </div> </div> <br /><br /> <!-- <div class="row"> <div class="col-md-12"> <h2 class="what-is-genesis-header">2. PRINT YOUR AR MARKER</h2> </div> <div class="col-md-12"> <a href="../anchor.pdf" target="_blank"> <img alt="Button to download Genesis AR Marker. AR fiducial markers used to play the Genesis Augmented Reality game" id="how-to-play-anchor" class="img-responsive" src="../img/anchor-horizontal-web.webp" style="padding: 20px; width: 480px; display: inline;" /> </a> </div> </div> --> <!-- <form> <input type="email" placeholder="email" /> <input tyep="submit" value="Submit" /> </form> --> <!-- <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> --> </div> <!-- <div style="height: auto; width: 100%; background-color: black; z-index: -1;"></div> --> </div> <div style="padding: 5em 2em; background: none; background-color: white;" class="jumbotron"> <div class="container story-container" style="background-color: rgba(0, 0, 0, 1); border-radius: 1em;"> <h2 style="font-weight: 700; margin-bottom: 1em; margin-top: 0; color:white;" class="what-is-genesis-header">Here's what people are saying</h2> <style> .testimonials-row { width: 50%; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; } .testimonials-row img { width: 48%; height: auto; /* margin: 0 auto; */ } /* @media only screen and (max-width: ) { } */ @media only screen and (max-width: 800px) { .testimonials-row { width: 80%; flex-direction: column; /* justify-content: space-between; */ align-items: center; } .testimonials-row > img { width: 100%; } .testimonials-row > img:last-of-type { margin-top: 2em; } } @media only screen and (max-width: 500px) { .testimonials-row { width: 100%; } } </style> <div class="testimonials-row" style="width: 100%; height: auto;"> <img alt="Customer testimonials commenting on the Genesis AR TCG" src="img/testimonials.webp" /> <img alt="Screenshot of the Genesis AR TCG Kickstarter crowdfunding campaign webpage" src="img/ks-screen.webp" /> </div> <!-- <div class="testimonials-row" style="width: 100%; height: auto; padding-top: 2em;"> <img style="width:32%" src="img/badges/kface.png" /> <img style="width:32%" src="img/badges/fb.png" /> <img style="width:32%" src="img/badges/reddit.png" /> </div> --> <!-- <div class="row"> <div class="col-md-12"> <h2 class="what-is-genesis-header">2. PRINT YOUR AR MARKER</h2> </div> <div class="col-md-12"> <a href="../anchor.pdf" target="_blank"> <img alt="Button to download Genesis AR Marker. AR fiducial markers used to play the Genesis Augmented Reality game" id="how-to-play-anchor" class="img-responsive" src="../img/anchor-horizontal-web.webp" style="padding: 20px; width: 480px; display: inline;" /> </a> </div> </div> --> <!-- <form> <input type="email" placeholder="email" /> <input tyep="submit" value="Submit" /> </form> --> <!-- <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> --> </div> </div> <style> .grid-padding { margin: 10vh 0; padding: 0; } .grid-padding:nth-child(2) { margin-bottom: 10px; } .grid-padding div{ padding-top: 10px; } .genesis-gallery-item { min-width: 200px; width: 85%; display: inline; } .featherlight-thumb-container { overflow: hidden; } #genesis-feature-video { height: 900px; } @media only screen and (max-width: 920px) { #genesis-feature-video { height: 560px; } } @media only screen and (max-width: 767px) { #genesis-feature-video { width: 86%; height: 480px; } .grid-padding div { padding: 0; } .featherlight-thumb-container:nth-child(2) { padding-top: 6em; } } @media only screen and (max-width: 480px) { #genesis-feature-video { height: 340px; } } @media only screen and (max-width: 380px) { #genesis-feature-video { width: 86%; height: 240px; } } @media only screen and (max-width: 160px) { .hero { display: none !important; } .storyline-background { overflow-x: hidden; } .this-is-genesis { overflow-x: hidden; } } </style> <div class="row grid-padding"> <div class="col-sm-12 col-xs-12"> <iframe id="genesis-feature-video" width="93%" height="auto" src="https://www.youtube.com/embed/B-gxWzp8OXM?si=q79YD5Agqa7y504R&start=20" title="AR TCG - Augmented Reality Combat Game" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> <div class="row grid-padding"> <div class="featherlight-thumb-container col-sm-6 col-xs-12"> <a target="_blank" href="https://www.youtube.com/watch?v=_El7cefuHdI&ab_channel=GenesisAugmentedReality"> <img alt="A booster pack filled with three Genesis Augmented Reality Trading Cards" class="genesis-gallery-item img-responsive lightbox" src="img/gartcg-pack.webp" /> </a> </div> <div class="featherlight-thumb-container col-sm-6 col-xs-12"> <a target="_blank" href="https://www.youtube.com/watch?v=jxPQsKsAvE4&ab_channel=GenesisAugmentedReality"> <img alt="A hand holding the Aurora trading card for the Genesis Augmented Reality Trading Card Game" class="genesis-gallery-item img-responsive lightbox" src="feed/img/card_single.webp" /> </a> </div> </div> <div class="row grid-padding"> <div class="featherlight-thumb-container col-sm-6 col-xs-12"> <a target="_blank" href="https://www.youtube.com/watch?v=N4jayxGcUHQ&t=5s&ab_channel=GenesisAugmentedReality"> <img alt="Tyrant and Baron trading cards fighting in an augmented reality mobile game" class="genesis-gallery-item img-responsive lightbox" src="feed/img/ar-tcg-v-0-4-1-7.webp" /> </a> </div> <div class="featherlight-thumb-container col-sm-6 col-xs-12"> <a target="_blank" href="img/erebus-vs-alatus.webp"> <img alt="Genesis Augmented Reality gameplay. Erebus and Alatus ready to fight in Genesis AR Card Game" class="genesis-gallery-item img-responsive lightbox" src="img/erebus-vs-alatus.webp" /> </a> </div> </div> <div class="row grid-padding"> <div class="featherlight-thumb-container col-sm-6 col-xs-12"> <a target="_blank" href="img/summon.webp"> <img alt="Genesis Augmented Reality gameplay. Alatus moving around Augmented Reality space in Genesis AR Card Game" class="genesis-gallery-item img-responsive lightbox" src="img/summon.webp" /> </a> </div> <div class="featherlight-thumb-container col-sm-6 col-xs-12"> <a target="_blank" href="img/screenshot_brex.webp"> <img alt="Genesis Augmented Reality gameplay. Tyrant doing a fire breathing attack in Genesis AR Card Game" class="genesis-gallery-item img-responsive lightbox" src="img/screenshot_brex.webp" /> </a> </div> </div> <!-- </div> </div></div> --> <style>#home-ar-cards { background-color: white; color: black; margin: 0;}#home-augmented-reality { background-color: black; color: white; margin: 0;}.large-heading { font-size: 300%; padding: 0 0.5em; padding-left: 0;}.large-text { font-size: 120%; padding: 0 0.5em; padding-left: 0;}.three-d-card { box-shadow: 0px 0px 91px 6px rgba(0,0,0,0.54); -webkit-box-shadow: -2px -3px 91px 6px rgba(0,0,0,0.54); -moz-box-shadow: -2px -3px 91px 6px rgba(0,0,0,0.54); border-radius: 1em; /* margin: 0 0.5em; */ margin-top: 2em; margin-bottom: 2em;}</style><!-- <div class="row grid-padding"> <div class="col-md-8 col-sm-8 col-xs-10 column-container" style="height: auto; text-align: left;"> <h1 class="large-heading">A new generation of trading cards</h1> <p class="large-text">Use AR to load your battle deck into your phone. Strategically summon them during combat phase to defeat all of your opponent's cards. Experience points and k/d ratio are stored via a unique QR code on each card. If you trade your card to another player all stats and upgrades will carry over.</p> <ul> <li class="large-text"> Trading cards made from whitecore 300gsm superior finish </li> <li class="large-text"> Augmented Reality Enabled </li> <li class="large-text"> QR code tracks experience points and k/d. Also used for trading. </li> <li class="large-text"> Each card can be modified with mutations and upgrades. These will be permanently linked to the card using the QR. </li> </ul> </div> <div class="col-md-4 col-sm-4 col-xs-12 column-container" style="height: auto; text-align: left;"> <img class="3d-card three-d-card" src="img/cards/production-card.webp" /> </div></div><div id="home-augmented-reality" class="row grid-padding"> <div class="col-md-6 col-sm-6 col-xs-12 column-container" style="height: auto; text-align: right; float: right;"> <h1 class="large-heading">Tactical Augmented Reality Gameplay</h1> <p class="large-text">Use your AR compatible smartphone to map your room and enter the augmented reality battlefield. Move around your room to get a better view of your opponent in order to swiftly defeat them.</p> </div></div> --> <!-- <div style="background: none; background-color: black;" class="jumbotron"> <div class="container"> <h2>Unlock your first Genesis SpaceTime Anomaly</h2> <a class="hyper-green" href="augmented-reality-capsule-toys/" target="_blank" style="font-weight: 800; text-decoration: none; cursor:pointer;"><p>⚡️ Click here to unlock your first capsule toys</p></a> <div class="amber-capsule-container"> <div class="row"> <div class="col-sm-5"> <img src="img/capsule03.webp" /> </div> <div class="col-sm-5"> <img src="img/capsule01.webp" /> </div> </div> </div> --> <!-- <a href="https://itunes.apple.com/ca/app/genesis-augmented-reality/id1088160291?mt=8" target="_blank"> <img class="img-responsive download-ios" src="img/badges/ios.svg" style="padding: 20px; width: 280px; display: inline;" /> </a> <a href="https://play.google.com/store/apps/details?id=com.ffs.genesis&hl=en" target="_blank"> <img class="img-responsive download-android" src="img/badges/google-play.svg" style="width: 280px; display: inline;"/> </a> --> <!-- Begin Mailchimp Signup Form --> <!--End mc_embed_signup--> <!-- </div> </div> --> <style> .osirus-render { width: 70%; } @media only screen and (max-width: 1200px) { .osirus-render { width: 500px; } } @media only screen and (max-width: 800px) { .osirus-render-container { display: none !important; } } </style> <div style="background: none; background-color: white; padding: 2em 0 6em 0" id="play-genesis-augmented-reality" class="jumbotron"> <div style="background: none; background-color: transparent; padding-top: 2em; padding-bottom: 2em;" class="container story-container"> <style> .bottom_cta_headline { color: black !important; font-weight: 900; font-size: 4.3em !important; border-radius: 1em; padding: 0.5em 0.5em 0 0.5em ; } @media only screen and (max-width: 510px) { .bottom_cta_headline { font-size: 300% !important; } } @media only screen and (max-width: 370px) { .bottom_cta_headline { font-size: 200% !important; } } </style> <h1 class="bottom_cta_headline what-is-genesis-header">DOWNLOAD AND TRY FOR FREE</h1> <!-- <p style="font-weight: 500; width: 80%; margin: 4vh auto;">Genesis isn’t like any game you’ve ever seen. With Augmented Reality players experience a real-time skill based combat system. Collect heroes and fight your way across a randomly generated Multiverse.</p> --> <!-- <p>Battle, collect and navigate your way across a randomly generated Cosmos. Venture into uncharted Solar Systems, and do battle with some of the most powerful beings inhabiting Space & Time.</p> --> <!-- <p>Collect trading cards of powerful monsters from across Space and Time. Summon them into battle using your Augmented Reality compatible smartphone. Control them with a joystick and attack buttons to destroy all your opponents monsters. Join competitive tournaments and win cryptocurrency.</p> --> <!-- <p>Genesis' new hack'n'slash literally builds the world around you using Augmented Reality. --> <div style="padding-top: 5em;" class="row"> <div style="width: 90%; margin: 0 auto;" class="ar-tcg-download-app-column download-app-column" class="col-lg-12"> <div class="osirus-render-container" style="width: 50%; display:flex; flex-direction: column;"> <img class="osirus-render" alt="Osirus (intergalactic sheriff) from the Genesis AR TCG" style="opacity:1;margin-left: -5em;" class="img-responsive download-ios download-ios-btn" src="img/genesis-ar-osirus.webp" /> </div> <div style="display:flex; flex-direction: column;"> <div style="display:flex; flex-direction: column;"> <img alt="Logo for the AR TCG mobile game" style="opacity:1;" class="img-responsive download-ios download-ios-btn" src="img/ar-tcg/ar-tcg-logo.webp" /> <h3 style="margin-top: 0.2em; padding: 0; width: 100%; color: black;">AR TCG</h3> </div> <a href="https://apps.apple.com/us/app/ar-tcg/id6451303990?uo=2" target="_blank"> <img style="padding-bottom: 0;" style="opacity:1;" class="img-responsive download-ios download-ios-btn" src="img/badges/ios.png" /> </a> <a href="https://play.google.com/store/apps/details?id=com.ffs.artcg" target="_blank"> <img style="padding-top: 0;" class="img-responsive download-android download-android-btn" src="img/badges/google-play.svg" /> </a> </div> </div> <!-- <div class="download-app-column" class="col-lg-12"> <h3>777</h3> <img style="visibility:hidden;" onClick="(function(){alert('🥷 Coming Soon');})();" class="img-responsive half-opacity-btn download-ios download-ios-btn" src="img/badges/ios.svg" /> <a href="wiki/" target="_blank"> <img class="img-responsive download-android download-android-btn" src="img/badges/google-play.svg" /> </a> </div> --> </div> <!-- <form> <input type="email" placeholder="email" /> <input tyep="submit" value="Submit" /> </form> --> <!-- <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> --> </div> <!-- <div style="height: auto; width: 100%; background-color: black; z-index: -1;"></div> --> </div> <div style="background: none; background-color: black;" id="finalCTA" class="jumbotron"> <div class="container"> <h1>Stay in the Loop</h1> <p>⚡️ Receive gifts, deals new updates and promotions like free shipping.</p> <!-- <p>examples include free shipping coupons, 20% storewide discount coupons, etc</p> --> <!-- <a href="https://itunes.apple.com/ca/app/genesis-augmented-reality/id1088160291?mt=8" target="_blank"> <img class="img-responsive download-ios" src="img/badges/ios.svg" style="padding: 20px; width: 280px; display: inline;" /> </a> <a href="https://play.google.com/store/apps/details?id=com.ffs.genesis&hl=en" target="_blank"> <img class="img-responsive download-android" src="img/badges/google-play.svg" style="width: 280px; display: inline;"/> </a> --> <!-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> <div id="mc_embed_signup"> <form action="https://genesisaugmented.us11.list-manage.com/subscribe/post?u=106f783f77a1e93e9a875b3b1&id=9d7e96b3c0&f_id=00ec4ee0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <!-- <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> --> <div class="mc-field-group"> <label for="mce-EMAIL"><span class="asterisk">*</span> Email Address</label> <input style="color: black;" type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7d217728e53617bda27873180_08580f1f62" tabindex="-1" value=""></div> <div class="clear"> <input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> <!--End mc_embed_signup--> </div> </div> <footer id="footer-main-container" class="footer-distributed" style="margin: 0;"></footer> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <!-- <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- <script src="plugins/zoom/js/classie.js"></script> <script src="plugins/zoom/js/dynamics.min.js"></script> <script src="plugins/zoom/js/main.js"></script> --> <script src="https://vjs.zencdn.net/6.2.4/video.js"></script> <script src="js/jquery-modal-video.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script> --> <script src="js/jquery.parallax.min.js"></script> <script src="js/jquery.backstretch.min.js"></script> <script src="js/main.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- <script src="assets/js/ie10-viewport-bug-workaround.js"></script> --> <script type="text/javascript" src="js/slick.min.js"></script> <script> function mobileCheck() { let check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); return check; }; window.addEventListener('click', event => { if (event.target.matches('video')) { event.stopPropagation(); } }, true); $(document).ready(function() { $("#video-bg").hide(); }); // $(document).ready(function() { // $('#latest-news-genesis-augmented-reality').css("visibility", "hidden"); // }); // function init() { // var vidDefer = document.getElementsByTagName('iframe'); // for (var i=0; i<vidDefer.length; i++) { // if(vidDefer[i].getAttribute('data-src')) { // vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src')); // } } } // window.onload = init; function init() { $.get("scripts/navbar.html", function(data){ $("#navbar-main-container").html(data); console.log("Navbar HTML Injected"); bindNavRouterEngine(); $("#video-bg").show(); }); $.get("scripts/footer.html", function(data){ $("#footer-main-container").html(data); console.log("Footer HTML Injected"); // bindNavRouterEngine(); }); // $.get("scripts/wheel-of-fortune.html", function(data){ // $("#exit-intent").html(data); // console.log("Wheel of Fortune HTML Injected"); // }); // $.get("scripts/exit-intent.html", function(data){ // $("#exit-intent").html(data); // console.log("Exit Intent HTML Injected"); // initExitIntent(); // }); $('.slick-news-slider').on('init', function(slick){ $('#latest-news-genesis-augmented-reality').css("visibility", "visible"); }); $('.slick-news-slider').slick({ lazyLoad: 'ondemand', dots: false, infinite: true, autoplay:false, arrows:true, adaptiveHeight: true, accessibility: true, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2 } }, { breakpoint: 600, settings: { slidesToShow: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1 } } ] }); // $('.slick-news-slider').on('init', function(event, slick){ // $('.slick-news-slider').show(); // }); // $('.slick-news-slider').slick({ // arrows: true, // centerPadding: "0px", // dots: true, // slidesToShow: 3, // slidesToScroll: 10, // infinite: false // }); // if(!mobileCheck()) { // console.log("is desktop"); // const tilt = $('.3d-card').tilt({ // glare: true, // maxGlare: 0.5, // reset: true, // scale: 1.02 // }); // } else { // console.log("is mobile"); // } } window.onload = init; // $(document).ready(function() { // $('.slick-news-slider').slick({ // dots: true, // infinite: false, // speed: 300, // slidesToShow: 2, // arrows: true, // draggable: true, // touchMove: true // // slidesToScroll: 4 // // responsive: [ // // { // // breakpoint: 1024, // // settings: { // // slidesToShow: 3, // // slidesToScroll: 3, // // infinite: true, // // dots: true // // } // // }, // // { // // breakpoint: 600, // // settings: { // // slidesToShow: 2, // // slidesToScroll: 2 // // } // // }, // // { // // breakpoint: 480, // // settings: { // // slidesToShow: 1, // // slidesToScroll: 1 // // } // // } // // ] // }); // }); // function exitIntentPopupCTA() { // gtag('event', 'optin', { // 'event_category': 'Exit Intent Popup CTA', // 'event_label': "20% ARFOREVER Discount", // 'event_callback': function() {} // }); // console.log("Popup Event Discount"); // console.log("Exit Intent Popup Click"); // } </script> <script src="js/navbar.js"></script> <!-- <script src="js/exit-intent/CookieService.min.js"></script> <script src="js/exit-intent/popup.js"></script> --> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; var endTime = 41; if(mobileCheck()) { endTime = 33; } function onYouTubeIframeAPIReady() { player = new YT.Player('video-bg', { height: '100%', width: '125%', videoId: 'jxPQsKsAvE4', playerVars: { 'playsinline': 1, 'autoplay': 1, 'controls':0, 'disablekb': 1, 'enablejsapi': 1, 'fs':0, 'loop':1, 'rel':0, 'end': endTime }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.mute(); event.target.playVideo(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PAUSED) { player.playVideo(); // setTimeout(stopVideo, 6000); // done = true; } if (event.data == YT.PlayerState.ENDED) { console.log("ENDED"); player.seekTo(0); console.log("HERO - VIDEO ENDED"); refreshPlayer(); } } function refreshPlayer() { $("#video-bg").hide(); console.log("HERO - Refresh Timer Start"); setTimeout(function() { $("#video-bg").show(); console.log("HERO - Refresh Timer Done"); }, 500); } function stopVideo() { player.stopVideo(); } </script> <!-- project's structure - svg for the color wheel (consisting of circle elements, and a group in which the slices are added) - svg for the arrow pointing at the selected color (positioned to the right of the circle) - heading in which to show the color selected through the wheel (hidden by default) - container for the simple instructions and the button spinning the wheel--> <script type="module"> import { initializeApp } from "https://www.gstatic.com/firebasejs/9.13.0/firebase-app.js"; import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.13.0/firebase-analytics.js"; import { getFirestore, collection, getDocs, query, orderBy, limit } from "https://www.gstatic.com/firebasejs/9.13.0/firebase-firestore.js"; const firebaseConfig = { apiKey: "AIzaSyDwX1sAWq5tiASTHxaJlkvuMqsV5DNOO9A", authDomain: "genesis-augmented-reality.firebaseapp.com", databaseURL: "https://genesis-augmented-reality.firebaseio.com", projectId: "genesis-augmented-reality", storageBucket: "genesis-augmented-reality.appspot.com", messagingSenderId: "490695145874", appId: "1:490695145874:web:8bf40b01da55c6b6d4294b" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); const firebase = getFirestore(app); // const functions = require('firebase-functions'); // target the SVG and the pin right next to it const containerSlices = document.querySelector('g#slices'); const pin = document.querySelector('svg#pin'); // target the heading and the button const heading = document.querySelector('h1'); const spinButton = document.querySelector('button'); const closeButton = document.querySelector('#wheel-of-fortune-close-btn'); // utility functions returning a random integer in a range and a random hex value const randomInt = (min = 0, max = 16) => Math.floor(Math.random() * (max - min) + min); const randomHex = () => randomInt().toString(16); // variable updated for the timeout let timeoutID = 0; // object used throughout the script, describing the colors and 3 particular rotation values // the idea is to include the three slices aroud the wheel and have the arrow point always at one of them const suspicious = [ { rotation: 0, color: '7bed9f' }, { rotation: 15, color: 'ff4757' }, { rotation: 30, color: 'ff4757' }, { rotation: 45, color: 'ff4757' }, { rotation: 60, color: 'ff4757' }, { rotation: 75, color: 'ff4757' }, { rotation: 90, color: 'ff4757' }, { rotation: 105, color: 'ff4757' }, { rotation: 120, color: 'ff4757' }, { rotation: 135, color: 'ff4757' }, { rotation: 150, color: 'ff4757' }, { rotation: 165, color: 'ff4757' }, { rotation: 180, color: 'ff4757' }, { rotation: 195, color: 'ff4757' }, { rotation: 210, color: 'ff4757' }, { rotation: 225, color: 'ff4757' }, { rotation: 240, color: 'ff4757' }, { rotation: 255, color: 'ff4757' }, { rotation: 270, color: 'ff4757' }, { rotation: 285, color: 'ff4757' }, { rotation: 300, color: 'ff4757' }, { rotation: 315, color: 'ff4757' }, { rotation: 330, color: 'ff4757' }, { rotation: 345, color: 'ff4757' } ]; // add a random fill color to the circle behind the slices let randomFill = ''; let greenFill = "7bed9f"; let redFill = "2C3A47"; initialiseApp(); document.querySelector('.exit-intent-popup').classList.add('visible'); // initExitIntent(); function initialiseApp() { // immediately add simple dots around the wheel for (let i = 0; i < 48; i += 1) { const transform = `rotate(${360 / 48 * i}), translate(0 -49.5), rotate(${-360 / 48 * i})`; const dot = `<circle r="0.5" cx="50" cy="50" fill="currentColor" transform="${transform}"/>`; containerSlices.innerHTML += dot; } for (let i = 0; i < 6; i += 1) { randomFill += randomHex(); } // document.querySelector('svg circle#slice').style.fill = greenFill; // document.querySelector('svg circle#slice').style.fill = randomFill; // create the slices, 24 in total, using a bit of trigonometry to compute the appropriate arc coordinates for (let i = 360; i > 0; i -= 15) { // values for the path element const xCoor = 50 + Math.sin(i * Math.PI / 180) * 47; const yCoor = 50 - Math.cos(i * Math.PI / 180) * 47; const flags = i > 180 ? '0 1 1' : '0 0 1'; // initialize a variable for the fill color let fill = ''; // create six random hex values for the fill color // ! the look might be rather jarring for (let j = 0; j < 6; j += 1) { fill += randomHex(); } // if the de-cremented variable matches the arbitrary rotation value of one of the objects, find the specific object const suspect = suspicious.find(pairing => pairing.rotation === i); // if existing, substitute the random hex with the value specified in said object if (suspect) { fill = suspect.color; } fill = redFill; // create the path element and append it to the SVG container const path = ` <path d="M 50 50 L 50 3 A 47 47 ${flags} ${xCoor} ${yCoor}" fill=#${fill} /> `; containerSlices.innerHTML += path; } // get email from input // email -> add to MC audience via ajax post // email -> post to https function // * IN FUNCTION // calculate if it's a winner 1/x chance // If it is add to the firebase "WheelOfFortune_Results" // email, winning_index, attempt_datetime // // const functions = require('firebase-functions'); $("#wheel-of-fortune-error-output").hide(); // attach a click event listener on the button, at which point call the spinWheel function spinButton.addEventListener('click', function() { var email = $("#wheel-of-fortune-email-input").val(); if(email.includes("@")) { start(email); $("#wheel-of-fortune-error-output").hide(); } else { $("#wheel-of-fortune-error-output").html("Invalid email. Please try again"); $("#wheel-of-fortune-error-output").show(); } }); closeButton.addEventListener('click', function() { $(".wheel-of-fortune-container").hide(); }); } function start(userEmail) { var url = "https://us-central1-genesis-augmented-reality.cloudfunctions.net/wheelOfFortune?userEmail=" + userEmail; fetch(url).then(function (response) { // The API call was successful! return response.json(); }).then(function (data) { // This is the JSON from our response console.log(data); if(data.result.response == null) { $("#wheel-of-fortune-error-output").html(data.result.error_msg); $("#wheel-of-fortune-error-output").show(); } else { const randomSuspect = data.result.index; spinWheel(randomSuspect); } }).catch(function (err) { // There was an error console.warn('Something went wrong.', err); }); } // function spinning the wheel function spinWheel(_randomSuspect) { // remove the event listener from the button and the wheel, to avoid running the function twice at the same time spinButton.removeEventListener('click', spinWheel); pin.removeEventListener('click', spinWheel); // immediately hide the heading showing the matching color heading.classList.add('isHidden'); // add a class to the pin and the button to show how they should not be clicked pin.classList.add('isSpinning'); spinButton.classList.add('isSpinning'); // create variables for the duration of the rotation, as whell as the number of rotations achieved by the wheel const randomDuration = randomInt(4, 10); const randomRotate = randomInt(10, 20); // crate a variable to pick from one of the objects at random const randomSuspect = _randomSuspect; // apply the transition and the transform properties containerSlices.style.transformOrigin = '50%'; containerSlices.style.transition = `transform ${randomDuration}s ease-out`; /* for the rotation, beside an arbitrary x360 rotation, remember to - add 90 to match the position of the arrow (to the very right of the wheel) - subtract the rotation of the slices - add up to a slice as to have the arrow point within the slice's boundaries */ containerSlices.style.transform = `rotate(${randomRotate * 360 - suspicious[randomSuspect].rotation + 90 + randomInt(0, 360 / 24)}deg)`; pin.style.animation = `pinWheel ${randomDuration / 10}s 10 ease-in-out`; // after the time allocated for the rotation show the heading with the "random" color, update the custom property with its value timeoutID = setTimeout(() => { console.log(`#${suspicious[randomSuspect].color}`); if(`#${suspicious[randomSuspect].color}` == "#7bed9f") { // WIN $("#result-output").html("You Win !"); } else { // LOSE $("#result-output").html("No Dice. Better luck next time."); } heading.classList.remove('isHidden'); pin.style.animation = ''; document.documentElement.style.setProperty('--color-theme', `#${suspicious[randomSuspect].color}`); // remove the class on the pin and button showing the forbidden cursor pin.classList.remove('isSpinning'); spinButton.classList.remove('isSpinning'); // reset the event listener on the button and the pin spinButton.addEventListener('click', spinWheel); pin.addEventListener('click', spinWheel); // clear the interval and set the boolean back to false clearInterval(timeoutID); }, randomDuration * 1000); } // call the same function when pressing the pin // pin.addEventListener('click', spinWheel); </script> </body></html>
