| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| <title>ุฅูู ู
ุฑูู
- ุฌูุงุฏ</title> |
| <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Gelasio:ital,wght@0,400;0,700;1,400&family=Reem+Kufi:wght@500;700&display=swap'); |
| |
| :root { |
| --wa-bg: #0b141a; |
| --wa-header: #202c33; |
| --wa-received-bg: #ffffff; |
| --wa-received-text: #000000; |
| --wa-sent: #005c4b; |
| --wa-footer-white: #f0f2f5; |
| } |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } |
| html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: 'Cairo', sans-serif; } |
| .app-container { width: 100%; height: 100%; position: relative; } |
| .screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; transition: 0.5s ease-in-out; z-index: 1; } |
| .hidden { opacity: 0; pointer-events: none; transform: scale(1.1); } |
| .active { opacity: 1; z-index: 10; transform: scale(1); } |
| |
| |
| #lock-screen { |
| background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('images/images%20(2).jpg') center/cover; |
| justify-content: space-between; padding: 80px 20px; align-items: center; |
| } |
| .time { font-family: 'Reem Kufi'; font-size: 5.5rem; color: white; text-shadow: 0 5px 20px rgba(0,0,0,0.4); } |
| .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; } |
| .key { width: 75px; height: 75px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: white; font-size: 1.6rem; backdrop-filter: blur(15px); } |
| |
| |
| #home-screen { background: radial-gradient(circle, #2c003e 0%, #000 100%); padding: 50px 25px; } |
| .icon-img { width: 62px; height: 62px; border-radius: 15px; display: flex; justify-content: center; align-items: center; font-size: 35px; box-shadow: 0 10px 20px rgba(0,0,0,0.3); } |
| |
| |
| #whatsapp-app { background: var(--wa-bg) url('images/cd606f97e282cf0b2b183d6d005d8418.jpg') center/cover; } |
| .wa-header { background: var(--wa-header); color: white; padding: 45px 15px 12px; display: flex; align-items: center; gap: 12px; z-index: 100; cursor: pointer; } |
| .avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid #ffd700; } |
| |
| .chat-body { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; } |
| .chat-body::-webkit-scrollbar { display: none; } |
| |
| .bubble { |
| max-width: 88%; padding: 10px 14px; border-radius: 12px; |
| font-family: 'Gelasio', serif; font-size: 1.05rem; line-height: 1.6; |
| animation: slideUp 0.4s ease forwards; position: relative; |
| box-shadow: 0 1px 2px rgba(0,0,0,0.2); |
| } |
| |
| |
| .received { |
| background: var(--wa-received-bg); |
| color: var(--wa-received-text); |
| align-self: flex-start; |
| border-top-right-radius: 0; |
| } |
| |
| .sent { background: var(--wa-sent); color: white; align-self: flex-end; border-top-left-radius: 0; } |
| |
| |
| .wa-footer { padding: 10px; background: var(--wa-footer-white); display: none; align-items: center; gap: 10px; border-top: 1px solid #ddd; } |
| .wa-input { flex: 1; background: #ffffff; border: 1px solid #ddd; padding: 12px 18px; border-radius: 25px; color: #3b3b3b; outline: none; font-family: 'Gelasio', serif; font-size: 1rem; } |
| .send-icon { color: #00a884; font-size: 1.8rem; cursor: pointer; display: flex; align-items: center; } |
| |
| |
| .voice-msg { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 5px 0; } |
| .play-btn { font-size: 2rem; color: #54656f; cursor: pointer; } |
| .audio-waves { flex: 1; height: 30px; display: flex; align-items: center; gap: 2px; } |
| .wave { width: 2px; background: #8696a0; height: 12px; border-radius: 1px; } |
| .audio-avatar { width: 38px; height: 38px; border-radius: 50%; position: relative; } |
| .audio-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } |
| .voice-time { font-size: 0.65rem; color: #667781; } |
| |
| |
| #profile-screen { background: #000; color: white; transform: translateY(100%); transition: 0.4s ease; z-index: 1000; } |
| #profile-screen.active { transform: translateY(0); } |
| .profile-content { padding: 30px 20px; text-align: center; } |
| .big-avatar { width: 140px; height: 140px; border-radius: 50%; margin: 20px 0; border: 3px solid #ffd700; object-fit: cover; } |
| .info-card { background: #1c1c1e; border-radius: 15px; padding: 18px; margin-bottom: 15px; text-align: right; } |
| .block-btn { color: #ff3b30; font-weight: bold; padding: 18px; background: #1c1c1e; border-radius: 15px; cursor: pointer; text-align: center; } |
| |
| @keyframes slideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } |
| @keyframes waveAnim { from { height: 5px; } to { height: 20px; } } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <audio id="grad-audio" src="audio/PTT-20260705-WA0160.opus"></audio> |
|
|
| <div class="app-container"> |
| |
| <div id="lock-screen" class="screen active"> |
| <div style="text-align:center;"> |
| <p class="time" id="clock">00:00</p> |
| <p style="color:white; font-size:1.3rem;">ุงูุฌู
ุนุฉุ 20 ููููู</p> |
| </div> |
| <div style="display:flex; flex-direction:column; align-items:center;"> |
| <div style="display:flex; gap:12px; margin-bottom:30px;" id="pass-dots"></div> |
| <div class="keypad"> |
| <button class="key" onclick="tapKey('1')">1</button> |
| <button class="key" onclick="tapKey('2')">2</button> |
| <button class="key" onclick="tapKey('3')">3</button> |
| <button class="key" onclick="tapKey('4')">4</button> |
| <button class="key" onclick="tapKey('5')">5</button> |
| <button class="key" onclick="tapKey('6')">6</button> |
| <button class="key" onclick="tapKey('7')">7</button> |
| <button class="key" onclick="tapKey('8')">8</button> |
| <button class="key" onclick="tapKey('9')">9</button> |
| <div style="grid-column:2;"><button class="key" onclick="tapKey('0')">0</button></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="home-screen" class="screen hidden"> |
| <div class="app-grid"> |
| <div class="app-icon" onclick="openChat()"> |
| <div class="icon-img" style="background:#25D366;">๐ฌ</div> |
| <p style="color:white; font-size:0.8rem; margin-top:5px;">WhatsApp</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="whatsapp-app" class="screen hidden"> |
| <div class="wa-header" onclick="openProfile()"> |
| <img src="images/989e60e9-ecef-4c11-8945-25aefada0116.jpg" class="avatar"> |
| <div style="flex:1"> |
| <h4 style="font-size:1.1rem;">ุฌูุงุฏ โค๏ธ</h4> |
| <p id="wa-status" style="font-size:0.75rem; color:#00ff00;">ู
ุชุตู ุงูุขู</p> |
| </div> |
| </div> |
| <div class="chat-body" id="chat-body"></div> |
| <div class="wa-footer" id="wa-footer"> |
| <input type="text" id="wa-input" class="wa-input" placeholder="ู
ุฑุงุณูุฉ..."> |
| <div class="send-icon" onclick="sendMessage()">โค</div> |
| </div> |
| </div> |
|
|
| |
| <div id="profile-screen" class="screen"> |
| <div style="padding: 50px 20px 0; font-size: 1.8rem; cursor:pointer;" onclick="closeProfile()">โ</div> |
| <div class="profile-content"> |
| <img src="images/989e60e9-ecef-4c11-8945-25aefada0116.jpg" class="big-avatar"> |
| <h2 style="font-size:1.8rem;">ุฌูุงุฏู โค๏ธ</h2> |
| <p style="color:#8e8e93; margin: 10px 0 25px; font-size: 1.1rem;">+212 642-321253</p> |
| <div class="info-card" onclick="window.open('https://wa.me/212642321253')"> |
| <p style="color:#25D366; font-weight:bold;">ู
ุฑุงุณูุฉ ุนุจุฑ ูุงุชุณุงุจ</p> |
| <p style="font-size:0.8rem; margin-top:5px; color:#aaa;">https://wa.me/212642321253</p> |
| </div> |
| <div class="block-btn" onclick="alert('ูุง ูู
ููู ุญุธุฑ ุงูุญุจ ุงูุตุงุฏู โค๏ธ')">Block (ุญุธุฑ)</div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const targetCode = "06072005"; |
| let currentInput = ""; |
| |
| const FORM_URL = "https://docs.google.com/forms/d/e/1FAIpQLSdSls3UC-aqtzXwyf8LRJUDtJEmtycFAFlmv5KMc9ykGimb7g/formResponse"; |
| const ENTRY_CODE = "entry.1167244075"; |
| const ENTRY_MSG = "entry.522161805"; |
| |
| function saveData(codeStatus, messageText) { |
| const formData = new FormData(); |
| formData.append(ENTRY_CODE, codeStatus); |
| formData.append(ENTRY_MSG, messageText); |
| fetch(FORM_URL, { method: "POST", mode: "no-cors", body: formData }); |
| } |
| |
| const messages = [ |
| "ุณูุงู
ู
ุฑูู
.. ูุชู
ูู ู
ู ุฃุนู
ุงู ููุจู ุชูููู ุจุฎูุฑ ูุนูู ุฎูุฑ ูุงุฑุจุ ูุชููู ุงูุนุงุฆูุฉ ูุงู
ูุฉ ุจุตุญุฉ ูุณูุงู
ุฉ. ุญุจูุช ุบูุฑ ูุทู
ุฆู ุนููู ููุงุฏ ุงูููุงุฑ ูู ููุนูู ููุง ุจุฒุงูุ ูุนุงุฑู ู
ุฒูุงู ุดุญุงู ููุนูู ููู ุญุชู ุฃูุช. ูุงุฏ ุงูููุงุฑ ูู ุทุงูู
ุง ุฑุณู
ูุงู ูุฎูุงููุง ูุชุณูููุงู ููุตู.", |
| "ูุทุงูู
ุง ุชู
ููุช ูููู ู
ุนุงู ููุงุฏ ุงููุญุธุงุช ุจุงูุฐุงุชุ ูููู ุญุฏุงู ููุดุงุฑูู ูุงุฏ ุงููุฑุญุฉ ูู ุณูุฑูุง ุนูููุงุ ุจุงุด ุชููู ููู ู
ูุงูุฃุฉ ุจุณูุทุฉ ูุฃูุงู
ูู ุนุดูุงูุง ููุนุดุฑุฉ ูู ุจููุงุชูุงุ ูุชููู ุจู
ุซุงุจุฉ ุฃูู ูุฏู ูุจูุฑ ุญูููุงู ู
ุฌู
ูุนูู.", |
| "ุงูุฃูุงู
ูุทูุฑ ุฏุบูุง... ุจุญุงู ุบูุฑ ูุจุงุฑุญ ููุง ูุงูุนุงู
ุงูุฃููุ ุบูุฑ ูุจุงุฑุญ ุถุญููุงุ ุชุฎุงุตู
ูุงุ ููุดุทูุง ูุฎุทุทูุง ููู
ุณุชูุจู. ูุงุฎุง ูุงูุช ุจููุงุชูุง ุจุนุฏ ุงูู
ุณุงูุฉุ ูููุณ ุงูููุช ุญุณููุง ุจูู ุญูุง ูุฑุงุจ ุจุฒุงู ูุจุนุถูุงุชูุง.", |
| "ูุงุฏู ุซูุงุซ ุณููู ุฏุงุฒุช ุจุญุงู ุฑู
ุดุฉ ุนูู... ุซูุงุซ ุณููู ุฏูุงู ุงููุฑุงูุฉุ ุฏูุงู ุงูุณูุฑุ ูุฏูุงู ุงูููุงุญ. ุฏุงุฒู ูููุง ุจุฒุงู ุฏูุงู ุงูุญูุงูุฌุ ููู ู
ุญุทุฉ ุนุดูุงูุง ุฎูุงุช ูุฑุงูุง ุญูุงูุฉ ุทูููุฉุ ุญูุงูุงุช ูู ู
ุญุงู ูุงุด ุชูุณู ุฃู ุชู
ุญู ู
ู ุงูุฐุงูุฑุฉ.", |
| "ุนุดูุง ุชูุงุตูู ุฒูููุฉุ ุชูุงุณู
ูุง ุงูุญุฒู ูุจู ุงููุฑุญ. ูุงุฎุง ุงูุญูุงุฉ ู
ุง ูุชุฑุญู
ุด ูุจุนุถ ุงูุฃุญูุงูุ ููุฐูู ุซูุงุซุฉ ุงูููุท (...) ูู ููุฎููููู
ูุงููุถุฑุฉุ ููุนููู ุจุฒุงู ุฏูุงู ุงูู
ุนุงูู ูู ู
ุง ูููุฏุฑุด ุงููุณุงู ูุนุจุฑ ุนูููุง.", |
| "ุชุฑุณุฎ ุนูุฏู ุฏุงู ุงูุฃู
ู ุงููููู ุฃูู ูุงุฎุง ูุทุฑุง ูู ุทุฑุงุ ุบูุชุฌุงูุฒูู ููุฏูุฑู ูุฏ ููุฏ. ููู ููุฃุณูุ ู
ูู ููุจุงู ููู ุจูู ุฑุงุญุฉ ุงูุดุฎุต ูู ูุชุจุบูู ูุจูุงุตุฉ ุฃุฎุฑูุ ูุชูุจู ุงููุงูุน ุญูุช ูุชุจุบู ููู ุงูุฎูุฑ ูุจู ุฑุงุณู.", |
| "ุชู
ููุช ููุงุฏ ุงููุญุธุฉ ูููู ูุงูู ูุฏุงู
ู... ูุดูู ูุนูููู ู
ุจุงุดุฑุฉุ ููุนุจุฑ ููู ุนูู ุงููุฑุญุฉ ุงููุจูุฑุฉ ูู ุญุงุณ ุจููุง ููุงุฏ ุงูููุงุฑ. ุฅุญุณุงุณ ุตุนูุจ ุจุฒุงู ููุตูู ุจุงููุชุงุจุฉ... ููุงุฑ ูู ููุชุฌู
ุน ููู ุงููุฑุญ ูุงูุญุฒู ูุฏูุฉ ูุญุฏุฉ.", |
| "ุจุบูุชู ุชุนุฑูู ุจูู ุฃูุง ููุช ุฏูู
ุง ุงููุฎูุฑ ุงูุฃูู ุจูู ูุฏุงู
ุฑุงุณู. ุนุงุฑู ู
ุฒูุงู ุดุญุงู ุชุนุจุชูุ ุดุญุงู ุณูุฑุชูุ ูุดุญุงู ุนุทูุชู ู
ู ุฌูุฏู ุจุงุด ุชูุตูู ููุงุฏ ุงูููุงุฑ. ูุงูููู
... ูู ุงูููู
ูู ุฎุงุตู ุชูุชุงุฎุฑู ููู ุจุฑุงุณู.", |
| "ู
ูู ูุนูุทู ุนูู ุณู
ูุชู ุจุงุด ุชุงุฎุฏู ุงูุฏุจููู
ุ ุจุบูุชู ุชุนุฑูู ุจูู ุฃูุง ุบููุฑุญ ุจุฒุงุงุงุงู. ุบุชุฎููู ุชุณู
ุนู ุตูุชู ููููู 'ุฃูู ู
ุฑูููููููููู
' ุจูู ูุฎุฑ ูุจูู ุญุจ. ุฃูุง ูุฎูุฑ ุจููุ ู
ู ุจุนุฏ ูุงูุฏูู. โค๏ธโค๏ธโ๐ฉน", |
| "ุฃูู ู
ุจุฑูู ุงูุชุฎุฑุฌ ุฃ ู
ุฑูู
... ู
ุณูุฑุฉ ู
ูููุฉ ููุงุฏุดู ูู ุฌุงู ูุญูุงุชูุ ูุชุฃูุฏู ุฃูู ุฏูู
ุง ูุชุณุชุงููู ุบูุฑ ุงูุญูุงูุฌ ุงูุฒููููู. ูุฏูุฑู ูุจุงูู ุฏูู
ุงุ ุฃูู ูุงูู ูุงุญุฏ ุงูุณูุฏ ุณู
ูุชู ุฌูุงุฏุ ุฏูู
ุง ู
ูุชุฎุฑ ุจูู." |
| ]; |
| |
| function updateClock() { |
| const now = new Date(); |
| document.getElementById('clock').innerText = now.getHours().toString().padStart(2,'0') + ":" + now.getMinutes().toString().padStart(2,'0'); |
| } |
| setInterval(updateClock, 1000); updateClock(); |
| |
| const dotsBox = document.getElementById('pass-dots'); |
| for(let i=0; i<8; i++) dotsBox.innerHTML += `<div style="width:14px; height:14px; border:2px solid white; border-radius:50%; transition: 0.2s;" id="dot-${i}"></div>`; |
| |
| function tapKey(n) { |
| if(currentInput.length < 8) { |
| currentInput += n; |
| document.getElementById(`dot-${currentInput.length-1}`).style.background = "white"; |
| if(currentInput.length === 8) { |
| if(currentInput === targetCode) { |
| saveData("ุฏุฎูู ูุงุฌุญ", "ู
ุฑูู
ูุชุญุช ุงูู
ููุน"); |
| confetti({ particleCount: 150, spread: 70, origin: { y: 0.7 } }); |
| setTimeout(() => { |
| document.getElementById('lock-screen').classList.replace('active', 'hidden'); |
| document.getElementById('home-screen').classList.replace('hidden', 'active'); |
| }, 500); |
| } else { |
| currentInput = ""; |
| for(let i=0; i<8; i++) document.getElementById(`dot-${i}`).style.background = "none"; |
| } |
| } |
| } |
| } |
| |
| function openChat() { |
| document.getElementById('home-screen').classList.replace('active', 'hidden'); |
| document.getElementById('whatsapp-app').classList.replace('hidden', 'active'); |
| startRomanticChat(); |
| } |
| |
| async function startRomanticChat() { |
| const body = document.getElementById('chat-body'); |
| const status = document.getElementById('wa-status'); |
| for(let i=0; i<messages.length; i++) { |
| status.innerText = "ููุชุจ ุงูุขู..."; |
| await new Promise(res => setTimeout(res, 2000 + Math.random() * 2000)); |
| status.innerText = "ู
ุชุตู ุงูุขู"; |
| const div = document.createElement('div'); |
| div.className = 'bubble received'; |
| div.innerHTML = `${messages[i]} <div style="font-size:0.6rem; opacity:0.7; text-align:left; margin-top:4px;">${getTime()}</div>`; |
| body.appendChild(div); |
| body.scrollTo({top: body.scrollHeight, behavior: 'smooth'}); |
| } |
| sendVoiceNote(); |
| document.getElementById('wa-footer').style.display = 'flex'; |
| } |
| |
| function sendVoiceNote() { |
| const body = document.getElementById('chat-body'); |
| const audioDiv = document.createElement('div'); |
| audioDiv.className = 'bubble received'; |
| audioDiv.innerHTML = ` |
| <div class="voice-msg"> |
| <div class="play-btn" onclick="toggleAudio(this)">โถ</div> |
| <div class="audio-waves">${Array(15).fill('<div class="wave"></div>').join('')}</div> |
| <div class="audio-avatar"> |
| <img src="images/989e60e9-ecef-4c11-8945-25aefada0116.jpg"> |
| <span style="position:absolute; bottom:0; left:0; font-size:0.7rem;">๐๏ธ</span> |
| </div> |
| </div> |
| <div class="voice-time">0:45</div>`; |
| body.appendChild(audioDiv); |
| body.scrollTo({top: body.scrollHeight, behavior: 'smooth'}); |
| } |
| |
| function toggleAudio(btn) { |
| const audio = document.getElementById('grad-audio'); |
| const waves = document.querySelectorAll('.wave'); |
| if(audio.paused) { |
| audio.play(); btn.innerText = 'โธ'; |
| waves.forEach(w => w.style.animation = `waveAnim ${0.4+Math.random()}s infinite alternate`); |
| } else { |
| audio.pause(); btn.innerText = 'โถ'; |
| waves.forEach(w => w.style.animation = `none`); |
| } |
| audio.onended = () => { btn.innerText = 'โถ'; waves.forEach(w => w.style.animation = `none`); }; |
| } |
| |
| function sendMessage() { |
| const input = document.getElementById('wa-input'); |
| const text = input.value.trim(); |
| if(!text) return; |
| saveData("ุฑุฏ ู
ู ู
ุฑูู
", text); |
| const div = document.createElement('div'); |
| div.className = 'bubble sent'; |
| div.innerHTML = `${text} <div style="font-size:0.6rem; text-align:left; opacity:0.8; margin-top:4px;">${getTime()} โโ</div>`; |
| document.getElementById('chat-body').appendChild(div); |
| input.value = ""; |
| document.getElementById('chat-body').scrollTo({top: document.getElementById('chat-body').scrollHeight, behavior: 'smooth'}); |
| } |
| |
| function getTime() { const n = new Date(); return n.getHours() + ":" + n.getMinutes().toString().padStart(2,'0'); } |
| function openProfile() { document.getElementById('profile-screen').classList.add('active'); } |
| function closeProfile() { document.getElementById('profile-screen').classList.remove('active'); } |
| </script> |
| </body> |
| </html> |
