Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 7 | Author: cody 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
    <title>
      PaletteForge - Free Color Palette Generator | Create Beautiful Color
      Schemes
    </title>
    <meta
      name="title"
      content="PaletteForge - Free Color Palette Generator | Create Beautiful Color Schemes"
    />
    <meta
      name="description"
      content="Generate stunning color palettes instantly with PaletteForge. Choose from 13 palette types including complementary, analogous, and trendy color schemes. Free online color tool for designers and developers."
    />
    <meta
      name="keywords"
      content="color palette generator, color scheme creator, hex color combinations, complementary colors, analogous colors, triadic colors, color theory tool, design colors, web design colors, color picker, palette maker, color harmony, brand colors, UI colors, CSS colors, color codes, free color tool, online palette generator, designer tools, color inspiration"
    />
  </head>
  <body>
    <div class="container">
      <h1><i class="fas fa-palette"></i> Color Palette Generator</h1>
      <p class="subtitle">
        Generate beautiful color palettes and copy them with a click!
      </p>

      <div class="controls">
        <div class="palette-type">
          <select id="paletteType">
            <option value="monochromatic" selected>Monochromatic</option>
            <option value="complementary">Complementary</option>
            <option value="analogous">Analogous</option>
            <option value="triadic">Triadic</option>
            <option value="tetradic">Tetradic</option>
            <option value="split-complementary">Split-Complementary</option>
            <option value="shades">Shades</option>
            <option value="random">Random</option>
          </select>
        </div>
        <button class="btn btn-primary" id="generateBtn">
          <i class="fas fa-magic"></i> Generate Palette
        </button>
        <button class="btn btn-secondary" id="copyAllBtn">
          <i class="fas fa-copy"></i> Copy All
        </button>
      </div>

      <div class="loading" id="loading">
        <div class="spinner"></div>
      </div>

      <div class="palette" id="palette">
        <!-- Color cards will be generated here -->
      </div>
    </div>

    <div class="copy-notification" id="copyNotification">
      <i class="fas fa-check"></i>
      <span id="copyMessage">Color copied!</span>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Share this file: