New logo

vtp6 · Nov 2, 2024 · 938dfd9 · 938dfd9
1 parent c04a2c3
commit 938dfd9
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 5 deletions.
diff --git a/logos/logo-banner-old.png b/logos/logo-banner-old.png
diff --git a/logos/logo-banner.png b/logos/logo-banner.png
diff --git a/logos/logo-square-old.png b/logos/logo-square-old.png
diff --git a/logos/logo-square.png b/logos/logo-square.png
diff --git a/new-logo/comparison.png b/new-logo/comparison.png
diff --git a/new-logo/index.html b/new-logo/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" class="notranslate" translate="no">
+    <head>
+        <link rel="stylesheet" href="../styles/fonts.css" />
+        <link rel="stylesheet" href="../styles/main.css" />
+        <link rel="stylesheet" href="../styles/credits.css" />
+        <title>New Logo | Vocabulary Testing Program 6</title>
+        <link rel="icon" type="image/png" href="../logos/logo-square.png"/>
+        <meta property="og:image" content="../logos/logo-banner.png" />
+        <meta property="og:image:width" content="1980" />
+        <meta property="og:image:height" content="1741" />
+        <meta http-equiv="content-type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta property="description" content="Provide feedback for the new logo of VTP6, a new way for Languages students to learn vocabulary for free." />
+    </head>
+    <body>
+        <div id="header"></div>
+        <div id="content">
+            <p>
+                We've created a new logo to replace the old one, which has been almost exactly the same for a year.
+                This new logo now includes a lightbulb to reflect our commitment to education, matches the font
+                on the website, and has a new blue colour to represent security. You can see the comparison of the
+                two logos below, and you can provide feedback to <b><a href="mailto:[email protected]">
+                [email protected]</a></b>.
+            </p>
+            <img src="./comparison.png" width="90%" max-width="500px" />
+            <div id="margin"></div>
+        </div>
+        <div id="footer"></div>
+        <script src="../scripts/lightdark.js"></script>
+        <script src="../scripts/header.js"></script>
+        <script src="../scripts/cookies.js"></script>
+        <script src="../scripts/footer.js"></script>
+        <script src="../scripts/misc.js"></script>
+        <script async data-id="101454906" src="//static.getclicky.com/js"></script>
+    </body>
+</html>
diff --git a/scripts/cookies.js b/scripts/cookies.js
@@ -1,3 +1,6 @@
+const MAIN_BANNER = true;
+const BANNER_COOKIE = "vtp6NewLogo1";
+
 let cookies_button = document.createElement("div");
 cookies_button.innerHTML = `
     <h1 id="cookie-title">Welcome to the new VTP6</h1>
@@ -11,6 +14,18 @@ cookies_button.innerHTML = `
 `;
 cookies_button.id = "cookie-banner";
 
+let main_banner = document.createElement("div");
+main_banner.innerHTML = `
+    <h1 id="banner-title">New Logo Feedback</h1>
+    <p id="banner-text">
+        We've changed our logo and would like some feedback. Click the button below to
+        see the changes.
+    </p>
+    <input type="button" id="logo-button" value="See changes" /> &nbsp;
+    <input type="button" id="dismiss-banner" value="Dismiss" />
+`;
+main_banner.id = "main-banner";
+
 function get_cookies() {
     let str = document.cookie.split(";");
     let d = {};
@@ -23,18 +38,31 @@ function get_cookies() {
     return d;
 }
 
-function remove_banner() {
+function remove_cookies_banner() {
     cookies_button.remove();
     document.cookie = "cookiesAllowed=1;domain=vtp6.rujulnayak.com;path=/;max-age=31536000";
 }
 
+function remove_main_banner() {
+    main_banner.remove();
+    document.cookie = BANNER_COOKIE + "=1;domain=vtp6.rujulnayak.com;path=/;max-age=31536000";
+}
+
 if (!get_cookies()["cookiesAllowed"]) {
     document.body.appendChild(cookies_button);
-    document.getElementById("cookie-button").addEventListener("click", remove_banner);
+    document.getElementById("cookie-button").addEventListener("click", remove_cookies_banner);
 } else {
     document.cookie = "cookiesAllowed=1;domain=vtp6.rujulnayak.com;path=/;max-age=31536000";
 }
 
+if (!get_cookies()[BANNER_COOKIE]) {
+    document.body.appendChild(main_banner);
+    document.getElementById("dismiss-banner").addEventListener("click", remove_main_banner);
+    document.getElementById("logo-button").addEventListener("click", () => window.open("/new-logo/"));
+} else {
+    document.cookie = BANNER_COOKIE + "=1;domain=vtp6.rujulnayak.com;path=/;max-age=31536000";
+}
+
 function delete_cookies() {
     document.cookie.split(';').forEach(cookie => {
         const eqPos = cookie.indexOf('=');

diff --git a/styles/main.css b/styles/main.css
@@ -21,8 +21,9 @@ div#header {
     }
 
     img#banner-logo {
-        height: 100px;
-        max-height: 100px;
+        height: 60px;
+        padding: 20px;
+        max-height: 60px;
     }
 
     a.banner-link {
@@ -96,9 +97,35 @@ div#cookie-banner {
     text-align: center;
     padding: 10px;
     animation: slideUp 1s ease-out;
+    z-index: 1000;
 
     input#cookie-button {
-        background-color: #00703c;
+        color: white;
+        font-size: 20px;
+        padding: 5px;
+        border: 0px;
+    }
+}
+
+div#main-banner {
+    width: calc(100% - 20px);
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    text-align: center;
+    padding: 10px;
+    animation: slideUp 1s ease-out;
+    z-index: 999;
+
+    input#logo-button {
+        color: white;
+        font-size: 20px;
+        padding: 5px;
+        border: 0px;
+    }
+
+    input#dismiss-banner {
+        background-color: #ff474C;
         color: white;
         font-size: 20px;
         padding: 5px;
@@ -136,6 +163,14 @@ body.light-theme {
         }
     }
 
+    div#main-banner {
+        background-color: lightgray;
+
+        input#logo-button {
+            background-color: #00c04b;
+        }
+    }
+
     img#dropdown-arrow {
         content: url("../images/menu-light.svg");
     }
@@ -184,6 +219,14 @@ body.dark-theme {
         }
     }
 
+    div#main-banner {
+        background-color: #2a8c8c;
+
+        input#logo-button {
+            background-color: #00ab41;
+        }
+    }
+
     img#dropdown-arrow {
         content: url("../images/menu-dark.svg");
     }