Financial Dashboard Component - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html> <head> <title>Financial Dashboard</title> <base target="_top"> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font awesome/4.7.0/css/font awesome.min.css"> <style> body { font family: 'Raleway', sans serif; background color: #f0f0f0; } .w3 bar { background color: #bfbfbf !important; color: #555 !important; box shadow: none; } .w3 bar item { color: #555 !important; } .w3 button { background color: #ddd !important; color: #555 !important; } .w3 hover light grey:hover { background color: #ccc !important; } .w3 main { background color: #f0f0f0; } .w3 card 4 { border: 1px solid #ccc; background color: #fff; } h2 { color: #555; } </style> </head> <body class="w3 light grey"> <! Top container with navigation menu > <div class="w3 bar w3 top w3 large" style="z index:4;"> <span class="w3 bar item">Dashboard</span> <! Navigation Menu > <div class="w3 right"> <a href="javascript:void(0)" class="w3 bar item w3 button w3 hover light grey" onclick="openForm('form1')">Invoice</a> <a href="javascript:void(0)" class="w3 bar item w3 button w3 hover light grey" onclick="openForm('form2')">Expense</a> </div> </div> <! Main content > <div class="w3 main" style="margin top:43px;"> <! Form 1 > <div id="form1" class="w3 container w3 padding 32 w3 card 4 w3 hide"> <h2></h2> <?!= include('Form1.html'); ?> </div> <! Form 2 > <div id="form2" class="w3 container w3 padding 32 w3 card 4 w3 hide"> <h2></h2> <?!= include('Form2.html'); ?> </div> </div> <script> function openForm(formId) { // Hide both forms initially document.getElementById('form1').classList.add('w3 hide'); document.getElementById('form2').classList.add('w3 hide'); // Show the selected form document.getElementById(formId).classList.remove('w3 hide'); } // When the page loads, no form should be displayed initially document.addEventListener('DOMContentLoaded', function () { // Both forms are hidden by default (handled via the 'w3 hide' class) }); </script> </body> </html>
