Add thank-you page

author: Teddy Wing 2018-11-14 01:30:35 +0100
committer: Teddy Wing 2018-11-14 01:30:35 +0100
commit: d41bfce40cedd84445908975a4a090f3fda2e9c6 (patch)
tree: 7fc69572430b5192e8eae60c1c921a8d6ee93826
parent: 03dae84c7aa569e84513a8c9bd167a00e11debaa (diff)
download: dome-key-web-d41bfce40cedd84445908975a4a090f3fda2e9c6.tar.bz2
5 files changed, 109 insertions, 4 deletions
diff --git a/assets/styles.css b/assets/styles.css
index 4ef6310..8365929 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -23,6 +23,10 @@ h2 {
 .font-size-1\.52 {
 	font-size: 1.52em;
 }
+.font-size-2\.5 {
+	font-size: 2.5em;
+	line-height: 1.25em;
+}
 .font-size-15 {
 	font-size: 15em;
 }
@@ -33,13 +37,15 @@ a:link { color: #b71863; }
 a:hover { color: #880442; }
 .button {
 	padding: 13px 15px;
-}
-a.button {
 	border: 1px solid;
 	border-radius: 10px;
 	font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif;
+	font-size: inherit;
+}
+a.button {
 	text-decoration: none;
 }
+.button-magenta,
 a.button-magenta {
 	border-color: #790d52;
 	box-shadow: 0 3px 13px -3px #2b041c;
@@ -52,6 +58,7 @@ a.button-magenta {
 	color: #ffd7d7;
 	text-shadow: 0px -1px 1px #161c1f;
 }
+.button-magenta:hover,
 a.button-magenta:hover {
 	border-color: #9e0e6a;
 	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff1ea5+0,dd1c83+100 */
@@ -62,6 +69,7 @@ a.button-magenta:hover {
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1ea5', endColorstr='#dd1c83',GradientType=0 ); /* IE6-9 */
 	color: #ffe1e1;
 }
+.button-magenta:active,
 a.button-magenta:active {
 	border-color: #4c0833;
 	box-shadow: 0 3px 13px -2px #2b041c;
@@ -92,6 +100,9 @@ p {
 ul {
 	list-style: disc;
 }
+.display-block {
+	display: block;
+}
 .display-inline-block {
 	display: inline-block;
 }
@@ -110,6 +121,12 @@ ul {
 .margin-top-0\.5 {
 	margin-top: 0.5em;
 }
+.margin-top-2 {
+	margin-top: 2em;
+}
+.margin-right-auto {
+	margin-right: auto;
+}
 .margin-bottom-0\.5 {
 	margin-bottom: 0.5em;
 }
@@ -119,6 +136,12 @@ ul {
 .margin-bottom-1\.8 {
 	margin-bottom: 1.8em;
 }
+.margin-bottom-2 {
+	margin-bottom: 2em;
+}
+.margin-left-auto {
+	margin-left: auto;
+}
 .padding-top-9 {
 	padding-top: 9px;
 }
diff --git a/assets/stylesheets/buttons.hcss b/assets/stylesheets/buttons.hcss
index cc18441..8e1b345 100644
--- a/assets/stylesheets/buttons.hcss
+++ b/assets/stylesheets/buttons.hcss
@@ -1,15 +1,18 @@
 .button {
 	padding: 13px 15px;
-}
 
-a.button {
 	border: 1px solid;
 	border-radius: 10px;
 
 	font-family: LUCIDA_GRANDE;
+	font-size: inherit;
+}
+
+a.button {
 	text-decoration: none;
 }
 
+.button-magenta,
 a.button-magenta {
 	border-color: #790d52;
 
@@ -26,6 +29,7 @@ a.button-magenta {
 	text-shadow: 0px -1px 1px #161c1f;
 }
 
+.button-magenta:hover,
 a.button-magenta:hover {
 	border-color: #9e0e6a;
 
@@ -39,6 +43,7 @@ a.button-magenta:hover {
 	color: #ffe1e1;
 }
 
+.button-magenta:active,
 a.button-magenta:active {
 	border-color: #4c0833;
 	box-shadow: 0 3px 13px -2px #2b041c;
diff --git a/assets/stylesheets/layout.hcss b/assets/stylesheets/layout.hcss
index 755d4fa..28c1d40 100644
--- a/assets/stylesheets/layout.hcss
+++ b/assets/stylesheets/layout.hcss
@@ -24,6 +24,10 @@ ul {
 	list-style: disc;
 }
 
+.display-block {
+	display: block;
+}
+
 .display-inline-block {
 	display: inline-block;
 }
@@ -48,6 +52,14 @@ ul {
 	margin-top: 0.5em;
 }
 
+.margin-top-2 {
+	margin-top: 2em;
+}
+
+.margin-right-auto {
+	margin-right: auto;
+}
+
 .margin-bottom-0\.5 {
 	margin-bottom: 0.5em;
 }
@@ -60,6 +72,14 @@ ul {
 	margin-bottom: 1.8em;
 }
 
+.margin-bottom-2 {
+	margin-bottom: 2em;
+}
+
+.margin-left-auto {
+	margin-left: auto;
+}
+
 .padding-top-9 {
 	padding-top: 9px;
 }
diff --git a/assets/stylesheets/typography.css b/assets/stylesheets/typography.css
index cbefe8b..a43d8e8 100644
--- a/assets/stylesheets/typography.css
+++ b/assets/stylesheets/typography.css
@@ -24,6 +24,11 @@ h2 {
 	font-size: 1.52em;
 }
 
+.font-size-2\.5 {
+	font-size: 2.5em;
+	line-height: 1.25em;
+}
+
 .font-size-15 {
 	font-size: 15em;
 }
diff --git a/thank-you.html b/thank-you.html
new file mode 100644
index 0000000..e48224a
--- /dev/null
+++ b/thank-you.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Thank you! – DomeKey</title>
+	<meta name="description" content="DomeKey gives you the power to remap your headphone buttons to any action you can think of. Define mappings in text using a Vim-like configuration language." />
+
+	<meta name="viewport" content="width=device-width">
+
+	<link rel="stylesheet" href="assets/styles.css" />
+</head>
+<body>
+	<div class="content">
+		<header>
+			<h1>DomeKey</h1>
+			<img src="assets/logo.svg" alt="DomeKey logo" />
+		</header>
+
+		<p class="font-size-1.52 color-maroon">
+			Control your computer with a pair of headphones
+		</p>
+
+		<p class="text-center font-size-2.5">
+			Thanks so much for buying DomeKey!
+		</p>
+
+		<form method="post" action="/license/download">
+			<input type="hidden" name="name" value="{name}" />
+			<input type="hidden" name="email" value="{email}" />
+			<input type="hidden" name="secret" value="{secret}" />
+
+			<button
+				type="submit"
+				class="button button-magenta
+					display-block margin-left-auto margin-right-auto
+					margin-top-2 margin-bottom-2">
+				Download your license
+			</button>
+		</form>
+
+		<p>
+			If you need any help, <a href="">let me know</a>.
+		</p>
+
+		<p>
+			Also, check out the
+			<a href="https://github.com/teddywing/DomeKey">source code</a>
+			if you're interested.
+		</p>
+	</div>
+</body>
+</html>
author	Teddy Wing	2018-11-14 01:30:35 +0100
committer	Teddy Wing	2018-11-14 01:30:35 +0100
commit	d41bfce40cedd84445908975a4a090f3fda2e9c6 (patch)
tree	7fc69572430b5192e8eae60c1c921a8d6ee93826
parent	03dae84c7aa569e84513a8c9bd167a00e11debaa (diff)
download	dome-key-web-d41bfce40cedd84445908975a4a090f3fda2e9c6.tar.bz2