<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Language" content="en-US">
    <meta http-equiv="cleartype" content="on">
    <meta name="viewport"  content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />

    <title>0xcolor.com</title>
    <meta name="description" content="0xcolor.com">
    <meta name="keywords" content="color, random color, #color, 0xcolor, hexcolor, hex color, ui color, mosaic, mosaic color, mosaic tile.">

    <meta name="author" content="0xcolor.com">
    <meta name="HandheldFriendly" content="true">

    <meta property="og:title" content="0xcolor.com"/>
    <meta property="og:description" content="color, random color, #color, 0xcolor, hexcolor, hex color, ui color, mosaic, mosaic color, mosaic tile."/>
    <meta property="og:image" content="/logo.png"/>
    <meta property="og:logo" content="/logo.png"/>
    <meta property="og:url" content="https://0xcolor.com"/>
    <meta property="og:type" content="website"/>
    <meta property="og:site_name" content="0xcolor.com"/>

    <meta name="twitter:title" content="0xcolor.com"/>
    <meta name="twitter:description" content="color, random color, #color, 0xcolor, hexcolor, hex color, ui color, mosaic, mosaic color, mosaic tile."/>
    <meta name="twitter:image" content="/logo.png"/>
    <meta name="twitter:url" content="https://0xcolor.com"/>
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:site" content=""/>
    <meta name="twitter:creator" content="" />
    
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" href="/favicon.png">
    
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        #grid-container {
            width: 100vw;
            display: grid;
            gap: 1px;
            background-color: white;
            grid-template-columns: repeat(32, 1fr);
            grid-template-rows: repeat(32, 1fr);
            gap: 1px;
        }
        .grid-item {
            aspect-ratio: 1;
        }
        .davidmusk {
          margin: 20px;
        }
        a {
          color: black;
          text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="grid-container"></div>
    <div class="davidmusk"><a href="https://1024.co/davidmusk" target="_blank">David Musk</a></div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const gridContainer = document.getElementById('grid-container');
            let color_decimal_number = 0;
            let color = '';

            function decimalToHexPadded(decimalNumber) {
              if(decimalNumber > 16777215){
                decimalNumber = 16777215;
              }
              // Convert the number to hexadecimal
              let hex = decimalNumber.toString(16);
              while (hex.length < 6) {
                hex = '0' + hex;
              }
              return '#' + hex.toUpperCase();
            }

            function createGridItem() {
                const item = document.createElement('div');
                item.className = 'grid-item';
                item.style.backgroundColor = color;
                item.title = color;
                return item;
            }

            function updateColors() {
                color_decimal_number = Math.floor(Math.random() * 16777217);
                color = decimalToHexPadded(color_decimal_number);
            }

            function fillGrid() {
                for (let i = 0; i < 1024; i++) {
                  updateColors();
                  gridContainer.appendChild(createGridItem());
                }
            }

            fillGrid();

            // Update grid on window resize
            window.addEventListener('resize', () => {
                gridContainer.innerHTML = '';
                color_decimal_number = 0;
                color = '';
                fillGrid();
            });
        });
    </script>
</body>
</html>
