index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataVizionary</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="logo.jpg">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">DataVizionary</h1>
        <form id="csvForm" class="mt-4">
            <div class="form-group">
                <label for="csvFile">Upload CSV File</label>
                <input type="file" class="form-control-file" id="csvFile" accept=".csv" required>
            </div>
            <div class="form-group">
                <label for="chartType">Select Chart Type</label>
                <select id="chartType" class="form-control" required>
                    <option value="line">Line Chart</option>
                    <option value="bar">Bar Chart</option>
                    <option value="scatter">Scatter Plot</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Generate Graph</button>
        </form>
        <div class="mt-5 text-center">
            <canvas id="csvChart"></canvas>
            <button id="downloadBtn" class="btn btn-success mt-3">Download Chart</button>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="main.js"></script>
</body>
</html>