alerts

data/site/main.js

@@ -49,5 +49,26 @@ function loadImage(event, destination) {
 	reader.readAsDataURL(input.files[0])
 }
 
+//closes alerts
+var close = document.getElementsByClassName("closebtn")
+for (var i = 0; i < close.length; i++) {
+	close[i].onclick = function() {
+		parentDiv = this.parentElement
+		parentDiv.style.opacity = "0"
+		setTimeout(function() {parentDiv.style.display = "none"}, 250)
+	}
+}
+
+function createAlert(type, message) {
+	var newAlert = document.createElement("DIV")
+	newAlert.innerHTML = message
+	newAlert.classList.add("alert", type)
+	document.getElementById("alertMenu").appendChild(newAlert)
+	newAlert.onclick = function() {
+		this.style.opacity = "0"
+		setTimeout(function() {newAlert.classList.add("hidden")}, 250)
+	}
+}
+
 //things to run at the end:
 scrollFunction()

data/site/styles.css

@@ -230,6 +230,9 @@ a {
 		width: 100%;
 		z-index: 1000;
 	}
+	footer > #alertMenu {
+		position: static;
+	}
 	#header {
 		max-height: 100px;
 		width: auto;
@@ -256,27 +259,23 @@ a {
 	}
 }
 
-/*Text and stuff :)*/
-.info > * {
-	font-size: inherit;
-}
-.info {
-	font-size: 0.7em;
-	border-top: 1px solid var(--color-primary);
-}
 
-/*Title*/
+/*Header and Footer*/
 #header {
 	width: auto;
 }
-header {
-	border-bottom: 1px solid var(--color-primary);
-}
-header, .info {
+header, .footer {
 	text-align: center;
 	background-color: black;
 	padding: 5px 0px;
 }
+footer * {
+	font-size: inherit;
+	padding: 0.25em
+}
+footer {
+	font-size: 0.8em;
+}
 
 /*symbol grid*/
 .manaSymbol > img {
@@ -316,4 +315,28 @@ header, .info {
 	top: 0.25em;
 	left: 0.5em;
 	height: 1.7em;
+}
+
+
+
+#alertMenu {
+	position: fixed;
+	bottom: 0;
+}
+.alert {
+  	opacity: 1;
+  	padding: 0.25em;
+  	cursor: pointer;
+  	transition: 0.25s;
+  	border: 0px solid var(--color-select);
+}
+.alert:hover {
+	border-width: 0.15em;
+	padding: 0.1em;
+}
+.alert.info {background-color: var(--color-primary);}
+.alert.warning {background-color: #3b0000;}
+
+.hidden {
+	display: none;
 }