<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://files.rubenverg.com/bootstrap/dist/bootstrap.css"> </head> <body class='m-4'> <h1> Dino </h1> <p> A collection of Chrome Dino resources. </p> <h2 class='mt-2'> Resources </h2> <h3 class='mt-2'> Images </h3> <h4 class='mt-2'> Realistic-ish Color </h4> <img src="realistic_color.png" alt="Realistic-ish Color"> <div class="alert alert-warning mt-2">Sucks at night!</div> <button type="button" id="realisticcolor" class="btn btn-primary"> Copy to clipboard </button> <h4 class="mt-2"> Realistic-ish Grayscale </h4> <img src="realistic_gray.png" alt="Realistic-ish Grayscale"> <button type="button" id="realisticgray" class="btn btn-primary"> Copy to clipboard </button> <h3 class="mt-2"> Sounds </h3> <h4 class="mt-2"> Minecraft </h4> <audio src="ding.mp3" controls class='d-block w-100 mt-2'></audio> Ding — recommended for Jump <button type="button" id="ding" class="btn btn-primary"> Copy to clipboard </button> <audio src="experience.mp3" controls="controls" class="d-block w-100 mt-2"></audio> Experience — recommended for Score <button type="button" id="experience" class="btn btn-primary"> Copy to clipboard </button> <audio src="oof.mp3" controls="controls" class="d-block w-100 mt-2"></audio> Oof — recommended for Death <button type="button" id="oof" class="btn btn-primary"> Copy to clipboard </button> <h2 class="mt-2"> Usage </h2> <p> In the Developer's Console (press <kbd>F12</kbd> to access), open the Elements panel, open the <code><body></code> (if it isn't opened already), open <code><div id="offline-resources"></code>. There should be two <code><img></code> tags and a <code><template></code> tag. </p> <h3 class="mt-2"> Images </h3> <p> Double click on the url (that starts with <code>data:image/png;base64,</code>) in the <code><img></code> tag where the ID is <code>offline-resources-1x</code>. Paste the image you copied by hitting <kbd><kbd>CTRL/⌘</kbd>+<kbd>V</kbd></kbd>. </p> <h3 class="mt-2"> Audio </h3> <p> Open the <code><template></code> and the <code>#document-fragment</code> contained. There should be three <code><audio></code> tags. To edit one, double-click the <code>data:audio/mpeg;base64,</code> link and paste using <kbd><kbd>CTRL/⌘</kbd>+<kbd>V</kbd></kbd>. </p> <p> <code>offline-sound-press</code> is the sound played when you jump, <code>offline-sound-hit</code> is the sound played when you die and <code>offline-sound-reached</code> is the sound played when you score (every 100 points). </p> <script> const toDataURL = url => fetch(url) .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() reader.onloadend = () => resolve(reader.result) reader.onerror = reject reader.readAsDataURL(blob) })); const set = (name, type = 'png') => { toDataURL(`https://raw.githubusercontent.com/RubenVerg/dino/master/${name}.${type}`) .then(d => { document.getElementById(name.split('_').join('')).dataset.clipboardText = d; }); } set('realistic_color'); set('realistic_gray'); set('ding', 'mp3'); set('experience', 'mp3'); set('oof', 'mp3'); </script> <script src="clipboard.min.js"></script> <script src='https://code.jquery.com/jquery-3.4.1.slim.min.js' integrity='sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n' crossorigin=anonymous></script> <script src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js' integrity='sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo' crossorigin=anonymous></script> <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js' integrity='sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6' crossorigin=anonymous></script> <script> const RealisticColor = new ClipboardJS('#realisticcolor'); const RealisticGray = new ClipboardJS('#realisticgray'); const Ding = new ClipboardJS('#ding'); const Experience = new ClipboardJS('#experience'); const Oof = new ClipboardJS('#oof'); </script> </body> </html>