SmartDoc / templates /DataVisualisation.html
chabane
Updating UI
6c3c19b
raw
history blame
4.87 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SmartDoc AI-Data Visualisation</title>
<link rel="stylesheet" href="static/styles/features.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="static/styles/notification.css" />
</head>
<body>
<header>
<div class="container">
<a href="/">SmartDoc AI </a>
</div>
</header>
<main>
<main>
<section id="hero" class="hero">
<img src="static/assests/g.svg" alt="" />
<div class="container hero-content">
<h1>Turn Data into <br />Stunning Visuals</h1>
<h3>Create interactive charts and graphs efforlessly</h3>
<p>
Our Data visualisation tool helps you to transform raw data into visually appealing charts and
graphs , enabling
better decision - making and communication of insights </p>
</div>
</section>
<section class="raisons">
<div class="container raisons-content">
<h1 class="title">Why Choose Our Data Visualisation Tool ?</h1>
<div class="raisons-wrapper">
<div class="raison">
<i class="fas fa-check-circle"></i>
<p>User-friendly interface for all skill lavels </p>
</div>
<div class="raison">
<i class="fas fa-check-circle"></i>
<p>Multiple chart types suit your needs</p>
</div>
<div class="raison">
<i class="fas fa-check-circle"></i>
<p>Interactive and customizable Visuals</p>
</div>
<div class="raison">
<i class="fas fa-check-circle"></i>
<p>Secure and private processing</p>
</div>
</div>
</div>
</section>
<section class="steps">
<img src="static/assests/g.svg" alt="" />
<div class="steps-content">
<h1 class="title">How it works</h1>
<div class="steps-wrapper">
<div class="step">
<span>1</span>
<p>Upload your Data</p>
</div>
<div class="step">
<span>2</span>
<p>Prompt your need </p>
</div>
<div class="step">
<span>3</span>
<p>
View Result and
download your chart
</p>
</div>
</div>
</div>
</section>
<section class="upload">
<div class="container upload-content">
<h1 class="title">Upload</h1>
<p>Supported Formats: Excel</p>
<form class="wrapper" enctype="multipart/form-data">
<div class="input-wrapper">
<label for="document-input" id="label-input" class="active" draggable="true">
<input type="file" id="document-input" hidden />
<i class="fa fa-cloud-arrow-up"></i>
<span>Drag and Drop or Select a File</span>
</label>
</div>
<div class="file-container"></div>
<div class="prompt-wrapper">
<input type="text" id="text-prompt" placeholder="decribe your need ...">
<button type="submit">Genreate</button>
</div>
</form>
</div>
</section>
<section class="result" id="result">
<div class="container result-content">
<h1 class="title">Result</h1>
<div class="chart-wrapper">
</div>
</div>
</section>
</main>
<footer>SmartDoc AI - 2025</footer>
<div class="notifications">
</div>
<script src="static/scripts/dataViz.js"></script>
</body>
</html>