feat: web frontend with Alpine.js

web/index.html

@@ -1,2 +1,42 @@
 <!DOCTYPE html>
-<html><head><title>yDropbox</title></head><body><h1>yDropbox</h1></body></html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>yDropbox</title>
+    <link rel="stylesheet" href="/style.css">
+    <script defer src="/alpine.min.js"></script>
+</head>
+<body>
+    <div x-data="app()" x-init="loadFiles()">
+        <header>
+            <h1>yDropbox</h1>
+            <button @click="logout()">Logout</button>
+        </header>
+
+        <section>
+            <h2>Inbox</h2>
+            <input type="file" @change="upload($event, 'inbox')">
+            <template x-for="file in inboxFiles" :key="file.id">
+                <div class="file-row">
+                    <span x-text="file.original_name"></span>
+                    <button @click="download(file.id)">Download</button>
+                    <button @click="deleteFile(file.id)">Delete</button>
+                    <button @click="share(file.id)">Share</button>
+                </div>
+            </template>
+        </section>
+
+        <section>
+            <h2>Outbox</h2>
+            <template x-for="file in outboxFiles" :key="file.id">
+                <div class="file-row">
+                    <span x-text="file.original_name"></span>
+                    <button @click="download(file.id)">Download</button>
+                    <button @click="deleteFile(file.id)">Delete</button>
+                </div>
+            </template>
+        </section>
+    </div>
+    <script src="/app.js"></script>
+</body>
+</html>