create.html

<!-- SimpleCookie, a minimalist yet efficient cookie manager for Firefox -->
<!-- Made with ❤ by micka from Paris -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Create and edit cookies in Firefox with SimpleCookie">
    <title>SimpleCookie | Create & Edit</title>
    <link rel="stylesheet" href="theme.css">
    <style>
        .form-group {
            margin-bottom: 18px;
            display: flex;
            align-items: center;
        }

        label {
            display: inline-block;
            width: 140px;
            font-weight: 500;
            font-size: 15px;
            color: var(--text-color);
        }

        input,
        select {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            color: var(--text-color);
            background-color: var(--input-background);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        input:focus,
        select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
        }

        input::placeholder {
            color: #999;
        }

        .required label::after {
            content: " *";
            color: var(--error-color);
        }

        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 15px;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.2s;
        }

        button:hover {
            background-color: var(--button-hover);
        }

        .section .form-group:first-of-type {
            margin-top: 10px;
        }

        .section .form-group:last-of-type {
            margin-bottom: 0;
        }

        .beta-text {
            margin-top: 20px;
            text-align: right;
            font-size: 12px;
            color: #777;
        }

        @media (max-width: 600px) {
            .form-group {
                flex-direction: column;
                align-items: flex-start;
            }

            label {
                width: 100%;
                margin-bottom: 5px;
            }

            input,
            select {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-container">
            <h1>SimpleCookie | <b>Create & Edit</b></h1>
            <div class="background-icon"></div>
        </div>

        <div id="messageBox">
            <span id="messageText"></span>
            <button id="closeMessage" aria-label="Close message">×</button>
        </div>

        <form id="createCookieForm">
            <!-- Basic Cookie Properties -->
            <div class="section">
                <div class="section-title">Basic Properties</div>

                <div class="form-group required">
                    <label for="name" title="If you update a cookie by changing its name, SimpleCookie will most likely create another cookie">Name</label>
                    <input type="text" id="name" required aria-required="true">
                </div>

                <div class="form-group required">
                    <label for="value" title="Data stored in the cookie (e.g., session token, preferences)">Value</label>
                    <input type="text" id="value" required aria-required="true">
                </div>

                <div class="form-group required">
                    <label for="domain" title="In Firefox's Cookie API, a domain with a leading dot (`.example.com`) matches the base domain and all its subdomains, while a host without the leading dot (`example.com`) matches only that exact domain">Domain</label>
                    <input type="text" id="domain" required placeholder="example.com" aria-required="true">
                </div>

                <div class="form-group required">
                    <label for="path" title="URL path where cookie is valid (/ means entire domain)">Path</label>
                    <input type="text" id="path" value="/" required aria-required="true">
                </div>
            </div>

            <!-- Security Settings -->
            <div class="section">
                <div class="section-title">Security Settings</div>

                <div class="form-group">
                    <label for="secure" title="If Yes, cookie is only sent over HTTPS connections">Secure</label>
                    <select id="secure">
                        <option value="true">Yes</option>
                        <option value="false">No</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="httpOnly" title="If Yes, JavaScript cannot access this cookie">HttpOnly</label>
                    <select id="httpOnly">
                        <option value="true">Yes</option>
                        <option value="false">No</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="sameSite" title="Controls cross-site cookie behavior (None: all requests, Lax: limited cross-site, Strict: same-site only)">SameSite</label>
                    <select id="sameSite">
                        <option value="no_restriction">None</option>
                        <option value="lax">Lax</option>
                        <option value="strict">Strict</option>
                    </select>
                </div>
            </div>

            <!-- Advanced Options -->
            <div class="section">
                <div class="section-title">Advanced Options</div>

                <div class="form-group">
                    <label for="partitionKey" title="Site URL for partitioned cookies (CHIPS). Enter with or without 'https://' prefix (e.g., 'google.com' or 'https://google.com')">Partition Key</label>
                    <input type="text" id="partitionKey" placeholder="example.com">
                </div>

                <div class="form-group">
                    <label for="storeId" title="Firefox container for this cookie">Container</label>
                    <select id="storeId">
                        <option value="">Loading containers...</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="firstPartyDomain" title="Domain that should be treated as first-party for this cookie">First Party Domain</label>
                    <input type="text" id="firstPartyDomain" placeholder="example.com">
                </div>

                <div class="form-group">
                    <label for="expirationDate" title="When cookie expires (if blank, becomes a session cookie)">Expires</label>
                    <input type="date" id="expirationDate">
                </div>
            </div>

            <div id="beta-text" class="beta-text">Proceed with caution ⚠️</div>
            <button type="submit">Create Cookie</button>
        </form>
    </div>

    <script src="create.js"></script>
</body>
</html>