packages/colors/tool/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3     <head>
   4         <meta charset="UTF-8" />
   5         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   6         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   7         <title>Color Tool</title>
   8         <style>
   9             body {
  10                 font-family: Arial, Helvetica, sans-serif;
  11                 padding: 48px;
  12             }
  13
  14             .colors {
  15                 display: flex;
  16                 font-family: 'Courier New', Courier, monospace;
  17                 gap: 8px;
  18                 margin-bottom: 8px;
  19             }
  20
  21             .color {
  22                 border-radius: 8px;
  23                 padding: 8px;
  24                 user-select: all;
  25             }
  26         </style>
  27     </head>
  28     <body>
  29         <form id="form">
  30             <input id="input" />
  31             <button type="submit">generate</button>
  32         </form>
  33         <h2>Light</h2>
  34         <div class="colors" id="light"></div>
  35         <h2>Dark</h2>
  36         <div class="colors" id="dark"></div>
  37         <h2>Accent</h2>
  38         <div class="colors" id="accent"></div>
  39         <script src="bundle.js"></script>
  40     </body>
  41 </html>