-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add HTML and CSS files for Frontend viewing
- Loading branch information
vigneshs
committed
Oct 3, 2024
1 parent
8ae8ed2
commit 8554c2f
Showing
2 changed files
with
61 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,33 @@ | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #f5f5f5; | ||
| color: #333; | ||
| text-align: center; | ||
| padding: 20px; | ||
| background-color: #f0f2f5; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| } | ||
|
|
||
| .container { | ||
| max-width: 600px; | ||
| margin: 0 auto; | ||
| background-color: white; | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); | ||
| h1 { | ||
| font-size: 2.5rem; | ||
| font-weight: bold; | ||
| color: #007bff; | ||
| } | ||
|
|
||
| h2, h3 { | ||
| color: #333; | ||
| } | ||
|
|
||
| button { | ||
| font-size: 1.2rem; | ||
| padding: 10px 20px; | ||
| font-size: 16px; | ||
| cursor: pointer; | ||
| margin: 10px; | ||
| } | ||
|
|
||
| #results { | ||
| margin-top: 30px; | ||
| } | ||
|
|
||
| .card { | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| #histogram { | ||
| max-width: 100%; | ||
| margin-top: 20px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,28 +4,54 @@ | |
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Quantum Voting System</title> | ||
|
|
||
| <!-- Bootstrap CSS for modern styling --> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
| <link rel="stylesheet" href="/static/style.css"> | ||
|
|
||
| <!-- FontAwesome for icons --> | ||
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <h1>Quantum Voting System</h1> | ||
| <button id="voteButton">Start Voting</button> | ||
|
|
||
| <div id="results" style="display:none;"> | ||
| <h2>Results:</h2> | ||
| <p><strong>Winner:</strong> <span id="winner"></span></p> | ||
| <p><strong>Total Votes:</strong> <span id="totalVotes"></span></p> | ||
| <h3>Vote Counts:</h3> | ||
| <div id="voteHistogram"> | ||
| <img id="histogram" src="" alt="Vote Histogram" /> | ||
| <div class="container mt-5"> | ||
| <div class="card shadow-sm p-4"> | ||
| <h1 class="text-center mb-4"> | ||
| <i class="fas fa-vote-yea"></i> Quantum Voting System | ||
| </h1> | ||
|
|
||
| <div class="text-center"> | ||
| <button id="voteButton" class="btn btn-primary btn-lg"> | ||
| <i class="fas fa-play-circle"></i> Start Voting | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="loading" style="display:none;"> | ||
| <p>Simulating voting, please wait...</p> | ||
| <div id="loading" class="text-center mt-4" style="display:none;"> | ||
| <div class="spinner-border text-primary" role="status"> | ||
| <span class="visually-hidden">Loading...</span> | ||
| </div> | ||
| <p>Simulating voting, please wait...</p> | ||
| </div> | ||
|
|
||
| <div id="results" class="mt-4" style="display:none;"> | ||
| <div class="card p-3"> | ||
| <h2>Results:</h2> | ||
| <p><strong>Winner:</strong> <span id="winner"></span></p> | ||
| <p><strong>Total Votes:</strong> <span id="totalVotes"></span></p> | ||
|
|
||
| <h3>Vote Counts:</h3> | ||
| <div id="voteHistogram"> | ||
| <img id="histogram" class="img-fluid" src="" alt="Vote Histogram" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Bootstrap JS & Popper.js --> | ||
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> | ||
|
|
||
| <!-- Script to handle voting functionality --> | ||
| <script> | ||
| document.getElementById("voteButton").addEventListener("click", function() { | ||
| document.getElementById("loading").style.display = "block"; | ||
|
|
||