diff options
| -rw-r--r-- | js/rules-popup.js | 50 | ||||
| -rw-r--r-- | stylesheets/style.css | 65 |
2 files changed, 83 insertions, 32 deletions
diff --git a/js/rules-popup.js b/js/rules-popup.js index 1702ff68..6b5c99ac 100644 --- a/js/rules-popup.js +++ b/js/rules-popup.js @@ -17,36 +17,26 @@ if (typeof localStorage.rulesAccepted === "undefined") { // generate a 7-character long random string captcha = Math.random().toString(36).substring(2, 9) - var d = $("<div id='rules'>").prependTo("body").width("80%").height("80%") - .css("z-index", 9999).css("position", "fixed") - .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") + $("<div id='rules-popup'>") + .prependTo("body"); - 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;" + - "width: 100%; background-color: #ddd; overflow: auto; font-family: serif; color: #444;'>" + - "<div style='padding: 10px; font-size: 12px;' id='rules-actual'>" + - "</div>" + - "</div>" + - - "<div style='bottom: 0px; height: 80px; width: 100%; position: absolute;'>" + - "<div style='line-height: 40px;'>If you accept the rules, retype the captcha and press ACCEPT.</div>" + - "<div style='height: 40px;'><div style='display: inline-block; border: 1px solid white; font-family: serif; padding: 3px;'>" + captcha + "</div>" + - "<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"); -} + $(".rules-popup-bottom") + .append("<div class='rules-popup-bottom-instructions'>If you accept the rules, retype the captcha and press ACCEPT.</div>") + .append("<div class='rules-popup-captcha-wrapper'></div>"); + $(".rules-popup-captcha-wrapper") + .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>"); + $(".rules-popup-form") + .append("<input class='rules-popup-form-input' type='text' id='captcha' />") + .append("<input type='submit' value='ACCEPT' />"); +}
\ No newline at end of file diff --git a/stylesheets/style.css b/stylesheets/style.css index 94428412..e25638d5 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1812,5 +1812,66 @@ table.fileboard .intro a { 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; +} |