InviteD/index.html at master · Divyanshp08/InviteD · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Krittika's 18th Birthday</title>
  <link
    href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Sacramento&family=Poppins:wght@300;500;700&display=swap"
    rel="stylesheet"
  />
  <style>
    /* Your existing CSS... (unchanged) */
    body {
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
      background: url('https://i.postimg.cc/brM1yH58/white-silver-glittery-pattern-background.jpg') no-repeat center center fixed;
      background-size: cover;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
    }
    /* other styles omitted here for brevity... */
  </style>
</head>
<body>
  <div id="main-content" class="content">
    <h1>You're Invited!</h1>
    <h2 id="invitee-name"></h2>
    <div class="theme-line">Theme: 2000s Bollywood Era</div>
    <p>★ Ek Shaam Filmy Romance, Dosti Aur Full-on Masti Ke Naam! ★</p>
    <p><strong>Date:</strong> 31st July</p>
    <p><strong>Time:</strong> 5:30 PM onwards</p>
    <p><strong>Venue:</strong> <a href="https://share.google/8DZFpvpQCVxVvXksD" target="_blank" style="color: #cc3399; text-decoration: underline;">Gola Sizzlers, Ambience Mall</a></p>

    <div id="invite-interface" style="display:none;">
      <p class="invitee-label">Your Name:</p>

      <div class="button-group">
        <button id="yes-btn" class="double-line-btn" onclick="sendVote('yes')">
          Yes<br />
          <span>Aur Kuch Bola Toh Krittika Maar Dalegi</span>
        </button>
        <button id="no-btn" class="double-line-btn" onclick="sendVote('no')">
          No<br />
          <span>Because I Have A Deathwish</span>
        </button>
      </div>
    </div>

    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3504.9400898513163!2d77.15037278126003!3d28.541520413096155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d0314df9bffff%3A0xdb77e2a71da3f85c!2sGola%20Sizzlers!5e0!3m2!1sen!2sin!4v1753373006810!5m2!1sen!2sin"
      allowfullscreen=""
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
      style="margin-top: 2rem;"
    ></iframe>
  </div>

  <script>
    // Get 'name' from URL query param
    function getQueryParam(param) {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(param);
    }

    const inviteeName = getQueryParam('name');

    const inviteInterface = document.getElementById('invite-interface');
    const inviteeNameHeader = document.getElementById('invitee-name');
    const mainContent = document.getElementById('main-content');

    if (!inviteeName) {
      // Show error message if no name in URL
      mainContent.innerHTML =
        '<div class="error-message">Please open your unique invite link with your name in the URL.<br/>Example: <code>?name=Gauri</code></div>';
    } else {
      inviteeNameHeader.textContent = inviteeName;
      inviteInterface.style.display = 'block';
    }

    function sendVote(answer) {
      const yesBtn = document.getElementById('yes-btn');
      const noBtn = document.getElementById('no-btn');

      yesBtn.disabled = true;
      noBtn.disabled = true;

      fetch('https://invited-hgdb.onrender.com/vote', {  // <-- Correct endpoint here!
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: inviteeName, answer }),
      })
        .then((res) => {
          if (!res.ok) throw new Error(`Server error: ${res.status}`);
          return res.json();
        })
        .then((data) => {
          if (answer === 'yes') {
            mainContent.innerHTML = `
              <div class="confirmation-box">
                <div class="confirmation-big">🔫 Good Choice</div>
                <div class="confirmation-line">Gift khud nahi lena, main bataungi</div>
                <div class="confirmation-line">Idc, it's my birthday, my choice</div>
                <div class="confirmation-line">Mein Besharam Hoon</div>
                <div class="confirmation-line">Warna Mein Murder Kar Deti</div>
              </div>
            `;
          } else {
            mainContent.innerHTML = `
              <div class="confirmation-box">
                <div class="confirmation-big"><span class="emoji">💀🔪</span>No, Wrong answer</div>
                <div class="confirmation-line">Yeh Bolna Allowed Hi nahi hai</div>
                <div class="confirmation-line">Yes mein badlo, woh toh bas formality ke liye pucha tha.</div>
              </div>
            `;
          }
        })
        .catch((err) => {
          alert('There was an error saving your RSVP!');
          yesBtn.disabled = false;
          noBtn.disabled = false;
          console.error('Error:', err);
        });
    }
  </script>
</body>
</html>