Aurora:HomePageTesting

<!DOCTYPE html> <html lang="en"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>EarthMC Wiki Home</title>
   
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
   <style>
       body {
           font-family: Arial, sans-serif;
           background-color: #E6EFF3;
           color: #333;
       }
       .sidebar {
           background-color: #E6EFF3;
           color: black;
           min-height: 100vh;
           padding: 20px;
           width: 250px;
           transition: transform 0.3s ease;
       }

       .sidebar a {
           color: black;
           text-decoration: none;
           display: block;
           margin: 10px 0;
       }

       .sidebar-toggle {
           display: none; /* Hidden by default */
           position: fixed;
           top: 10px;
           left: 10px;
           background-color: #E6EFF3;
           border: none;
           padding: 10px;
           cursor: pointer;
           z-index: 1000; /* Make sure it is on top */
       }

       .close-btn {
           display: none;
           background-color: transparent;
           border: none;
           color: black;
           font-size: 20px;
           cursor: pointer;
           margin-bottom: 10px;
       }

       @media (max-width: 768px) {
           .sidebar {
               transform: translateX(-100%);
               position: fixed;
               top: 0;
               left: 0;
               width: 250px;
               height: 100vh;
               z-index: 1000;
           }

           .sidebar.open {
               transform: translateX(0);
           }

           .sidebar-toggle {
               display: block; 
           }

           .close-btn {
               display: block; 
           }
       }

       .nav-separator {
           border: none;
           border-top: 1px solid #ccc;
           margin: 10px 0;
       }

       .info-navigation,
       .category-navigation,
       .how-to-edit,
       .additional-info {
           background-color: #F0F0F0;
           border-radius: 5px;
           border-width: 1px;
           border-color: #BCBDBD;
           border-style: solid; 
           padding: 10px;
           margin-bottom: 20px;
       }
       .footer {
           margin-top: 20px;
       }
       .small-icon {
           width: 100px;
           height: 100px;
           object-fit: contain; 
       }
       .icon-grid {
           margin-left: 20px;
           padding-top: 10px;
       }
       .server-selection button.active {
           background-color: #7f8c8d;
           color: white;
           border-color: #7f8c8d;
       }
       .icon-grid .row {
           display: flex;
           flex-wrap: wrap;
           margin: -10px; 
       }
       .icon-grid .col-md-2 {
           padding: 10px; 
           flex: 0 0 20%; 
       }
       .icon-grid img {
           max-width: 100%;
           max-height: 90px; 
           display: block;
           object-fit: contain; 
           margin: 0 auto; 
       }
       .button-group {
           display: flex;
           justify-content: left; 
           gap: 10px; 
       }
       .btn {
           padding: 10px 20px; 
           font-size: 16px; 
           border-width: 1px;
           border-radius: 5px; 
           background-color: #D9D9D9; 
           color: black; 
           cursor: pointer; 
           border-color: #767171;
           transition: background-color 0.3s; 
       }
       a {
           text-decoration: none;
           color: black;
       }

       @media (max-width: 768px) {
           .sidebar {
               padding: 10px;
           }
           .icon-grid .col-md-2 {
               flex: 0 0 50%; 
               max-width: 50%;
           }
           .small-icon {
               width: 80px;
               height: 80px;
           }
           .button-group {
               flex-direction: column;
               align-items: center;
           }
       }

       @media (max-width: 576px) {
           .icon-grid .col-md-2 {
               flex: 0 0 100%; 
               max-width: 100%;
           }
           .small-icon {
               width: 60px;
               height: 60px;
           }
           .button-group {
               gap: 5px; 
           }
       }

   </style>

</head> <body onload="changeServer('Aurora')">

       <button class="sidebar-toggle" onclick="toggleSidebar()">☰</button>
       <nav class="sidebar" id="sidebar">
           <button class="close-btn" onclick="toggleSidebar()">✖</button>

Wiki Menu

           <a href="#">Login with discord</a>
           <a href="#">Create a page</a>
           <a href="#">Recent Changes</a>
           <a href="#">Bring to a random page</a>

Tools

           <a href="#">What links here</a>
           <a href="#">Related Changes</a>
           <a href="#">Special pages</a>
           <a href="#">Printable version</a>
           <a href="#">Permanent link</a>
           <a href="#">Page Information</a>
       </nav>

               <img src="./src/img/EarthMC.net.png" alt="EarthMC Logo" class="img-fluid" style="max-width:100%; max-height: 300px;" >

Welcome to the official <a href="#">Earthmc Wiki</a>, a mediawiki website that any EMC player can participate in. This wiki aims to establish a collection of all things EMC related.

Log in with your discord by clicking the link in the top right corner. this will allow you to interact with pages.

Dont forget to link your wiki pages to your in-game town or nation with the commands /t set wikipage or /n spawn wikipage wikipage respectively. This will create clickable wiki links by selecting territory on the <a href="#">EarthMC map</a>.

<a href="#">Now lets create an entry</a> to build the EarthMC wiki!

Check out some other important pages:

<a href="#"><img src="./src/img/MCQuestionMark.png" width="20px" height="20px">AMA/FAQ</a><a href="#"><img src="src/img/LinkIcon.png" width="20px" height="20px">Other useful links</a>

About EarthMC

</a>

How to join

</a>

Live Map

</a>

Server Economy

</a>

Server Chat

</a>

Premium Rank

</a>

Server Rules

</a>

Quick Shops

</a>

Teleporting

</a>

mcMMO

</a>

Overclaim

</a>

War Info

</a>

Celeste

</a>

Custom Crafting

</a>

Plot Information

</a>

Quaters

</a>

Town Info

</a>

Nation Info

</a>

The Nether

</a>

Walkthrough

</a>

Wiki Rewards

</a>

Navigate to the categories of the EarthMC wiki using the Server Selection:

                   <button id="aurora-btn" onclick="changeServer('Aurora')">Aurora</button>
                   <button id="nova-btn" onclick="changeServer('Nova')">Nova</button>
                   <button id="classic-btn" onclick="changeServer('Classic')">Classic</button>

or search for a specific page.

                   Your selected category is:  Aurora

Use the following button to create a wiki page:

                           <button class="btn">Aurora Page Name</button>
                           <button class="btn">Create Page</button>

                       <img src="./src/img/Earth.webp" class="img-fluid small-icon">

Before Making an edit on the wiki, please check our <a>rules</a> for the Wiki, violation of these rules may result in being blocked

You can check out <a href="#">help category</a> to learn more about the way articles should be written
<a href="#">Rewards</a> are available in game for contributing to the Wiki
All articles are required to follow thier respective templates, please check out the <a href="#">Template Directory</a> page before creating a page
Vandalizing articles in any way is not allowed and will result in a ban. Your changes to the wiki will be reverted anyway.

                           <button class="btn">Recent New Page</button>
                           <button class="btn">Recent Changes</button>
                           <button class="btn">Your Watchlist</button>
                           <button class="btn" style="padding-left: 60px; padding-right: 60px;">Log</button>
                           <button class="btn">Statistics</button>

   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

   <script>

const servers = {

   Aurora: [
       { src: './src/img/MCBell.png', title: 'Towns', link: '#' },
       { src: './src/img/MCNetherStar.png', title: 'Nations', link: '#' },
       { src: './src/img/MCShield.png', title: 'Alliances', link: '#' },
       { src: './src/img/MCDiamondSword.webp', title: 'Wars', link: '#' },
       { src: './src/img/MCPlayerhead.png', title: 'Players', link: '#' },
       { src: './src/img/MCChest.png', title: 'Miscellaneous', link: '#' },
       { src: './src/img/minecraftbow.webp', title: 'Battles', link: '#' },
       { src: './src/img/MCFlintandsteal.png', title: 'Conflicts', link: '#' },
       { src: './src/img/MCGoldIngot.png', title: 'Businesses', link: '#' },
       { src: './src/img/MCBookandQuill.png', title: 'Organizations', link: '#' },
       
      
   ],
   Nova: [
   { src: './src/img/MCBell.png', title: 'Towns', link: '#' },
       { src: './src/img/MCNetherStar.png', title: 'Nations', link: '#' },
       { src: './src/img/MCShield.png', title: 'Alliances', link: '#' },
       { src: './src/img/MCDiamondSword.webp', title: 'Wars', link: '#' },
       { src: './src/img/MCPlayerhead.png', title: 'Players', link: '#' },
       { src: './src/img/MCChest.png', title: 'Miscellaneous', link: '#' },
       { src: './src/img/minecraftbow.webp', title: 'Battles', link: '#' },
       { src: './src/img/MCFlintandsteal.png', title: 'Conflicts', link: '#' },
       { src: './src/img/MCGoldIngot.png', title: 'Businesses', link: '#' },
       { src: './src/img/MCBookandQuill.png', title: 'Organizations', link: '#' },
   ],
   Classic: [
   { src: './src/img/MCBell.png', title: 'Towns', link: '#' },
       { src: './src/img/MCNetherStar.png', title: 'Nations', link: '#' },
       { src: './src/img/MCShield.png', title: 'Alliances', link: '#' },
       { src: './src/img/MCDiamondSword.webp', title: 'Wars', link: '#' },
       { src: './src/img/MCPlayerhead.png', title: 'Players', link: '#' },
       { src: './src/img/MCChest.png', title: 'Miscellaneous', link: '#' },
       { src: './src/img/minecraftbow.webp', title: 'Battles', link: '#' },
       { src: './src/img/MCFlintandsteal.png', title: 'Conflicts', link: '#' },
       { src: './src/img/MCGoldIngot.png', title: 'Businesses', link: '#' },
       { src: './src/img/MCBookandQuill.png', title: 'Organizations', link: '#' },
   ]

};

function changeServer(serverName) {

   const container = document.getElementById('icon-container');
   container.innerHTML = ;

   const serverNameElem = document.getElementById('server-name');
   serverNameElem.textContent = serverName;

   document.querySelectorAll('.server-selection button').forEach(button => {
       button.classList.remove('active');
   });
   document.getElementById(`${serverName.toLowerCase()}-btn`).classList.add('active');

   const icons = servers[serverName];
   let rowDiv = document.createElement('div');
   rowDiv.className = 'row';

   icons.forEach((icon, index) => {
       if (index > 0 && index % 5 === 0) {
           container.appendChild(rowDiv); 
           rowDiv = document.createElement('div'); 
           rowDiv.className = 'row'; 
       }

       const colDiv = document.createElement('div');
       colDiv.className = 'col-md-2';

       const a = document.createElement('a');
       a.href = icon.link; 
       a.title = `More about ${icon.title}`;

       const img = document.createElement('img');
       img.src = icon.src;
       img.className = 'img-fluid';
       img.alt = icon.title;
       img.width = 200;
       img.height = 200;

       const p = document.createElement('p');
       p.textContent = `${icon.title}`;

       a.appendChild(img);
       a.appendChild(p);

       colDiv.appendChild(a);
       rowDiv.appendChild(colDiv);
   });

   container.appendChild(rowDiv);

}

function toggleSidebar() {

   const sidebar = document.getElementById('sidebar');
   sidebar.classList.toggle('open');

}

   </script>

</body> </html>

Aurora:HomePageTesting

Contents

Wiki Menu

Tools

EarthMC Info Navigation - Quick access to all relevant EMC info:

Wiki Category Navigation - Quick access to valuble Information:

How to edit The EarthMC Wiki:

Additional Information:

Navigation menu

Aurora:HomePageTesting

Wiki Menu

Tools

EarthMC Info Navigation - Quick access to all relevant EMC info:

Wiki Category Navigation - Quick access to valuble Information:

How to edit The EarthMC Wiki:

Additional Information:

Navigation menu

Search