feat: added initial frontend

author: Aditish51 <adtshukla519@gmail.com> 2024-07-22 22:54:12 +0530
committer: Blaster4385 <venkatesh@tablaster.dev> 2024-07-25 17:15:39 +0530
commit: 26cf8aa1cbb894ce91e866da1227ea42a92fdfab (patch)
tree: c4fbb66c741bed69ebaf6102aea0a5359602ab4a /client
parent: 4016aa58005f968cca5b216e4188394b4d350095 (diff)
9 files changed, 528 insertions, 0 deletions
diff --git a/client/Poppins-Light.ttf b/client/Poppins-Light.ttf
new file mode 100644
index 0000000..bc36bcc
--- /dev/null
+++ b/client/Poppins-Light.ttf
diff --git a/client/Poppins-Medium.ttf b/client/Poppins-Medium.ttf
new file mode 100644
index 0000000..6bcdcc2
--- /dev/null
+++ b/client/Poppins-Medium.ttf
diff --git a/client/fileinfo.css b/client/fileinfo.css
new file mode 100644
index 0000000..149e526
--- /dev/null
+++ b/client/fileinfo.css
@@ -0,0 +1,134 @@
+@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
new file mode 100644
index 0000000..0885ba1
--- /dev/null
+++ b/client/fileinfo.html
@@ -0,0 +1,43 @@
+<!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
new file mode 100644
index 0000000..2a4d449
--- /dev/null
+++ b/client/fileinfo.js
@@ -0,0 +1,36 @@
+
+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/logo.png b/client/logo.png
new file mode 100644
index 0000000..134a9c9
--- /dev/null
+++ b/client/logo.png
diff --git a/client/upload.css b/client/upload.css
new file mode 100644
index 0000000..d37b197
--- /dev/null
+++ b/client/upload.css
@@ -0,0 +1,226 @@
+@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
new file mode 100644
index 0000000..56b2f12
--- /dev/null
+++ b/client/upload.html
@@ -0,0 +1,38 @@
+<!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
new file mode 100644
index 0000000..fe25bbf
--- /dev/null
+++ b/client/upload.js
@@ -0,0 +1,51 @@
+
+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);
+    }
+});
author	Aditish51 <adtshukla519@gmail.com>	2024-07-22 22:54:12 +0530
committer	Blaster4385 <venkatesh@tablaster.dev>	2024-07-25 17:15:39 +0530
commit	26cf8aa1cbb894ce91e866da1227ea42a92fdfab (patch)
tree	c4fbb66c741bed69ebaf6102aea0a5359602ab4a /client
parent	4016aa58005f968cca5b216e4188394b4d350095 (diff)