Merge pull request #61 from mkwia/rules-agreement-page

add rules agreement page

4 files changed, 174 insertions, 70 deletions

diff --git a/js/rules-popup.js b/js/rules-popup.js
new file mode 100644
index 00000000..515c5b71
--- /dev/null
+++ b/js/rules-popup.js
@@ -0,0 +1,42 @@
+/*
+ * rules-popup.js
+ * https://github.com/mkwia/lainchan/js/rules-popup.js
+ *
+ * Forces user to accept rules from /templates/rules.html on first welcome
+ *
+ * 2016 mkwia <github.com/mkwia>
+ *
+ * Usage:
+ *   $config['additional_javascript'][] = 'js/jquery.min.js';
+ *   $config['additional_javascript'][] = 'js/rules-popup.js';
+ *
+ */
+
+if (typeof localStorage.rulesAccepted === "undefined") {
+
+    // generate a 7-character long random string
+    captcha = Math.random().toString(36).substring(2, 9)
+
+    $("<div id='rules-popup'>")
+        .prependTo("body");
+
+    $("#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>");
+
+    $(".rules-popup-content-wrapper")
+        .append("<div id='rules-popup-content'></div>");
+    $("#rules-popup-content")
+        .load("/templates/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..b495891f 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -1812,5 +1812,65 @@ 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; 
+    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;
+}
diff --git a/templates/rules.html b/templates/rules.html
new file mode 100644
index 00000000..1de2f1d4
--- /dev/null
+++ b/templates/rules.html
@@ -0,0 +1,68 @@
+<div class="ban" id="global">
+    <h2>GLOBAL RULES</h2>
+    <ol start="0">
+        <li>Do not post in or view any boards if you are under 18 years of age.</li>
+        <li>If you break the rules we will delete your post. Do it repeatedly and you'll be derezzed.</li>
+        <li>Do not call for mods, or announce reports in a thread.</li>
+        <li>Always argue in good faith and avoid using personal attacks.</li>
+        <li>You should always elaborate on your opinions rather than just spilling the soykaf.</li>
+        <li>Don't respond with aggression to perceived flames or trolls (or at all.)</li>
+        <li>Do not whine and cry about 8chan, "quality", "invasions", "newfags", mods, bans, or kalyx outside of /q/.</li>
+        <li>Do not spam or advertise unrelated content.</li>
+        <li>Do not post child pornography or questionable 2D/3DCG/3DPG sexual depictions of children. This includes "child models".</li>
+        <li>If you must post it, spoiler any NSFW content and make sure it's relevant to the discussion.</li>
+        <li>Do not upload malicious archives.</li>
+        <li>Read the rules again. <code>/* infinite iteration will fix later */</code></li>
+    </ol>
+</div>
+
+<div class="ban" id="tips">
+    <h2>PRO TIPS FOR MAXIMUM FUN:</h2>
+    <ul>
+        <li>The mods are not on powertrips, they are friendly and are trying to ensure the quality of lainchan, not belittle your ideas.</li>
+        <li>Lainchan is a place to have your voice heard but not a place for you to drown out others' voices.</li>
+        <li>Mods usually ask each other for opinions before doing anything. We hate having to ban someone.</li>
+        <li> Just relax and try to have fun. Jokes are always welcome.</li>
+        <li> Visit a board you've never been to. Try out /random/.</li>
+        <li> Max file size is 35 mb.</li>
+        <li> PDF, ePub, and webm are supported across the boards.</li>
+        <li>We ALWAYS need contributors to our board software, located on <a href="https://github.com/lainchan/lainchan/">github</a></li>
+        <li> Dice rolling: posting in the email field with the form "dice XdY+/-Z" will result in X Y-sided dice rolled and summed, with the modifier Z added, the result is displayed at the top of the post body.</li>
+        <li> Be smart when posting about potentially illegal activities.</li>
+    </ul>
+</div>
+
+<div class="ban" id="boards">
+    <h2>Boards</h2>
+    <ul>
+        <li>/cyb/ is the general cyberpunk board for the discussion of the philosophy and anything else you can think of as being "cyberpunk".</li>
+        <li>/λ/ is the programming board.</li>
+        <ul>
+            <li> Hard technical discussion of software development and project ideas is the only intended purpose of this board.</li>
+            <li> The Beginner's General is where all questions concerning novice programming should go, unless there is a more specific thread for your interests.</li>
+        </ul>
+        <li>/tech/ is for the discussion of consumer technology.</li>
+        <ul>
+            <li> Discussion concerning programs not intimately related to programming belongs on /tech/.</li>
+        </ul>
+        <li>/zzz/ is the board for the discussion of dreams and dreaming techniques.</li>
+        <li>/drg/ is the board for discussing your waifu's experiences with drug usage, including buying and selling.</li>
+        <li>/lit/ is the board for reading, writing, and sharing written works of art.</li>
+        <li>/civ/ is for the discussion of politics, civic affairs and similar topics.</li>
+        <li>/diy/ is for the discussion of electronics and the construction and modification thereof.</li>
+        <ul>
+            <li> The construction and modification of objects that are not electronic is also welcomed.</li>
+            <li> Cooking is one example of a topic that would fit on /diy/.</li>
+        </ul>
+        <li>/art/ is the board for the discussion of other forms of art, including music, movies, and television.</li>
+        <li>/w/ is the board for the discussion of Japanese culture and anime.</li>
+        <li>/r/ is the board for the discussion of topics that do not have a dedicated board. It is not for purely random threads.</li>
+        <li>/layer/ is the ddt board. For more information see the sticky on the board or the <a href="https://github.com/desudesutalk/desudesutalk/wiki/How-to-use-this-script">official how-to guide</a>.</li>
+        <li>/q/ is the questions board.</li>
+        <ul>
+            <li> In specific, questions about the moderation, the quality of Lainchan, feature requests, and other questions about the website are valid.</li>
+        </ul>
+        <li>Keep discussion rational. It's why we're here.</li>
+        <li>When in doubt about the topic of a board, lurk it for a while and check the catalog to get an idea of it.</li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/templates/themes/rules/rules.html b/templates/themes/rules/rules.html
index 552db911..8f4b870a 100755
--- a/templates/themes/rules/rules.html
+++ b/templates/themes/rules/rules.html
@@ -23,74 +23,8 @@
       <img alt="mascot" src="static/lain_is_cute_datass_small.png"/>
     </center>
 
-    <div class="ban" id="global">
-      <h2>GLOBAL RULES</h2>
-      <ol start="0">
-<li>Do not post in or view any boards if you are under 18 years of age.</li>
-<li>If you break the rules we will delete your post. Do it repeatedly and you'll be derezzed.</li>
-<li>Do not call for mods, or announce reports in a thread.</li>
-<li>Always argue in good faith and avoid using personal attacks.</li>
-<li>You should always elaborate on your opinions rather than just spilling the soykaf.</li>
-<li>Don't respond with aggression to perceived flames or trolls (or at all.)</li>
-<li>Do not whine and cry about 8chan, "quality", "invasions", "newfags", mods, bans, or kalyx outside of /q/.</li>
-<li>Do not spam or advertise unrelated content.</li>
-<li>Do not post child pornography or questionable 2D/3DCG/3DPG sexual depictions of children. This includes "child models".</li>
-<li>If you must post it, spoiler any NSFW content and make sure it's relevant to the discussion.</li>
-<li>Do not upload malicious archives.</li>
-<li>Read the rules again. <code>/* infinite iteration will fix later */</code></li>
-
-      </ol>
-    </div>
-
-   <div class="ban" id="tips"> 
-<h2>PRO TIPS FOR MAXIMUM FUN:</h2>
-      <ul>
-<li>The mods are not on powertrips, they are friendly and are trying to ensure the quality of lainchan, not belittle your ideas.</li>
-<li>Lainchan is a place to have your voice heard but not a place for you to drown out others' voices.</li>
-<li>Mods usually ask each other for opinions before doing anything. We hate having to ban someone.</li>
-<li> Just relax and try to have fun. Jokes are always welcome.</li>
-<li> Visit a board you've never been to. Try out /random/.</li>
-<li> Max file size is 35 mb.</li>
-<li> PDF, ePub, and webm are supported across the boards.</li>
-<li>We ALWAYS need contributors to our board software, located on <a href="https://github.com/lainchan/lainchan/">github</a></li>
-<li> Dice rolling: posting in the email field with the form "dice XdY+/-Z" will result in X Y-sided dice rolled and summed,  with the modifier Z added, the result is displayed at the top of the post body.</li>
-<li> Be smart when posting about potentially illegal activities.</li>
-      </ul>
-    </div>
-<div class="ban" id="boards">
-  <h2>Boards</h2>
-  <ul>
-  <li>/cyb/ is the general cyberpunk board for the discussion of the philosophy and anything else you can think of as being "cyberpunk".</li>
-  <li>/λ/ is the programming board.</li>
-  <ul>
-  <li>  Hard technical discussion of software development and project ideas is the only intended purpose of this board.</li>
-  <li>  The Beginner's General is where all questions concerning novice programming should go, unless there is a more specific thread for your interests.</li>
-  </ul>
-  <li>/tech/ is for the discussion of consumer technology.</li>
-  <ul>
-  <li>  Discussion concerning programs not intimately related to programming belongs on /tech/.</li>
-  </ul>
-  <li>/zzz/ is the board for the discussion of dreams and dreaming techniques.</li>
-  <li>/drg/ is the board for discussing your waifu's experiences with drug usage, including buying and selling.</li>
-  <li>/lit/ is the board for reading, writing, and sharing written works of art.</li>
-  <li>/civ/ is for the discussion of politics, civic affairs and similar topics.</li>
-  <li>/diy/ is for the discussion of electronics and the construction and modification thereof.</li>
-  <ul>
-  <li>  The construction and modification of objects that are not electronic is also welcomed.</li>
-  <li>  Cooking is one example of a topic that would fit on /diy/.</li>
-  </ul>
-  <li>/art/ is the board for the discussion of other forms of art, including music, movies, and television.</li>
-  <li>/w/ is the board for the discussion of Japanese culture and anime.</li>
-  <li>/r/ is the board for the discussion of topics that do not have a dedicated board.  It is not for purely random threads.</li>
-  <li>/layer/ is the ddt board.  For more information see the sticky on the board or the <a href="https://github.com/desudesutalk/desudesutalk/wiki/How-to-use-this-script"> official how-to guide</a>.</li>
-  <li>/q/ is the questions board.</li>
-  <ul>
-  <li>  In specific, questions about the moderation, the quality of Lainchan, feature requests, and other questions about the website are valid.</li>
-  </ul>
-  <li>Keep discussion rational. It's why we're here.</li>
-  <li>When in doubt about the topic of a board, lurk it for a while and check the catalog to get an idea of it.</li>
-
-  </ul></div>
+    { include '/templates/rules.html' }
+      
   </body>
 </html>
 {% endfilter %}