index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Design Toolkit</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iro.js@5.5.1/dist/iro.min.css">
    <link rel="stylesheet" href="adit.css">

</head>
<body>

    <header>
        <div class="header-content">
            <div class="main">
        <!-- header section -->
        <div class="logo">
        <!-- <div class="alpha"> -->
        <div class="text">CoolKit</div>
        </div>
<!-- Account Modal -->
        <div class="account">
            <button id="account-btn">Account</button>
            <!-- Account Modal -->
            <div id="account-modal" class="modal">
                <div class="modal-content">
                    <span class="close-btn">&times;</span>
                    <!-- Account Form -->
                    <h2>Account</h2>
                    <form id="login-form">
                        <label for="username">Username:</label>
                        <input type="text" id="username" name="username" required>
                        <label for="password">Password:</label>
                        <input type="password" id="password" name="password" required>
                        <button type="submit">Login</button>
                    </form>
                    <p>Don't have an account? <a href="#">Sign up</a></p>
                </div>
            </div>
        </div>
    </div>
        <nav class="nav-menu">
            <ul>
                <li><a href="#color-picker-section">Color-Picker</a></li>
                <li><a href="#gradient-section">Generate Gradient</a></li>
                <li><a href="#Generate">customize color</a></li>
                <li><a href="#explore">Colors Themes</a></li>
            </ul>
        </nav>
 
        </div>
    </header>
<!--end of header section --> <!--end of header section -->

    <!-- Color Picker Section -->
    <section id="color-picker-section">
        <h2>Select Your Color</h2>
        <div id="color-picker"></div>
        <button id="add-color-btn">Add Color</button>
        <button id="save-palette-btn">Save Palette</button>
        <button id="share-palette-btn">Share Palette</button>
        <div id="color-preview"></div>
        <div id="palette-preview"></div>
         <!-- Share Palette Section -->

    <!-- <section id="share-section"> -->
        <button id="copy-link-btn">Copy the color link</button>
        <button id="share-social-btn">Share on Social Media</button>
    <!-- </section> -->
    </section>

    <!-- Gradient Section -->
    <section id="gradient-section">
        <h2>Create a Gradient</h2>
        <!-- Color inputs for gradient -->
        <label for="gradient-color1">First Color:</label>
        <input type="color" id="gradient-color1" value="#b8c3ff">
        <label for="gradient-color2">Second Color:</label>
        <input type="color" id="gradient-color2" value="#fdd3f0">

        <!-- Dropdown for selecting gradient type -->
        <select id="gradient-type">
            <option value="linear">Linear Gradient (Default)</option>
            <option value="linear-to-right">Linear Gradient (Left to Right)</option>
            <option value="linear-to-bottom">Linear Gradient (Top to Bottom)</option>
            <option value="linear-to-diagonal">Linear Gradient (Diagonal)</option>
            <option value="radial">Radial Gradient</option>
            <option value="conic">Conic Gradient</option>
        </select>
        <!-- Button to generate the gradient -->
        <button id="generate-gradient-btn">Generate Gradient</button>

        <!-- Button to copy the gradient CSS -->
        <button id="copy-gradient-btn">Copy Gradient</button>

        <!-- Preview of the generated gradient -->
        <div id="gradient-preview" style="width: 100%; height: 150px; margin-top: 20px; border-radius: 10px; border: 1px solid #ccc;"></div>
        <!-- Display the generated gradient CSS code -->
        <pre id="gradient-code" style="margin-top: 10px; font-family: monospace; padding: 10px; background-color: #f5f5f5;"></pre>
        </section>


<!-- palette section  --><!-- palette section  -->
<section id="Generate">

<!-- custom-palette start code -->
<h2>Generate Your Custom Palette</h2>
<div id="custom-color-inputs">
    <div class="custom-color-input-item"> 
        <input type="color" id="customColor1" value="#2e1f27"> <!-- Default color -->
    </div>
    <div class="custom-color-input-item">
        <input type="color" id="customColor2" value="#4a253a"> <!-- Default color -->
    </div>
    <div class="custom-palette-count">
        <select name="" id="custom-palette-count-input">
            <option value="6" selected>6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
    </div>
</div>
<!-- custom-palette end code -->
<div class="custom-palette" id="custom-palette"></div>

</section>


<span id="explore">
  <!-- Predefined Color Palette Section -->
  <div id="predefined-palette-section">
    <h2>Explore More Colors</h2>
    <div class="predefined-palettes-container" id="predefined-palettes-container">
        <!-- Multiple palettes will be inserted here -->
    </div>
</div>
</span>

<!-- Predefined  -->

  <!-- Additional Coloring Feature Before Footer -->
  <section id="additional-coloring">
    <h2>Color Themes</h2>
    <div class="color-themes">
        <!-- Theme items (add your content here) -->
        <div class="theme-item">
            <div class="theme-preview" style="background: linear-gradient(to right, #ff7e5f, #feb47b);"></div>
            <p>Sunset Theme</p>
        </div>
        <div class="theme-item">
            <div class="theme-preview" style="background: linear-gradient(to right, #43cea2, #185a9d);"></div>
            <p>Ocean Blue</p>
        </div>
        <!-- Add more themes as needed -->
    </div>
</section>


<!-- footer section -->
    <footer>
        <p>Designed with ❤️ for color enthusiasts.</p> 
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
    <script src="adit.js"></script>

</body>
</html>