Hugging Face's logo

Spaces:
nicolaydef
/
Deep
Sleeping

App Files Community
Deep
File size: 7,005 Bytes 
6c78545
 
 
 
 
dceedb1
6c78545
 
 
 
dceedb1
6c78545
 
 
 
 
 
 
dceedb1
6c78545
dceedb1
 
 
6c78545
dceedb1
6c78545
 
 
dceedb1
 
 
6c78545
dceedb1
 
 
 
 
 
 
 
 
6c78545
 
dceedb1
 
 
 
 
 
 
 
 
 
 
 
 
6c78545
 
 
 
 
5ba7d72
dceedb1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6c78545
dceedb1
6c78545
dceedb1
 
6c78545
dceedb1
 
 
 
5ba7d72
6c78545
 
dceedb1
 
 
 
 
6c78545
 
 
 
dceedb1
6c78545
dceedb1
 
 
 
 
6c78545
 
dceedb1
 
 
6c78545
 
dceedb1
6c78545
5ba7d72
dceedb1
 
6c78545
 
 
 
 
 
d04c0a3
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zenith | Social</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bcryptjs/2.4.3/bcrypt.min.js"></script>
    <link rel="stylesheet" href="/static/styles.css">
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
</head>
<body>
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>

    <div id="login-modal" class="modal-overlay open">
        <div class="modal-box text-center">
            <h1 class="text-3xl font-bold mb-8 tracking-[0.2em] text-cyan-400">ZENITH</h1>
            <form id="login-form" class="space-y-4">
                <input type="text" id="login-user" placeholder="Username" class="w-full bg-white/5 border border-white/10 p-3 rounded text-white focus:border-cyan-400 focus:outline-none">
                <input type="password" id="login-pass" placeholder="Password" class="w-full bg-white/5 border border-white/10 p-3 rounded text-white focus:border-cyan-400 focus:outline-none">
                <button type="submit" class="w-full bg-cyan-500/10 hover:bg-cyan-500/30 text-cyan-400 border border-cyan-500/50 p-3 rounded font-bold transition-all">ENTER SYSTEM</button>
            </form>
            <p id="login-error" class="text-red-500 text-xs mt-4 hidden"></p>
        </div>
    </div>

    <div id="settings-modal" class="modal-overlay">
        <div class="modal-box">
            <h2 class="text-xl font-bold mb-4 border-b border-white/10 pb-2">Profile Settings</h2>
            
            <div class="flex items-center justify-between mb-6">
                <div>
                    <div class="font-bold">Discovery Mode</div>
                    <div class="text-xs text-white/50">Allow others to find me in "Find Friends"</div>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="setting-discovery" class="sr-only peer">
                    <div class="w-11 h-6 bg-white/10 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
                </label>
            </div>

            <button id="save-settings" class="w-full bg-white/10 hover:bg-white/20 p-2 rounded">Save & Close</button>
        </div>
    </div>

    <div id="admin-modal" class="modal-overlay">
        <div class="modal-box relative border-red-500/30">
            <h2 class="text-red-500 font-mono font-bold mb-6 text-center">/// ADMIN ///</h2>
            <input type="text" id="admin-code" placeholder="CODE" class="w-full bg-black/50 border border-red-500/50 text-red-500 p-3 text-center tracking-[5px] uppercase mb-4 focus:outline-none">
            
            <form id="admin-create-form" class="hidden space-y-3">
                <input type="text" id="new-user" placeholder="New User" class="w-full bg-white/5 border border-white/10 p-2 text-white">
                <input type="text" id="new-pass" placeholder="New Pass" class="w-full bg-white/5 border border-white/10 p-2 text-white">
                <button type="submit" class="w-full bg-red-500/20 text-red-500 border border-red-500/50 p-2">CREATE</button>
            </form>
        </div>
    </div>

    <div class="app-grid hidden" id="app-interface">
        
        <nav class="w-[70px] bg-black/40 border-r border-white/5 flex flex-col items-center py-4 gap-4 z-20 backdrop-blur-xl">
            <button class="nav-btn active" data-tab="chats" title="My Chats">
                <ion-icon name="chatbubbles-outline" class="text-2xl"></ion-icon>
            </button>
            <button class="nav-btn" data-tab="discovery" title="Find Friends">
                <ion-icon name="planet-outline" class="text-2xl"></ion-icon>
            </button>
            
            <div class="flex-1"></div>
            
            <button id="open-settings" class="nav-btn" title="Settings">
                <ion-icon name="settings-outline" class="text-2xl"></ion-icon>
            </button>
        </nav>

        <aside class="sidebar" style="width: 240px;">
            <div class="p-4 border-b border-white/5 font-bold tracking-widest text-xs" id="sidebar-title">CHANNELS</div>
            
            <div id="view-chats" class="channel-list p-2">
                <div class="channel-item active" onclick="switchChannel('general')">
                    <span class="text-cyan-400">#</span> general
                </div>
                </div>

            <div id="view-discovery" class="channel-list p-2 hidden">
                <div class="text-xs text-white/30 mb-2 uppercase px-2">Looking for friends</div>
                <div id="discovery-list" class="space-y-2">
                    </div>
            </div>

            <div class="user-panel mt-auto">
                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600"></div>
                <div class="user-info ml-2 overflow-hidden">
                    <div id="current-username" class="text-sm font-bold truncate">...</div>
                    <div class="user-tag" id="admin-trigger">⚡ ADMIN</div>
                </div>
            </div>
        </aside>

        <main class="chat-area flex-1 flex flex-col relative bg-black/20">
            <header class="chat-header">
                <div class="flex items-center gap-2">
                    <h3 class="font-bold text-lg" id="chat-title"># general</h3>
                    <div id="voice-ui" class="hidden flex items-center gap-2 bg-black/40 px-2 py-1 rounded text-xs">
                        <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                        <span id="voice-ping" class="font-mono text-cyan-400">0ms</span>
                    </div>
                </div>
                <button id="voice-toggle" class="p-2 bg-white/5 rounded-full hover:bg-white/10">
                    <ion-icon name="mic-outline"></ion-icon>
                </button>
            </header>

            <div id="messages-container" class="messages-container custom-scrollbar"></div>

            <form id="chat-form" class="p-4 bg-transparent shrink-0">
                <input type="text" id="msg-input" autocomplete="off" placeholder="Message..." 
                    class="w-full bg-[#252535] border border-white/5 rounded-xl p-3 text-white focus:outline-none focus:border-white/20 transition-all">
            </form>
        </main>
    </div>

    <script src="/static/script.js"></script>
</body>
</html>