Uppooo/spreadsheet-simulator-supreme
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Spreadsheet Simulator Supreme</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>12 <script src="components/navbar.js"></script>13</head>14<body class="bg-gray-50">15 <custom-navbar></custom-navbar>16 17 <div class="container mx-auto px-4 py-8">18 <div class="flex flex-col lg:flex-row gap-8">19 <!-- Spreadsheet Section -->20 <div class="w-full lg:w-2/3 bg-white rounded-xl shadow-md overflow-hidden">21 <div class="p-6">22 <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">23 <i data-feather="grid" class="mr-2"></i> Financial Simulator24 </h2>25 <div class="overflow-x-auto">26 <table class="w-full border-collapse">27 <thead>28 <tr class="bg-gray-100">29 <th class="p-3 text-left border border-gray-200"></th>30 <th class="p-3 text-left border border-gray-200">B</th>31 <th class="p-3 text-left border border-gray-200">C</th>32 <th class="p-3 text-left border border-gray-200">H</th>33 <th class="p-3 text-left border border-gray-200">K</th>34 </tr>35 </thead>36 <tbody>37 <tr>38 <td class="p-3 font-medium border border-gray-200">2</td>39 <td class="p-0 border border-gray-200">40 <input type="number" id="b2" class="w-full p-3 border-0 focus:ring-2 focus:ring-blue-500" value="100000">41 </td>42 <td class="p-3 border border-gray-200 bg-gray-50">-</td>43 <td class="p-3 border border-gray-200 bg-gray-50">-</td>44 <td class="p-3 border border-gray-200 bg-gray-50">-</td>45 </tr>46 <tr>47 <td class="p-3 font-medium border border-gray-200">3</td>48 <td class="p-3 border border-gray-200 bg-gray-50">-</td>49 <td class="p-0 border border-gray-200">50 <input type="number" id="c3" class="w-full p-3 border-0 focus:ring-2 focus:ring-blue-500" value="0.05">51 </td>52 <td class="p-0 border border-gray-200">53 <input type="number" id="h3" class="w-full p-3 border-0 focus:ring-2 focus:ring-blue-500" value="0.1">54 </td>55 <td class="p-0 border border-gray-200">56 <input type="number" id="k3" class="w-full p-3 border-0 focus:ring-2 focus:ring-blue-500" value="0.15">57 </td>58 </tr>59 <tr>60 <td class="p-3 font-medium border border-gray-200">4</td>61 <td class="p-3 border border-gray-200 bg-gray-50">-</td>62 <td class="p-0 border border-gray-200">63 <input type="number" id="c4" class="w-full p-3 border-0 focus:ring-2 focus:ring-blue-500" value="12">64 </td>65 <td class="p-3 border border-gray-200 bg-gray-50">-</td>66 <td class="p-3 border border-gray-200 bg-gray-50">-</td>67 </tr>68 <tr>69 <td class="p-3 font-medium border border-gray-200">8</td>70 <td class="p-3 border border-gray-200 bg-gray-50">-</td>71 <td class="p-3 border border-gray-200 bg-gray-50">-</td>72 <td class="p-0 border border-gray-200">73 <input type="number" id="h8" class="w-full p-3 border-0 focus:ring-2 focus:ring-blue-500" value="5000">74 </td>75 <td class="p-0 border border-gray-200">76 <input type="number" id="k8" class="w-full p-3 border-0 focus:ring-2 focus:ring-blue-500" value="10000">77 </td>78 </tr>79 </tbody>80 </table>81 </div>82 <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">83 <div class="bg-blue-50 p-4 rounded-lg">84 <h3 class="text-sm font-medium text-blue-800">Total Investment</h3>85 <p class="text-2xl font-bold text-blue-600" id="totalInvestment">$0</p>86 </div>87 <div class="bg-green-50 p-4 rounded-lg">88 <h3 class="text-sm font-medium text-green-800">Projected Growth</h3>89 <p class="text-2xl font-bold text-green-600" id="projectedGrowth">0%</p>90 </div>91 <div class="bg-purple-50 p-4 rounded-lg">92 <h3 class="text-sm font-medium text-purple-800">Net Profit</h3>93 <p class="text-2xl font-bold text-purple-600" id="netProfit">$0</p>94 </div>95 </div>96 </div>97 </div>98 99 <!-- Charts Section -->100 <div class="w-full lg:w-1/3 bg-white rounded-xl shadow-md overflow-hidden">101 <div class="p-6">102 <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">103 <i data-feather="pie-chart" class="mr-2"></i> Data Visualization104 </h2>105 <div class="space-y-6">106 <div>107 <h3 class="text-lg font-medium text-gray-700 mb-2">Investment Breakdown</h3>108 <canvas id="pieChart" height="200"></canvas>109 </div>110 <div>111 <h3 class="text-lg font-medium text-gray-700 mb-2">Growth Projection</h3>112 <canvas id="lineChart" height="200"></canvas>113 </div>114 </div>115 </div>116 </div>117 </div>118 </div>119 120 <script src="script.js"></script>121 <script>feather.replace();</script>122 <script>feather.replace();</script>123</body>124</html>