Main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoolKit - 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="css/variables.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/buttons.css">
<link rel="stylesheet" href="css/modal.css">
<link rel="stylesheet" href="css/color-picker.css">
<link rel="stylesheet" href="css/gradient.css">
<link rel="stylesheet" href="css/palette.css">
<link rel="stylesheet" href="css/themes.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/responsive.css">
</head>

<body>

<header>

    <div class="header-content">

        <div class="logo">
            <div class="text">CoolKit</div>
        </div>

        <div class="account">

            <button id="account-btn">Account</button>

            <div id="account-modal" class="modal">

                <div class="modal-content">

                    <span class="close-btn">&times;</span>

                    <h2>Account</h2>

                    <form id="login-form">

                        <label for="username">Username</label>
                        <input type="text" id="username" required>

                        <label for="password">Password</label>
                        <input type="password" id="password" required>

                        <button type="submit">Login</button>

                    </form>

                    <p>Don't have an account? <a href="#">Sign up</a></p>

                </div>

            </div>

        </div>

        <nav class="nav-menu">

            <ul>

                <li><a href="#color-picker-section">Color Picker</a></li>

                <li><a href="#gradient-section">Gradient</a></li>

                <li><a href="#custom-palette-section">Custom Palette</a></li>

                <li><a href="#explore">Explore Colors</a></li>

            </ul>

        </nav>

    </div>

</header>

<section id="color-picker-section">

    <h2>Select Your Color</h2>

    <div id="color-picker"></div>

    <div class="button-group">

        <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>

    <div id="color-preview"></div>

    <div id="palette-preview"></div>

    <div class="button-group">

        <button id="copy-link-btn">Copy Color Link</button>

        <button id="share-social-btn">Share on Social Media</button>

    </div>

</section>

<section id="gradient-section">

    <h2>Create a Gradient</h2>

    <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">

    <select id="gradient-type">

        <option value="linear">Linear Gradient</option>

        <option value="linear-to-right">Left → Right</option>

        <option value="linear-to-bottom">Top → Bottom</option>

        <option value="linear-to-diagonal">Diagonal</option>

        <option value="radial">Radial</option>

        <option value="conic">Conic</option>

    </select>

    <div class="button-group">

        <button id="generate-gradient-btn">Generate Gradient</button>

        <button id="copy-gradient-btn">Copy Gradient</button>

    </div>

    <div id="gradient-preview"></div>

    <pre id="gradient-code"></pre>

</section>

<section id="custom-palette-section">

    <h2>Generate Your Custom Palette</h2>

    <div id="custom-color-inputs">

        <div class="custom-color-input-item">
            <input type="color" id="customColor1" value="#2e1f27">
        </div>

        <div class="custom-color-input-item">
            <input type="color" id="customColor2" value="#4a253a">
        </div>

        <div class="custom-palette-count">

            <select id="custom-palette-count-input">

                <option selected>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>

            </select>

        </div>

    </div>

    <div id="custom-palette" class="custom-palette"></div>

</section>

<section id="explore">

    <h2>Explore More Colors</h2>

    <div id="predefined-palettes-container"></div>

</section>

<section id="additional-coloring">

    <h2>Color Themes</h2>

    <div class="color-themes">

        <article class="theme-item">

            <div class="theme-preview" style="background:linear-gradient(to right,#ff7e5f,#feb47b);"></div>

            <p>Sunset Theme</p>

        </article>

        <article class="theme-item">

            <div class="theme-preview" style="background:linear-gradient(to right,#43cea2,#185a9d);"></div>

            <p>Ocean Blue</p>

        </article>

    </div>

</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="js/modal.js"></script>
<script src="js/colorPicker.js"></script>
<script src="js/gradient.js"></script>
<script src="js/palette.js"></script>
<script src="js/predefinedPalette.js"></script>
<script src="js/share.js"></script>
<script src="js/main.js"></script>

</body>
</html>