Aurora:HomePageTesting

From EarthMC
Revision as of 10:44, 28 August 2024 by veyronity (talk | contribs)
Jump to navigation Jump to search

<!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>


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


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

About EarthMC

</a>
<a href="#"><img src="./src/img/MinecraftGrassBlockLogo.png" class="img-fluid small-icon">

How to join

</a>
<a href="#"><img src="./src/img/MCMap.png" class="img-fluid small-icon">

Live Map

</a>
<a href="#"><img src="./src/img/GoldBlock.png" class="img-fluid small-icon">

Server Economy

</a>
<a href="#"><img src="./src/img/MCSign.png" class="img-fluid small-icon">

Server Chat

</a>
<a href="#"><img src="./src/img/Premium.webp" class="img-fluid small-icon">

Premium Rank

</a>
<a href="#"><img src="./src/img/MCBookshelf.png" class="img-fluid small-icon">

Server Rules

</a>
<a href="#"><img src="./src/img/MCQuickshopIcon.png" class="img-fluid small-icon">

Quick Shops

</a>
<a href="#"><img src="./src/img/MCEnderpearl.png" class="img-fluid small-icon">

Teleporting

</a>
<a href="#"><img src="./src/img/mcMMO.png" class="img-fluid small-icon">

mcMMO

</a>
<a href="#"><img src="./src/img/MEWOverclaimLogo.png" class="img-fluid small-icon">

Overclaim

</a>
<a href="#"><img src="./src/img/MCNetheriteSword.png" class="img-fluid small-icon">

War Info

</a>
<a href="#"><img src="./src/img/MCFireCharge.png" class="img-fluid small-icon">

Celeste

</a>
<a href="#"><img src="./src/img/MCCraftingTable.png" class="img-fluid small-icon">

Custom Crafting

</a>
<a href="#"><img src="./src/img/MCVillageHouse.png" class="img-fluid small-icon">

Plot Information

</a>
<a href="#"><img src="./src/img/MCFlint.png" class="img-fluid small-icon">

Quaters

</a>
<a href="#"><img src="./src/img/MCBell.png" class="img-fluid small-icon">

Town Info

</a>
<a href="#"><img src="./src/img/MCNetherStar.png" class="img-fluid small-icon">

Nation Info

</a>
<a href="#"><img src="./src/img/MCNetherrack.png" class="img-fluid small-icon">

The Nether

</a>
<a href="#"><img src="./src/img/MCpaper.png" class="img-fluid small-icon">

Walkthrough

</a>
<a href="#"><img src="./src/img/EMCWikiReward.png" class="img-fluid small-icon">

Wiki Rewards

</a>

Wiki Category Navigation - Quick access to valuble Information:

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


How to edit The EarthMC Wiki:


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


Additional Information:


  • 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>

Retrieved from "https://wiki.earthmc.net/index.php?title=Aurora:HomePageTesting&oldid=244479"