.gitlab-ci.yml

+image: python:3-buster
+
+variables:
+  SITE_NAME: prukazy.pirati.cz
+  ARTIFACTS_PATH: public
+  WEBHOOK_URL: https://ha-web.pirati.cz
+
+build:
+  stage: build
+  script:
+    - mkdir public
+    - cp -r content/* public/
+  after_script:
+    - echo "{\"name\":\"$SITE_NAME\" }" > request.json
+    - "curl -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
+  artifacts:
+    expire_in: 30 min
+    paths:
+     - $ARTIFACTS_PATH

content/index.html

@@ -7,17 +7,17 @@
 		<!-- Author: Tomáš Valenta, https://blog.imaniti.org -->
 		
 		<title>Voličské průkazy</title>
-		<meta name="description" content="Vol si jak chceš, kde chceš. My ti to zjednodušíme.">
+		<meta name="description" content="Již za dva měsíce nás čekají prezidentské volby a Piráti znovu nabízí možnost, jak si vyřídit voličský průkaz - tedy potvrzení, že můžeš volit i na jiném místě, než v trvalém bydlišti.">
 		
 		<meta property="og:type" content="website">
 		<meta property="og:title" content="Voličské průkazy">
-		<meta property="og:description" content="Vol si jak chceš, kde chceš. My ti to zjednodušíme.">
+		<meta property="og:description" content="Již za dva měsíce nás čekají prezidentské volby a Piráti znovu nabízí možnost, jak si vyřídit voličský průkaz - tedy potvrzení, že můžeš volit i na jiném místě, než v trvalém bydlišti.">
 		<meta property="og:image" content="https://prukazy.pirati.cz/static/images/banner.webp">
 		
 		<meta name="twitter:card" content="summary_large_image">
 		<meta property="twitter:domain" content="prukazy.pirati.cz">
 		<meta name="twitter:title" content="Voličské průkazy">
-		<meta name="twitter:description" content="Vol si jak chceš, kde chceš. My ti to zjednodušíme.">
+		<meta name="twitter:description" content="Již za dva měsíce nás čekají prezidentské volby a Piráti znovu nabízí možnost, jak si vyřídit voličský průkaz - tedy potvrzení, že můžeš volit i na jiném místě, než v trvalém bydlišti.">
 		<meta name="twitter:image" content="https://prukazy.pirati.cz/static/images/banner.webp">
 		
 		<link
@@ -27,9 +27,9 @@
 		>
 		
 		<link
-			rel="stylesheet"
-			href="static/fonts/open-sans/style.css"
-		>
+            rel="stylesheet"
+            href="https://gfonts.pirati.cz/css2?family=Bebas+Neue&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
+        >
 		
 		<link
 			rel="stylesheet"
@@ -43,9 +43,6 @@
 		<script
 			src="static/js/jquery.min.js"
 		></script>
-		<script
-			src="static/js/jSignature.min.js"
-		></script>
 		<script
 			src="static/js/jspdf.umd.min.js"
 		></script>
@@ -66,27 +63,75 @@
 					height="55"
 				>
 			</div>
+			
+			<div id="intro-wrapper">
+				<h1>Vyřiď si svůj voličský průkaz na prezidentské volby!</h1>
+				
+				<p id="intro-text">
+					Již za dva měsíce nás čekají prezidentské volby a Piráti
+					znovu nabízí možnost, jak si vyřídit <a
+						href="https://wiki.pirati.cz/ao/navody/prukaz"
+						target="_blank"
+					>voličský průkaz</a> - tedy potvrzení, že můžeš volit i na
+					jiném místě, než v trvalém bydlišti.<br>
+					
+					Vyplň náš jednoduchý formulář, stáhni si ho v PDF a pošli
+					ho datovkou nebo dones osobně na úřad. Neboj se - vážíme si
+					tvého soukromí, nesbíráme žádná osobní data a vše
+					zpracovává výhradně tvůj prohlížeč.<br><br>
+				</p>
+				
+				<h2 id="dates-header">Důležitá data</h2>
+				
+				<ul id="dates">
+					<li>
+						<b>29. prosince 2022</b> - Domovské úřady začínají vydávat voličské průkazy.
+					</li>
+					
+					<li>
+						<b>6. ledna 2023</b> - Poslední možnost doručit žádost o voličský průkaz na první kolo poštou.
+					</li>
+					
+					<li>
+						<b>11. ledna 2023</b> - Poslední možnost podat žádost o voličský průkaz na první kolo osobně.
+					</li>
+					
+					<li>
+						<b>13. ledna 2023 - 14. ledna 2023 - První kolo prezidentských voleb.</b>
+					</li>
+					
+					<li>
+						<b>20. ledna 2023</b> - Poslední možnost doručit žádost o voličský průkaz na druhé kolo poštou.
+					</li>
+					
+					<li>
+						<b>25. ledna 2023</b> - Poslední možnost podat žádost o voličský průkaz na druhé kolo osobně.
+					</li>
+					
+					<li>
+						<b>27. ledna 2023 - 28. ledna 2023 - Případné druhé kolo prezidentských voleb.</b>
+					</li>
+				</ul>
+			</div>
 		</header>
 
 		<main>
 			<div id="step1">
-				<h1>Vyřiďte si svůj voličský průkaz na prezidentské volby!</h1>
-				<p id="intro-text">
-					Již za dva měsíce nás čekají prezidentské volby a Piráti znovu nabízí možnost, jak si vyřídit voličský průkaz - tedy potvrzení, že můžeš volit i na jiném místě, než v trvalém bydlišti.<br>
-					Vyplň náš jednoduchý formulář, stáhni si ho v PDF a pošli ho datovkou nebo dones osobně na úřad. Neboj se - vážíme si tvého soukromí, nesbíráme žádná osobní data a vše zpracovává tvůj prohlížeč.
-				</p>
-				
-				<div id="form-wrapper">
+				<form id="form-wrapper">
+					<h2 class="info-type">Osobní informace</h2>
+					
 					<div class="input-group input-group-2">
 						<input
 							type="text"
 							id="name"
 							placeholder="Jméno *"
+							required
 						>
 						<input
 							type="text"
 							id="surname"
 							placeholder="Příjmení *"
+							required
 						>
 					</div>
 					
@@ -98,10 +143,11 @@
 							type="date"
 							id="birth-date"
 							name="birth-date"
+							required
 						>
 					</div>
 					
-					<br>
+					<h2 class="info-type">Trvalé bydliště</h2>
 					
 					<div
 						id="address-autocomplete"
@@ -111,6 +157,7 @@
 						type="text"
 						id="street"
 						placeholder="Ulice, popisné a orientační č. *"
+						required
 					>
 					
 					<div class="input-group input-group-2">
@@ -118,15 +165,26 @@
 							type="text"
 							id="city"
 							placeholder="Obec *"
+							required
 						>
 						
 						<input
 							type="text"
 							id="zip"
 							placeholder="PSČ *"
+							required
 						>
 					</div>
 					
+					<input
+						type="text"
+						id="office-address"
+						placeholder="Adresa příslušného úřadu *"
+						required
+					>
+					
+					<h2 class="info-type">Typ žádosti</h2>
+					
 					<select
 						id="receiving-type"
 					>
@@ -146,56 +204,34 @@
 					<select
 						id="card-type"
 					>
+						<option>1. a 2. kolo</option>
 						<option>1. kolo</option>
 						<option>2. kolo</option>
 					</select>
 					
-					<button id="create-filled-form">
-						Podepsat
-					</button>
-					
-					<small>
-						<i>* Povinné</i>
-					</small>
-				</div>
-			</div>
-			
-			<div id="step2">
-				<h2>Podpis</h2>
-				
-				<a
-					href="#"
-					id="show-document"
-				>
-					Zobrazit dokument
-				</a>
-				
-				<div id="signature-info-wrapper">
-					V
 					<input
-						type="text"
-						id="signature-location"
-						placeholder="Místo"
-					>
-					dne <input
-						type="text"
-						id="current-date"
-						placeholder="Datum"
+						type="submit"
+						id="finish"
+						value="Dokončit"
 					>
-				</div>
-				
-				<div id="signature-wrapper">
-					<div id="signature"></div>
-					<div id="signature-bottom">
-						<button class="button-small" id="signature-undo">Smazat</button>
-						<i>Myší nebo prstem nakresli podpis</i>
+					
+					<div>
+						<small>
+							Žádosti v tuto chvíli můžeš podat jen úřadu v obci,
+							kde bydlíš. Chystáme se předložit zákon, který by
+							to změnil.
+						</small>
+						
+						<br>
+						
+						<small>
+							<i>* Povinné</i>
+						</small>
 					</div>
-				</div>
-				
-				<button id="finish">Předat úřadu</button>
+				</form>
 			</div>
 			
-			<div id="step3">
+			<div id="step2">
 				<div id="found-office">
 					<h2>Úřad jsme našli automaticky.</h2>
 					
@@ -207,36 +243,27 @@
 						na schránku úřadu s číslem
 						<b><samp id="office-ds-id-direction"></samp></b>.
 					</p>
-					
-					<p>
-						Děkujeme, že se chystáš volit a aktivně se účastnit procesu
-						demokracie!
-					</p>
-					
-					<button id="download-pdf">Stáhnout pdf</button>
 				</div>
 				<div id="not-found-office">
 					<h2>Bohužel, úřad jsme automaticky nenašli.</h2>
 					
 					<p>
 						Ve veřejných záznamech se pod jménem zadané obce nenachází.
-						Až ho ale najdeš sám, můžeš tam žádost s úředně ověřeným
-						podpisem donést. Také ho můžeš poslat na jeho datocou schránku.
-					</p>
-					
-					<p>
-						Děkujeme, že se chystáš volit a aktivně se účastnit procesu
-						demokracie!
+						Až ho ale najdeš, můžeš tam žádost s úředně ověřeným podpisem
+						donést. Také ho můžeš poslat na jeho datovou schránku.
 					</p>
 				</div>
+				
+				<p>
+					Děkujeme, že se chystáš volit a aktivně účastnit procesu
+					demokracie!
+				</p>
+				
+				<button id="download-paper-pdf">Stáhnout PDF (osobní předání)</button>
+				<button id="download-electronic-pdf">Stáhnout PDF (datová schránka)</button>
 			</div>
-			
+
 			<div id="canvas-wrapper">
-				<a
-					href="#"
-					id="back-to-step2"
-				>Zpět</a>
-				
 				<canvas id="page-1-canvas" width="2480" height="3507"></canvas>
 				<canvas id="page-2-canvas" width="2480" height="3507"></canvas>
 			</div>
@@ -255,5 +282,9 @@
 		<script
 			src="static/js/offices.js"
 		></script>
+		
+		<!-- Matomo Image Tracker-->
+		<img referrerpolicy="no-referrer-when-downgrade" src="https://matomo.imaniti.org/matomo.php?idsite=16&amp;rec=1" style="border:0" alt="" />
+		<!-- End Matomo -->
 	</body>
 </html>

content/static/css/base.css

-html, body {
-	padding:0;
-	margin:0
-}
-
-body {
-	background:#000;
-	font-family:"Open Sans",sans-serif;
+#address-autocomplete {
+	position:relative;
+	text-align:center
 }
 
-a {
-	color:#000
+#canvas-wrapper {
+	display:none;
+	object-fit:contain
 }
 
-a:hover,a:visited {
-	color:#000
+#canvas-wrapper canvas {
+	width:100%
 }
 
-header {
-	height:70px;
-	padding:10px;
-	background:#000;
-	display:flex;
-	justify-content:center;
-	color:#fff
+#dates {
+	margin-bottom:15px
 }
 
-main {
-	border-top-left-radius:40px;
-	border-top-right-radius:40px;
-	background:#fff;
-	min-height:calc(100vh - 90px);
+#dates-header {
+	margin-top:0
 }
 
-
-input,[aria-role="textbox"],textarea,select {
-	border:0;
-	font-size:unset;
-	padding:10px;
-	font-family:"Open Sans",sans-serif;
-	background: #dddcdc;
+#finish,#download-paper-pdf,#download-electronic-pdf {
+	margin-top:20px
 }
 
-button,
-input[type="submit"],
-[aria-role="button"] {
-	background:#2f2f2f;
-	border:none;
-	color:#fff;
-	cursor:pointer;
-	display:inline-block;
-	font-size:unset;
-	padding:12px;
-	text-decoration:none;
-	transition:.15s
+#form-wrapper {
+	display:flex;
+	flex-direction:column;
+	gap:14px;
+	margin-bottom:0;
+	margin-left:auto;
+	margin-right:auto;
+	max-width:750px;
+	padding-bottom:20px
 }
 
-button[disabled],
-input[type="submit"][disabled],
-[aria-role="button"][disabled] {
-	background:#737373;
-	cursor:unset
+#found-office,#not-found-office,#step2 {
+	display:none
 }
 
-button:not([disabled]):hover,
-input[type="submit"]:not([disabled]):hover,
-[aria-role="button"]:not([disabled]):hover {
-	background:#333
+#intro-text {
+	border-bottom:1px solid #000;
+	font-size:large;
+	margin-bottom:0
 }
 
-textarea {
-	resize:none
+#intro-wrapper {
+	margin-left:auto;
+	margin-right:auto;
+	max-width:790px;
+	padding:20px
 }
 
-
 #logo {
+	align-items:center;
 	display:flex;
 	flex-direction:row;
-	gap:12px;
-	align-items:center
+	gap:12px
 }
 
-#step1,#step2,#step3,#canvas-wrapper {
-	max-width:1000px;
-	margin-left:auto;
-	margin-right:auto;
-	padding-top:40px
-}
-
-#found-office,#not-found-office {
-	display:none
+#show-document {
+	display:block;
+	margin-bottom:17.5px
 }
 
-#step2 {
-	display:none;
-	text-align:center
+#signature-bottom {
+	align-items:flex-end;
+	display:flex;
+	justify-content:space-between;
+	margin:5px
 }
 
 #signature-info-wrapper {
@@ -103,13 +78,11 @@ textarea {
 	justify-content:center
 }
 
-#signature-info-wrapper input,
-#signature-info-wrapper [aria-role="textbox"],
-#signature-info-wrapper textarea,
-#signature-info-wrapper select,
-#current-date {
+#signature-info-wrapper input,#signature-info-wrapper [aria-role="textbox"],#signature-info-wrapper textarea,#signature-info-wrapper select,#current-date {
 	background:unset;
 	border-bottom:1px dotted #000;
+	flex:1 1 0;
+	min-width:0;
 	padding:12px
 }
 
@@ -121,80 +94,135 @@ textarea {
 	max-width:600px
 }
 
-#signature-bottom {
-	align-items:flex-end;
+#step1,#step2,#canvas-wrapper {
+	margin-left:auto;
+	margin-right:auto;
+	max-width:1000px;
+	padding-top:40px
+}
+
+.button-small {
+	font-size:small;
+	padding:4px 7px
+}
+
+.input-group {
 	display:flex;
-	justify-content:space-between;
-	margin:5px
+	flex-direction:row;
+	flex-wrap:wrap;
+	gap:14px
 }
 
-#intro-text {
-	border-bottom:1px solid #000;
-	font-size:large;
-	margin-bottom:14px;
-	padding-bottom:14px
+.input-group input {
+	flex:1 1 0;
+	min-width:0
 }
 
-#form-wrapper {
+.input-group-2:nth-child(2n) {
+	flex-basis:100%
+}
+
+.input-single-with-label {
+	align-items:center;
 	display:flex;
-	flex-direction:column;
-	gap:14px;
-	max-width:750px;
-	margin-left:auto;
-	margin-right:auto;
-	padding-bottom:20px
+	gap:14px
 }
 
-#address-autocomplete {
-	position:relative;
+.input-single-with-label input {
+	flex:1 1 0
+}
+
+.info-type {
+	font-size:1.6rem;
+	margin:0;
 	text-align:center
 }
 
-#show-document {
-	display:block;
-	margin-bottom:17.5px
+a,a:hover,a:visited {
+	color:#000
 }
 
-#canvas-wrapper {
-	display:none;
-	object-fit:contain;
+body {
+	background:#000;
+	font-family:"Roboto Condensed",sans-serif
 }
 
-#canvas-wrapper canvas {
-	width:100%;
+button,input[type="submit"],[aria-role="button"] {
+	background:#f9ce05;
+	border:none;
+	color:#000;
+	cursor:pointer;
+	display:inline-block;
+	font-family:"Bebas Neue";
+	font-size:1.35rem;
+	padding:12px;
+	text-decoration:none;
+	transition:.15s
 }
 
-#finish,#download-pdf {
-	margin-top:20px
+button:not([disabled]):hover,input[type="submit"]:not([disabled]):hover,[aria-role="button"]:not([disabled]):hover {
+	background:#000;
+	color:#f9ce05
 }
 
-.input-group {
+button[disabled],input[type="submit"][disabled],[aria-role="button"][disabled] {
+	background:#f9ce0575;
+	cursor:unset
+}
+
+header {
+	align-items:center;
+	background:#000;
+	color:#fff;
 	display:flex;
-	flex-direction:row;
-	flex-wrap:wrap;
-	gap:14px
+	flex-direction:column;
+	padding:25px 0 10px 0
 }
 
-.input-group input {
-	flex:1 1 0px;
-	min-width:0
+header a,header a:visited {
+	color:#fff
 }
 
-.input-group-2:nth-child(2n) {
-	flex-basis:100%
+html,body {
+	margin:0;
+	padding:0
 }
 
-.input-single-with-label {
-	display:flex;
-	gap:14px;
-	align-items:center
+h1,h2,h3,h4,h5,h6 {
+	font-family:"Bebas Neue",sans-serif;
+	font-weight:normal;
+	text-transform:uppercase
 }
 
-.input-single-with-label input {
-	flex:1 1 0px
+h1 {
+	font-size:39px
 }
 
-.button-small {
-	font-size:small;
-	padding:4px 7px
+input,[aria-role="textbox"],textarea,select {
+	background:#dddcdc;
+	border:0;
+	font-family:"Roboto Condensed",sans-serif;
+	font-size:medium;
+	padding:10px
+}
+
+main {
+	background:#fff;
+	border-top-left-radius:40px;
+	border-top-right-radius:40px;
+	min-height:calc(100vh - 350px);
+}
+
+textarea {
+	resize:none
+}
+
+@media screen and (max-width:1200px) {
+	#step1,#step2,#canvas-wrapper {
+		padding-top:0
+	}
+	
+	main {
+		padding:20px
+	}
 }

content/static/fonts/open-sans/style.css

-/*
-* Thanks to majodev for their Google webfont helper!
-*/
-
-/* open-sans-regular - latin */
-@font-face {
-font-family: 'Open Sans';
-font-style: normal;
-font-weight: 400;
-src: local(''),
-	url('./open-sans-v29-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	url('./open-sans-v29-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-600 - latin */
-@font-face {
-font-family: 'Open Sans';
-font-style: normal;
-font-weight: 600;
-src: local(''),
-	url('./open-sans-v29-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	url('./open-sans-v29-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-italic - latin */
-@font-face {
-font-family: 'Open Sans';
-font-style: italic;
-font-weight: 400;
-src: local(''),
-	url('./open-sans-v29-latin-ext_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	url('./open-sans-v29-latin-ext_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-600italic - latin */
-@font-face {
-font-family: 'Open Sans';
-font-style: italic;
-font-weight: 600;
-src: local(''),
-	url('./open-sans-v29-latin-ext_latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	url('./open-sans-v29-latin-ext_latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}

content/static/js/main.js

@@ -84,7 +84,7 @@ const fillCanvas = async () => {
 	setHighestPossibleFontSize(
 		firstPageContext,
 		officeName,
-		"Open Sans",
+		"sans-serif",
 		firstPageCanvas.height * 0.015,
 		firstPageCanvas.width * 0.76
 	);
@@ -108,27 +108,44 @@ const fillCanvas = async () => {
 	const roundCheckSharedY = firstPageCanvas.width * 0.185;
 	let electionDate = "";
 	
+	const createCheckRound1 = () => {
+		createCheck(
+			firstPageContext,
+			firstPageCanvas,
+			roundCheckSharedY,
+			firstPageCanvas.height * 0.3853
+		);
+		
+		electionDate = "13. ledna 2023 - 14. ledna 2023";
+	}
+	
+	const createCheckRound2 = () => {
+		createCheck(
+			firstPageContext,
+			firstPageCanvas,
+			roundCheckSharedY,
+			firstPageCanvas.height * 0.404
+		);
+		
+		electionDate = "27. ledna 2023 - 28. ledna 2023";
+	}
+	
 	switch ($("#card-type").val()) {
-		case "1. kolo": 
-			createCheck(
-				firstPageContext,
-				firstPageCanvas,
-				roundCheckSharedY,
-				firstPageCanvas.height * 0.3853
-			);
+		case "1. a 2. kolo":
+			createCheckRound1();
+			createCheckRound2();
 			
-			electionDate = "13. ledna 2023 - 14. ledna 2023";
+			electionDate = (
+				"13. ledna 2023 - 14. ledna 2023 a 27. ledna 2023 - 28. ledna 2023"
+			);
+
+			break;
+		case "1. kolo": 
+			createCheckRound1();
 			
 			break;
 		case "2. kolo":
-			createCheck(
-				firstPageContext,
-				firstPageCanvas,
-				roundCheckSharedY,
-				firstPageCanvas.height * 0.404
-			);
-			
-			electionDate = "27. ledna 2023 - 28. ledna 2023";
+			createCheckRound2();
 			
 			break;
 	}
@@ -140,7 +157,7 @@ const fillCanvas = async () => {
 	setHighestPossibleFontSize(
 		firstPageContext,
 		electionDate,
-		"Open Sans",
+		"sans-serif",
 		firstPageCanvas.height * 0.013,
 		firstPageCanvas.width * 0.51
 	);
@@ -161,7 +178,7 @@ const fillCanvas = async () => {
 	setHighestPossibleFontSize(
 		firstPageContext,
 		fullName,
-		"Open Sans",
+		"sans-serif",
 		firstPageCanvas.height * 0.013,
 		firstPageCanvas.width * 0.51
 	);
@@ -177,7 +194,7 @@ const fillCanvas = async () => {
 	const formattedBirthDate = (
 		birthDate.getDate()
 		+ ". "
-		+ birthDate.getMonth()
+		+ (birthDate.getMonth() + 1)
 		+ ". "
 		+ birthDate.getFullYear()
 	);
@@ -185,7 +202,7 @@ const fillCanvas = async () => {
 	setHighestPossibleFontSize(
 		firstPageContext,
 		formattedBirthDate,
-		"Open Sans",
+		"sans-serif",
 		firstPageCanvas.height * 0.013,
 		firstPageCanvas.width * 0.51
 	);
@@ -208,7 +225,7 @@ const fillCanvas = async () => {
 	setHighestPossibleFontSize(
 		firstPageContext,
 		address,
-		"Open Sans",
+		"sans-serif",
 		firstPageCanvas.height * 0.013,
 		firstPageCanvas.width * 0.51
 	);
@@ -267,7 +284,7 @@ const fillCanvas = async () => {
 			setHighestPossibleFontSize(
 				secondPageContext,
 				deliveryAddress,
-				"Open Sans",
+				"sans-serif",
 				secondPageCanvas.height * 0.013,
 				secondPageCanvas.width * 0.51
 			);
@@ -284,12 +301,13 @@ const fillCanvas = async () => {
 $(window).ready(
 	() => {
 		const { jsPDF } = window.jspdf;
+		let foundOffice = false;
 		
 		const currentDate = new Date();
 		$("#current-date").val(
 			currentDate.getDate()
 			+ ". "
-			+ currentDate.getMonth()
+			+ currentDate.getMonth() + 1
 			+ ". "
 			+ currentDate.getFullYear()
 		);
@@ -320,7 +338,7 @@ $(window).ready(
 					properties.housenumber : ""
 				);
 				
-				document.getElementById("street").value = (
+				$("#street").val(
 					street
 					+ (
 						(street !== "") ?
@@ -329,8 +347,32 @@ $(window).ready(
 					+ houseNumber
 				);
 				
-				if (properties.city !== undefined) document.getElementById("city").value = properties.city;
-				if (properties.postcode !== undefined) document.getElementById("zip").value = properties.postcode;
+				if (properties.city !== undefined) $("#city").val(properties.city);
+				if (properties.postcode !== undefined) $("#zip").val(properties.postcode);
+				
+				const city = $("#city").val();
+				const zip = $("#zip").val().replace(" ", "");
+				
+				for (const office of OFFICES) {
+					if (
+						office["address"]["city"] == city
+						&& office["address"]["zip"] == zip
+					) {
+						$("#office-address").val(
+							office["address"]["street"]
+							+ ", "
+							+ office["address"]["zip"]
+							+ " "
+							+ office["address"]["city"]
+						);
+						
+						$("#office-ds-id-direction").html(office["ds_id"]);
+						
+						foundOffice = true;
+						
+						break;
+					}
+				}
 			}
 		);
 		
@@ -345,9 +387,23 @@ $(window).ready(
 			}
 		);
 		
-		$("#create-filled-form").on(
+		$("#office-address").on(
+			"input",
+			event => {
+				foundOffice = false;
+				$("#office-ds-id-direction").html("");
+			}
+		);
+		
+		$("#finish").on(
 			"click",
 			async (event) => {
+				if ($("#form-wrapper")[0].checkValidity()) {
+					event.preventDefault();
+				} else {
+					return;
+				}
+				
 				$("#form-wrapper input,#form-wrapper select").attr("disabled", true);
 				// We already know this, don't waste time looking it up.
 				// Repeating ourselves once is fine here.
@@ -355,173 +411,95 @@ $(window).ready(
 				
 				await fillCanvas();
 				
+				// UI
+				
+				$("#office-address-direction").html($("#office-address").val());
+				
+				if (foundOffice) {
+					$("#found-office").css("display", "block");
+				} else {
+					$("#not-found-office").css("display", "block");
+				}
+				
 				await new Promise(
-					resolve => { $("#step1").fadeOut(200, resolve); }
+					resolve => {
+						$("#intro-wrapper").slideUp(200);
+						$("#step1").fadeOut(200, resolve);
+					}
 				);
+				
+				$("header").css("padding", "17.5px");
+				$("main").css("min-height", "calc(100vh - 90px)");
 				$("#step1").css("display", "none");
 				
 				await new Promise(
 					resolve => { $("#step2").fadeIn(200, resolve); }
 				);
-				
-				$("#signature").jSignature();
 			}
 		);
 		
-		$("#signature-undo").on(
-			"click",
-			(event) => {
-				$("#signature").jSignature("reset");
-			}
-		);
-		
-		$("#show-document").on(
-			"click",
-			async (event) => {
-				await new Promise(
-					resolve => { $("#step2").fadeOut(200, resolve); }
-				);
-				$("#step2").css("display", "none");
-				
-				await new Promise(
-					resolve => { $("#canvas-wrapper").fadeIn(200, resolve); }
-				);
-			}
-		);
+		const createPdf = (page2Canvas = null) => {
+			const pdfDocument = new jsPDF({
+				orientation: "portrait",
+				unit: "pt",
+				format: "a4"
+			});
+			
+			pdfDocument.addImage(
+				document.getElementById("page-1-canvas"),
+				"JPEG",
+				0, 0,
+				595.28, 841.89
+			);
+			
+			pdfDocument.addPage();
+			
+			pdfDocument.addImage(
+				(
+					(page2Canvas === null) ?
+					document.getElementById("page-2-canvas") : page2Canvas
+				),
+				"JPEG",
+				0, 0,
+				595.28, 841.89
+			);
+			
+			pdfDocument.save("Přihláška k volebnímu průkazu.pdf");
+		}
 		
-		$("#back-to-step2").on(
+		$("#download-paper-pdf").on(
 			"click",
-			async (event) => {
-				await new Promise(
-					resolve => { $("#canvas-wrapper").fadeOut(200, resolve); }
-				);
-				$("#canvas-wrapper").css("display", "none");
-				
-				await new Promise(
-					resolve => { $("#step2").fadeIn(200, resolve); }
-				);
+			() => {
+				createPdf();
 			}
 		);
 		
-		$("#finish").on(
+		$("#download-electronic-pdf").on(
 			"click",
-			async (event) => {
-				// Canvas
-				
+			() => {
+				const tempCanvas = document.createElement("canvas");
 				const secondPageCanvas = document.getElementById("page-2-canvas");
-				const secondPageContext = secondPageCanvas.getContext("2d");
-				
-				// Date
-				
-				const desiredCurrentDate = $("#current-date").val()
-				
-				setHighestPossibleFontSize(
-					secondPageContext,
-					desiredCurrentDate,
-					"Open Sans",
-					secondPageCanvas.height * 0.013,
-					secondPageCanvas.width * 0.32
-				);
-				
-				secondPageContext.fillText(
-					desiredCurrentDate,
-					secondPageCanvas.width * 0.56, secondPageCanvas.height * 0.232
-				);
-				
-				// Location
-				
-				const location = $("#signature-location").val();
 				
-				setHighestPossibleFontSize(
-					secondPageContext,
-					location,
-					"Open Sans",
-					secondPageCanvas.height * 0.013,
-					secondPageCanvas.width * 0.31
-				);
-				
-				secondPageContext.fillText(
-					location,
-					secondPageCanvas.width * 0.155, secondPageCanvas.height * 0.232
-				);
-				
-				// Signature
-				
-				const signature = await getImage($("#signature").jSignature("getData"));
-				
-				const signatureWidth = secondPageCanvas.width * 0.315;
-				const signatureHeight = (
-					signature.height
-					* (signatureWidth / signature.width)
-				);
+				tempCanvas.width = secondPageCanvas.width;
+				tempCanvas.height = secondPageCanvas.height;
 				
-				console.log(signatureHeight, signatureWidth, signature);
+				const tempContext = tempCanvas.getContext("2d");
 				
-				secondPageContext.drawImage(
-					signature,
-					secondPageCanvas.width * 0.57, secondPageCanvas.height * 0.31 - signatureHeight,
-					signatureWidth, signatureHeight
+				tempContext.drawImage(
+					secondPageCanvas,
+					0, 0
 				);
 				
-				// UI
-				
-				await new Promise(
-					resolve => { $("#step2").fadeOut(200, resolve); }
-				);
-				$("#step2").css("display", "none");
-				
-				const city = $("#city").val();
-				
-				if (city in OFFICES) {
-					const office = OFFICES[city];
-					
-					$("#office-address-direction").html(
-						office["address"]["street"]
-						+ ", "
-						+ office["address"]["zip"]
-						+ " "
-						+ office["address"]["city"]
-					);
-					
-					$("#office-ds-id-direction").html(office["ds_id"]);
-					
-					$("#found-office").css("display", "block");
-				} else {
-					$("#found-office").css("display", "none");
-				}
-				
-				await new Promise(
-					resolve => { $("#step3").fadeIn(200, resolve); }
-				);
-			}
-		);
-		
-		$("#download-pdf").on(
-			"click",
-			() => {
-				const pdfDocument = new jsPDF({
-					orientation: "portrait",
-					unit: "pt",
-					format: "a4"
-				});
-				
-				pdfDocument.addImage(
-					document.getElementById("page-1-canvas"),
-					"JPEG",
-					0, 0,
-					595.28, 841.89
-				);
+				const rectHeight = tempCanvas.height * 0.8;
 				
-				pdfDocument.addPage();
+				tempContext.fillStyle = "#ffffff";
 				
-				pdfDocument.addImage(
-					document.getElementById("page-2-canvas"),
-					"JPEG",
-					0, 0,
-					595.28, 841.89
+				tempContext.fillRect(
+					0, tempCanvas.height - rectHeight,
+					tempCanvas.width, rectHeight
 				);
 				
-				pdfDocument.save("Přihláška k volebnímu průkazu.pdf");
+				createPdf(tempCanvas);
 			}
 		);
 	}