Skip to content
This repository was archived by the owner on Jun 17, 2025. It is now read-only.
This repository was archived by the owner on Jun 17, 2025. It is now read-only.

QUICK CONNECT RTB  #244

Open
Open
QUICK CONNECT RTB #244
@AbdulMalik2610

Description

@AbdulMalik2610
AbdulMalik2610
opened on May 3, 2025
<title>Quick Connect RTB</title> <style> /* Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } 
    body {
        background-color: #f5f5f5;
        color: #333;
        overflow-x: hidden;
    }
    
    /* Splash Screen */
    .splash-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        color: white;
    }
    
    .brand-logo {
        font-size: 3rem;
        font-weight: bold;
        text-align: center;
        line-height: 1.3;
        margin-bottom: 10px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        animation: fadeIn 1s ease-out;
    }
    
    .app-name {
        font-size: 1.8rem;
        opacity: 0;
        animation: fadeIn 0.5s ease-out 0.5s forwards;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* App Header */
    .app-header {
        display: flex;
        justify-content: space-between;
        padding: 15px 20px;
        background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    .app-title {
        font-size: 1.5rem;
        font-weight: bold;
        letter-spacing: 1px;
    }
    
    /* Header Line */
    .header-line {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        background: white;
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 58px;
        z-index: 99;
    }
    
    .settings-text {
        font-size: 0.8rem;
        color: #666;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .zone-icons-header {
        display: flex;
        gap: 15px;
    }
    
    .zone-icon-header {
        font-size: 1.2rem;
        cursor: pointer;
    }
    
    /* Video Feed */
    .video-feed {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 10px;
    }
    
    .video-card {
        background: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    .video-thumbnail {
        width: 100%;
        height: 180px;
        background-color: #ddd;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    
    .video-duration {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.8rem;
    }
    
    .video-info {
        padding: 12px;
        display: flex;
        gap: 10px;
    }
    
    .channel-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #eee;
    }
    
    .video-details {
        flex: 1;
    }
    
    .video-title {
        font-weight: bold;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .channel-name {
        font-size: 0.9rem;
        color: #666;
        margin-bottom: 4px;
    }
    
    .video-stats {
        font-size: 0.8rem;
        color: #666;
        display: flex;
        gap: 10px;
    }
    
    .video-actions {
        display: flex;
        gap: 10px;
        margin-top: 8px;
    }
    
    .action-btn {
        border: none;
        background: #f0f0f0;
        padding: 6px 12px;
        border-radius: 18px;
        font-size: 0.8rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .action-btn.like {
        background: #e3f2fd;
        color: #1976d2;
    }
    
    .action-btn.subscribe {
        background: #ffebee;
        color: #d32f2f;
    }
    
    .action-btn.subscribed {
        background: #e0e0e0;
        color: #333;
    }
    
    /* Right Side Social Icons */
    .social-icons {
        position: fixed;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 20px;
        z-index: 1000;
    }
    
    .social-icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: all 0.3s;
    }
    
    .social-icon:hover {
        transform: scale(1.1);
    }
    
    .social-icon img {
        width: 24px;
        height: 24px;
    }
    
    /* Quick Ball */
    .quick-ball {
        position: fixed;
        right: 10px;
        bottom: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        z-index: 1000;
        font-size: 1.5rem;
        color: white;
    }
    
    /* Context Menu */
    .context-menu {
        position: absolute;
        right: 60px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0,0,0,0.1);
        padding: 10px;
        display: none;
        z-index: 1001;
        width: 150px;
    }
    
    .menu-item {
        padding: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 5px;
    }
    
    .menu-item:hover {
        background: #f1f1f1;
    }
    
    /* Add User Popup */
    .add-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
        z-index: 1002;
        display: none;
        width: 300px;
    }
    
    .add-popup h3 {
        margin-bottom: 15px;
        color: #2c3e50;
    }
    
    .add-popup input {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    
    .add-popup button {
        background: #3498db;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    /* User ID with Flag */
    .user-id {
        position: fixed;
        top: 110px;
        right: 20px;
        background: white;
        padding: 5px 10px;
        border-radius: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        font-size: 0.9rem;
        z-index: 100;
    }
    
    /* Tabs */
    .tabs {
        display: flex;
        border-bottom: 1px solid #ddd;
        padding: 0 20px;
        background: white;
        position: sticky;
        top: 106px;
        z-index: 98;
    }
    
    .tab {
        padding: 12px 16px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
    }
    
    .tab.active {
        border-bottom: 2px solid #1976d2;
        color: #1976d2;
        font-weight: bold;
    }
    
    /* Settings Panel */
    .settings-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        z-index: 1003;
        padding: 20px;
        display: none;
        overflow-y: auto;
    }
    
    .settings-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .settings-title {
        font-size: 1.5rem;
        font-weight: bold;
    }
    
    .close-settings {
        font-size: 1.5rem;
        cursor: pointer;
    }
    
    .settings-section {
        margin-bottom: 25px;
    }
    
    .settings-section-title {
        font-weight: bold;
        margin-bottom: 10px;
        font-size: 1.1rem;
    }
    
    .history-item {
        padding: 10px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
    }
    
    /* Quick Apps Panel */
    .quick-apps-panel {
        position: fixed;
        right: 70px;
        bottom: 70px;
        background: white;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 15px rgba(0,0,0,0.1);
        display: none;
        flex-direction: column;
        gap: 10px;
        z-index: 1001;
        width: 200px;
    }
    
    .quick-app {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .quick-app:hover {
        background: #f1f1f1;
    }
    
    .quick-app-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
TRICKS FOR
TIPS
RTB
Quick Connect RTB
<!-- Main App Content (Hidden Initially) -->
<div id="appContent" style="display: none;">
    <!-- App Header -->
    <div class="app-header">
        <div class="app-title">Quick Connect RTB</div>
    </div>
    
    <!-- Header Line -->
    <div class="header-line">
        <div class="settings-text" id="settingsBtn">
            ⚙️ <span>Setting</span>
        </div>
        <div class="zone-icons-header">
            <div class="zone-icon-header" id="friend-zone-header">👋</div>
            <div class="zone-icon-header" id="family-zone-header">👨‍👩‍👧</div>
            <div class="zone-icon-header" id="love-zone-header">❤️</div>
        </div>
    </div>
    
    <!-- Tabs -->
    <div class="tabs">
        <div class="tab active" onclick="showTab('home')">Home</div>
        <div class="tab" onclick="showTab('subscriptions')">Subscriptions</div>
    </div>

    <!-- User ID -->
    <div class="user-id" id="userIdDisplay">🇮🇳 rtb123</div>

    <!-- Home Feed (Permanent Videos) -->
    <div class="video-feed" id="homeFeed">
        <!-- Video 1 -->
        <div class="video-card">
            <div class="video-thumbnail" style="background-image: url('https://i.ytimg.com/vi/7wtfhZwyrcc/maxresdefault.jpg');">
                <div class="video-duration">10:30</div>
            </div>
            <div class="video-info">
                <div class="channel-icon"></div>
                <div class="video-details">
                    <div class="video-title">DIY Craft with Family - Fun Activities for Everyone</div>
                    <div class="channel-name">Family Fun Channel • 1.2M views</div>
                    <div class="video-stats">
                        <span>95% liked this</span>
                        <span>10.5K subscribers</span>
                    </div>
                    <div class="video-actions">
                        <button class="action-btn like" onclick="likeVideo(this, 'video1')">👍 24K</button>
                        <button class="action-btn subscribe" onclick="toggleSubscription(this, 'familyChannel')">Subscribe</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Video 2 -->
        <div class="video-card">
            <div class="video-thumbnail" style="background-image: url('https://i.ytimg.com/vi/6WZOxnYi6yY/maxresdefault.jpg');">
                <div class="video-duration">15:45</div>
            </div>
            <div class="video-info">
                <div class="channel-icon"></div>
                <div class="video-details">
                    <div class="video-title">Couple Yoga Session - Strengthen Your Relationship</div>
                    <div class="channel-name">Love & Health • 856K views</div>
                    <div class="video-stats">
                        <span>97% liked this</span>
                        <span>8.2K subscribers</span>
                    </div>
                    <div class="video-actions">
                        <button class="action-btn like" onclick="likeVideo(this, 'video2')">👍 18K</button>
                        <button class="action-btn subscribe" onclick="toggleSubscription(this, 'loveChannel')">Subscribe</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Video 3 -->
        <div class="video-card">
            <div class="video-thumbnail" style="background-image: url('https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg');">
                <div class="video-duration">12:15</div>
            </div>
            <div class="video-info">
                <div class="channel-icon"></div>
                <div class="video-details">
                    <div class="video-title">Family Game Night Ideas for All Ages</div>
                    <div class="channel-name">Family Fun Channel • 850K views</div>
                    <div class="video-stats">
                        <span>96% liked this</span>
                        <span>10.5K subscribers</span>
                    </div>
                    <div class="video-actions">
                        <button class="action-btn like" onclick="likeVideo(this, 'video3')">👍 18K</button>
                        <button class="action-btn subscribe subscribed" onclick="toggleSubscription(this, 'familyChannel')">Subscribed</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Subscriptions Feed (Initially Empty) -->
    <div class="video-feed" id="subscriptionsFeed" style="display: none;">
        <div id="subscribedVideos"></div>
    </div>

    <!-- Right Side Social Icons -->
    <div class="social-icons">
        <div class="social-icon" onclick="openApp('instagram')">
            <img src="https://cdn-icons-png.flaticon.com/512/2111/2111463.png" alt="Instagram">
        </div>
        <div class="social-icon" onclick="openApp('youtube')">
            <img src="https://cdn-icons-png.flaticon.com/512/1384/1384060.png" alt="YouTube">
        </div>
        <div class="social-icon" onclick="openApp('facebook')">
            <img src="https://cdn-icons-png.flaticon.com/512/124/124010.png" alt="Facebook">
        </div>
    </div>

    <!-- Quick Ball -->
    <div class="quick-ball" id="quickBall">➕</div>

    <!-- Quick Apps Panel -->
    <div class="quick-apps-panel" id="quickAppsPanel">
        <div class="quick-app" onclick="openApp('chatgpt')">
            <div class="quick-app-icon">AI</div>
            <div>ChatGPT</div>
        </div>
        <div class="quick-app" onclick="openApp('deepseek')">
            <div class="quick-app-icon">DS</div>
            <div>DeepSeek</div>
        </div>
        <div class="quick-app" onclick="openApp('google')">
            <div class="quick-app-icon">G</div>
            <div>Google</div>
        </div>
        <div class="quick-app" onclick="openApp('whatsapp')">
            <div class="quick-app-icon">WA</div>
            <div>WhatsApp</div>
        </div>
    </div>

    <!-- Context Menu -->
    <div class="context-menu" id="contextMenu">
        <div class="menu-item" onclick="startChat()">💬 Chat</div>
        <div class="menu-item" onclick="startVoiceCall()">🎤 Voice Call</div>
        <div class="menu-item" onclick="startVideoCall()">📹 Video Call</div>
    </div>
    
    <!-- Add User Popup -->
    <div class="add-popup" id="addPopup">
        <h3 id="addPopupTitle">Add Friend</h3>
        <input type="text" id="userIdInput" placeholder="Enter ID (rtb1, rtb2)">
        <button onclick="addUser()">Add</button>
    </div>
    
    <!-- Settings Panel -->
    <div class="settings-panel" id="settingsPanel">
        <div class="settings-header">
            <div class="settings-title">Settings</div>
            <div class="close-settings" onclick="closeSettings()">×</div>
        </div>
        
        <div class="settings-section">
            <div class="settings-section-title">Account</div>
            <div>User ID: <span id="settingsUserId">rtb123</span></div>
            <div>Country: <span id="settingsCountry">India</span></div>
        </div>
        
        <div class="settings-section">
            <div class="settings-section-title">Liked Videos</div>
            <div id="likedVideosList">
                <div class="history-item">
                    <span>DIY Craft with Family</span>
                    <span>10:30</span>
                </div>
                <div class="history-item">
                    <span>Couple Yoga Session</span>
                    <span>15:45</span>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions