improve templating and success page

Veiled-Haven · Jun 16, 2023 · 74879a0 · 74879a0
1 parent 602b4ad
commit 74879a0
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 61 deletions.
diff --git a/static/css/default.css b/static/css/default.css
@@ -4646,7 +4646,7 @@ button.bg-light:focus {
   background-image: url("../img/screenshot-2.jpg") !important;
 }
 .bg-image-3{
-  background-image: url("../img/screenshot-1.jpg") !important;
+  background-image: url("../img/screenshot-townsquare.jpg") !important;
 }
 
 a.bg-dark:hover, a.bg-dark:focus,

diff --git a/static/img/vh_logo_small.png b/static/img/vh_logo_small.png
diff --git a/templates/index.html b/templates/index.html
@@ -1,30 +1,11 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Veiled Haven - Vanilla Survival Minecraft</title>
-    <meta name="description" content=""/>
-
-    <!--Inter UI font-->
-
-    <!--vendors styles-->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"> -->
-
-    <!-- Bootstrap CSS / Color Scheme -->
-    <link rel="stylesheet" href="css/default.css" id="theme-color">
-</head>
-<body>
+{% include 'parts/head.html' %}
 
 <!--navigation-->
 <section class="smart-scroll">
     <div class="container-fluid">
         <nav class="navbar navbar-expand-md navbar-dark">
             <a class="navbar-brand heading-black" href="#">
-                Veiled Haven
+                <img src="img/vh_logo_small.png">
             </a>
             <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
                     data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
@@ -59,7 +40,7 @@
     <div class="container">
         <div class="row vh-md-100">
             <div class="col-md-8 col-sm-10 col-12 mx-auto my-auto text-center">
-                <h1 class="heading-black text-capitalize">Veiled haven</h1>
+                <h1 class="heading-black text-capitalize"><img src="img/vh_logo_small.png"></h1>
                 <p class="lead py-3">Welcome to Veiled Haven, a Minecraft Server Project with a focus on keeping a vanilla gameplay experience and maintaining a mature community!</p>
             </div>
         </div>
@@ -246,12 +227,4 @@ <h5>Links</h5>
     <i class="fa fa-angle-up" aria-hidden="true"></i>
 </div>
 
-<!-- jQuery first, then Popper.js, then Bootstrap JS -->
-<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.7.3/feather.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
-<script src="js/scripts.js"></script>
-</body>
-</html>
+{% include 'parts/tail.html' %}
diff --git a/templates/parts/head.html b/templates/parts/head.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Veiled Haven - Vanilla Survival Minecraft</title>
+    <meta name="description" content=""/>
+
+    <!--Inter UI font-->
+
+    <!--vendors styles-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"> -->
+
+    <!-- Bootstrap CSS / Color Scheme -->
+    <link rel="stylesheet" href="css/default.css" id="theme-color">
+</head>
+<body>
diff --git a/templates/parts/tail.html b/templates/parts/tail.html
@@ -0,0 +1,10 @@
+
+<!-- jQuery first, then Popper.js, then Bootstrap JS -->
+<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.7.3/feather.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
+<script src="js/scripts.js"></script>
+</body>
+</html>
diff --git a/templates/success.html b/templates/success.html
@@ -1,30 +1,15 @@
-<!DOCTYPE html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Form</title>
-  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-</head>
+{% include 'parts/head.html' %}
+<!--hero header-->
+<section class="bg-image bg-image-3 py-7 py-md-0 bg-hero" id="home">
+    <div class="container">
+        <div class="row vh-md-100">
+            <div class="col-md-8 col-sm-10 col-12 mx-auto my-auto text-center">
+                <h1 class="heading-black text-capitalize">Success!</h1>
+                <p class="lead py-3">We'll contact you via Discord! Make sure that you are able to receive Friend Requests!</p>
+                <p class="lead py-3">You can now close this tab, or go <a href="/">back to the Homepage</p>
+            </div>
+        </div>
+    </div>
+</section>
+{% include 'parts/tail.html' %}
 
-<body><center>
-  <h1>Success, we'll contact you via Discord! Make sure that you are able to recieve Friend Requests!</h1>
-  <p>You can now close this tab, or go <a href="/">back to the Homepage</a></p>
-</center></body>
-
-<style>
-  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
-  head, body {
-    margin: 0;
-    padding: 0;
-    color: white;
-    background-color: #111622;
-    font-family: 'Roboto', sans-serif;
-  }
-  center {
-    top: 40%;
-    position: absolute;
-    height: 50%;
-    width: 100%;
-  }
-</style>