Initial migration

- Added Idea of Z and Links pages
- All images from original added
- No footer anymore, just badges

public/content/home.html

@@ -1,5 +1,82 @@
-<h2>Welcome to the Home Page</h2>
-<p>
-    This is the home page content, dynamically loaded from an external HTML
-    file.
-</p>
+<div align="center">
+    <p>
+        <script language="JavaScript" type="text/javascript">
+            // ==============================================
+            // Copyright 2003 by jsCode.com
+            // Source: jsCode.com
+            // Author: etLux
+            // Free for all; but please leave in the header.
+            // ==============================================
+            showImage();
+        </script>
+    </p>
+    <table width="639" border="0">
+      <tr>
+        <td width="633" height="55" valign="top">
+          <div align="center">
+            <p class="style2"><span class="style2">Welcome to my little (big) webpage. Here you'll find my lastest
+                uploads from SheezyArt. This include stories, concept art, and more!</span></p>
+            <p><a href="http://www.last.fm/user/zc456/?chartstyle=Geldropdown-small"></a></a></a></p>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td height="362" valign="top">
+          <rss version="2.0">
+            <channel>
+              <table width="637" border="0">
+                <tr>
+                  <td width="356" valign="top">
+                    <p class="style6"><span class="style2"><strong>News ( <a href="news_archive.html">Archive</a>
+                          )<br>
+                          <strike>Oct. 17th, 2007</strike> Oct. 31st, 2024 - Furry Blue Archive! </strong><br>
+                        <div class="style2">
+                          <p>
+                            This has been a long time coming! xD Thanks to Neocities, The Furry Blue DJ, DOC, and
+                            even small Developer Center sites are back up in this new archive form. Except for the
+                            links page, nearly everything has been fixed to its former glory. The new site, simply
+                            called <a href="https://furryblue.com/">Furry Blue</a>, is the new direct successor.
+                          </p>
+                        </div>
+                      </span></p>
+                    <p class="style6"><span class="style2"><strong>Oct. 8th, 2007 - Z's Tutorial of Furr<span
+                            class="style9">y Goodness</span></strong><span class="style11"> part 1 </span><br>
+                      </span>A freind requested a tutorial a while back. Now that its done I've copied it to the
+                      site for anyone else who needs it. <a href="gallery_tutp1.html">Learn to draw</a>. This is
+                      for drawing heads. Coming soon I'll add 360 views and side views. </p>
+                  </td>
+                  <td width="271" valign="top">
+                    <div align="center" class="style12">
+                      <p>Past and Upcoming DJ Events (Archived)</p>
+                    </div>
+                    <div align="center" class="style6">
+                      <p><a href="http://forums.generationtrance.com/viewtopic.php?t=1479" class="style14">Vocal
+                          Trance Monthly Show on DI.fm</a></p>
+                      <p><span class="style2"><a
+                            href="http://forums.generationtrance.com/viewtopic.php?t=5407&start=0&postdays=0&postorder=asc&highlight="
+                            class="style13">[FRI NOV 30] @ The Church Nightclub (Denver)</a></span></p>
+                      <p class="style2"><span class="style13"><a
+                            href="http://forums.generationtrance.com/viewtopic.php?t=5406&start=0&postdays=0&postorder=asc&highlight=">[OCT
+                            19] Incognito @ Play (LA) w/ Randy Boyer (Enmass)</a></span></p>
+                      <p class="style13"><a href="http://forums.generationtrance.com/viewtopic.php?t=3439">GT vs
+                          Project C LIVE @ Holland??</a></p>
+                      <p><span class="style13"><a
+                            href="http://forums.generationtrance.com/viewtopic.php?t=5360">Brainwash - October
+                            13th 2007</a></span></p>
+                      <p><a href="http://forums.generationtrance.com/viewtopic.php?t=5377" class="style13">[SAT
+                          SEPT 29] w/ Micro @ Circus LA (RED)</a></p>
+                      <p><a href="http://forums.generationtrance.com/viewtopic.php?t=5391" class="style13">VACCINE
+                          pres Lange Album Launch Party @ Turnmills</a></p>
+                    </div>
+                  </td>
+                </tr>
+              </table>
+              <p class="style6">&nbsp;</p>
+              <p class="style6"></p>
+            </channel>
+          </rss>
+        </td>
+      </tr>
+    </table>
+
+</div>

public/content/ideaofz.html

@@ -0,0 +1,34 @@
+<div align="center">
+    <p>
+        As a request a while back I had to answer where I got the idea of Z
+        from. This is it!
+    </p>
+    <img src="images/z_character_came_from.png" width="452" height="402" />
+</div>
+<p>
+    Well the picture is just the tip of the iceburg heres the rest. After I gave
+    up drawing on tails and went through
+    <a href="http://www.deviantart.com/deviation/19389470/"
+        >copying off of James</a
+    >
+    just to get a feel of what he was going to look like, sorta thing. I
+    realized I was good at drawing the Tails head better then his body witch
+    lead to
+    <a href="http://www.deviantart.com/deviation/19429712/">eeeeeeq</a>
+    later on. The hair not only did it come from
+    <a href="http://www.deviantart.com/deviation/19164987/">My best pal ZC</a>
+    by <a href="http://jamesrocket.deviantart.com/">James Rocket</a> picture but
+    it also came from one of the hair styles from in Sims 2 since I always
+    wanted that kinda <a href="http://tinyurl.com/8xc5r">hair</a>, realy bad. He
+    needed clothing I realized that when making this charector
+    <a href="http://www.deviantart.com/deviation/18844781/">at the start</a>
+    he was going to need pants and shoes so I went with the "<a
+        href="http://i22.photobucket.com/albums/b316/zc456/AOLTAILS.jpg"
+        >AOL Tails</a
+    >," as it is called, picture would be my 1st target and I them both. The
+    idea for the shirt actrully came from
+    <a href="http://musachan.deviantart.com/">Musachan</a>'s
+    <a href="http://www.deviantart.com/deviation/15768423/">sweater</a>. Also
+    the name Z, alone, came from our cat who had the same name or letter I
+    should I say. The whole art style thing came naturel as shown above.
+</p>

public/content/links.html

@@ -0,0 +1,137 @@
+<center>
+    <table border="0" width="90%">
+        <tr>
+            <td width="33%" valign="top">
+                <p align="center">
+                    <a href="http://www.deviantart.com/">
+                        <font size="2">DeviantART</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.freewebs.com/megawolf77">
+                        <font size="2">Megawolf's Megasite</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.travisuped.com">
+                        <font size="2">Travisuped</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.youtube.com">
+                        <font size="2">YouTube</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.agirlwithacamera.com/">
+                        <font size="2"> A Girl with a Camera</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.creekradio.net">
+                        <font size="2">Creek Radio</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <span
+                        ><a href="http://furry.wikia.com">
+                            <font size="2">WikiFur</font>
+                        </a></span
+                    >
+                </p>
+                <p align="center">
+                    <span>
+                        <font size="2"
+                            ><a href="http://fading-fox.blogspot.com/"
+                                >The Fading Fox</a
+                            ></font
+                        >
+                    </span>
+                </p>
+            </td>
+            <td width="33%" valign="top">
+                <p align="center">
+                    <a href="http://generationtrance.com/">
+                        <font size="2">Generation Trance</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.di.fm">
+                        <font size="2">Di.fm</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.generationtrance.com">
+                        <font size="2">Generation Trance</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.getzcreative.com">
+                        <font size="2">GetzCreative</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.mysimulation.com">
+                        <font size="2">My Simulation</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://adiramedica.com/">
+                        <font size="2">AdiraMedica LLC</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <span
+                        ><a href="http://www.mushiku.com/">
+                            <font size="2">Mushiku</font>
+                        </a></span
+                    >
+                </p>
+            </td>
+            <td width="34%" valign="top">
+                <p align="center">
+                    <span
+                        ><a href="http://rayvnzart.com/">
+                            <font size="2">Figments</font>
+                        </a></span
+                    >
+                </p>
+                <p align="center">
+                    <a href="http://www.neopets.com">
+                        <font size="2">Neopets</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.sheezyart.com">
+                        <font size="2">SheezyART</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.Revision3.com/">
+                        <font size="2"> Revision3</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.dcfdengine32truck16.com/">
+                        <font size="2">DCFD Engine 32 Track 16</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.gaiaonline.com">
+                        <font size="2">Gaia Online</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.furnation.com/humor/index.htm">
+                        <font size="2">Furry Humor Archive</font>
+                    </a>
+                </p>
+                <p align="center">
+                    <a href="http://www.somafm.com">
+                        <font size="2">Soma FM</font>
+                    </a>
+                </p>
+            </td>
+        </tr>
+    </table>
+</center>

public/index.html

@@ -3,18 +3,25 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Frontpage 25</title>
+        <title>Furry Blue DJ</title>
         <link rel="stylesheet" href="style.css" />
     </head>
     <body>
         <header>
-            <h1>Frontpage 25</h1>
+            <img src="images/fbdj_20_banner.png" />
         </header>
 
         <main>
+    <div align="center">
+            <p>
             <nav id="sidebar">
                 <!-- Menu will be injected by JS -->
             </nav>
+            </p>
+                <p><a href="http://firefox.com/"><img src="images/foxkeh-fx2-125x125.png" /></a></p>
+                <p><a href="https://neocities.org/"><img src="images/neocities.png" width="150px" /></a></p>
+                <p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img src="images/publicdomain.png" width="130px"></a></p>
+            </div>
 
             <section id="content">
                 <h2>Welcome to the Future of the Past</h2>
@@ -25,10 +32,6 @@
             </section>
         </main>
 
-        <footer>
-            <p>&copy; 2025 Frontpage 25</p>
-        </footer>
-
         <script src="script.js"></script>
     </body>
 </html>

public/script.js

@@ -4,7 +4,7 @@ menuToggle.className = "menu-toggle";
 menuToggle.textContent = "☰ Menu";
 document.body.insertBefore(menuToggle, document.body.firstChild);
 
-const sidebar = document.getElementById("sidebar");
+const sidebar = document.getElementById("menu");
 
 menuToggle.addEventListener("click", () => {
   sidebar.classList.toggle("active");
@@ -20,19 +20,15 @@ const menuData = {
       Contents: "content/home.html",
     },
     {
-      Name: "about",
-      Label: "About",
-      Contents: "content/about.html",
+      Name: "ideaofz",
+      Label: "Idea of Zack",
+      Contents: "content/ideaofz.html",
     },
+
     {
-      Name: "services",
-      Label: "Services",
-      Contents: "content/services.html",
-    },
-    {
-      Name: "contact",
-      Label: "Contact",
-      Contents: "content/contact.html",
+      Name: "links",
+      Label: "Links",
+      Contents: "content/links.html",
     },
   ],
 };
@@ -81,3 +77,37 @@ window.addEventListener("load", () => {
   const hash = window.location.hash.substring(1) || "home";
   loadPage(hash);
 });
+
+// ==============================================
+// Copyright 2003 by jsCode.com
+// Source: jsCode.com
+// Author: etLux
+// Free for all; but please leave in the header.
+// ==============================================
+function showImage() {
+  // Set up the image files to be used.
+  var theImages = new Array(); // do not change this
+  // To add more image files, continue with the
+  // pattern below, adding to the array. Rememeber
+  // to increment the theImages[x] index!
+
+  theImages[0] = "images/adorable_z_colored.png";
+  theImages[1] = "images/spit_bomber_tails.png";
+  theImages[2] = "images/THATS_MY_GREEN_EGGS_AND_HAM.png";
+
+  // ======================================
+  // do not change anything below this line
+  // ======================================
+
+  var j = 0;
+  var p = theImages.length;
+
+  var preBuffer = new Array();
+  for (i = 0; i < p; i++) {
+    preBuffer[i] = new Image();
+    preBuffer[i].src = theImages[i];
+  }
+
+  var whichImage = Math.round(Math.random() * (p - 1));
+  document.write('<img src="' + theImages[whichImage] + '">');
+}

public/style.css

@@ -2,20 +2,17 @@
 * {
     margin: 0;
     padding: 0;
-    font-family: Arial;
     box-sizing: border-box;
 }
 
 body {
     font-family: "Trebuchet MS", sans-serif;
-    background-color: #f0f0f0;
+    background-image: url("images/folbkgnd.jpg");
     color: #333;
     line-height: 1.6;
 }
 
 header {
-    background-color: #003366;
-    color: #fff;
     padding: 1em;
     text-align: center;
 }
@@ -30,7 +27,6 @@ main {
 
 nav {
     width: 200px;
-    background-color: #cccccc;
     padding: 1em;
 }
 
@@ -47,7 +43,7 @@ nav ul li a {
     text-decoration: none;
     display: block;
     padding: 5px;
-    background-color: #ddd;
+    background-color: #fff;
     border-radius: 4px;
 }
 
@@ -73,7 +69,6 @@ footer {
     bottom: 0;
     text-align: center;
     padding: 1em;
-    background-color: #003366;
     color: #fff;
     margin-top: 1em;
     width: 100%;