diff --git a/logos/logo-banner-old.png b/logos/logo-banner-old.png new file mode 100644 index 0000000..7553b03 Binary files /dev/null and b/logos/logo-banner-old.png differ diff --git a/logos/logo-banner.png b/logos/logo-banner.png index 7553b03..5ab33de 100644 Binary files a/logos/logo-banner.png and b/logos/logo-banner.png differ diff --git a/logos/logo-square-old.png b/logos/logo-square-old.png new file mode 100644 index 0000000..507d0f7 Binary files /dev/null and b/logos/logo-square-old.png differ diff --git a/logos/logo-square.png b/logos/logo-square.png index 507d0f7..b0bd90e 100644 Binary files a/logos/logo-square.png and b/logos/logo-square.png differ diff --git a/new-logo/comparison.png b/new-logo/comparison.png new file mode 100644 index 0000000..442e4fc Binary files /dev/null and b/new-logo/comparison.png differ diff --git a/new-logo/index.html b/new-logo/index.html new file mode 100644 index 0000000..4951d86 --- /dev/null +++ b/new-logo/index.html @@ -0,0 +1,37 @@ + + + + + + + New Logo | Vocabulary Testing Program 6 + + + + + + + + + + +
+

+ 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 + vtp6_feedback@outlook.com. +

+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/scripts/cookies.js b/scripts/cookies.js index d4e78eb..a66749d 100644 --- 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 = `

Welcome to the new VTP6

@@ -11,6 +14,18 @@ cookies_button.innerHTML = ` `; cookies_button.id = "cookie-banner"; +let main_banner = document.createElement("div"); +main_banner.innerHTML = ` +

New Logo Feedback

+ +   + +`; +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 index c268407..1bd4a7c 100644 --- 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"); }