Video-Dating/index.html at main · VideoDating/Video-Dating · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Video Chat - Match Now</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #000; overflow: hidden; }

        /* Starry Background */
        .stars-container {
            position: absolute; inset: 0;
            background-image:
                radial-gradient(1px 1px at 20px 30px, #eee, rgba(0,0,0,0)),
                radial-gradient(1.2px 1.2px at 40px 70px, #fff, rgba(0,0,0,0)),
                radial-gradient(1.5px 1.5px at 50px 160px, #ddd, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 80px 120px, #fff, rgba(0,0,0,0));
            background-size: 250px 250px;
            opacity: 0.3;
        }

        /* Card Animation & Glow */
        .card-main {
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0 25px rgba(255, 62, 120, 0.5);
            border: 2px solid #FF3E78;
        }

        .card-side {
            transition: all 0.6s ease-in-out;
            filter: blur(2px) brightness(0.4);
            transform: scale(0.8);
            opacity: 0.3;
        }

        .btn-pink-gradient {
            background: linear-gradient(90deg, #FF5E8E 0%, #FF3E78 100%);
        }

        .btn-outline {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body class="text-white">

    <div id="landingPage" class="fixed inset-0 flex flex-col bg-black">
        <div class="stars-container"></div>

        <!-- Sliding Cards Section (Margin adjusted after removing header) -->
        <div class="flex-1 flex items-center justify-center relative px-4 overflow-hidden mt-10">
            <!-- Left Side Card -->
            <div id="leftCard" class="card-side absolute -left-24 w-64 h-96 rounded-[35px] overflow-hidden">
                <img src="" class="w-full h-full object-cover">
            </div>

            <!-- Main Center Card -->
            <div id="centerCard" class="card-main z-10 w-72 h-[440px] rounded-[40px] overflow-hidden">
                <img src="" class="w-full h-full object-cover">
            </div>

            <!-- Right Side Card -->
            <div id="rightCard" class="card-side absolute -right-24 w-64 h-96 rounded-[35px] overflow-hidden">
                <img src="" class="w-full h-full object-cover">
            </div>
        </div>

        <!-- Bottom UI Controls -->
        <div class="flex flex-col items-center pb-8 pt-4 px-6 z-10 space-y-4">

            <!-- Automatic Online Status -->
            <div class="flex items-center gap-2 mb-2 text-sm font-semibold">
                <span class="w-2.5 h-2.5 bg-green-500 rounded-full animate-pulse"></span>
                <span id="onlineCount" class="opacity-90 tracking-wide">456,286 online</span>
            </div>

            <!-- 1. Start Video Chat (Main Button) -->
            <button onclick="window.location.href='dating.html'"
                class="btn-pink-gradient w-full max-w-sm py-5 rounded-full text-lg font-bold flex items-center justify-center gap-3 shadow-xl active:scale-95 transition-transform">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                </svg>
                <span>Start Video Chat</span>
            </button>

            <!-- 2. Download & Contact (Secondary Buttons Row) -->
            <div class="flex gap-3 w-full max-w-sm">
                <!-- Download Button -->
                <button onclick="window.location.href='https://github.com/VideoDating/Video-Dating/raw/refs/heads/main/Video%20Dating.apk'"
                    class="btn-outline flex-1 py-4 rounded-2xl text-sm font-semibold flex items-center justify-center gap-2 active:scale-95 transition-all">
                    <svg class="w-5 h-5 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    Download App
                </button>

                <!-- Contact Button -->
                <button onclick="window.location.href='https://instagram.com/1tx_awesh'"
                    class="btn-outline flex-1 py-4 rounded-2xl text-sm font-semibold flex items-center justify-center gap-2 active:scale-95 transition-all">
                    <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                    </svg>
                    Contact Us
                </button>
            </div>

            <p class="pt-4 text-[10px] opacity-20 tracking-widest uppercase">Copyright by AWESH Developer</p>
        </div>
    </div>

    <script>
        // --- Image Slider Logic (Every 2 Seconds) ---
        const images = [
            "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=600",
            "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=600",
            "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=600",
            "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&w=600",
            "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?auto=format&fit=crop&w=600"
        ];

        let currentIndex = 0;

        function updateSlider() {
            const leftIdx = (currentIndex + images.length - 1) % images.length;
            const centerIdx = currentIndex;
            const rightIdx = (currentIndex + 1) % images.length;

            document.querySelector('#leftCard img').src = images[leftIdx];
            document.querySelector('#centerCard img').src = images[centerIdx];
            document.querySelector('#rightCard img').src = images[rightIdx];

            currentIndex = (currentIndex + 1) % images.length;
        }

        updateSlider();
        setInterval(updateSlider, 2000);

        // --- Live Online Counter ---
        let baseCount = 456286;
        function updateOnlineCount() {
            const fluctuation = Math.floor(Math.random() * 120) - 60;
            baseCount += fluctuation;
            document.getElementById('onlineCount').innerText = baseCount.toLocaleString() + " online";
        }
        setInterval(updateOnlineCount, 3000);
    </script>

</body>
</html>