RaMemory/build/index.html

63 lines
23 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="en"><head><title>Raphy's Memory Matrix Madness | Sharpen Cognitive Skills Offline</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="keywords" content="HTML, SCSS, JavaScript,Memory game,Online game,JS+CSS game,Memory challenge,Interactive game,Keyboard navigation,Memory skill test,Card matching,Fun game"><meta name="author" content="Raphael Martin"><meta name="description" content="Experience the thrill of memory improvement with RaMemory MM! Customize card numbers, styles, and speeds for a personalized memory challenge. Play offline and develop your cognitive prowess with each fun-filled match."><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"><meta name="robots" content="index,follow"><meta property="og:title" content="Raphy's Memory Matrix Madness - Train Your Brain Anywhere, Anytime"><meta property="og:description" content="Join the adventure with Raphy's Memory Matrix Madness! A progressive web app offering offline fun and cognitive skill enhancement. Tackle memory puzzles at varying difficulties, track your progress, and master memory!"><meta property="og:image" content="./media/og.png"><meta property="og:image:url" content="./media/og.png"><meta property="og:image:width" content="1524"><meta property="og:image:height" content="800"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Challenge Your Mind with Raphy's Memory Matrix Madness - No Internet Required!"><meta name="twitter:description" content="Discover Raphy's Memory Matrix Madness - the offline game that adapts to your cognitive level, offering endless fun while boosting memory and concentration. Customize your play, achieve high scores, and take the memory challenge on the go!"><meta name="twitter:image" content="./media/og.png"><meta name="apple-mobile-web-app-capable" content="no"><meta name="google" content="notranslate"><!-- optional you can have a additional JavaScriptfirework when the player wins ( requires js from the bottom to )--><!-- <link rel="stylesheet" href="Css/Firework.min.css">
<link rel="stylesheet" href="Css/main.min.css">--><link rel="stylesheet" href="css/index.css"><link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png"><link rel="manifest" href="favicon/site.webmanifest"><link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#f09130"><link rel="shortcut icon" href="favicon/favicon.ico" type="image/vnd.microsoft.icon"><meta name="msapplication-TileColor" content="#f09130"><meta name="msapplication-TileImage" content="favicon/mstile-310x310.png"><meta name="msapplication-config" content="favicon/browserconfig.xml"><meta name="theme-color" content="#333333"><meta name="color-scheme" content="dark light"></head><body><div><h1 class="mb-1 user-select-none">RaMemory MM</h1><p class="m-1 h5 user-select-none"><i>Raphy's Memory Matrix Madness</i></p><div class="welcome"><div class="container"><figure class="light-mode-only user-select-none" width="850" height="195"><video loading="lazy" title="RaMemory light with colors" width="850" height="195" loop autoplay muted><source src="https://ramemory.altogether.at/media/light_intro.webm" type="video/webm"><source src="https://ramemory.altogether.at/images/light_intro.mp4" type="video/mp4"></video></figure><figure class="dark-mode-only user-select-none" width="850" height="195"><video loading="lazy" title="RaMemory dark with colors" width="850" height="195" loop autoplay muted><source src="https://ramemory.altogether.at/media/dark_intro.webm" type="video/webm"><source src="https://ramemory.altogether.at/images/dark_intro.mp4" type="video/mp4"></video></figure><p class="browser-hidden user-select-none">Welcome back</p><p class="inapp-hidden">Welcome to RaMemory MM - Raphy&#39;s Memory Matrix Madness — a captivating and colorful journey through the world of memory matching games. Whether you&#39;re looking to pass the time, sharpen your cognitive skills, or simply enjoy a challenge, you&#39;ve discovered the perfect gaming companion that travels with you everywhere, with no internet connection required. Launch into an offline adventure where your memory skills are both your weapon and ally in the whimsical universe of matching pairs.</p></div></div><div class="container d-flex flex-row justify-content-space-between"><div><button class="btn-install-as-app d-none rounded-top">Install as App</button></div></div></div><div id="memory-settings" class="pt-2 user-select-none"><div class="d-flex flex-wrap justify-content-center"><div class="ms-2 me-2"><div class="d-flex flex-wrap justify-content-space-between"><label class="me-1" for="memory-pair-count">amount duplicates:</label> <input type="number" id="memory-pair-count" min="2" max="100" value="2"></div><div class="d-flex flex-wrap justify-content-space-between"><label class="me-1" for="memory-pairs">amount same cards:</label> <input type="number" id="memory-pairs" min="2" max="100" value="9"></div><div class="d-flex flex-wrap justify-content-space-between"><label class="me-1" for="memory-size">card size:</label> <input type="number" id="memory-size" min="1" max="100" value="14"></div></div><div class="ms-2 me-2"><div class="d-flex flex-wrap justify-content-space-between"><label class="me-1" for="speed-select">flip speed:</label> <select id="speed-select"><option value="0">😴 sleep mode</option><option value="1">🦥 slot</option><option value="2">🐌 snail</option><option value="3">🚶 chilly</option><option value="4">🚆 train</option><option value="5">🚀 rocket</option><option value="6">🤪 insane</option></select></div><div class="d-flex flex-wrap justify-content-space-between"><label class="me-1" for="front-style-select">front style:</label> <select id="front-style-select"><optgroup label="©️ altogether"><option value="0">©⬛ black</option><option value="1">©⬜️ white</option><option value="2">©🟧️ orange</option><option value="3">©🟩️ green</option><option value="4">©🟦 blue</option></optgroup><optgroup label="🐸 altogether frog"><option value="5">🐸⬛ black</option><option value="6">🐸⬜️ white</option><option value="7">🐸🟧️ orange</option><option value="8">🐸🟩️ green</option><option value="9">🐸🟦 blue</option></optgroup><optgroup label="🎨 just colors"><option value="10">⬛️ black</option><option value="11">⬜️ white</option><option value="12">🟧orange</option><option value="13">🟩️ green</option><option value="14">🟦 blue</option></optgroup></select></div><div class="d-flex flex-wrap justify-content-space-between"><label class="me-1" for="back-style-select">back stylet:</label> <select id="back-style-select"><option value="9">🎨 colors</option><option value="0">📷 pictures</option><optgroup label="🔢 numbers"><option value="8">0⃣ start with 0</option><option value="7">0⃣ start with 0 + 🎨</option><option value="29">0⃣ random</option><option value="28">0⃣ random + 🎨</option></optgroup><optgroup label="📝 text"><option value="4">📝short</option><option value="3">📝short + 🎨</option><option value="6">📝long</option><option value="5">📝long + 🎨</option></optgroup><optgroup label="emojis"><option value="2">✴️ all emojis</option><option value="1">✴ all emojis + 🎨</option><option value="11">😀️ smileys & emotions</option><option value="10">😀️ smileys & emotions + 🎨</option><option value="13">🧟 people & body</option><option value="12">🧟 people & body + 🎨</option><option value="15">🐸 animals & nature</option><option value="14">🐸 animals & nature + 🎨</option><option value="17">🍕 food & drinks</option><option value="16">🍕 food & drinks + 🎨</option><option value="19">🗺️ travel & place</option><option value="18">🗺️ travel & place + 🎨</option><option value="21">🎉 activities</option><option value="20">🎉 activities + 🎨</option><option value="23">💡 objects</option><option value="22">💡 objects + 🎨</option><option value="25">☀️ symbols</option><option value="24">☀️ symbols + 🎨</option><option value="27">🏴‍☠️ flags</option><option value="26">🏴‍☠️ flags + 🎨</option></optgroup></select></div></div></div><div><input id="generate-memory" class="btn main-btn success text-black" type="submit" value="start game ▶️"></div><div class="container d-flex flex-row flex-wrap justify-content-space-between"><div><button class="btn-howto me-1 rounded-top">❓ How to play</button> <button class="btn-settings me-1 rounded-top">🔧 Settings</button></div><div><button class="btn-toggle-theme ms-1 ps-1 pe-1 rounded-top"><span class="light-mode-only pe-2"><b class="bg-white btn pe-1 ps-1 pt-1">🌚</b> Dark</span> <span class="dark-mode-only ps-2 pe-0">Light <b class="bg-black btn pe-1 ps-1 pt-1">🌞️</b></span></button></div></div></div><div id="main"><div id="game" class="p-2 m-2 user-select-none"><div id="memory" class="d-none"></div><span id="memory-loader" class="loader d-none"></span><div id="won" class="p-6 left right success d-none position-fixed user-select-none"><div class="h1">🎉 well done 🎉</div></div></div><div id="about" class="container welcome inapp-hidden"><h2>About RaMemory MM</h2><p>This innovative memory training game offers an exciting opportunity to enhance your memory skills like never before. With the ability to customize the amount of duplicate cards and the number of duplicates, you can challenge yourself with not just pairs, but also triplets, quadruplets, and more.</p><p><p>By searching for multiple matches, you can push your memory to its limits, improving your cognitive abilities and concentration. With different front and back designs to choose from, RMMM allows for a rich and varied gaming experience tailored to your preferences.</p><p><p>As you navigate through the game, you'll feel the thrill of uncovering and matching cards, all while strengthening your memory and mental agility. Whether you're seeking a fun and engaging way to train your memory or a new challenge to test your skills, Raphy's Memory Matrix Madness is the perfect choice. Step into the realm of memory mastery and enjoy the benefits of enhanced cognitive function with RMMM!</p><p><figure class="dark-mode-only"><img loading="lazy" src="media/dark_images.png" alt="RaMemory dark with images"></figure><figure class="light-mode-only"><img loading="lazy" src="media/light_emoji.png" alt="RaMemory light with emojis"></figure><div class="mb-3"><h3>Game Highlights</h3><p><b>Offline Access:</b> Never miss a moment of fun with our game's offline playability. Make long commutes, waiting rooms, and remote locales the perfect backdrop for a bit of memory-testing fun, no internet required!</p><p><b>Engaging Challenges:</b> Tailor the difficulty to your preference by choosing the amount of duplicates and how many duplicates are shown. From the serene 😴 sleep mode to the electrifying 🤪 insane level, venture through a heart-pumping experience that adapts to your skill level.</p><p><b>Customizable Experience:</b> Make it your game, your way! Choose from a variety of front styles, ranging from sleek ©️ dark to vibrant 🐸 green themes, and select from a diverse range of back styles including 🎨 colors and 😀️ smileys to create a gaming environment that's uniquely yours.</p><p><b>Skill Development:</b> Beyond mere entertainment, our game is a reliable companion on your cognitive development journey, enhancing concentration, memory, and decision-making processes.</p></div><figure class="dark-mode-only"><img loading="lazy" src="media/dark_orange_number.png" alt="RaMemory dark with orange front and number back"></figure><figure class="dark-mode-only"><img loading="lazy" src="media/dark_blue_emoji.png" alt="RaMemory dark with blue front and emoji back"></figure><figure class="light-mode-only"><img loading="lazy" src="media/green_string.png" alt="RaMemory light with green front and string back"></figure><h3>General Game Synopsis</h3><p>Raphy's Memory Matrix Madness offers more than just a gaming experience; it's a journey of cognitive enhancement wrapped in layers of joy. Crafted with ingenuity using JavaScript and CSS, the game provides an intuitive and user-friendly interface that welcomes players of all ages to indulge in hours of engaging memory play.</p><p>From captivating 📷 picture cards to iconic 🏴‍☠️ flags, each round presents a refreshing challenge. Celebrate the achievement of a well-played game and track your progress with our highscore feature. With each tap, you have the opportunity to surpass your previous best, making each game an opportunity to reach new heights of memorization mastery.</p><p>Whether you're enjoying leisure time at home or seeking entertainment on-the-go, Raphy's Memory Matrix Madness is the ideal pocket-sized partner, always primed to deliver delightful and brain-boosting entertainment.</p><p>Embark on this memory-matching adventure with Raphy's Memory Matrix Madness, where fun and mental fitness intertwine seamlessly!</p></div><div id="how-to-play" class="container d-none"><h2>❓ How to play ❓</h2><p>Get ready to dive into the captivating world of memory matching with Raphy's Memory Matrix Madness (RaMemory MM). This exciting and convenient memory training game is designed to be intuitive and user-friendly, offering an engaging experience for players of all ages.</p><p>To immerse yourself in the game, follow these simple steps:</p><p><b>Navigate and Select:</b> Use the keyboard to navigate through the grid of selectable cards. Press "Tab" to move to the next card and "Shift + Tab" to move to the previous card.</p><p><b>Match the Cards:</b> Once you've selected a card, click or press "Enter" to flip it and reveal its hidden side. Remember the position and design as you uncover the cards.</p><p><b>Uncover Duplicates:</b> Your goal is to uncover duplicate cards, including pairs, triplets, quadruplets, and beyond, depending on your chosen settings.</p><p><b>Customize Your Experience:</b> Before you start your game, you can choose the amount of duplicate cards, the card size, flip speed, and various front and back designs to personalize your gaming environment.</p><p><b>Challenge Yourself:</b> Adapt the level of difficulty by selecting the amount of duplicate cards and their frequency. Push your memory to its limits and enjoy the thrill of matching while enhancing your cognitive abilities.</p><p><b>Offline Enjoyment:</b> RaMemory MM is an installable progressive web app (PWA) that works seamlessly in offline mode, allowing you to enjoy uninterrupted memory training fun wherever you go.</p><p>Embark on this memory-matching adventure, and get ready to uncover the full potential of your memory skills with RaMemory MM. Enjoy a delightful and brain-boosting gaming experience tailored to your preferences!</p></div><div id="gdpr" class="container d-none"><h2>GDPR Compliance Statement</h2><p>Our website is dedicated to adhering to the General Data Protection Regulation (GDPR) to safeguard the privacy and security of our users' data. In this regard, we provide the following information regarding cookies and service workers utilized on our site:</p><p><b>Cookies:</b></p><p>Our website employs cookies to enhance functionality and provide an efficient user experience. However, it is important to note that cookies are only utilized if explicitly activated within the settings using your pre-game preferences. Without explicit activation, cookies will not be used.</p><p><b>Service Worker:</b></p><p>We utilize service worker technology solely for offline functionality, allowing users to enjoy uninterrupted memory training fun regardless of their internet connection.</p><p><b>Data Security:</b></p><p>We want to emphasize that we do not store any personal data of our users, ensuring the privacy and security of all user data. Additionally, our site is free to use and consume, and we are committed to GDPR compliance to ensure the protection of our users' privacy and security. If you have any inquiries or require more information about our GDPR compliance and data privacy, please feel free to contact us at <a href="mailto:rama@altogether.at" title="rama@altogether.at">rama@altogether.at</a>.</p><p>We are committed to maintaining GDPR compliance and ensuring the protection of our users' privacy and security.</p><p>Kindly note that the information provided is based on the details available for this site. If there are specific requirements or additional details, we recommend reaching out to the provided contact for precise information.</p></div><div id="imprint" class="container d-none"><h2>Imprint</h2><li><b>Name:</b> Raphael Martin</li><li><b>E-Mail:</b> <a href="mailto:rama@altogether.at" title="rama@altogether.at">rama@altogether.at</a></li><p>All images on this site, are created by Raphael Martin. The rights to these pictures are wholly owned by Raphael Martin.</p><p>The font used on this site is "Text Me One" under the Open Font License. More information about the license can be found on the <a href="https://fonts.google.com/specimen/Text+Me+One/about" title="Google Fonts website">Google Fonts website</a>.</p><p><b>Disclaimer</b></p><p>We do not take responsibility for the content from external links. Any external links provided on this website are solely for informational purposes. We do not exercise any control over the content on these external links and, therefore, we do not take responsibility for such content. It is advisable to use discretion and assess the content of external links for your own protection.</p></div><div id="settings" class="container d-none user-select-none"><h2>🔧 Settings 🔧</h2><div class="text-left"><h3 class="h4 text-center">predefined start settings</h3><p class="text-center">if you close RaMemory MM it will use the defined settings</p><fieldset><input name="settings-start-value" type="radio" id="settings-start-value-0" value="0" checked="checked"> <label for="settings-start-value-0">use RaMemory defaults</label></fieldset><fieldset><input name="settings-start-value" type="radio" id="settings-start-value-1" value="1"> <label for="settings-start-value-1">use the settings at the moment from above as default</label></fieldset><fieldset><input name="settings-start-value" type="radio" id="settings-start-value-2" value="2"> <label for="settings-start-value-2">use your last selected values as default</label></fieldset><h3 class="h4 text-center">save data for the next login</h3><fieldset><input type="checkbox" id="settings-save-highscore"> <label for="settings-save-highscore">save my highscore</label></fieldset><p class="text-center">to save your data and initial configuraton RaMemory will use Cookies.</p><fieldset><input type="checkbox" id="settings-use-cookies"> <label for="settings-use-cookies">* I allow RaMemory to use the Cookies to save the above selected options.</label></fieldset><small>more informations about cookies you can find in the <a class="btn-gdpr" title="gdpr" href="#gdpr">gdpr page</a></small><div class="mb-2 mt-2 d-flex justify-content-center"><input id="clear-settings" class="btn main-btn bg-alert text-white ms-1 me-1" type="button" value="🗑️ reset"> <input id="save-settings" class="btn main-btn success text-black ms-1 me-1" type="submit" value="💾 save"></div><svg id="settings-saved" class="checkmark d-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg></div></div></div><div class="p-2 ps-2 pe-2 bg position-fixed bottom user-select-none"><div class="left h-0 right ps-2 pe-2 d-flex flex-row position-absolute top justify-content-space-between"><div class="to-top position-relative"><button class="btn-gdpr me-1 rounded-top">GDPR</button> <button class="btn-imprint rounded-top">IMPRINT</button></div><div><a title="git.altogether.at" target="_blank" class="ms-2 btn btn-git to-top position-relative rounded-top" href="https://git.altogether.at/rama/RaMemory">git</a></div></div><div class="d-flex justify-content-space-between user-select-none"><div class="align-left"><div id="tries-counter-wrap" class="d-none">tries this round <span id="tries-counter">0</span></div><div>your highscore <span id="highscore-pairs">0</span>x<span id="highscore-pairs-count">0</span>pairs <span id="highscore-count">0</span> moves</div></div><div><a href="https://www.altogether.at" target="_blank" title="altogether.at">altogether.at</a></div></div></div><!-- optional you can have a additional firework when the player wins ( requires css above to )--><!--
<script type="text/javascript" src="JavaScript/Css.min.js"></script>
<script type="text/javascript" src="JavaScript/PWA.min.js"></script>
<script type="text/javascript" src="JavaScript/Firework.js"></script>
<script type="text/javascript" src="JavaScript/Memory.min.js"></script>
<script type="text/javascript" src="JavaScript/main.min.js"></script>--><script type="text/javascript" src="js/index.js"></script><script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "WebPage",
"name": "Raphy's Memory Matrix Madness",
"url": "https://www.example.com/memory-game",
"description": "",
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Raphy's Memory Matrix Madness",
"item": "https://www.example.com"
}
]
},"author": {
"@type": "Person",
"name": "Raphael Martin",
"url": "https://www.altogether.at"
}
},
{
"@context": "http://schema.org",
"@type": "VideoGame",
"name": "Raphy's Memory Matrix Madness",
"url": "https://www.example.com/memory-game",
"description": "Test your memory with this classic single-player game.",
"gamePlatform": {
"@type": "GamePlatform",
"name": "Web"
},
"applicationCategory": "Game",
"playMode": "SinglePlayer",
"author": {
"@type": "Person",
"name": "Raphael Martin",
"url": "https://www.altogether.at"
}
},
{
"@context": "http://schema.org",
"@type": "WebApplication",
"name": "Raphy's Memory Matrix Madness",
"url": "https://www.example.com/memory-game-pwa",
"description": "Experience the memory game as a Progressive Web App for quick access and offline play.",
"applicationCategory": "Game",
"operatingSystem": "Cross-platform",
"browserRequirements": "HTML5, JavaScript",
"author": {
"@type": "Person",
"name": "Raphael Martin",
"url": "https://www.altogether.at"
}
}
]</script></body></html>