interactive elements, works and links pages

about.php

@@ -3,14 +3,66 @@
     require "essential/template.php";
     ?>
     <div id="content">
-        <h1>About</h1>
+        <h1>tom otter</h1>
+        <p>From Realpedia, the REAL encyclopedia.</p>
+        <blockquote>
+            This biographical article on an <b>animal entity</b> is a stub. Help ■■■■■■■■■■■■■■■ by <a href="javascript:z()">expanding it</a>.
+        </blockquote>
         <table id="infobox">
             <tbody>
                 <tr>
                     <th colspan="2">tom otter</th>
                 </tr>
                 <tr>
-                    <td id="infoboximage" colspan="2">image placehodler</td>
+                    <td id="infoboximage" colspan="2"><img src="dfasdf.png" width="250"></td>
+                </tr>
+                <tr>
+                    <th colspan="2">66th President of Zimbabwe</th>
+                </tr>
+                <tr>
+                    <td colspan="2" align="center"><p style="margin: 0;"><b>In office</b></p><p style="margin: 0;">25 December 823 - 1 April 2001</p></td>
+                </tr>
+                <tr>
+                    <th>Prime Minister</th>
+                    <td>Richard D. James</td>
+                </tr>
+                <tr>
+                    <th>Vice President</th>
+                    <td>He ate all of the candidates alive, so there weren't any vice presidents during his term</td>
+                </tr>
+                <tr>
+                    <th>Preceded by</th>
+                    <td>Autechre</td>
+                </tr>
+                <tr>
+                    <th>Succeeded by</th>
+                    <td>Autechre</td>
+                </tr>
+                <tr>
+                <tr>
+                    <th colspan="2">2nd President of Portugal</th>
+                </tr>
+                <tr>
+                    <td colspan="2" align="center"><p style="margin: 0;"><b>In office</b></p><p style="margin: 0;">1 June 999 - 1 June 9910</p></td>
+                </tr>
+                <tr>
+                    <th>Prime Minister</th>
+                    <td>Captain Bokko</td>
+                </tr>
+                <tr>
+                    <th>Vice President</th>
+                    <td>Michael Jackson</td>
+                </tr>
+                <tr>
+                    <th>Preceded by</th>
+                    <td>Ruben Slikk</td>
+                </tr>
+                <tr>
+                    <th>Succeeded by</th>
+                    <td>Nobody</td>
+                </tr>
+                <tr>
+                    <th colspan="2">Personal Information</th>
                 </tr>
                 <tr>
                     <th>Species</th>
@@ -18,26 +70,32 @@
                 </tr>
                 <tr>
                     <th>Type</th>
-                    <td>Water</td>
+                    <td><img src="agua.png"> <img src="fantasma.png"></td>
                 </tr>
                 <tr>
                     <th>Sex</th>
                     <td>Yes</td>
                 </tr>
                 <tr>
-                    <th>asd</th>
-                    <td>sdfpskdf</td>
+                    <th>Nationality</th>
+                    <td>Yes</td>
                 </tr>
                 <tr>
-                    <th>asd</th>
-                    <td>sdfpskdf</td>
+                    <th>Relationship Status</th>
+                    <td>Unknown</td>
                 </tr>
-                
             </tbody>
         </table>
-        <p>ayo what up Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra faucibus elit, feugiat condimentum nulla tempor sed. Pellentesque blandit ipsum non velit porta suscipit vel ac orci. Maecenas cursus dictum varius. Pellentesque dictum congue gravida. Duis sagittis sem non odio porta, quis elementum magna commodo. Donec id imperdiet velit. Quisque at neque enim. Integer non sollicitudin metus, volutpat sagittis ipsum. </p>
-        <h2>snifjhduo</h2>
-        <p>what's good Maecenas feugiat neque et eros rhoncus, at scelerisque augue porttitor. Aenean blandit sollicitudin euismod. Etiam at varius lacus. Vivamus tincidunt non est vitae bibendum. Praesent sed nisi lorem. Sed tempus efficitur pellentesque. Vestibulum rutrum sollicitudin mattis. Mauris sit amet viverra enim, sed pharetra dolor. Nullam facilisis quis eros pellentesque viverra. Pellentesque posuere, lectus sagittis mattis bibendum, lacus turpis accumsan felis, faucibus hendrerit quam ante in odio. Integer quis mollis tellus, eu venenatis magna. Aliquam ullamcorper commodo turpis eget tempor. Vestibulum non mattis arcu, sit amet tempus ipsum. Sed imperdiet vitae nunc id lacinia. Ut in libero quis augue viverra hendrerit blandit vitae lacus. Proin iaculis risus eu lobortis efficitur. </p>
+        <p><b>Tom Otter</b> (born), stylized in all lowercase letters, is an animal entity that indulges in niche creative endeavors and writes beat poetry. It is known to cause deafness, vomiting and general mental illness. They are notable for taking part in the 1876 telegraph hijackings <span class="cit">[citation needed]</span>. He is the first man to serve as the President of Portugal, as well as of Zimbabwe, simultaniously <span class="cit">[citation needed]</span>.</p>
+        <p>They died on the tragic motorcycle accident of 1994, but was revived by a magical wizard man with long white beard from a virtual world. They died again on September 10th, 2001, at the hands of fur poachers. Today, it is alive and well <span class="cit">[citation needed]</span>.</p>
+        <h2>Early life and education</h2>
+        <p>Tom Otter was born.</p>
+        <p>During his years in primary education, he tried selling bananas to classmates at $100,000 per bunch, which he confirmed was not a profitable venture.</p>
         <p>what's good Maecenas feugiat neque et eros rhoncus, at scelerisque augue porttitor. Aenean blandit sollicitudin euismod. Etiam at varius lacus. Vivamus tincidunt non est vitae bibendum. Praesent sed nisi lorem. Sed tempus efficitur pellentesque. Vestibulum rutrum sollicitudin mattis. Mauris sit amet viverra enim, sed pharetra dolor. Nullam facilisis quis eros pellentesque viverra. Pellentesque posuere, lectus sagittis mattis bibendum, lacus turpis accumsan felis, faucibus hendrerit quam ante in odio. Integer quis mollis tellus, eu venenatis magna. Aliquam ullamcorper commodo turpis eget tempor. Vestibulum non mattis arcu, sit amet tempus ipsum. Sed imperdiet vitae nunc id lacinia. Ut in libero quis augue viverra hendrerit blandit vitae lacus. Proin iaculis risus eu lobortis efficitur. </p>
+        <h2>Death and revival</h2>
+        <h2>Legal issues</h2>
+        <p>Tom was once arrested on the Maryland-Delaware because the police officers thought it was smoking marijuana inside its car because of the permeating industrial stench.</p>
+        <p>He has been a naughty, naughty otter. He stole $5 from Bank of America through waiting for interest. So, so naughty.</p>
+        <p>Tom was banned from Connecticut and Pony Town because the governors felt like it.</p>
     </div>
 </div>

essential/backgrounds.php

@@ -1,6 +1,6 @@
 <?php 
       $bg = glob("essential/backgrounds/*.*", GLOB_BRACE);
-      $f = rand(0, count($bg));
+      $f = rand(0, (count($bg)-1));
       function rand_color() {return sprintf('#%06X', mt_rand(0, 0xFFFFFF));};
 
 echo

essential/common.css

@@ -9,6 +9,7 @@ body {
 #navtop {
     border-bottom: 1px black solid;
     height: 150px;
+    background-image: url("stupid.png");
 }
 
 #navbottom ul {
@@ -33,6 +34,7 @@ body {
 #blog {
     height: 100px;
     margin-top: 5px;
+    background-image: url("blogad.png");
 }
 
 
@@ -57,13 +59,35 @@ h1 {
 #infobox {
     float:right;
     border: 1px black solid; 
+    margin-left: 15px;
+    max-width: 250px;
 }
 
 td, th {
     margin: 2px;
-    background-color: aqua;
+    background-color: #31ebb4;
 }
 
 #infoboximage {
     border-bottom: 1px black solid;
+    text-align: center;
+}
+
+.cit {
+    font-size: 10px;
+  vertical-align: top;
+}
+
+h2 {
+    border-bottom: 1px black solid;
+    overflow: hidden;
+}
+
+@keyframes homer {
+    0% {
+        background-size: 1px 50px;
+    }
+    0% {
+        background-size: 500px 50px;
+    }
 }

essential/template.php

@@ -2,15 +2,15 @@
 <?php require "backgrounds.php"?>
 <nav id="left">
   <nav id="navigation">
-    <div id="navtop">
-      <img src="essential/stupid.png">
+    <div id="navtop" onclick="boyclick()">
     </div>
     <div id="navbottom">
       <ul>
         <li><b>you are now in tom</b></li>
         <li><a href="about">About</a></li>
-        <li><a>Stuff</a></li>
+        <li><a href="works">List of works</a></li>
         <li><a>Whatever</a></li>
+        <li><a href="links">User page</a></li>
       </ul>
     </div>
   </nav>
@@ -18,4 +18,23 @@
     <nav id="blog">
     </nav>
   </a>
-</nav>
+</nav>
+
+<script>
+  boy = document.getElementById("navtop");
+
+  msg = [
+      "yowch",
+      "yo get me outta dis wack ass crystal prison",
+      "BEEEEWAAAARE!! FOUR FIGURES APPEAR THROUGH THE FOG",
+      "mwrow",
+      "are my pawbs fuzzy enough for u.. >_<",
+      "look in the sky...  oh my ! it is i!"
+    ]
+
+  function boyclick() {
+    a = Math.floor(Math.random() * (msg.length));
+    alert('TOM SEZ... "' + msg[a] + '"');
+  }
+  function z() {alert("oops sorry that was actually a nuke you just blew up nebraska this is all your fault");}
+</script>

links.php

@@ -0,0 +1,9 @@
+<div id="wrapper"> 
+  <?php
+    require "essential/template.php";
+  ?>
+  <div id="content">
+    <h1>User:tupac shakir dailymotion</h1>
+    <p>Yo brah. I'm jonhy from Realpedia. I like to make edits to articles on Realpedia. Special fuck you to User:Joe for reverting my edits on the article for tom otter.  I know tom otter personally I know all about him. "citation needed" my ass mother fucker.</p>
+  </div>
+</div>

works.php

@@ -0,0 +1,79 @@
+<div id="wrapper"> 
+  <?php
+    require "essential/template.php";
+  ?>
+  <script>
+      function x() {
+    document.body.style.backgroundImage = "url('essential/backgrounds/super homer.png')";
+    document.body.style.animation = "homer 4s linear infinite";
+    document.body.innerHTML += "SUPER  HOMER  EXPAND ";
+  }
+  </script>
+  <div id="content">
+    <h1>List of works created by Tom Otter</h1>
+    <p>From Realpedia, the REAL encyclopedia.</p>
+    <blockquote>This biographical article related to a French cycling person born in the 1990s is a stub. You can help Realpedia by <a href="javascript:x()">expanding it</a>.</blockquote>
+    <p><b>Tom Otter</b> (stylized lowercase) is an unknown being. Its doohickeys range multiple fields. This list aims to provide a summary of its works.</p>
+    <h2>Aural</h2>
+    <table>
+      <tbody>
+        <tr>
+          <th>Title</th>
+          <th>Alias</th>
+          <th>Type</th>
+          <th>Date Published</th>
+          <th>Label</th>
+        </tr>
+        <tr>
+          <tr>
+            <td><i>ABSOLUTE FUCKING WORST: THE COMPLETE COLLECTION</i></td>
+            <td>Thomas Fitzgerald</td>
+            <td>Compilation</td>
+            <td>May 10th, 2023</td>
+            <td>Cordfuck</td>
+          </tr>
+          <td><i>ABSOLUTE WORST 20-22</i></td>
+          <td>Thomas Fitzgerald</td>
+          <td>Mini-LP, Cassette</td>
+          <td>May 17th, 2024</td>
+          <td>Cheapskape Records</td>
+        </tr>
+        <tr>
+          <td><i>grass</i></td>
+          <td>ladjx</td>
+          <td>LP</td>
+          <td>TBA</td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+    <h2>Visual</h2>
+    <table>
+      <tbody>
+        <tr>
+          <th>Title</th>
+          <th>Date Published</th>
+        </tr>
+        <tr>
+          <td>"sad cat painting"</td>
+          <td>n/a</td>
+        </tr>
+      </tbody>
+    </table>
+    <h2>Digital</h2>
+    <table>
+      <tbody>
+        <tr>
+          <th>Title</th>
+          <th>Date Published</th>
+          <th>Publisher</th>
+        </tr>
+        <tr>
+          <td><i>DEAD KATS IN HELL: Dead Cat Hangman</i></td>
+          <td>May 12th, 2022</td>
+          <td>n/a</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>