Filled the footer with life \o/

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] == "+"

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;
+}

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">
-				<span class="infoitem"><a href="#">FAQ</a></span>
+					<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>