From d0ff20c04bf6c75a9a7f947ec52df242cf17781c Mon Sep 17 00:00:00 2001
From: Shreyas Satish <shreyassatish@Shreyass-MacBook-Pro.local>
Date: Thu, 07 Dec 2023 20:32:29 +0530
Subject: [PATCH] changes
---
index.html | 415 +++++++++++++++++++++++++++++++++++++++++---------------------------------------
_layouts/default.html | 177 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 302 insertions(+), 290 deletions(-)
diff --git a/index.html b/index.html
index 0068c64..4ad7a5d 100644
--- a/index.html
+++ a/index.html
@@ -1,307 +1,140 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>BLR Vote</title>
- <link rel="stylesheet" href="https://unpkg.com/papercss/dist/paper.min.css">
- <style type="text/css">
- .container {
- max-width: 400px; /* Width of the mobile-like layout */
- margin: 0 auto; /* Center the container */
- background-color: #fff; /* Background color for the container */
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: adds a shadow for better focus */
- }
- .section {
- display: none;
- }
-
- .section.active {
- display: block;
- }
-
- .margin-top-bottom {
- margin-top: 1rem;
- margin-bottom: 1rem;
- }
-
- .margin-top-2 {
- margin-top: 2rem;
- }
- /* Branding CSS for blr.vote */
-
- /* Color Palette */
- :root {
- --democracy-blue: #1947D1;
- --voter-white: #FFFFFF;
- --indian-saffron: #FF9933;
- --regal-purple: #512DA8;
- --slate-gray: #607D8B;
- }
-
- /* Typography */
- @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
- @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
-
- /* Branding CSS for blr.vote */
-
- /* Color Palette */
- :root {
- --ashoka-blue: #1947D1; /* Blue of the Ashoka Chakra */
- --voter-white: #FFFFFF;
- --neutral-gray: #607D8B;
- }
-
- body, button, input, select, textarea {
- font-family: 'Lato', sans-serif;
- }
-
- h1, h2, h3, h4, h5, h6 {
- font-family: 'Roboto', sans-serif;
- }
-
- /* Navbar Styles */
- .navbar {
- background-color: var(--ashoka-blue);
- color: var(--voter-white);
- }
-
- .navbar button {
- background-color: var(--voter-white);
- color: var(--ashoka-blue);
- }
-
- button, .prev-button {
- background-color: var(--neutral-gray);
- }
-
- .navbar button:hover {
- background-color: var(--neutral-gray);
- color: var(--voter-white);
- }
-
- /* Button Styles */
- button, .btn, .btn-primary {
- background-color: var(--ashoka-blue);
- color: var(--voter-white);
- }
-
- .card-margin {
- margin: 1rem;
- }
-
- button:hover, .btn:hover, .btn-primary:hover {
- background-color: var(--neutral-gray);
- color: var(--voter-white);
- }
-
- /* Footer Styles */
- footer {
- text-align: center;
- padding: 20px;
- background-color: #f2f2f2;
- color: #000;
- font-size: 16px;
- }
-
- /* Custom Styles */
- .heart {
- color: red;
- }
-
- .flag {
- font-size: 20px;
- }
-
- .card {
- width: 90%;
- margin: 1rem;
- }
-
-
-
- </style>
- <style type="text/css">
- #map {
- height: 400px;
- width: 100%;
- }
-
- #addressInput {
- width: 100%;
- margin-bottom: 10px;
- }
-
- .custom-control {
- background: #fff;
- border: 1px solid #ccc;
- padding: 8px;
- cursor: pointer;
- }
-
- .custom-control img {
- width: 20px;
- height: 20px;
- }</style>
- <script defer data-domain="blr.vote" src="https://plausible.io/js/script.js"></script>
-</head>
-<body>
-
-
-<div class="container">
-
- <header>
- <div class="navbar-container">
- <nav class="border split-nav">
- <div class="nav-brand">
- <h3><a href="#">🇮🇳 BLR Vote</a></h3>
- </div>
- </nav>
- </div>
- </header>
-
- <div id="section1" class="section active margin-top-bottom">
- <div class="card">
- <div class="card-body">
- <h4 class="card-title">Welcome!</h4>
- <p class="card-text">
- <p>
- This is a simple guide to help you update your address for your voter id.
- </p>
- <p>
- If you live in Bangalore but your voter id address is still set to your hometown or to an older address, this guide is for you!
- </p>
- <p>
- This whole process should take 10 minutes, but don't worry!
- </p>
- <p>
- This guide will make it nice and easy for you. Oh and we also have a <a href="https://t.me/+gkKLJTPgIlM1Nzhl" target="_blank">Telegram group</a>, in case you get stuck!
- </p>
+---
+layout: default
+title: Home
+---
+
+<div id="section1" class="section active margin-top-bottom">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">Welcome!</h4>
+ <p class="card-text">
+ <p>
+ This is a simple guide to help you update your address for your voter id.
+ </p>
+ <p>
+ If you live in Bangalore but your voter id address is still set to your hometown or to an older address, this guide is for you!
+ </p>
+ <p>
+ This whole process should take 10 minutes, but don't worry!
</p>
- <button onclick="navigate('next', 1)">Let's do this!</button>
- </div>
- </div>
+ <p>
+ This guide will make it nice and easy for you. Oh and we also have a <a href="https://t.me/+gkKLJTPgIlM1Nzhl" target="_blank">Telegram group</a>, in case you get stuck!
+ </p>
+ </p>
+ <button onclick="navigate('next', 1)">Let's do this!</button>
+ </div>
</div>
+</div>
- <div id="section2" class="section margin-top-bottom">
- <div class="card">
- <div class="card-body">
- <h4 class="card-title">1. EPIC</h4>
- <p class="card-text">
- <p>
- EPIC is your voter ID number. Click Next if you already have yours.
- </p>
- <p>
- If you don't, open <a href="https://electoralsearch.eci.gov.in/" target="_blank">this site.</a>
- </p>
- <p>
- Enter the following info on that site:
- <ul>
- <li>State you were registered</li>
- <li>First name</li>
- <li>Relative's first name (Mostly your father)</li>
- <li>Date of birth</li>
- <li>Gender</li>
- <li>Captcha</li>
- </ul>
-
- <p>
- And hit Search.
- </p>
+<div id="section2" class="section margin-top-bottom">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">1. EPIC</h4>
+ <p class="card-text">
<p>
- Found your EPIC number? Awesome, copy it somewhere.
+ EPIC is your voter ID number. Click Next if you already have yours.
</p>
-
+ <p>
+ If you don't, open <a href="https://electoralsearch.eci.gov.in/" target="_blank">this site.</a>
</p>
+ <p>
+ Enter the following info on that site:
+ <ul>
+ <li>State you were registered</li>
+ <li>First name</li>
+ <li>Relative's first name (Mostly your father)</li>
+ <li>Date of birth</li>
+ <li>Gender</li>
+ <li>Captcha</li>
+ </ul>
+
+ <p>
+ And hit Search.
+ </p>
+ <p>
+ Found your EPIC number? Awesome, copy it somewhere.
+ </p>
+
</p>
- <button class="prev-button" onclick="navigate('prev', 2)">Previous</button>
- <button onclick="navigate('next', 2)">Next</button>
- </div>
- </div>
+ </p>
+ <button class="prev-button" onclick="navigate('prev', 2)">Previous</button>
+ <button onclick="navigate('next', 2)">Next</button>
+ </div>
</div>
-
- <div id="section3" class="section margin-top-bottom">
- <div class="card">
- <div class="card-body">
- <h4 class="card-title">2. Location</h4>
- <p class="card-text">
- Let's find your district, post office, assembly constituency.
- Type your address, or click the crosshair button
- if you're on your phone - it might take a few seconds.
- </p>
+</div>
- <input id="addressInput" type="text" placeholder="Enter address" value="">
+<div id="section3" class="section margin-top-bottom">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">2. Location</h4>
+ <p class="card-text">
+ Let's find your district, post office, assembly constituency.
+ Type your address, or click the crosshair button
+ if you're on your phone - it might take a few seconds.
+ </p>
- <div id="map"></div>
+ <input id="addressInput" type="text" placeholder="Enter address" value="">
- <button class="prev-button margin-top-2" onclick="navigate('prev', 3)">Previous</button>
- <button onclick="navigate('next', 3)">Next</button>
- </div>
- </div>
+ <div id="map"></div>
+ <button class="prev-button margin-top-2" onclick="navigate('prev', 3)">Previous</button>
+ <button onclick="navigate('next', 3)">Next</button>
+ </div>
</div>
- <div id="section4" class="section margin-top-bottom">
- <div class="card">
- <div class="card-body">
- <h4 class="card-title">3. File</h4>
- <p class="card-text">
- <p>
- 1. Sign up for an account at <a href="https://voters.eci.gov.in/signup" target="_blank">voters.eci.gov.in</a>. If you had an account at
- nvsp.in earlier, the same one is valid here.
- </p>
- <p>2. Go <a href="https://voters.eci.gov.in/login" target="_blank">here</a>, and file your application using the credentials you signed up with.</p>
- <p>
- For address proof, you can use any of:
- </p>
- <ul>
- <li>Rental Agreement</li>
- <li>Driver's License</li>
- <li>Passport</li>
- <li>Post received from Post Office</li>
- </ul>
- <p>
-
- Note that your address proof must be compressed to less than 2MB.
- </p>
-
- <p>
- 3. Join this <a href="https://t.me/+gkKLJTPgIlM1Nzhl" target="_blank">Telegram group</a> if you're stuck somewhere and we are happy to help!
- </p>
- </p>
- <button class="prev-button" onclick="navigate('prev', 4)">Previous</button>
- <button onclick="navigate('next', 4)">Next</button>
- </div>
- </div>
- </div>
+</div>
- <div id="section5" class="section margin-top-bottom">
- <div class="card">
- <div class="card-body">
- <h4 class="card-title">Share</h4>
- <p class="card-text">
- All set? Well, let's hope your application gets approved and you get to vote in Bangalore in 2024!
- </p>
+<div id="section4" class="section margin-top-bottom">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">3. File</h4>
+ <p class="card-text">
<p>
- Meanwhile, do share it with your friends and family! Here's a template for you to use.
+ 1. Sign up for an account at <a href="https://voters.eci.gov.in/signup" target="_blank">voters.eci.gov.in</a>. If you had an account at
+ nvsp.in earlier, the same one is valid here.
</p>
+ <p>2. Go <a href="https://voters.eci.gov.in/login" target="_blank">here</a>, and file your application using the credentials you signed up with.</p>
<p>
- Hey! Check out this neat guide that helps you change your address for the voter id so you can vote from Bangalore! https://blr.vote
+ For address proof, you can use any of:
</p>
- <button class="prev-button margin-top-2" onclick="navigate('prev', 5)">Previous</button>
- </div>
- </div>
+ <ul>
+ <li>Rental Agreement</li>
+ <li>Driver's License</li>
+ <li>Passport</li>
+ <li>Post received from Post Office</li>
+ </ul>
+ <p>
+ Note that your address proof must be compressed to less than 2MB.
+ </p>
+
+ <p>
+ 3. Join this <a href="https://t.me/+gkKLJTPgIlM1Nzhl" target="_blank">Telegram group</a> if you're stuck somewhere and we are happy to help!
+ </p>
+ </p>
+ <button class="prev-button" onclick="navigate('prev', 4)">Previous</button>
+ <button onclick="navigate('next', 4)">Next</button>
+ </div>
</div>
-
-
- <footer class='margin-top-2'>
- <p>Made with <span class="heart">â¤ï¸</span> for <span class="flag">🇮🇳</span> by <a href="https://tatooine.club/@nemo" target="_blank">Nemo</a> and <a href="https://twitter.com/shreyas_satish">Shreyas</a></p>
- </footer>
-
</div>
+<div id="section5" class="section margin-top-bottom">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">Share</h4>
+ <p class="card-text">
+ All set? Well, let's hope your application gets approved and you get to vote in Bangalore in 2024!
+ </p>
+ <p>
+ Meanwhile, do share it with your friends and family! Here's a template for you to use.
+ </p>
+ <p>Hey! Check out this neat guide that helps you change your address for the voter id so you can vote from Bangalore! https://blr.vote</p>
+ <button class="prev-button margin-top-2" onclick="navigate('prev', 5)">Previous</button>
+ <button id="copyButton">Copy</button>
+ </div>
+ </div>
+</div>
<script>
function navigate(direction, currentStep) {
@@ -326,16 +159,18 @@
// Show the new section
document.getElementById('section' + newStep).classList.add('active');
- }
-
- function finishWizard() {
- // Logic to finalize the wizard or navigate away
- // alert("Wizard completed!");
}
-</script>
-<script src="https://unpkg.com/@turf/turf@latest"></script>
-<script src="script.js"></script>
+ document.getElementById('copyButton').addEventListener('click', function() {
+ const textToCopy = "Hey! Check out this neat guide that helps you change your address for the voter id so you can vote from Bangalore! https://blr.vote";
+ navigator.clipboard.writeText(textToCopy)
+ .then(() => {
+ // Success message or action
+ })
+ .catch(err => {
+ // Error handling
+ console.error('Error in copying text: ', err);
+ });
+ });
-</body>
-</html>
+</script>
diff --git a/_layouts/default.html b/_layouts/default.html
new file mode 100644
index 0000000..21e71bb 100644
--- /dev/null
+++ a/_layouts/default.html
@@ -1,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>BLR Vote</title>
+ <link rel="stylesheet" href="https://unpkg.com/papercss/dist/paper.min.css">
+ <style type="text/css">
+ .container {
+ max-width: 400px; /* Width of the mobile-like layout */
+ margin: 0 auto; /* Center the container */
+ background-color: #fff; /* Background color for the container */
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: adds a shadow for better focus */
+ }
+ .section {
+ display: none;
+ }
+
+ .section.active {
+ display: block;
+ }
+
+ .margin-top-bottom {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .margin-top-2 {
+ margin-top: 2rem;
+ }
+ /* Branding CSS for blr.vote */
+
+ /* Color Palette */
+ :root {
+ --democracy-blue: #1947D1;
+ --voter-white: #FFFFFF;
+ --indian-saffron: #FF9933;
+ --regal-purple: #512DA8;
+ --slate-gray: #607D8B;
+ }
+
+ /* Typography */
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
+
+ /* Branding CSS for blr.vote */
+
+ /* Color Palette */
+ :root {
+ --ashoka-blue: #1947D1; /* Blue of the Ashoka Chakra */
+ --voter-white: #FFFFFF;
+ --neutral-gray: #607D8B;
+ }
+
+ body, button, input, select, textarea {
+ font-family: 'Lato', sans-serif;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ font-family: 'Roboto', sans-serif;
+ }
+
+ /* Navbar Styles */
+ .navbar {
+ background-color: var(--ashoka-blue);
+ color: var(--voter-white);
+ }
+
+ .navbar button {
+ background-color: var(--voter-white);
+ color: var(--ashoka-blue);
+ }
+
+ button, .prev-button {
+ background-color: var(--neutral-gray);
+ }
+
+ .navbar button:hover {
+ background-color: var(--neutral-gray);
+ color: var(--voter-white);
+ }
+
+ /* Button Styles */
+ button, .btn, .btn-primary {
+ background-color: var(--ashoka-blue);
+ color: var(--voter-white);
+ }
+
+ .card-margin {
+ margin: 1rem;
+ }
+
+ button:hover, .btn:hover, .btn-primary:hover {
+ background-color: var(--neutral-gray);
+ color: var(--voter-white);
+ }
+
+ /* Footer Styles */
+ footer {
+ text-align: center;
+ padding: 20px;
+ background-color: #f2f2f2;
+ color: #000;
+ font-size: 16px;
+ }
+
+ /* Custom Styles */
+ .heart {
+ color: red;
+ }
+
+ .flag {
+ font-size: 20px;
+ }
+
+ .card {
+ width: 90%;
+ margin: 1rem;
+ }
+
+
+
+ </style>
+ <style type="text/css">
+ #map {
+ height: 400px;
+ width: 100%;
+ }
+
+ #addressInput {
+ width: 100%;
+ margin-bottom: 10px;
+ }
+
+ .custom-control {
+ background: #fff;
+ border: 1px solid #ccc;
+ padding: 8px;
+ cursor: pointer;
+ }
+
+ .custom-control img {
+ width: 20px;
+ height: 20px;
+ }</style>
+ <script defer data-domain="blr.vote" src="https://plausible.io/js/script.js"></script>
+</head>
+<body>
+
+
+<div class="container">
+
+ <header>
+ <div class="navbar-container">
+ <nav class="border split-nav">
+ <div class="nav-brand">
+ <h3><a href="#">🇮🇳 BLR Vote</a></h3>
+ </div>
+ </nav>
+ </div>
+ </header>
+
+ {{content}}
+
+
+ <footer class='margin-top-2'>
+ <p>Made with <span class="heart">â¤ï¸</span> for <span class="flag">🇮🇳</span> by <a href="https://tatooine.club/@nemo" target="_blank">Nemo</a> and <a href="https://twitter.com/shreyas_satish">Shreyas</a></p>
+ </footer>
+
+</div>
+
+
+<script src="https://unpkg.com/@turf/turf@latest"></script>
+<script src="script.js"></script>
+
+</body>
+</html>
--
rgit 0.1.5