Pangram Lab

<html lang="en"> <head> <meta charset="UTF-8"> <title>Pangram Lab</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" media="all" href="./font/font.css" />  <link rel="stylesheet" type="text/css" media="all" href="./dist/style.css" /> <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚗️</text></svg>"> <meta property="og:image" content="/images/shareImg.jpg"> <meta property="og:image:type" content="image/jpg"> <meta property="og:image:width" content="1024"> <meta property="og:image:height" content="1024">  <script async src="https://www.googletagmanager.com/gtag/js?id=G-QNR0QQJH68"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-QNR0QQJH68'); </script> </head> <body class="map_page"> <header id="header"></header> <div class="mapcontainer"> <div class="map"></div> </div> <div class="nav"> <div class="minimap"> <canvas id="minimapcanvas"></canvas> <div class="viewport"></div> </div> <div class="row"> <div class="button map_tool zoom_out">-</div> <div class="button map_tool percentage">100%</div> <div class="button map_tool zoom_in">+</div> <div class="button show_map"><span>↓</span></div> <div class="button" id="position-icon"> <svg class="icon-ordered" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect id="rect_1" x="11" y="11" width="6" height="6" rx="1" stroke="black" stroke-width="1.5" transform="rotate(0 0 0)" /> <rect id="rect_2" x="1" y="11" width="6" height="6" rx="1" stroke="black" stroke-width="1.5" transform="rotate(0 0 0)" /> <rect id="rect_3" x="11" y="1" width="6" height="6" rx="1" stroke="black" stroke-width="1.5" transform="rotate(0 0 0)" /> <rect id="rect_4" x="1" y="1" width="6" height="6" rx="1" stroke="black" stroke-width="1.5" transform="rotate(0 0 0)" /> </svg> </div> </div> </div> <footer id="footer"></footer> <div class="mobile">🥵🥵🥵<br>Experience the Lab<br>on your desktop computer!</div> <script src="./js/jquery-3.6.0.min.js"></script> <script src="./js/p5.min.js"></script> <script src="./data/data.js"></script> <script src="./js/global.js"></script> <script src="./js/index.js"></script> <script> $(document).ready(function() { $("#header").load("header.html"); $("#footer").load("footer.html"); }); </script> </body> </html>

CINXE.COM

Pangram Lab