Add public index page and update iframe source in index.html

kevinlee-06 · Jan 20, 2025 · 91bb1c7 · 91bb1c7
1 parent a4dd92b
commit 91bb1c7
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 1 deletion.
diff --git a/docs/index.html b/docs/index.html
@@ -33,7 +33,7 @@ <h2>UI 展示</h2>
             </div>
             <img src="logo.png" alt="Linklie Logo" class="logo">
         </div>
-        <iframe src="/public/index.html" width="100%" height="1200px" style="border: none; margin-top: 20px;"></iframe>
+        <iframe src="public-index.html" width="100%" height="1200px" style="border: none; margin-top: 20px;"></iframe>
     </main>
     <footer>
         <p>&copy; 2025 [email protected]</p>

diff --git a/docs/public-index.html b/docs/public-index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Linklie - URL Shortener</title>
+    <link rel="stylesheet" href="/public/styles.css">
+    <link rel="icon" href="/public/favicon.ico" type="image/x-icon">
+</head>
+<body class="orange-theme">
+    <h1><a href="https://github.com/kevinlee-06/linklie">Linklie - A URL Shortener</a></h1>
+
+    <div class="container">
+        <h2>Create Short URL</h2>
+        <form id="postForm">
+            <label for="url" title="The address to be redirected to.">URL:</label>
+            <input type="text" id="url" name="url" required><br><br>
+
+            <label for="id" title="The short link will be 'https://host/short-id'">Short ID:</label>
+            <input type="text" id="id" name="id" required><br><br>
+
+            <label for="password" title="Password is used for short link deletion.">Password:</label>
+            <input type="password" id="password" name="password"><br><br>
+
+            <button type="submit">Create Short URL</button>
+        </form>
+    </div>
+
+    <div class="container">
+        <h2>Delete Short URL</h2>
+        <form id="deleteForm">
+            <label for="deleteId">Short ID:</label>
+            <input type="text" id="deleteId" name="deleteId" required><br><br>
+
+            <label for="deletePassword" title="Enter password to delete short link.">Password:</label>
+            <input type="password" id="deletePassword" name="deletePassword"><br><br>
+
+            <button type="submit">Delete Short URL</button>
+        </form>
+    </div>
+
+    <div class="container">
+        <h2 id="response-h2" title="A json will be returned if success.">Response:
+            <label style="display: inline-block; font-size: 0.5em;" for="response-h2" title="A json will be returned if success.">[tips]</label>
+        </h2>
+        <pre id="responseMessage"></pre>
+    </div>
+
+    <div class="theme-selector">
+        <label for="theme">Choose a theme:</label>
+        <select id="theme">
+            <option value="orange-theme">Orange</option>
+            <option value="green-theme">Green</option>
+            <option value="blue-theme">Blue</option>
+            <option value="pink-theme">Pink</option>
+            <option value="dark-blue-theme">Dark</option>
+            <option value="black-theme">Black</option>
+        </select>
+
+    </div>
+
+    <script src="/public/scripts/delete.js"></script>
+    <script src="/public/scripts/post.js"></script>
+    <script src="/public/scripts/styles.js"></script>
+</body>
+</html>