1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<title>Create Your Vibe Check Quiz</title> 7<meta name="description" content="Create a fun friendship quiz and find out who REALLY knows you! Free, viral, and super addictive."> 8<meta name="keywords" content="friendship quiz, how well do you know me, best friend test, vibe check quiz, friendship loyalty test, bff quiz"> 9<meta property="og:title" content="Create Your Vibe Check Quiz"> 10<meta property="og:description" content="Think you know your friends? Take the Vibe Check quiz and find out! ð«¶"> 11<meta property="og:type" content="website"> 12<meta property="og:url" content="https://vibe-check.zivtools.workers.dev"> 13<meta name="twitter:card" content="summary_large_image"> 14<meta name="twitter:title" content="Create Your Vibe Check Quiz"> 15
16<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8768030543576045" crossorigin="anonymous"></script>
16 17 18 <style> 19 * { margin: 0; padding: 0; box-sizing: border-box; } 20 body { 21 font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; 22 background: linear-gradient(135deg, #667eea 0%, #e040fb 40%, #ff6d00 100%); 23 min-height: 100vh; 24 color: #1a1a2e; 25 overflow-x: hidden; 26 } 27 .container { 28 max-width: 600px; 29 margin: 0 auto; 30 padding: 20px; 31 min-height: 100vh; 32 display: flex; 33 flex-direction: column; 34 } 35 .card { 36 background: rgba(255,255,255,0.95); 37 border-radius: 24px; 38 padding: 32px 24px; 39 box-shadow: 0 20px 60px rgba(0,0,0,0.15); 40 backdrop-filter: blur(10px); 41 margin-bottom: 20px; 42 } 43 h1 { font-size: 2rem; font-weight: 800; text-align: center; line-height: 1.2; } 44 h2 { font-size: 1.4rem; font-weight: 700; text-align: center; margin-bottom: 16px; } 45 .subtitle { text-align: center; color: #666; font-size: 1.05rem; margin: 12px 0 24px; line-height: 1.5; } 46 .btn { 47 display: block; 48 width: 100%; 49 padding: 16px 24px; 50 border: none; 51 border-radius: 16px; 52 font-size: 1.1rem; 53 font-weight: 700; 54 cursor: pointer; 55 transition: all 0.2s; 56 text-decoration: none; 57 text-align: center; 58 color: white; 59 } 60 .btn:active { transform: scale(0.97); } 61 .btn-primary { 62 background: linear-gradient(135deg, #667eea, #e040fb); 63 box-shadow: 0 4px 15px rgba(224,64,251,0.4); 64 } 65 .btn-primary:hover { box-shadow: 0 6px 25px rgba(224,64,251,0.5); transform: translateY(-1px); } 66 .btn-secondary { 67 background: linear-gradient(135deg, #ff6d00, #ff9100); 68 box-shadow: 0 4px 15px rgba(255,109,0,0.3); 69 } 70 .btn-green { 71 background: linear-gradient(135deg, #00c853, #69f0ae); 72 box-shadow: 0 4px 15px rgba(0,200,83,0.3); 73 } 74 input[type="text"] { 75 width: 100%; 76 padding: 14px 18px; 77 border: 2px solid #e0e0e0; 78 border-radius: 14px; 79 font-size: 1.05rem; 80 outline: none; 81 transition: border-color 0.2s; 82 margin-bottom: 16px; 83 } 84 input[type="text"]:focus { border-color: #e040fb; } 85 .option-btn { 86 display: block; 87 width: 100%; 88 padding: 14px 18px; 89 margin-bottom: 10px; 90 border: 2px solid #e8e8f0; 91 border-radius: 14px; 92 background: white; 93 font-size: 1rem; 94 cursor: pointer; 95 text-align: left; 96 transition: all 0.15s; 97 font-weight: 500; 98 } 99 .option-btn:hover { border-color: #e040fb; background: #fce4ff; } 100 .option-btn.selected { border-color: #e040fb; background: #f3e5f5; } 101 .option-btn.correct { border-color: #00c853; background: #e8f5e9; } 102 .option-btn.wrong { border-color: #ff1744; background: #fce4ec; } 103 .progress-bar { width: 100%; height: 8px; background: #e0e0e0; border-radius: 8px; margin-bottom: 20px; overflow: hidden; } 104 .progress-fill { height: 100%; background: linear-gradient(90deg, #667eea, #e040fb); border-radius: 8px; transition: width 0.4s ease; } 105 .progress-text { text-align: center; font-size: 0.85rem; color: #888; margin-bottom: 8px; } 106 .score-circle { 107 width: 160px; height: 160px; 108 border-radius: 50%; 109 display: flex; flex-direction: column; 110 align-items: center; justify-content: center; 111 margin: 20px auto; 112 font-weight: 800; 113 color: white; 114 position: relative; 115 } 116 .score-circle .pct { font-size: 2.8rem; line-height: 1; } 117 .score-circle .label { font-size: 0.9rem; opacity: 0.9; } 118 .tier-badge { 119 text-align: center; 120 font-size: 1.8rem; 121 font-weight: 800; 122 margin: 10px 0 6px; 123 } 124 .tier-subtitle { text-align: center; color: #666; margin-bottom: 20px; font-size: 1rem; } 125 .share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; } 126 .share-btn { 127 padding: 12px 8px; 128 border: none; 129 border-radius: 12px; 130 font-size: 0.9rem; 131 font-weight: 600; 132 cursor: pointer; 133 color: white; 134 display: flex; 135 align-items: center; 136 justify-content: center; 137 gap: 6px; 138 transition: transform 0.15s; 139 } 140 .share-btn:active { transform: scale(0.95); } 141 .wa { background: #25D366; } 142 .tw { background: #1DA1F2; } 143 .tg { background: #0088cc; } 144 .cp { background: #555; } 145 .leaderboard { margin-top: 20px; } 146 .lb-entry { 147 display: flex; 148 align-items: center; 149 justify-content: space-between; 150 padding: 12px 16px; 151 background: #f5f5ff; 152 border-radius: 12px; 153 margin-bottom: 8px; 154 font-weight: 500; 155 } 156 .lb-entry .rank { font-weight: 800;
156 color: #e040fb; margin-right: 10px; width: 28px; } 157 .lb-entry .name { flex: 1; } 158 .lb-entry .score { font-weight: 700; color: #667eea; } 159 .question-container { animation: fadeIn 0.3s ease; } 160 @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } 161 .ad-slot { margin: 20px 0; min-height: 100px; text-align: center; } 162 .premium-banner { 163 background: linear-gradient(135deg, #ffd700, #ff8c00); 164 border-radius: 16px; 165 padding: 20px; 166 text-align: center; 167 color: #1a1a2e; 168 margin: 16px 0; 169 } 170 .premium-banner h3 { margin-bottom: 8px; } 171 .premium-banner a { 172 display: inline-block; 173 margin-top: 10px; 174 padding: 10px 24px; 175 background: #1a1a2e; 176 color: #ffd700; 177 border-radius: 12px; 178 text-decoration: none; 179 font-weight: 700; 180 } 181 .footer { text-align: center; padding: 20px 0; font-size: 0.85rem; } 182 .footer a { color: white; text-decoration: underline; } 183 .confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; } 184 .emoji-bg { font-size: 4rem; text-align: center; margin-bottom: 8px; } 185 .result-q { padding: 12px 0; border-bottom: 1px solid #eee; } 186 .result-q:last-child { border-bottom: none; } 187 .result-q .q-text { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; } 188 .result-q .q-answer { font-size: 0.9rem; color: #666; } 189 .result-q .q-answer.right { color: #00c853; } 190 .result-q .q-answer.wrong { color: #ff1744; } 191 .cta-viral { 192 background: linear-gradient(135deg, #667eea, #e040fb); 193 border-radius: 20px; 194 padding: 28px 24px; 195 text-align: center; 196 color: white; 197 margin: 20px 0; 198 } 199 .cta-viral h2 { color: white; margin-bottom: 12px; font-size: 1.3rem; } 200 .cta-viral p { opacity: 0.9; margin-bottom: 16px; } 201 .cta-viral .btn { background: white; color: #e040fb; } 202 </style> 203 204</head> 205<body> 206<div class="container"> 207 208 <div class="card" style="margin-top: 20px;"> 209 <div class="emoji-bg">âï¸</div> 210 <h1>Create Your Quiz</h1> 211 <p class="subtitle">Answer these questions about yourself. Your friends will try to guess your answers!</p> 212 213 <div id="name-step"> 214 <label style="font-weight:600;display:block;margin-bottom:8px;">What's your name?</label> 215 <input type="text" id="creator-name" placeholder="Enter your name..." maxlength="30"> 216 <button class="btn btn-primary" onclick="startQuiz()">Let's Go! ð</button> 217 </div> 218 219 <div id="quiz-step" style="display:none;"> 220 <div class="progress-text" id="prog-text"></div> 221 <div class="progress-bar"><div class="progress-fill" id="prog-fill"></div></div> 222 <div id="question-area"></div> 223 </div> 224 225 <div id="saving-step" style="display:none; text-align:center; padding: 40px 0;"> 226 <div style="font-size:3rem;">â³</div> 227 <p style="margin-top:12px; font-weight:600;">Creating your quiz...</p> 228 </div> 229 </div> 230 231
231<script> 232 const questions = [{"id":"color","emoji":"ð¨","question":"What's my favorite color?","options":["Red / Orange","Blue / Purple","Green / Teal","Pink / Black"]},{"id":"fear","emoji":"ð±","question":"What's my biggest fear?","options":["Spiders & bugs","Being alone forever","Public speaking","Heights & deep water"]},{"id":"million","emoji":"ð°","question":"What would I do with $1M?","options":["Travel the world","Start a business","Buy a dream house","Save & invest it all"]},{"id":"toxic","emoji":"â ï¸","question":"What's my toxic trait?","options":["Overthinking everything","Being petty AF","Ghosting people","Always being late"]},{"id":"vacation","emoji":"âï¸","question":"What's my dream vacation?","options":["Beach resort in Bali","Backpacking Europe","Tokyo & anime culture","Cabin in the mountains"]},{"id":"annoys","emoji":"ð¤","question":"What annoys me the most?","options":["Slow walkers","People chewing loudly","Being left on read","Fake people"]},{"id":"animal","emoji":"ð¦","question":"Pick my spirit animal","options":["Cat - independent vibes","Dog - loyal & chaotic","Fox - sly & clever","Sloth - chill & sleepy"]},{"id":"guilty","emoji":"ð","question":"What's my guilty pleasure?","options":["Reality TV binges","Eating junk food at 2am","Stalking exes on social media","Online shopping sprees"]},{"id":"party","emoji":"ð","question":"What am I most likely to do at a party?","options":["Be the DJ / aux cord hog","Talk to everyone & network","Sit with the pets","Leave early without telling anyone"]},{"id":"love","emoji":"ð","question":"What's my love language?","options":["Words of affirmation","Quality time","Physical touch","Acts of service / gifts"]},{"id":"talent","emoji":"ð","question":"What's my hidden talent?","options":["Singing in the shower (badly)","Remembering random facts","Cooking without a recipe","Making people laugh"]},{"id":"autobiography","emoji":"ð","question":"What would my autobiography be called?","options":["\"Oops, I Did It Again\"","\"Professional Overthinker\"","\"Trust the Process\"","\"Chaos Coordinator\""]}]; 233 let answers = {}; 234 let currentQ = 0; 235 let creatorName = ''; 236 237 function startQuiz() { 238 creatorName = document.getElementById('creator-name').value.trim(); 239 if (!creatorName) { document.getElementById('creator-name').style.borderColor = '#ff1744'; return; } 240 document.getElementById('name-step').style.display = 'none'; 241 document.getElementById('quiz-step').style.display = 'block'; 242 showQuestion(); 243 } 244 245 function showQuestion() { 246 const q = questions[currentQ]; 247 const total = questions.length; 248 document.getElementById('prog-text').textContent = 'Question ' + (currentQ + 1) + ' of ' + total; 249 document.getElementById('prog-fill').style.width = ((currentQ / total) * 100) + '%'; 250 251 let html = '<div class="question-container"><p style="font-size:1.6rem;text-align:center;margin-bottom:6px;">' + q.emoji + '</p>'; 252 html += '<h2>' + q.question + '</h2>'; 253 q.options.forEach((opt, i) => { 254 html += '<button class="option-btn" onclick="selectOption(\''+q.id+'\','+i+')">' + opt + '</button>'; 255 }); 256 html += '</div>'; 257 document.getElementById('question-area').innerHTML = html; 258 } 259 260 function selectOption(qId, idx) { 261 answers[qId] = idx; 262 const btns = document.querySelectorAll('.option-btn'); 263 btns.forEach((b, i) => { if (i === idx) b.classList.add('selected'); }); 264 265 setTimeout(() => { 266 currentQ++; 267 if (currentQ < questions.length) { 268 showQuestion(); 269 } else { 270 submitQuiz(); 271 } 272 }, 300); 273 } 274 275 async function submitQuiz() { 276 document.getElementById('quiz-step').style.display = 'none'; 277 document.getElementById('saving-step').style.display = 'block'; 278 279 const res = await fetch('/api/create', { 280 method: 'POST', 281 headers: { 'Content-Type': 'application/json' }, 282 body: JSON.stringify({ name: creatorName, answers }) 283 }); 284 const data = await res.json(); 285 window.location.href = '/share/' + data.id; 286 } 287 </script>
287 288 289<div class="footer"> 290 <p>ð ï¸ More quizzes at <a href="https://aihowtoinvest.com">ZivTools</a></p> 291</div> 292</div>
293<script src=https://dubai-commercial.zivtools.workers.dev/embed.js async></script>
293</body> 294</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.