DapperFoxes/poll.html at master · emscape/DapperFoxes · GitHub

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location Poll - Sean & Emily's Wedding</title>
    <meta name="description" content="Help Sean and Emily choose their wedding location by voting in our poll.">

    <!-- Open Graph Tags for Social Media Sharing -->
    <meta property="og:title" content="Location Poll - Sean & Emily's Wedding">
    <meta property="og:description" content="Help Sean and Emily choose their wedding location by voting in our poll.">
    <meta property="og:image" content="https://www.thedapperfoxes.com/images/Wedding%20Website/IMG_4274~3.JPG">
    <meta property="og:url" content="https://www.thedapperfoxes.com/poll.html">
    <meta property="og:type" content="website">

    <!-- Favicon -->
    <link rel="icon" href="foxes-favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="foxes-favicon.ico" type="image/x-icon">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container header__container">
            <a href="index.html" class="header__logo">S & E</a>

            <nav class="nav">
                <button class="nav__toggle" aria-label="Toggle navigation">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>

                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="index.html" class="nav__link">Home</a>
                    </li>
                    <li class="nav__item">
                        <a href="poll.html" class="nav__link nav__link--active">Location Poll</a>
                    </li>
                    <li class="nav__item">
                        <a href="photos.html" class="nav__link">Photos</a>
                    </li>
                    <li class="nav__item">
                        <a href="events.html" class="nav__link">Events</a>
                    </li>
                    <li class="nav__item">
                        <a href="rsvp.html" class="nav__link">RSVP</a>
                    </li>
                    <li class="nav__item">
                        <a href="registry.html" class="nav__link">Registry</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h1 class="hero__title">Location Poll</h1>
            <p class="hero__subtitle">Help us choose where to celebrate our special day</p>
        </div>
    </section>

    <!-- Poll Section -->
    <section class="section">
        <div class="container">
            <h2 class="section__title">Our Wedding, Your Input</h2>

            <div class="card">
                <p>This is your chance to co-create the magic. Suggest a venue, name a cocktail, offer a playlist banger! Have fun and drop a wildcard idea.</p>

                <h3 class="section__subtitle">🗳️ Step 1: Help us pick our wedding location - Poll results are non-binding :)</h3>

                <h3 class="section__subtitle">💬 Step 2: Share your boldest, funniest, or most heartfelt suggestions (venues, music, rituals, cocktail names, have fun)</h3>

                <!-- Google Form Embed -->
                <div class="google-form-container" style="margin-top: var(--spacing-lg);">
                    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLScXrj2rOr_LvOlH8d7vm7a_zZi6xGD80HvbZBVmn_IiAnf20w/viewform?embedded=true"
                            width="100%"
                            height="800"
                            frameborder="0"
                            marginheight="0"
                            marginwidth="0">
                        Loading…
                    </iframe>
                </div>

                <!-- Poll Results -->
                <h3 class="section__subtitle" style="margin-top: var(--spacing-lg);">📊 Current Poll Results:</h3>
                <p>See what locations others are voting for! These results update automatically.</p>

                <div id="poll-results" class="poll-results">
                    <!-- Loading placeholder -->
                    <p class="poll-results__loading">Loading results...</p>
                </div>

                <h3 class="section__subtitle">🔍 Coming Soon:</h3>
                <p>Planning updates as we finalize the details</p>

                <p>A glimpse at the vibe and vision (spoiler: it's fabulous)</p>

                <p>RSVP info and a few helpful tips for celebrating with us</p>

                <p>We can't wait to share this day—and all the joy leading up to it—with you.<br>
                (And no, voting still doesn't guarantee cake access. Nice try.)</p>

                <blockquote>
                    <p><em>With love,</em><br>
                    <strong>Sean & Emily</strong></p>
                </blockquote>
            </div>
        </div>
    </section>

    <!-- Comments Section -->
    <section class="section">
        <div class="container">
            <h2 class="section__title">What Others Are Saying</h2>

            <div class="comments-container">
                <!-- Comments will be loaded here dynamically -->
                <div id="comments-list" class="comments-list">
                    <!-- Loading placeholder -->
                    <p class="comments-loading">Loading comments...</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p class="footer__text">Sean & Emily's Wedding</p>
            <p>&copy; 2025 DapperFoxes. All rights reserved.</p>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="js/main.js?v=3&t=20250327134411"></script>
</body>
</html>