Alert announcement added

static/css/common.css

@@ -158,7 +158,7 @@ mark {
   top: 0;
   left: 0;
   background-color: white;
-  z-index: 100;
+  z-index: 3;
   transition: height 500ms linear;
 }
 @media screen and (max-width: 1024px) {

static/css/home.css

@@ -28,6 +28,61 @@
   display: none;
 }
 
+.page-alert {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+.page-alert.hide {
+  display: none;
+}
+.page-alert .content {
+  width: 50%;
+  max-height: 70%;
+  overflow: auto;
+  background-color: white;
+  border-radius: 7px;
+  padding: 10px 20px;
+  box-shadow: 0px 0px 5px #808285;
+}
+@media screen and (max-width: 1023px) {
+  .page-alert .content {
+    width: 90%;
+    max-height: 100%;
+  }
+}
+.page-alert .content h2 {
+  color: #28aae2;
+  font-size: 22px;
+  text-align: center;
+  margin: 10px auto;
+}
+.page-alert .content p {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 0.5px;
+  color: #403e41;
+}
+.page-alert .content button {
+  width: 100px;
+  height: 40px;
+  font-size: 14px;
+  color: white;
+  background-color: #28aae2;
+  border: 0px;
+  border-radius: 3px;
+  display: block;
+  margin: 10px auto;
+  cursor: pointer;
+}
+
 section h3 {
   font-size: 36px;
   font-family: "Archivo Black", sans-serif;
@@ -610,7 +665,7 @@ section .description p {
   bottom: 0;
   right: 0;
   background-color: #403e41;
-  z-index: 10;
+  z-index: 5;
   width: 300px;
   height: 400px;
   padding: 10px;

static/js/home.js

@@ -22,7 +22,7 @@ document.addEventListener('DOMContentLoaded', page_loaded);
 function page_scroll() {
 	'use strict';
 	var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
-	
+
 	if (-120 + winScroll >= about_description_animate.offsetTop) {
 		about_description_animate.classList.add('show');
 		about_image_animate.classList.add('show');
@@ -40,7 +40,7 @@ function page_loaded() {
 	if ($(window).width() < 960) {
 		$(document).on('click', 'a[href^="#"]', function (event) {
 			event.preventDefault();
-			
+
 			$('html, body').animate({
 				scrollTop: $($.attr(this, 'href')).offset().top - 780
 			}, 500);
@@ -53,7 +53,7 @@ function page_loaded() {
 }
 
 function toggle_contact_info(e) {
-	
+
 	for (var i = 0; i < temp_contact_info.length; i++) {
 		temp_contact_info[i].classList.remove('active');
 	}
@@ -78,7 +78,7 @@ function hide_mobile_nav() {
 document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
 	anchor.addEventListener('click', function (e) {
 	    e.preventDefault();
-  
+
 	    document.querySelector(this.getAttribute('href')).scrollIntoView({
 		  behavior: 'smooth'
 	    });
@@ -88,7 +88,7 @@ document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
 // Support for old Browsers.
 $(document).on('click', 'a[href^="#"]', function (event) {
 	event.preventDefault();
-  
+
 	$('html, body').animate({
 	    scrollTop: $($.attr(this, 'href')).offset().top - 100
 	}, 500);
@@ -168,4 +168,10 @@ close_toast.addEventListener('click', hide_toast);
 
 function hide_toast() {
 	toast.classList.toggle('hide');
-}
+}
+
+document.querySelector('.page-alert .content #close-alert-button').addEventListener('click', function () {
+    "use strict";
+
+    document.querySelector('.page-alert').classList.add('hide');
+});

static/scss/common.scss

@@ -5,18 +5,18 @@
 	-webkit-tap-highlight-color: transparent;
 	box-sizing: border-box;
 }
-    
+
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }
-  
+
 a {
 	color: inherit;
 	text-decoration: none;
 }
-    
+
 html, body {
 	font-family: open-sans;
 
@@ -115,7 +115,7 @@ mark {
 	top: 0;
 	left: 0;
 	background-color: white;
-	z-index: 100;
+	z-index: 3;
 	transition: height 500ms linear;
 
 	@media screen and (max-width: 1024px) {
@@ -220,7 +220,7 @@ mark {
 				&:after {
 					transform: rotate(-95deg) translate(20px, 2px);
 				}
-	
+
 				&:before {
 					opacity: 0;
 				}
@@ -351,7 +351,7 @@ mark {
 						width: 10%;
 					}
 
-					.contact-content { 
+					.contact-content {
 						display: block;
 					}
 				}

static/scss/home.scss

@@ -5,6 +5,65 @@
     display: none;
 }
 
+.page-alert {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    z-index: 6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(white, 0.9);
+
+    &.hide {
+        display: none;
+    }
+
+    .content {
+        width: 50%;
+        max-height: 70%;
+        overflow: auto;
+        background-color: white;
+        border-radius: 7px;
+        padding: 10px 20px;
+        box-shadow: 0px 0px 5px $dark_gray;
+
+        @media screen and (max-width: 1023px) {
+            width: 90%;
+            max-height: 100%;
+        }
+
+        h2 {
+            color: $blue;
+            font-size: 22px;
+            text-align: center;
+            margin: 10px auto;
+        }
+
+        p {
+            font-size: 16px;
+            line-height: 2;
+            letter-spacing: 0.5px;
+            color: $dark_brown;
+        }
+
+        button {
+            width: 100px;
+            height: 40px;
+            font-size: 14px;
+            color: white;
+            background-color: $blue;
+            border: 0px;
+            border-radius: 3px;
+            display: block;
+            margin: 10px auto;
+            cursor: pointer;
+        }
+    }
+}
+
 section {
     h3 {
         font-size: $heading_size;
@@ -618,7 +677,7 @@ section {
     bottom: 0;
     right: 0;
     background-color: #403e41;
-    z-index: 10;
+    z-index: 5;
     width: 300px;
     height: 400px;
     padding: 10px;

templates/home.html

@@ -6,6 +6,22 @@
 {% endblock stylesheets %}
 
 {% block content %}
+<section class="page-alert">
+    <section class="content">
+        <h2> Alert </h2>
+        <p>
+            Dear Customer, As per Section 194N for deduction of tax at source (TDS) on Cash Withdrawals above 20 lakhs
+            for Financial Year: TDS 2% and above 1 Crore TDS 5% to be deducted w.e.f
+            <strong> 01.07.2020 </strong> for Non I.T returns filers.
+            You are required to submit I.T returns for previous 3 Financial Year or else TDS will be deducted accordingly.
+            <br>
+            Thanks and regards,
+            <br>
+            <strong> The Bharat Co-op Bank Ltd </strong>
+        </p>
+        <button id="close-alert-button"> Okay </button>
+    </section>
+</section>
 <section class="toast">
 	<header>ANNOUNCEMENTS</header>
 	<div class="close-toast"><img src="{% static 'images/down-chevron.svg' %}" alt=""></div>