⚠️ STRICT INSTRUCTION:
Do not skip, modify, or creatively change anything. Every feature, UI element, and
layout mentioned below must be followed exactly. Output must be a single .html
file, no external JS or CSS. Do not use any icons — all actions and navigation must
be text-based buttons only.
---
📱 Project Overview:
Create a fully working modern web app named “Tingling” that includes:
Email/password login & signup
Realtime one-to-one messaging
Voice and Video calling (via WebRTC)
Friend request and block system
Profile system with unique user IDs
Notifications, Call logs
Theme toggle
Works with Firebase v8 SDK (auth + realtime database)
Must be built in a single HTML file
---
🎨 UI DESIGN (Follow this Exactly)
> This design must be replicated exactly — no screenshot required.
Background:
Dark navy blue (#0f0f2d), flat, no gradient or patterns
Flexbox centered layout (both vertically and horizontally)
Font:
Poppins from Google Fonts (apply to all text)
App Title:
Text: Tingling
Font-size: 32–40px
Color: Neon Pink #e94560
Text glow:
text-shadow: 0 0 10px #e94560, 0 0 20px #e94560;
Input Fields (Email, Password):
Rounded corners: 25px
Border: 2px solid #3a8bfd (neon blue)
Background: transparent
Placeholder text only (no labels)
Text color: white
Padding: 12px 20px
Max-width: 350px, width: 100%
Login/Signup Button:
Rounded pill style: border-radius: 50px
Background: #e94560
White bold text
Full width
Hover effect: glowing pink box-shadow
Link Text (Form Switch):
White text, font size 13px
Inline pink underlined link for “Sign up” or “Log in”
---
🚫 ICON RULE (Strict):
Do not use icons anywhere in the app.
No emojis, SVGs, Font Awesome, or Material Icons
Use only <button> elements with text labels
Example: "Home", "Notifications", "Calls"
---
✅ FUNCTIONALITY — STRICTLY FOLLOW EACH POINT
🔐 1. Authentication
Email/Password login & signup using Firebase Auth
Show/hide login/signup forms
Show error messages
Save user UID after login
---
2. Profile Setup
After signup, open modal to enter:
Name
Emoji (max 2 chars)
Generate unique ID format: ting-xxxx
Save profile to /users/{uid}
---
🧭 3. Navigation (Top + Bottom)
Top bar: "Menu" | "Tingling" | "Add Friend"
Bottom bar: "Home", "Notifications", "Calls"
All should be plain text buttons
Badge count must show for notifications/messages
---
👫 4. Friend System
Add friend via their ting-xxxx ID
Send friend request stored in /requests
Accept/Reject adds both users to /contacts
---
💬 5. Realtime Messaging
Realtime chat using Firebase Realtime Database
Use /messages/{chatID} path
Message bubbles:
Sent: right-aligned
Received: left-aligned
Track unread count via /unreadCounts/{uid}
Auto-scroll to new message
Delete chat option
---
📞 6. WebRTC Voice & Video Calling (STRICTLY FOLLOW)
📹 Video Call:
Start video call to friend using /calls
Use Firebase for signaling (offer/answer/ICE)
Remote video: full screen
Local video: bottom-right corner (draggable)
Show name + emoji
End call button
On call end: save log to /callLogs/{uid}
🔊 Voice Call:
Similar to video but no video stream
Show emoji, name, and status like “Calling…”, “Connected”
End call button, same signaling
Save call log
📢 Ringtone Support:
Use file named incoming.wav
This sound must play on both:
Incoming voice call
Incoming video call
It should loop until accepted or rejected
Stop sound on call accept or reject
---
📲 Incoming Call UI:
Modal popup with:
Caller name, emoji
Accept and Reject buttons
Plays incoming.wav
On Accept: start call view
On Reject: close modal, clear Firebase call entry
---
⛔ 7. Block/Unblock System
Blocked users can’t message or call
Show blocked user list with unblock option
Store in /blocked/{uid}
---
👤 8. Profile View/Edit
Modal to view:
Name
Emoji
User ID
Allow edit & save (except ID)
---
🌗 9. Theme Toggle
Default: Dark theme
Optional Light mode switch
Store selection in localStorage
Use CSS variables (--bg, --text-color, etc.)
---
🔔 10. Notifications
Friend requests under /notifications
Message + call tones (optional base64 or file)
Notification badge in bottom nav
---
🔧 Firebase Structure (Realtime Database)
/users/{uid}
/contacts/{uid}
/requests/{uid}
/notifications/{uid}
/messages/{chatID}
/unreadCounts/{uid}/{chatID}
/calls/{callID}
/iceCandidates/{callID}
/callLogs/{uid}
/blocked/{uid}
---
🧪 Firebase v8 SDK Required:
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></
script>
---
✅ Final Output
One .html file only (no other files)
Fully working chat + video + voice call app
Incoming call ringtone = incoming.wav
Strict UI based on detailed description
Firebase-powered realtime database
Mobile-first responsive layout
No icons used at all — only styled buttons with text
