kashire/lainchan
4
0
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity

move css to style.css and clear up element creation

Browse Source
This commit is contained in:
Milosz Kwiatkowski 2016-08-21 18:15:36 +01:00
parent d550abed22
commit 0373db5e17
2 changed files with 83 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
js/rules-popup.js
View File

@ -17,36 +17,26 @@ if (typeof localStorage.rulesAccepted === "undefined") {
// generate a 7-character long random string // generate a 7-character long random string
captcha = Math.random().toString(36).substring(2, 9) captcha = Math.random().toString(36).substring(2, 9)
var d = $("<div id='rules'>").prependTo("body").width("80%").height("80%") $("<div id='rules-popup'>")
.css("z-index", 9999).css("position", "fixed") .prependTo("body");
.css("top", "50%").css("bottom", 0).css("left", "50%").css("right", 0)
.css("margin-top", "-40vh").css("margin-left", "-40%")
.css("background", "black")
.css("text-align", "center").css("font-family", "sans-serif")
.css("font-size", "14px").css("color", "white")
d.html("" + $("#rules-popup")
.append("<div class='rules-popup-top'>lainchan rule agreement</div>")
.append("<div class='rules-popup-content-wrapper'></div>")
.append("<div class='rules-popup-bottom'></div>");
"<div style='font-size: 40px; line-height: 60px; position: absolute; top: 0px; height: 60px; width: 100%;'>lainchan rule agreement</div>" + $(".rules-popup-content-wrapper")
.append("<div id='rules-popup-content'></div>");
$("#rules-popup-content")
.load("rules.html");
"<div style='text-align: left; position: absolute; bottom: 80px; top: 60px;" + $(".rules-popup-bottom")
"width: 100%; background-color: #ddd; overflow: auto; font-family: serif; color: #444;'>" + .append("<div class='rules-popup-bottom-instructions'>If you accept the rules, retype the captcha and press ACCEPT.</div>")
"<div style='padding: 10px; font-size: 12px;' id='rules-actual'>" + .append("<div class='rules-popup-captcha-wrapper'></div>");
"</div>" + $(".rules-popup-captcha-wrapper")
"</div>" + .append("<div class='rules-popup-captcha'>" + captcha + "</div>")
.append("<form class='rules-popup-form' onsubmit=\"if ($('#captcha').val() == '" + captcha + "') { localStorage.rulesAccepted = 1; $('#rules-popup').remove(); } return false;\"></form>");
"<div style='bottom: 0px; height: 80px; width: 100%; position: absolute;'>" + $(".rules-popup-form")
"<div style='line-height: 40px;'>If you accept the rules, retype the captcha and press ACCEPT.</div>" + .append("<input class='rules-popup-form-input' type='text' id='captcha' />")
"<div style='height: 40px;'><div style='display: inline-block; border: 1px solid white; font-family: serif; padding: 3px;'>" + captcha + "</div>" + .append("<input type='submit' value='ACCEPT' />");
"<form onsubmit=\"if ($('#captcha').val() == '" + captcha + "') { localStorage.rulesAccepted = 1; $('#rules').remove(); } return false;\"" +
" style='display: inline-block;'>" +
"<input type='text' id='captcha' style='width: 100px;' />" +
"<input type='submit' value='ACCEPT' />" +
"</form>" +
"</div>" +
"</div>" +
"");
$("#rules-actual").load("rules.html");
} }

65
stylesheets/style.css
View File

@ -1812,5 +1812,66 @@ table.fileboard .intro a {
margin-left: 0px; margin-left: 0px;
} }
/* Rules Popup */
#rules-popup {
width: 80%;
height: 80%;
position: fixed;
z-index: 9999;
left: 50%;
margin-left: -40%;
top: 50%;
margin-top: -40vh;
background: #000000;
text-align: center;
font-family: sans-serif;
font-size: 14px;
color: #FFFFFF;
}
#rules-popup .rules-popup-top {
font-size: 40px;
line-height: 60px;
position: absolute;
top: 0px;
height: 60px;
width: 100%;
}
#rules-popup .rules-popup-content-wrapper {
text-align: left;
position: absolute;
bottom: 80px;
top: 60px;
width: 100%;
background-color: #DDDDDD;
overflow: auto;
font-family: serif;
color: #444;
}
#rules-popup .rules-popup-content {
padding: 10px;
font-size: 12px;
}
#rules-popup .rules-popup-bottom {
bottom: 0px;
height: 80px;
width: 100%;
position: absolute;
}
#rules-popup .rules-popup-bottom-instructions {
line-height: 40px;
}
#rules-popup .rules-popup-captcha-wrapper {
height: 40px;
}
#rules-popup .rules-popup-captcha {
display: inline-block;
border: 1px solid white;
font-family: serif;
padding: 3px;
}
#rules-popup .rules-popup-form {
display: inline-block;
}
#rules-popup .rules-popup-form-input {
width: 100px;
}