From 595d4e02e058a4df977ee976243398aa2da8a113 Mon Sep 17 00:00:00 2001
From: MrFry <mrfry@airmail.cc>
Date: Wed, 22 Jan 2020 17:18:07 +0100
Subject: [PATCH] added thanks page

---
 views/qmining/thanks.ejs | 130 ++++++++++++++++++++++++++++++++-------
 1 file changed, 108 insertions(+), 22 deletions(-)
diff --git a/views/qmining/thanks.ejs b/views/qmining/thanks.ejs
index d345dba..a83885f 100644
--- a/views/qmining/thanks.ejs
+++ b/views/qmining/thanks.ejs
@@ -1,28 +1,114 @@
-<html>
-<body bgcolor="#212127">
-	<head>
-		<title>Question mining</title>
-		<meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=0.8" />
-		<style>
-			body {
-				font: normal 14px Verdana;
-				color: #999999;
-			}
-
-			a {
-				color: #9999ff;
-			}
-		</style>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
+    <title>Thank you!</title>
+    <style>
+        :root{
+    --size: 100px;
+    --bgcolor: #212127;
+    --color: #fcff4f;
+    --shadow: rgba(30,2,5,.2);
+    }
+    .surface {
+        position:absolute;
+        top: 50%;
+        left: 50%;
+        transform-style: preserve-3d;
+        transform: translate(-50%,-50%) rotateX(70deg) rotateZ(300deg);
+        width: 300px;
+        height: 300px;
+        animation: rotatingCoin 1s linear infinite;
+    }
+    .coin,
+    .shadow {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%) rotateX(30deg);
+        width: 100px;
+        height: 100px;
+        background-image: url('https://i.ya-webdesign.com/images/mario-coin-png-19.png');
+        background-position: center;
+        background-size: cover;
+        background-color: var(--color);
+        border-radius: 50%;
+    }
+    .shadow {
+        width: 90px;
+        height: 90px;
+        transform: translate(-50%,-50%) translateZ(-25px);
+        background: linear-gradient(to bottom, rgba(255,255,255,.2) 0%,var(--bgcolor) 35%);
+    }
 
 
-	</head>
+    @keyframes rotatingCoin {
+        from {transform: translate(-50%,-50%) rotateX(70deg) rotateZ(0);}
+        to   {transform: translate(-50%,-50%)  rotateX(70deg) rotateZ(360deg);}
+    }
+
+
+    html,body{
+        height:100vh;
+        overflow: hidden;
+    }
+    body {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--bgcolor);
+    }
+    #text{
+        font-family: 'Quicksand', sans-serif;
+        color: white;
+        font-size: 24px;
+        text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding-top: 30px;
+    }
+    #backbutton{
+        text-decoration: none;
+        color: white;
+        cursor: pointer;
+        margin: 10px;
+        background-color: #4bb9bd;
+        box-shadow: 0px 1px 3px rgba(0,0,0,0.6);
+        border-radius: 3px;
+        padding: 3px 10px;
+    }
+    #backbutton:hover{
+        box-shadow: 0px 1px 2px rgba(0,0,0,0.6);
+    }
+    .coincontainer {
+        position: relative;
+        width: 200px;
+        height: 200px;
+    }
+    @media only screen and (max-width: 600px) {
+        body {
+            flex-direction: column;
+        }
+    }
+    </style>
+</head>
+<body>
+    <div class="coincontainer"><div class="surface">
+        <div class="coin"></div>
+        <div class="shadow"></div>
+    </div></div>
     <center>
-      <h1>
-        Thanks for the gold kind question miner! =^.^=
-        </br>
-		<a href="<%= siteurl %>">Vissza a főoldalra</a>
-      </h1>
+    <div id="text"><span>Thanks for the gold, kind question miner!</span><a id="backbutton" href="<%= siteurl %>">Return</a></div>
     </center>
+    <div class="coincontainer"><div class="surface">
+        <div class="coin"></div>
+        <div class="shadow"></div>
+    </div></div>
+
 </body>
 </html>
