Site Builder

Editing: Arcadia-Membership-Invitation.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arcadia Premiere Membership Invitation</title>
    <style>
        :root {
            --navy: #20304b;
            --gold: #e7c873;
            --white: #fff;
            --gray: #f6f8fa;
            --accent: #394f6e;
            --label: #314162;
            --shadow: 0 8px 32px rgba(32,48,75,0.16);
        }

body {
            background: var(--navy);
            min-height: 100vh;
            font-family: 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .arcadia-card {
            background: var(--white);
            border-radius: 18px;
            box-shadow: var(--shadow);
            border: 2.5px solid var(--gold);
            max-width: 520px;
            width: 98vw;
            margin: 38px 0;
            padding: 0 0 34px 0;
            overflow: hidden;
        }
        .arcadia-header {
            background: linear-gradient(120deg, var(--navy) 80%, var(--gold) 100%);
            border-radius: 15px 15px 0 0;
            padding: 38px 0 26px 0;
            text-align: center;
            color: var(--white);
            position: relative;
            border-bottom: 3px solid var(--gold);
        }
        .arcadia-header .arcadia-logo {
            font-size: 2.6rem;
            font-weight: 900;
            letter-spacing: 0.17em;
            text-transform: uppercase;
        }
        .arcadia-header .arcadia-by {
            font-size: 1rem;
            margin-top: 8px;
            letter-spacing: 0.15em;
            font-weight: 400;
        }
        .arcadia-header .arcadia-invite {
            font-size: 1.19rem;
            letter-spacing: 0.09em;
            margin-top: 15px;
            font-weight: 500;
            color: var(--gold);
        }
        form {
            padding: 28px 24px 0 24px;
        }
        h2 {
            text-align: center;
            color: var(--navy);
            text-transform: uppercase;
            font-weight: 800;
            font-size: 1.18rem;
            margin-bottom: 22px;
            letter-spacing: 0.08em;
        }
        .section-title {
            font-size: 1.05rem;
            color: var(--navy);
            font-weight: 700;
            margin: 22px 0 13px 0;
            border-bottom: 1px solid var(--accent);
            padding-bottom: 6px;
            letter-spacing: 0.03em;
        }

/* Floating Label Styles */
        .float-group {
            position: relative;
            margin-bottom: 24px;
        }
        .float-input {
            width: 100%;
            padding: 18px 14px 10px 14px;
            font-size: 1.08rem;
            border: 1.6px solid #c6cadd;
            border-radius: 10px;
            background: #f7f8fa;
            color: var(--navy);
            transition: border-color 0.18s, box-shadow 0.22s, background 0.18s;
            box-shadow: 0 1px 2px rgba(32,48,75,0.06);
            outline: none;
        }
        .float-input:focus {
            border-color: var(--gold);
            background: #fffbe7;
            box-shadow: 0 0 0 2px #e7c87344;
        }
        .float-label {
            position: absolute;
            left: 15px;
            top: 17px;
            font-size: 1.02rem;
            color: var(--label);
            background: transparent;
            pointer-events: none;
            transition: 
                transform 0.17s cubic-bezier(0.4,0,0.2,1), 
                font-size 0.17s cubic-bezier(0.4,0,0.2,1), 
                color 0.18s;
            padding: 0 2px;
        }
        .float-input:focus + .float-label,
        .float-input:not(:placeholder-shown) + .float-label {
            transform: translateY(-16px) scale(0.93);
            background: var(--white);
            font-size: 0.91rem;
            color: var(--gold);
            padding-left: 4px;
            padding-right: 4px;
        }

/* Form Row & Grouping */
        .form-row {
            display: flex;
            gap: 15px;
            margin-bottom: 0;
            flex-wrap: wrap;
        }
        .form-group {
            flex: 1 1 0;
            min-width: 170px;
        }

/* Qualifications */
        .qualifications-list {
            margin: 0;
            padding: 0 0 0 5px;
            list-style: none;
        }
        .qualifications-list li {
            padding: 7px 0 2px 0;
            color: var(--navy);
            font-size: 0.99rem;
            display: flex;
            align-items: flex-start;
        }
        .qualifications-list input[type="checkbox"] {
            accent-color: var(--gold);
            margin: 4px 10px 0 0;
            width: 18px; height: 18px;
        }

/* Preview Details */
        .preview-details .float-group {
            margin-bottom: 17px;
        }
        .highlight {
            color: var(--gold);
            font-size: 1.08rem;
            font-weight: bold;
            margin-top: 9px;
            letter-spacing: 0.04em;
        }
        textarea {
            width: 100%;
            min-height: 62px;
            border: 1.3px solid var(--accent);
            border-radius: 6px;
            background: #f6f8fa;
            padding: 9px;
            margin: 10px 0 11px 0;
            font-size: 0.98rem;
            resize: vertical;
            font-family: inherit;
        }
        .deposit-row {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 8px 0 10px 0;
        }
        .deposit-row label {
            margin: 0;
            color: var(--navy);
            font-size: 0.98rem;
        }
        .checkbox-row {
            display: flex;
            gap: 22px;
            margin: 0 0 13px 0;
        }
        .checkbox-row label {
            font-size: 0.96rem;
            color: var(--accent);
            margin: 0;
            font-weight: 400;
        }
        .signature-row {
            margin: 12px 0 5px 0;
        }
        .note {
            font-size: 0.85rem;
            color: #b6a66b;
            display: block;
            margin-top: 7px;
        }
        button[type="submit"] {
            display: block;
            width: 100%;
            background: linear-gradient(90deg, var(--gold) 85%, #ffe7a7 100%);
            color: var(--navy);
            border: none;
            border-radius: 9px;
            font-size: 1.17rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            padding: 15px 0;
            margin-top: 21px;
            box-shadow: 0 4px 16px #e7c87322;
            cursor: pointer;
            transition: background 0.17s, box-shadow 0.15s;
        }
        button[type="submit"]:hover {
            background: linear-gradient(90deg, #ffe7a7 80%, var(--gold) 100%);
            box-shadow: 0 6px 20px #e7c8733a;
        }
        /* Placeholders */
        ::placeholder { color: #b0b6c6; opacity: 1; }
        :-ms-input-placeholder { color: #b0b6c6; }
        ::-ms-input-placeholder { color: #b0b6c6; }

/* Gift Modal */
        .choose-gift-btn, .chosen-gift-summary {
            width: 100%;
            border: none;
            border-radius: 12px;
            font-size: 1.17rem;
            font-weight: 700;
            padding: 15px 0;
            margin-bottom: 12px;
            background: linear-gradient(90deg, #ffe7a7 10%, var(--gold) 60%, #ffe7a7 100%);
            color: var(--navy);
            box-shadow: 0 2px 12px #e7c87342;
            cursor: pointer;
            letter-spacing: 0.01em;
            position: relative;
            transition: box-shadow 0.19s, transform 0.13s;
            outline: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            text-align: left;
            animation: pulseGold 2s infinite;
        }
        @keyframes pulseGold {
            0% { box-shadow: 0 2px 12px #e7c87342; }
            50% { box-shadow: 0 4px 20px #ffe7a790; }
            100% { box-shadow: 0 2px 12px #e7c87342; }
        }
        .choose-gift-btn:active { transform: scale(0.97); }

.chosen-gift-summary {
            animation: none;
            background: #f7f8fa;
            color: #20304b;
            box-shadow: 0 1px 5px #e7c87320;
            font-weight: 600;
        }
        .change-gift-link {
            font-size: 0.92rem;
            color: var(--gold);
            text-decoration: underline;
            background: none;
            border: none;
            margin-left: 10px;
            cursor: pointer;
            padding: 0;
            transition: color 0.13s;
        }
        .change-gift-link:hover { color: #b8a341; }

/* Modal */
        .modal-overlay {
            display: none;
            position: fixed;
            z-index: 1111;
            left: 0; top: 0; right: 0; bottom: 0;
            background: rgba(32,48,75,0.92);
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.active {
            display: flex;
            animation: fadeIn 0.22s;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .modal-content {
            background: var(--white);
            padding: 35px 20px 26px 20px;
            border-radius: 14px;
            max-width: 370px;
            width: 97vw;
            box-shadow: 0 6px 32px #20304b80;
            text-align: center;
            position: relative;
            animation: slideDown 0.22s;
        }
        @keyframes slideDown { from { transform: translateY(-30px); opacity:0; } to { transform: none; opacity:1; } }
        .modal-title {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 13px;
            color: var(--navy);
        }
        .gift-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 13px;
            margin: 11px 0 4px 0;
            max-height: 260px;
            overflow-y: auto;
        }
        .gift-item {
            border: 1.5px solid #e7c873;
            border-radius: 9px;
            background: #f6f8fa;
            color: #20304b;
            font-size: 1rem;
            font-weight: 600;
            padding: 19px 8px 15px 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: background 0.15s, box-shadow 0.17s, border-color 0.13s;
            min-height: 90px;
            box-shadow: 0 2px 6px #e7c8731c;
            outline: none;
        }
        .gift-item.selected, .gift-item:focus {
            background: #fffbe7;
            border-color: #b8a341;
            box-shadow: 0 4px 12px #e7c87338;
        }
        .gift-emoji {
            font-size: 2.1rem;
            margin-bottom: 6px;
        }
        .modal-close {
            position: absolute;
            right: 16px;
            top: 12px;
            background: none;
            border: none;
            font-size: 1.3rem;
            color: #aaa;
            cursor: pointer;
            padding: 2px;
            transition: color 0.13s;
        }
        .modal-close:hover { color: #20304b; }
        @media (max-width: 650px) {
            .arcadia-card { max-width: 99vw; padding: 0 0 10px 0; }
            form { padding: 18px 7vw 0 7vw; }
        }
        @media (max-width: 480px) {
            .arcadia-header { padding: 30px 0 14px 0; }
            form { padding: 8vw 4vw 0 4vw; }
            .form-row { flex-direction: column; gap: 0; }
        }
    </style>
</head>
<body>
    <div class="arcadia-card">
        <div class="arcadia-header">
            <div class="arcadia-logo">ARCADIA</div>
            <div class="arcadia-by">BY NEW HOTEL COLLECTION</div>
            <div class="arcadia-invite">INVITATION</div>
        </div>
        <form action="mailto:vacations@bestdealon.com" method="post" enctype="text/plain" autocomplete="on">
            <h2>PREMIERE MEMBERSHIP INVITATION</h2>
            <div class="section-title">Guest Information</div>
            <div class="form-row">
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest1_first_name" id="guest1_first_name" required autocomplete="given-name" placeholder=" " />
                        <label class="float-label" for="guest1_first_name">Guest One - First Name</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest1_last_name" id="guest1_last_name" required autocomplete="family-name" placeholder=" " />
                        <label class="float-label" for="guest1_last_name">Last Name</label>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest1_phone" id="guest1_phone" required autocomplete="tel" placeholder=" " />
                        <label class="float-label" for="guest1_phone">Phone</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="float-group">
                        <input type="email" class="float-input" name="guest1_email" id="guest1_email" required autocomplete="email" placeholder=" " />
                        <label class="float-label" for="guest1_email">Email</label>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest2_first_name" id="guest2_first_name" autocomplete="given-name" placeholder=" " />
                        <label class="float-label" for="guest2_first_name">Guest Two - First Name</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest2_last_name" id="guest2_last_name" autocomplete="family-name" placeholder=" " />
                        <label class="float-label" for="guest2_last_name">Last Name</label>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest2_phone" id="guest2_phone" autocomplete="tel" placeholder=" " />
                        <label class="float-label" for="guest2_phone">Phone</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="float-group">
                        <input type="email" class="float-input" name="guest2_email" id="guest2_email" autocomplete="email" placeholder=" " />
                        <label class="float-label" for="guest2_email">Email</label>
                    </div>
                </div>
            </div>

<div class="section-title">Qualifications</div>
            <ul class="qualifications-list">
                <li><label><input type="checkbox" name="age_check" required> Guest must both be 25 - 75 years of age.</label></li>
                <li><label><input type="checkbox" name="employment_income" required> Guests must be currently employed and have a combined income of at least $50,000.</label></li>
                <li><label><input type="checkbox" name="id_card" required> Guests must show Driver's License and major credit card (for ID only).</label></li>
                <li><label><input type="checkbox" name="cohabit_tour" required> If married or cohabitating, must tour together. Cohabs show proof of same address.</label></li>
                <li><label><input type="checkbox" name="no_recent" required> Cannot have attended an Arcadia presentation in the last 12 months.</label></li>
                <li><label><input type="checkbox" name="permission" required> Grant Arcadia permission to contact via text, phone, or email to confirm appointment.</label></li>
                <li><label><input type="checkbox" name="no_bankruptcy" required> Must not currently be in an active Bankruptcy.</label></li>
                <li><label><input type="checkbox" name="responsible_fees" required> Responsible for any room tax, resort fee, airline tax, or port fee for below gifts.</label></li>
            </ul>

<div class="section-title">Gifts for Your Time</div>
            <div id="gift-picker-area">
                
                <button type="button" id="chooseGiftBtn" class="choose-gift-btn" aria-haspopup="dialog" aria-expanded="false">
                    <span class="gift-emoji" aria-hidden="true">🎁</span> Choose a Gift
                </button>
            </div>
            <input type="hidden" name="gift_choice" id="gift_choice_hidden" value="" required />

<div id="giftModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modalTitle" tabindex="-1">
                <div class="modal-content">
                    <button class="modal-close" id="modalCloseBtn" aria-label="Close">&times;</button>
                    <div class="modal-title" id="modalTitle">Select Your Gift</div>
                    <div class="gift-grid">
                        <div class="gift-item" data-gift="cruise" tabindex="0">
                            <span class="gift-emoji">🚢</span>
                            <span>3, 4, 5 or 7 Night Cruise for Two<br>
                                <small>(Bahamas, Western Caribbean, Mexico, Southern Caribbean)</small>
                            </span>
                        </div>
                        <div class="gift-item" data-gift="hotel" tabindex="0">
                            <span class="gift-emoji">🏨</span>
                            <span>7 Night Hotel Stay<br>
                                <small>(15 Destinations, Hilton, Marriott, Hyatt, etc.)</small>
                            </span>
                        </div>
                        <div class="gift-item" data-gift="airfare" tabindex="0">
                            <span class="gift-emoji">✈️</span>
                            <span>Airfare & 2 Night Stay<br>
                                <small>(40+ Destinations)</small>
                            </span>
                        </div>
                        <div class="gift-item" data-gift="cash" tabindex="0">
                            <span class="gift-emoji">💵</span>
                            <span>$150 Cash</span>
                        </div>
                    </div>
                </div>
            </div>

<div class="deposit-row">
                <label>Deposit Amount:
                    <input type="text" name="deposit_amount" class="float-input" style="max-width:140px;" placeholder="$ Amount" />
                </label>
            </div>
            <div class="checkbox-row">
                <label><input type="checkbox" name="refundable"> Refundable Deposit</label>
                <label><input type="checkbox" name="non_refundable"> Non-Refundable</label>
            </div>
            <div class="signature-row">
                <div class="float-group">
                    <input type="text" class="float-input" name="signature" id="signature" placeholder=" " />
                    <label class="float-label" for="signature">Guest Signature</label>
                </div>
            </div>
            <span class="note">Offer not valid with any other promotion written or implied. A rain check or substitute gift of equal or greater value will be provided if the offered gift is unavailable.</span>

<button type="submit">Submit Invitation</button>
        </form>
    </div>
    <script>
        // GIFT PICKER LOGIC
        const chooseGiftBtn = document.getElementById('chooseGiftBtn');
        const giftModal = document.getElementById('giftModal');
        const modalCloseBtn = document.getElementById('modalCloseBtn');
        const giftItems = giftModal.querySelectorAll('.gift-item');
        const giftChoiceHidden = document.getElementById('gift_choice_hidden');
        const giftPickerArea = document.getElementById('gift-picker-area');

// Gift info for summary display
        const giftLabels = {
            cruise: "🚢 3, 4, 5 or 7 Night Cruise for Two<br><small>(Bahamas, Western Caribbean, Mexico, Southern Caribbean)</small>",
            hotel:  "🏨 7 Night Hotel Stay<br><small>(15 Destinations, Hilton, Marriott, Hyatt, etc.)</small>",
            airfare: "✈️ Airfare & 2 Night Stay<br><small>(40+ Destinations)</small>",
            cash:   "💵 $150 Cash"
        };

// Show modal
        chooseGiftBtn.addEventListener('click', function() {
            giftModal.classList.add('active');
            giftModal.focus();
        });

// Close modal
        modalCloseBtn.addEventListener('click', function() {
            giftModal.classList.remove('active');
        });
        giftModal.addEventListener('click', function(e) {
            if (e.target === giftModal) giftModal.classList.remove('active');
        });

// Gift selection
        giftItems.forEach(function(item) {
            item.addEventListener('click', selectGift);
            item.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    selectGift.call(item, e);
                }
            });
        });

// When the page loads, ensure required gift_choice is enforced
        document.querySelector('form').addEventListener('submit', function(e) {
            if (!giftChoiceHidden.value) {
                e.preventDefault();
                alert('Please choose a gift for your time.');
                document.getElementById('chooseGiftBtn').focus();
                return false;
            }
        });

// Accessibility: trap focus inside modal
        giftModal.addEventListener('keydown', function(e) {
            if (!giftModal.classList.contains('active')) return;
            if (e.key === 'Escape') { giftModal.classList.remove('active'); return; }
            // Trap tab
            const focusable = giftModal.querySelectorAll('button, [tabindex="0"]');
            if (e.key === 'Tab') {
                const first = focusable[0], last = focusable[focusable.length-1];
                if (e.shiftKey) {
                    if (document.activeElement === first) { last.focus(); e.preventDefault(); }
                } else {
                    if (document.activeElement === last) { first.focus(); e.preventDefault(); }
                }
            }
        });
    </script>
</body>
</html>

Site Builder

Editing: Arcadia-Membership-Invitation.html

Site Builder