email-checker / upload.html
malik-AI's picture
Create a modern, responsive website with a green theme and soft 3D design style.
442f755 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Data | NASKSOFT</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<custom-navbar></custom-navbar>
<main class="upload">
<div class="container">
<h1>Analyze Your Excel Data</h1>
<p class="subtitle">Upload your Excel or CSV file and let our AI generate insights automatically.</p>
<div class="upload-container">
<div class="upload-box" id="dropzone">
<i class="fas fa-cloud-upload-alt"></i>
<h3>Drag & Drop Your File Here</h3>
<p>or</p>
<button class="btn btn-primary">Browse Files</button>
<input type="file" id="fileInput" accept=".xlsx, .xls, .csv" hidden>
</div>
<div class="file-preview">
<h3>Supported Formats</h3>
<div class="file-types">
<div class="file-type">
<i class="fas fa-file-excel"></i>
<span>Excel (.xlsx, .xls)</span>
</div>
<div class="file-type">
<i class="fas fa-file-csv"></i>
<span>CSV (.csv)</span>
</div>
</div>
<div class="file-requirements">
<h4>Requirements:</h4>
<ul>
<li>Maximum file size: 10MB</li>
<li>First row should contain column headers</li>
<li>Supported date formats: MM/DD/YYYY, DD/MM/YYYY, YYYY-MM-DD</li>
</ul>
</div>
</div>
</div>
<div class="data-preview">
<h2>Data Preview</h2>
<div class="data-table">
<table>
<thead>
<tr>
<th>Date</th>
<th>Region</th>
<th>Product</th>
<th>Units Sold</th>
<th>Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-06-01</td>
<td>North</td>
<td>Widget A</td>
<td>45</td>
<td>$2,250</td>
</tr>
<tr>
<td>2023-06-02</td>
<td>South</td>
<td>Widget B</td>
<td>32</td>
<td>$1,920</td>
</tr>
<tr>
<td>2023-06-03</td>
<td>East</td>
<td>Widget C</td>
<td>28</td>
<td>$1,680</td>
</tr>
</tbody>
</table>
</div>
<div class="analysis-actions">
<button class="btn btn-primary">Generate Insights</button>
<button class="btn btn-outline">Edit Structure</button>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
</body>
</html>