Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Setup Cloud File Manager</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-color: #0d1117; | |
| --card-bg: rgba(22, 27, 34, 0.8); | |
| --border-color: rgba(48, 54, 61, 0.8); | |
| --accent-color: #58a6ff; | |
| --text-color: #c9d1d9; | |
| --text-bold: #f0f6fc; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| margin: 0; | |
| padding: 40px 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| max-width: 650px; | |
| width: 100%; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 40px; | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(8px); | |
| } | |
| h1 { | |
| color: var(--text-bold); | |
| font-size: 28px; | |
| margin-top: 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| p { | |
| line-height: 1.6; | |
| } | |
| .alert { | |
| background: rgba(216, 180, 254, 0.1); | |
| border: 1px solid rgba(216, 180, 254, 0.3); | |
| color: #d8b4fe; | |
| padding: 16px; | |
| border-radius: 8px; | |
| margin-bottom: 24px; | |
| font-size: 14px; | |
| } | |
| ol { | |
| padding-left: 20px; | |
| } | |
| li { | |
| margin-bottom: 16px; | |
| line-height: 1.6; | |
| } | |
| code { | |
| background: #161b22; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-family: monospace; | |
| color: #ff7b72; | |
| border: 1px solid var(--border-color); | |
| } | |
| pre { | |
| background: #161b22; | |
| padding: 16px; | |
| border-radius: 8px; | |
| border: 1px solid var(--border-color); | |
| overflow-x: auto; | |
| } | |
| .btn-restart { | |
| display: inline-block; | |
| background: var(--accent-color); | |
| color: #0d1117; | |
| padding: 12px 24px; | |
| border-radius: 8px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| margin-top: 16px; | |
| transition: all 0.2s ease; | |
| } | |
| .btn-restart:hover { | |
| opacity: 0.9; | |
| transform: translateY(-2px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>⚙️ Konfigurasi Rclone Diperlukan</h1> | |
| <div class="alert"> | |
| <strong>Info:</strong> Aplikasi File Browser siap dijalankan, tetapi memerlukan konfigurasi Google Drive (rclone) agar penyimpanan file Anda bersifat permanen (tidak hilang saat Space restart). | |
| </div> | |
| <p>Silakan ikuti langkah-langkah di bawah ini untuk menghubungkan Google Drive Anda:</p> | |
| <ol> | |
| <li>Instal <code>rclone</code> di komputer lokal Anda.</li> | |
| <li>Jalankan perintah <code>rclone config</code> di terminal lokal Anda, buat remote baru tipe <code>drive</code>, dan beri nama (misal: <code>gdrive</code>).</li> | |
| <li>Temukan file <code>rclone.conf</code> Anda (jalankan perintah <code>rclone config file</code> untuk melihat lokasinya).</li> | |
| <li>Buka file tersebut, salin seluruh teks konfigurasinya.</li> | |
| <li>Buka halaman <strong>Settings</strong> di Space Hugging Face ini.</li> | |
| <li>Scroll ke bawah ke bagian <strong>Variables and secrets</strong>, lalu klik <strong>New secret</strong>.</li> | |
| <li>Gunakan nama secret <code>RCLONE_CONFIG_DATA</code> dan tempelkan (paste) isi konfigurasi rclone tadi ke kolom value.</li> | |
| <li>Setelah ditambahkan, silakan <strong>Restart</strong> Space ini.</li> | |
| </ol> | |
| <div style="text-align: center;"> | |
| <a href="" onclick="window.location.reload(); return false;" class="btn-restart">Refresh Halaman</a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |