<!DOCTYPE html> <html> <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-M3MBVGG') </script> <!-- End Google Tag Manager --> <meta charset="UTF-8" /> <style type="text/css"> body { position: relative; } .play-page { display: flex; flex-direction: row-reverse; font-family: Georgia, 'Times New Roman', Times, serif; min-height: 200px; } h1, h3 { font-family: Verdana, Geneva, Tahoma, sans-serif; text-align: center; } #submit { margin-top: 10px; padding: 8px 20px; background-color: cadetblue; border: none; border-radius: 3px; font-size: 1.1em; color: white; cursor: pointer; } #submit:hover { background-color: rgb(0, 146, 156); } [type='radio'] { display: none; } [type='radio'] + label.radio-label { background: lightgrey; display: block; padding: 10px; border-radius: 4px; cursor: pointer; } label.radio-label:hover { background: darkgrey; } [type='radio']:checked + label.radio-label { background: lightcoral; } .radio-label h3 { margin: 0; display: inline-block; vertical-align: middle; width: 220px; } .thumbnail { display: inline-block; vertical-align: middle; width: 67px; height: 48px; margin-right: 4px; } body { padding: 70px 0 30px; } #addl-options { position: absolute; top: 30px; right: 30px; background-color: white; padding: 10px; cursor: pointer; width: 200px; } #addl-options > summary { list-style: none; text-align: right; } </style> </head> <body> <!-- Google Tag Manager (noscript) --> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M3MBVGG" height="0" width="0" style="display: none; visibility: hidden" ></iframe> </noscript> <!-- End Google Tag Manager (noscript) --> <h1>Magic the Guessering</h1> <div class="play-page" style="justify-content: center"> <form method="get" action="guess.html" style="display: flex; flex-direction: column; align-items: center" > <input type="radio" id="counterspell" name="whichguesser" value="counterspell" checked /> <label class="radio-label" for="counterspell"> <img class="thumbnail" src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/7/1/71cfcba5-1571-48b8-a3db-55dca135506e.jpg?1562843855" /> <h3>Counterspell Guesser</h3></label ><br /> <input type="radio" id="burn" name="whichguesser" value="burn" /> <label class="radio-label" for="burn"> <img class="thumbnail" src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/6/0/60b2fae1-242b-45e0-a757-b1adc02c06f3.jpg?1562760596" /> <h3>Match With Hot Singles</h3></label ><br /> <input type="radio" id="beast" name="whichguesser" value="beast" /> <label class="radio-label" for="beast"> <img class="thumbnail" src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/3/3/33f7e788-8fc7-49f3-804b-2d7f96852d4b.jpg?1562905469" /> <h3>Finding Fantastic Beasts</h3></label > <br /> <input type="radio" id="basic" name="whichguesser" value="basic" /> <label class="radio-label" for="basic"> <img class="thumbnail" src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/0/3/03683fbb-9843-4c14-bb95-387150e97c90.jpg?1642161346" /> <h3>How Basic</h3></label > <br /> <details id="addl-options"> <summary> <img src="https://mythicspoiler.com/images/buttons/ustset.png" style="width: 32px; vertical-align: top" /> Options </summary> <input type="checkbox" name="digital" id="digital" checked /> <label for="digital">include digital cards</label> <br /> <input type="checkbox" name="un" id="un" checked /> <label for="un">include un-cards</label> <br /> <input type="checkbox" name="original" id="original" /> <label for="original">only original set printing</label> </details> <input type="submit" id="submit" value="Play" /> </form> </div> <div style="margin: -40px 0 0; height: 60px"> <a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a> </div> <div style=" font-size: 0.9em; position: absolute; bottom: 0; left: 0; right: 0; color: grey; font-style: italic; " > made by <a style="color: rgb(0, 146, 156); font-style: italic" href="https://idamayer.com" >Ida Mayer</a > & <a style="color: rgb(0, 146, 156); font-style: italic" href="mailto:alexlien.alien@gmail.com" >Alex Lien</a >, 2022 </div> </body> </html>