feat(view): replace index.html with a new layout for File Metadata Generator

This commit is contained in:
buzz-lightsnack-2007 2025-04-21 21:32:35 +08:00
parent dde5ea7beb
commit a35f7d995a
2 changed files with 46 additions and 34 deletions

46
views/index.htm Normal file
View file

@ -0,0 +1,46 @@
<html lang="en">
<head>
<title content-text="title-main"></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons" />
</head>
<body>
<top class="top-nav">
<nav class="nav-wrapper">
<div class="container">
<a href="#" class="brand-logo left">File Tools</a>
</div>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="active"><a>File Metadata Generator</a></li>
</ul>
</nav>
</top>
<main>
<header class="container flow-text">
<h1>File Metadata Generator</h1>
<p>Check what's in your files. </p>
</header>
<form action="/api/fileanalyse.php" method="post" enctype="multipart/form-data" class="container">
<p>Upload a file to generate its metadata.</p>
<div class="row">
<div class="file-field input-field col">
<div class="btn waves-effect">
<span for="upfile"><i class="material-icons">attach_file</i>File</span>
<input id="inputfield" type="file" name="upfile" required />
</div>
</div>
<div class="input-field col">
<input id="button" type="submit" value="Upload" class="btn waves-effect waves-light">
</div>
</div>
<div class="fixed-action-btn">
<button type="submit" id="upload-button" class="btn-floating btn-large waves-effect"><i class="material-icons">visibility</i>Submit</button>
</div>
</form>
</main>
</body>
</html>

View file

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>File Metadata</title>
<link rel="shortcut icon" href="https://cdn.freecodecamp.org/universal/favicons/favicon-32x32.png" type="image/x-icon"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="/public/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<h1>API Project: File Metadata Microservice</h1>
<h2>Usage:</h2>
<p>
Please Upload a File ...
</p>
<div class="view">
<h3 id="output"></h3>
<form enctype="multipart/form-data" method="POST" action="/api/fileanalyse">
<input id="inputfield" type="file" name="upfile">
<input id="button" type="submit" value="Upload">
</form>
</div>
</div>
<div class="footer">
<p>
by
<a href="http://www.freecodecamp.com">freeCodeCamp</a>
</p>
</div>
</body>
</html>