From c4a23d37c4a83c967ba6d017a766c3f439bf8ce4 Mon Sep 17 00:00:00 2001
From: sqozz <sqozz@geekify.de>
Date: Sat, 13 Feb 2016 02:14:17 +0100
Subject: [PATCH] Filled the footer with life \o/

---
 schort.py            |  1 -
 static/css/index.css | 69 ++++++++++++++++++++++++++++++++++++++++++++
 templates/index.html | 29 +++++++++++++++++--
 3 files changed, 96 insertions(+), 3 deletions(-)

diff --git a/schort.py b/schort.py
index 75ab7ef..8b942cf 100755
--- a/schort.py
+++ b/schort.py
@@ -8,7 +8,6 @@ app = Flask(__name__)
 @app.route('/', methods=['GET', 'POST'])
 @app.route('/<shortLink>', methods=['GET', 'POST'])
 def short(shortLink=""):
-	print("resolve" in request.args)
 	if request.method == "GET":
 		if shortLink:
 			noauto = shortLink[-1] == "+"
diff --git a/static/css/index.css b/static/css/index.css
index 969b3bc..e08da4d 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -63,10 +63,13 @@ body {
 
 a {
 	color: rgb(150, 150, 150);
+	display: block;
+	text-decoration: none;
 }
 
 a:hover {
 	color: black;
+	text-decoration: underline;
 }
 
 .infoitem {
@@ -79,3 +82,69 @@ a:hover {
 .infoitem:last-child {
 	border-right: none;
 }
+
+span .description {
+	color: black;
+	display: none;
+	opacity: 0;
+	text-align: left;
+	margin-left: -100px;
+	max-width: 300px;
+	margin-top: 10px;
+	padding: 3px;
+	box-shadow: 3px 3px 10px gray;
+	max-height: 33%;
+	overflow-y: auto;
+}
+
+a:focus .description {
+	position: absolute;
+	display: inline;
+	opacity: 1;
+	background-color: white;
+	pointer-events: auto;
+}
+
+a:focus {
+	pointer-events: none;
+}
+
+ol, ul {
+	padding-left: 15px;
+	margin-top: 0px;
+	margin-bottom: 5px;
+}
+
+.description li {
+	font-weight: bold;
+}
+
+.description li + div {
+	margin-left: 3px;
+	margin-right: 5px;
+}
+
+.description {
+	background:
+		/* Shadow covers */
+		linear-gradient(white 30%, rgba(255,255,255,0)),
+		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
+	
+		/* Shadows */
+		radial-gradient(50% 0, farthest-side, rgba(0,0,0,.3), rgba(0,0,0,0)),
+		radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.3), rgba(0,0,0,0)) 0 100%;
+
+	background:
+		/* Shadow covers */
+		linear-gradient(white 30%, rgba(255,255,255,0)),
+		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
+		
+		/* Shadows */
+		radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.3), rgba(0,0,0,0)),
+		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.3), rgba(0,0,0,0)) 0 100%;
+	background-repeat: no-repeat;
+	background-color: white;
+	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+	
+	background-attachment: local, local, scroll, scroll;
+}
diff --git a/templates/index.html b/templates/index.html
index 4e5264e..34deda3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -17,8 +17,33 @@
 				<input type="submit" value="Schort!" id="short_button">
 			</form>
 			<div id="infobar">
-				<span class="infoitem"><a href="#">API</a></span>
-				<span class="infoitem"><a href="#">FAQ</a></span>
+				<span class="infoitem">
+					<a href="">
+						<div class="link">API</div>
+						<div class="description">
+							There is no dedicated API for schort. Just make a POST-request to / with the parameter "url" set to your desired destination. Schort will generate an id for your and gives back the short link in plain text.
+							<br/><br/>
+							If you wish to create a custom URL with your script, you can also set the parameter "wishId". If the requested id is free, schort will print out the short link with your requested id. If not, schort will just generate one and print that one out.
+							<br/><br/>
+							To resolve a link you just have to call the short url appendet by an plus sign ("+"). This makes schort to print out a plain text string of the original URL.
+						</div>
+					</a>
+				</span>
+				<span class="infoitem">
+					<a href="">
+						<div class="link">FAQ</div>
+						<div class="description">
+							<ul>
+								<li>Can i produce custom links?</li>
+								<div>Just open /&ltyourWishId&gt. If you get no redirect, you can enter your URL according to your custom id.</div>
+								<li>How can i inspect an shortened link?</li>
+								<div>Append a plus sign ("+") to your short URL. You'll receive a clickable link to the remote destination.</div>
+								<li>How can my script resolve a shortened link?</li>
+								<div>Take a look at the API.</div>
+							</ul>
+						</div>
+					</a>
+				</span>
 				<span class="infoitem"><a href="https://github.com/Sqozz/schort" target="_blank">github.com</a></span>
 			</div>
 		</div>