refactor: rewrite frontend

17 files changed, 322 insertions, 529 deletions

diff --git a/client/Poppins-Light.ttf b/client/Poppins-Light.ttf
deleted file mode 100644
index bc36bcc..0000000
--- a/client/Poppins-Light.ttf
+++ /dev/null
diff --git a/client/Poppins-Medium.ttf b/client/Poppins-Medium.ttf
deleted file mode 100644
index 6bcdcc2..0000000
--- a/client/Poppins-Medium.ttf
+++ /dev/null
diff --git a/client/assets/fonts.css b/client/assets/fonts.css
new file mode 100644
index 0000000..53f8738
--- /dev/null
+++ b/client/assets/fonts.css
@@ -0,0 +1,21 @@
+/* latin-ext */
+@font-face {
+    font-family: "JetBrains Mono";
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(/assets/fonts/JetBrains_Mono_latin-ext.woff2) format("woff2");
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+      U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: "JetBrains Mono";
+    font-style: normal;
+    font-weight: 100 800;
+    font-display: swap;
+    src: url(/assets/fonts/JetBrains_Mono_latin.woff2) format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
\ No newline at end of file
diff --git a/client/assets/fonts/JetBrainsMono-VariableFont_wght.ttf b/client/assets/fonts/JetBrainsMono-VariableFont_wght.ttf
new file mode 100644
index 0000000..d73994a
--- /dev/null
+++ b/client/assets/fonts/JetBrainsMono-VariableFont_wght.ttf
diff --git a/client/assets/fonts/JetBrains_Mono_latin-ext.woff2 b/client/assets/fonts/JetBrains_Mono_latin-ext.woff2
new file mode 100644
index 0000000..06b0c9e
--- /dev/null
+++ b/client/assets/fonts/JetBrains_Mono_latin-ext.woff2
diff --git a/client/assets/fonts/JetBrains_Mono_latin.woff2 b/client/assets/fonts/JetBrains_Mono_latin.woff2
new file mode 100644
index 0000000..9d41658
--- /dev/null
+++ b/client/assets/fonts/JetBrains_Mono_latin.woff2
diff --git a/client/assets/index.js b/client/assets/index.js
new file mode 100644
index 0000000..520c7f0
--- /dev/null
+++ b/client/assets/index.js
@@ -0,0 +1,117 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const fileId = urlParams.get('id');
+    const key = urlParams.get('key');
+
+    if (fileId && key) {
+        displayFileDetails(fileId, key);
+    } else {
+        document.getElementById('upload__form').style.display = 'block';
+        setupUploadForm();
+    }
+});
+
+const baseUrl = window.location.origin;
+
+async function displayFileDetails(fileId, key) {
+    try {
+        const response = await fetch(`${baseUrl}/get/${fileId}?key=${key}`, {
+            method: 'GET',
+        });
+
+        const fileDetails = document.getElementById('file__details');
+        const fileNameElement = document.getElementById('file__name');
+        const fileSizeElement = document.getElementById('file__size');
+        const downloadButton = document.getElementById('download__btn');
+        const copyButton = document.getElementById('copy__btn');
+
+        if (!response.ok) {
+            fileDetails.textContent = `Error: ${response.statusText}`;
+            fileDetails.style.display = 'flex';
+            return;
+        }
+
+        const contentType = response.headers.get('Content-Type');
+        
+        if (contentType && contentType.includes('application/json')) {
+            const result = await response.json();
+            const downloadUrl = `${baseUrl}/download/${fileId}?key=${key}`;
+            const pageUrl = `${baseUrl}/?id=${fileId}&key=${key}`;
+            fileNameElement.textContent = `${result.fileName}`;
+            fileSizeElement.textContent = `${result.fileSize}`;
+            downloadButton.innerHTML = `<a href="${downloadUrl}">Download</a>`;
+            copyButton.onclick = () => {
+                navigator.clipboard.writeText(pageUrl);
+                copyButton.textContent = 'Copied!';
+            };
+        } else {
+            const result = await response.text();
+            fileDetails.textContent = result;
+        }
+
+        fileDetails.style.display = 'flex';
+    } catch (error) {
+        console.error('Error:', error);
+        document.getElementById('file__details').textContent = 'An error occurred. Please try again.';
+        document.getElementById('file__details').style.display = 'flex';
+    }
+}
+
+function setupUploadForm() {
+    const fileInput = document.querySelector('.upload__input');
+    const overlayText = document.querySelector('.upload__input__overlay__text');
+
+    fileInput.addEventListener('change', () => {
+        if (fileInput.files.length > 0) {
+            overlayText.textContent = fileInput.files[0].name;
+        } else {
+            overlayText.textContent = 'Choose a file or drag it here';
+        }
+    });
+
+    document.getElementById('upload__form').addEventListener('submit', async (event) => {
+        event.preventDefault();
+
+        const file = fileInput.files[0];
+
+        if (!file) {
+            console.log('No file selected.');
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('file', file);
+
+        try {
+            const response = await fetch(`${baseUrl}/upload`, {
+                method: 'POST',
+                body: formData
+            });
+
+            const uploadResult = document.getElementById('upload__result');
+
+            if (!response.ok) {
+                uploadResult.textContent = `Error: ${response.statusText}`;
+                uploadResult.classList.add('upload__result__visible');
+                return;
+            }
+
+            const contentType = response.headers.get('Content-Type');
+            
+            if (contentType && contentType.includes('application/json')) {
+                const result = await response.json();
+                const pageUrl = `${baseUrl}/?id=${result.id}&key=${result.key}`;
+                window.location.href = pageUrl;
+            } else {
+                const result = await response.text();
+                uploadResult.textContent = result;
+            }
+
+            uploadResult.classList.add('upload__result__visible');
+        } catch (error) {
+            console.error('Error:', error);
+            document.getElementById('upload__result').textContent = 'An error occurred. Please try again.';
+            document.getElementById('upload__result').classList.add('upload__result__visible');
+        }
+    });
+}
\ No newline at end of file
diff --git a/client/assets/styles.css b/client/assets/styles.css
new file mode 100644
index 0000000..983ca51
--- /dev/null
+++ b/client/assets/styles.css
@@ -0,0 +1,144 @@
+@import url('fonts.css');
+
+body {
+    background-color: #282828;
+    color: #ebdbb2;
+    margin: 0;
+    padding: 0;
+    font-family: 'JetBrains Mono', monospace;
+}
+
+#root {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: auto;
+}
+
+.header {
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.upload__container,
+.file__details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 600px;
+    min-width: 600px;
+    border-radius: 2rem;
+    gap: 1rem;
+    padding: 1rem;
+    background-color: #ebdbb2;
+    color: #282828;
+    overflow-wrap: anywhere;
+    position: relative;
+}
+
+.file__details__text {
+    font-size: 1.5rem;
+}
+
+.file__details__button__container {
+    display: flex;
+    gap: 1rem;
+}
+
+.upload__button,
+.download__button {
+    font-size: 1.5rem;
+    padding: 1rem;
+    background-color: #282828;
+    border-radius: 16px;
+    border: 1px solid #282828;
+    color: #ebdbb2;
+    cursor: pointer;
+    transition: transform 0.3s ease-in-out;
+}
+
+.upload__button:hover,
+.download__button:hover {
+    transform: scale(1.1);
+}
+
+.upload__button {
+    position: absolute;
+    bottom: 5%;
+}
+
+.upload__input {
+    color: #282828;
+    border: 2px solid #282828;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    min-height: 300px;
+    min-width: 300px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    z-index: 2;
+    cursor: pointer;
+}
+
+.upload__input__overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #282828;
+    border: 2px solid #282828;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    min-height: 300px;
+    min-width: 300px;
+}
+
+.upload__result {
+    opacity: 0;
+    padding: 1rem;
+}
+
+.upload__result__visible {
+    opacity: 1;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+@media (max-width: 768px) {
+
+    .upload__container,
+    .file__details {
+        min-height: 400px;
+        min-width: 300px;
+        max-height: 400px;
+        max-width: 300px;
+    }
+
+    .upload__input,
+    .upload__input__overlay {
+        min-height: 100px;
+        min-width: 250px;
+        max-width: 250px;
+        padding: 0.5rem;
+    }
+
+    .upload__button,
+    .download__button {
+        font-size: 1.2rem;
+    }
+
+    .file__details__text {
+        font-size: 1.2rem;
+    }
+}
\ No newline at end of file
diff --git a/client/fileinfo.css b/client/fileinfo.css
deleted file mode 100644
index 149e526..0000000
--- a/client/fileinfo.css
+++ /dev/null
@@ -1,134 +0,0 @@
-@font-face {
-    font-family: Poppins-Light ;
-    src: url(Poppins-Light.ttf);
-}
-
-@font-face {
-    font-family: Poppins-Medium;
-    src: url(Poppins-Medium.ttf);
-}
-*{
-    margin: 0px;
-}
-#navbar{
-    width: 2000px;
-    height: 100px;
-     background-color: #5bc703;
-    margin-top: 0px;
- 
- }
-h1{
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    color:  rgb(253, 253, 253);
-    font-size: 50px;
-    margin-left: 50px;
-    margin-top: -80px;
-}
-body{
-background-color: #383836;
-
-}
-
-#main{
-    background-color: #5bc703;
-    height: 400px;
-    width: 800px;
-    padding: 100px;
-    margin-left: 400px;
-    margin-top: 5%;
-    border-radius: 30px;
-    border: 4px dashed white;
-}
-
-#undiv1{
-    height: 200px;
-    width: 500px;
-    padding: 50px;
-    margin-left: 10px;
-}
-#undiv2{
-   
-    height: 200px;
-    width: 600px;
-    padding: 20px;
-    margin-left: 70px;
-    margin-top: -70px;
-}
-
-#idInput{
-    font-size: 30px;
-    font-family: Poppins-Medium;
-    background-color: #f3f5f7;
-    border-radius: 10px;
-    border-color: #294F6A;
-}
-#lab1{
- font-size: 30px;
- color: white;
-}
-#keyInput{
-    font-size: 30px;
-    font-family: Poppins-Medium;
-    background-color: #f7f9fa;
-    border-radius: 10px;
-    border-color: #294F6A;
-}
-#lab2{
-    font-size: 30px;
-    color: white;
-   }
-
-#btn1{
-
-    font-size: 20px;
-    border-radius: 10px;
-    padding: 10px 10px 10px 10px;
-    cursor: pointer;
-    background-color: #294F6A;
-    border-color: #294F6A;
-    margin-left: 100px;
-    
-}
-
-#link{
-
-    color: antiquewhite;
-    text-decoration: solid;
-}
-#btn2{
-
-    font-size: 20px;
-    border-radius: 10px;
-    padding: 10px 10px 10px 10px;
-    cursor: pointer;
-    background-color: #294F6A;
-    border-color: #294F6A;
-    margin-left: -30px;
-    color: antiquewhite;
-}
-
-#fileInfo{
-    color: #5bc703;
-    height: 150px;
-    width: 800px;
-    background-color: #ffffff;
-    margin-top: 100px;
-    border-radius: 20px;
-    justify-content: center;
-    border: 3px dashed #5bc703;
-    font-size: 30px;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    text-align: left;
-    padding: 40px 40px 40px 40px;
-    display: none;
-
-
-}
-#footer{
-    height: 100px;
-    background-color: #5bc703;
-    margin-top: 20%;
-    text-align: center;
-    color: rgb(247, 245, 242);
-    padding: 40px 40px 40px 40px;
-}
\ No newline at end of file
diff --git a/client/fileinfo.html b/client/fileinfo.html
deleted file mode 100644
index 0885ba1..0000000
--- a/client/fileinfo.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FILE SHARE</title>
-    <link rel="stylesheet" href="fileinfo.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-
-
-</head>
-<body>
-    <div id="navbar">
-
-    </div>
-    <h1> FILE SHARE </h1>
-<div id="main">
-
-    <div id="undiv1">
-        <label for="idInput" id="lab1">Enter ID:</label>
-        <input type="text" id="idInput"><br><br>
-        
-        <label for="keyInput" id="lab2">Enter Key:</label>
-        <input type="text" id="keyInput"><br><br>
-    </div>
-<div id="undiv2">
-    <button  id= "btn2" onclick="getID()">Fetch Data</button>
-        
-        <button id="btn1"><a id="link"> Download</a></button>
-    
-</div>
-        
-        <div id="fileInfo"> </div>
-
-</div>
-    
-       <footer id="footer"> @Fileshare</footer>
-        <script src="fileinfo.js"></script>
-</body>
-
-    
-
-</html>
\ No newline at end of file
diff --git a/client/fileinfo.js b/client/fileinfo.js
deleted file mode 100644
index 2a4d449..0000000
--- a/client/fileinfo.js
+++ /dev/null
@@ -1,36 +0,0 @@
-
-const fileInfo = document.querySelector("#fileInfo");
-let link = document.getElementById('link')
-async function getID() {
-  const id = document.getElementById('idInput').value;
-  const apiKey = document.getElementById('keyInput').value;
-
-  const baseURL1 = 'http://localhost:8080/get';
-  const baseURL2 = 'http://localhost:8080/download';
-  const url = `${baseURL1}/${id}?key=${apiKey}`;
-  link.href =`${baseURL2}/${id}?key=${apiKey}` ;
-  try {
-    let response = await fetch(url);
-
-
-    let data = await response.json(); 
-  
-     fileName = data.fileName;
-
-      fileSize = data.fileSize;
-
-    
-    fileInfo.innerHTML = `<b>File Name:</b> ${fileName}<br><br></b><b>File Size:</> </b>${fileSize}`;
-    fileInfo.style.display = 'block';
-    
-  } 
-  
-  catch (error) {
-  console.error('Error fetching data:', error);
-    
-  }
-}
-
-
-
-
diff --git a/client/index.html b/client/index.html
new file mode 100644
index 0000000..82614e9
--- /dev/null
+++ b/client/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>File Share</title>
+  <link rel="stylesheet" href="assets/styles.css">
+</head>
+
+<body>
+  <div id="root">
+    <div class="header">
+      <h2 class="header__title">File Share</h2>
+    </div>
+    <form id="upload__form" style="display: none;">
+      <div class="upload__container">
+        <div class="upload__input__overlay">
+          <p class="upload__input__overlay__text">Choose a file or drag it here</p>
+        </div>
+        <input type="file" class="upload__input" name="file">
+        <button type="submit" class="upload__button" id="upload__btn">Upload</button>
+      </div>
+    </form>
+    <div class="file__details" id="file__details" style="display: none;">
+      <p class="file__details__text" id="file__name"></p>
+      <p class="file__details__text" id="file__size"></p>
+      <div class="file__details__button__container">
+        <button class="download__button" id="download__btn">Download</button>
+        <button class="download__button" id="copy__btn">Copy Link</button>
+      </div>
+    </div>
+    <div class="upload__result" id="upload__result">Error Placeholder</div>
+  </div>
+
+  <script src="assets/index.js"></script>
+</body>
+
+</html>
diff --git a/client/logo.png b/client/logo.png
deleted file mode 100644
index 134a9c9..0000000
--- a/client/logo.png
+++ /dev/null
diff --git a/client/upload.css b/client/upload.css
deleted file mode 100644
index d37b197..0000000
--- a/client/upload.css
+++ /dev/null
@@ -1,226 +0,0 @@
-@font-face {
-    font-family: Poppins-Light ;
-    src: url(Poppins-Light.ttf);
-}
-
-@font-face {
-    font-family: Poppins-Medium;
-    src: url(Poppins-Medium.ttf);
-}
-
-*{
-    margin-left: 0px;
-    margin-bottom: 100px;
-    margin-top: 0px;
-}
-body{
-    background-color:#383836;
-    display: flex;
-    
-}
-#navbar{
-    width: 2000px;
-    height: 100px;
-     background-color: #5bc703;
-    margin-top: 0px;
- 
- }
-
-#logo{
-    height: 90px;
-    width: 90px;
-    margin-top: 50px;
-    margin-left: 20px;
-
-}
-#uploader-title{
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    color: rgb(249, 250, 253);
-    margin-left: -1950px;
-    margin-top: 20px;
-    font-size: 50px;
-    padding-left: 0px;
-   
-    
-}
-.file-uploader{
-    height: 550px;
-    width: 800px;
-    margin-top: 30%;
-    margin-left: 15%;
-    background-color:#5bc703;
-    border-radius: 30px;
-    padding: 2px;
-    border: 4px dashed white;
-}
-
-.file-instruction{
-    color: rgb(232, 241, 241);
-    margin-left: 50px;
-    font-family: "Poppins-Light";
-    font-size: 15px;
-    font-weight: lighter;
-    margin-top: 100px;
-    
-}
-.file-upload-box{
-    height: 200px;
-    width: 300px;
-   margin-left: 230px;
-   margin-top: 100px;
-   margin-right: 500px;
-    background-color:#5bc703;
-    border: 2px dashed rgb(209, 209, 209);
-    border-radius: 30px;
-    padding: 20px;
-}
-.uploadsec{
-    margin-left: 100px;
-    margin-top: 30%;
-}
-#uploadbtn{
-    font-size: 25px;
-    min-width: max-content;
-    padding: 5px 30px 5px 30px ;
-    margin-left: -30px;
-    margin-top: 100px;
-    background-color:#294F6A;
-    border-radius: 20px;
-    color: white;
-    border-color:#294F6A ;
-    cursor: pointer;
-}
-
-
-#fileInput{
-    padding: 5px 30px 5px 30px ;
-    font-size: 17px;
-    margin-left: -70px;
-    margin-top: 30px;
-    color: white;
-    
-    
-}
-#i2{
-    margin-top: 500px;
- padding-right: 50px;
-   margin-left: 200px;
-   color: blueviolet;
-}
-#i3{
-    margin-top: 600px;
- padding-right: 50px;
-   margin-left: 300px;
-   color: blueviolet;
-}
-#boxmain{
-    margin-left: 400px;
-    font-size: 50px;
-    margin-top: 100px;
-    color: aliceblue;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    text-shadow: 3px 3px 4px rgb(73, 50, 73);
-}
-
-
-
-#pdnd{
-    color: #475c5a;
-    margin-left: 90px;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-}
-#footer{
-    margin-top: 500px;
-
-}
-#myDropzone{
-
-    background-color: #294F6A;
-    border: #294F6A;
-    color: white;
-    font-size: 20px;
-    font-family: Poppins-Light;
-}
-
-.info1{
-    height: 50px;
-    width: 700px;
-    background-color: #ffffff;
-    margin-top: -100px;
-    margin-bottom: 100px;
-    padding-bottom: 20px;
-    margin-left: -600px;
-    border-radius: 25px;
-    text-align: center;
-    justify-content: center;  /* Aligns horizontally */
-  align-items: center;  
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    display: none;
-    color: #437718;
-    padding: 10px 10px 10px 10px;
-    
-}
-.info1v{
-    height: 50px;
-    width: 700px;
-    background-color: #ffffff;
-    margin-top: -100px;
-    margin-bottom: 100px;
-    padding-bottom: 20px;
-    margin-left: -600px;
-    border-radius: 25px;
-    text-align: center;
-    justify-content: center;  /* Aligns horizontally */
-  align-items: center;  
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    display: block;
-    border: 3px dashed #5bc703;
-    text-align: left;
-    padding: 10px 10px 10px 10px;
-    color: #437718;
-}
-.info2{
-    height: 50px;
-    width: 700px;
-    background-color: #ffffff;
-    margin-top: -100px;
-    margin-left: 150px;
-    border-radius: 25px;
-    text-align: center;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    display: flex;
-  justify-content: center;  
-  align-items: center;  
-  display: none;  
-  color:#437718;
-  padding: 10px 10px 10px 10px;
-   
-}
-.info2v{
-    height: 50px;
-    width: 700px;
-    background-color: #ffffff;
-    margin-top: -180px;
-    margin-left: 150px;
-    border-radius: 25px;
-    text-align: center;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    display: flex;
-  justify-content: center;  
-  align-items: center;    
-  display: block;  
-   border: 3px dashed #5bc703;
-    text-align: left;
-    padding: 10px 10px 10px 10px;
-    color: #437718;
-   
-}
-#footer{
-    height: 100px;
-    background-color: #5bc703;
-    margin-top: 20%;
-    text-align: center;
-    color: rgb(252, 250, 247);
-    padding: 40px 40px 40px 40px;
-}
- 
\ No newline at end of file
diff --git a/client/upload.html b/client/upload.html
deleted file mode 100644
index 56b2f12..0000000
--- a/client/upload.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>File Upload</title>
-    <link rel="stylesheet" href="upload.css">
-<body>
-  <div id="navbar"></div>
-    <h2 id="uploader-title">FILE SHARE</h2>
-    <div id="main">
-
-      <div class="file-uploader">
-        <div class="uploader-header">
-          
-          <h4 id="file-completed-status"></h4>
-        </div>
-        <ul class="file-list"></ul>
-        <div class="file-upload-box">
-          <h2 class="box-title">
-                  
-          </h2>
-          <div class="uploadsec">
-            <form id="uploadForm">
-                <input type="file" id="fileInput" name="file">
-                <button type="submit" id="uploadbtn" >Upload</button>
-            </form>
-          </div>
-          <div class="info1" id="info1h"></div>
-          <div class="info2" id="info2h"></div>
-
-</div>
-</div>
-    </div>
-    
-    <script src="upload.js"></script>
-</body>
-</html>
diff --git a/client/upload.js b/client/upload.js
deleted file mode 100644
index fe25bbf..0000000
--- a/client/upload.js
+++ /dev/null
@@ -1,51 +0,0 @@
-
-document.getElementById('uploadForm').addEventListener('submit', async (event) => {
-    event.preventDefault();
-
-    const fileInput = document.getElementById('fileInput');
-    const file = fileInput.files[0];
-    
-    if (!file) {
-        console.log('No file selected.');
-        return;
-    }
-
-    const formData = new FormData();
-    formData.append('file', file);
-
-    try {
-        const response = await fetch('http://localhost:8080/upload', {
-            method: 'POST',
-            body: formData
-        });
-
-        const info1h = document.getElementById('info1h');
-        const info2h = document.getElementById('info2h');
-
-        if (response.ok) {
-            const contentType = response.headers.get('Content-Type');
-            
-            if (contentType && contentType.includes('application/json')) {
-                const result = await response.json();
-                info1h.innerText = "id=" + result.id;
-                info2h.innerText = "key=" + result.key;
-            } else {
-                const result = await response.text();
-                info1h.innerText = result;
-                info2h.innerText = "";
-            }
-
-            info1h.classList.remove('info1');
-            info1h.classList.add('info1v');
-
-            info2h.classList.remove('info2');
-            info2h.classList.add('info2v');
-        } else {
-            info1h.innerText = response.statusText;
-            info1h.classList.remove('info1');
-            info1h.classList.add('info1v');
-        }
-    } catch (error) {
-        console.error('Error:', error);
-    }
-});
diff --git a/server/main.go b/server/main.go
index cd2e445..ad79bcf 100644
--- a/server/main.go
+++ b/server/main.go
@@ -34,7 +34,7 @@ func registerHandlers(e *echo.Echo) {
 	e.Use(middleware.BodyLimit(fmt.Sprintf("%dM", maxUploadSize/(1024*1024))))
 	e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
 		Root:       "dist",
-		Index:      "upload.html",
+		Index:      "index.html",
 		HTML5:      true,
 		Filesystem: http.FS(dist),
 	}))