PyShare/client.html at main · pattanayakpratik/PyShare · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PyShare Client</title>
    <link rel="icon" type="image/x-icon" href="app_icon.ico">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="client_styles.css">
    <style>
        /* --- DISCONNECT OVERLAY STYLES --- */
        .disconnect-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(15, 23, 42, 0.95); /* Dark background matching theme */
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: none; /* Hidden by default */
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .disconnect-overlay.visible {
            display: flex;
            animation: fadeIn 0.3s ease-out;
        }

        .disconnect-card {
            background: var(--card-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 24px;
            text-align: center;
            max-width: 90%;
            width: 320px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body>
    <div class="app-container">

        <nav class="navbar">
            <button class="icon-btn" onclick="toggleTheme()" title="Theme">🌓</button>
            <div class="logo">
                <span class="icon-emoji"><img src="app_icon.ico" alt="Icon"></span> PyShare
            </div>
            <div style="width:40px;"></div> </nav>

        <div class="status-bar">
            <div class="status-pill">
                <span class="status-dot"></span>
                <span>Connected to HOST</span>
            </div>
        </div>

        <div class="upload-card" id="dropZone" onclick="document.getElementById('fileInput').click()">
            <div class="upload-icon">☁️</div>
            <h3>Send to HOST</h3>
            <p>Tap here to upload files</p>

            <button class="btn-primary" style="pointer-events: none;">Browse Files</button>
            <input type="file" id="fileInput" multiple hidden onchange="handleFiles(this.files)">

            <div id="progress-container" class="progress-wrapper" style="width: 100%; margin-top: 20px; text-align: left;">
                <div class="progress-labels"><span id="status">Uploading...</span><span id="percent-text">0%</span></div>
                <div class="progress-track"><div id="progress-bar" class="progress-fill"></div></div>
            </div>
        </div>

        <div class="files-section">
            <div class="card-header">
                <h2>💾 Download from HOST</h2>
            </div>

            <div class="search-bar-wrapper">
                <input type="text" id="searchPC" placeholder="🔍 Search HOST files..." onkeyup="filterPC()">
            </div>

            <ul id="file-list" class="file-list">
                <li class="loading-state">Loading files...</li>
            </ul>
        </div>

    </div>

    <div id="disconnectOverlay" class="disconnect-overlay">
        <div class="disconnect-card">
            <div style="font-size: 50px; margin-bottom: 20px;">🔌</div>
            <h2 style="margin-bottom: 10px;">Disconnected</h2>
            <p style="color: var(--text-sub); margin-bottom: 25px; font-size: 14px;">The host has stopped the server.</p>
            <button class="btn-primary" onclick="window.location.reload()">Try Reconnect</button>
        </div>
    </div>

    <script src="scripts.js"></script>
    <script>
        // --- SERVER HEARTBEAT MONITOR ---
        let failCount = 0;
        const overlay = document.getElementById('disconnectOverlay');

        function checkConnection() {
            // We use a simple fetch to a known endpoint
            fetch('/api/files')
                .then(response => {
                    if (!response.ok) throw new Error("Server Error");

                    // If we reach here, server is alive
                    if (failCount > 0) failCount = 0;
                })
                .catch(error => {
                    failCount++;
                    // If 3 consecutive failures (approx 6 seconds), assume disconnected
                    if (failCount >= 3) {
                        overlay.classList.add('visible');
                    }
                });
        }

        // Check connection every 1 seconds
        setInterval(checkConnection, 1000);
    </script>
</body>
</html>