123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta name="description" content="Starmire - a text-based multiplayer dungeon" />
- <meta name="keywords" content="starmire mud" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Starmire MUD</title>
- <!--sharing tags -->
- <meta property="og:title" content="Starmire" />
- <meta property="og:description" content="Starmire - a text-based multiplayer dungeon" />
- <meta property="og:url" content="http://starmire.eyeofmidas.com/" />
- <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
- <link rel="stylesheet" media="screen" href="./css/main.css">
- </head>
- <body>
- <header id="background-container">
- <h1>Starmire</h1>
- <div id="current"></div>
- </header>
- <nav>
- <ul>
- <li><a href="./">Home</a></li>
- <li><a href="/terminal.html" target="_blank" onclick="window.open('/terminal.html','Starmire Terminal','resizable,height=800,width=600,scrollbars=yes'); return false;">Play</a></li>
- <li><a href="#info">Info</a></li>
- <li><a href="#register">Register</a></li>
- <li><a href="#contact">Contact</a></li>
- </ul>
- </nav>
- <main>
- <section id="hero-section">
- <div class="hero-banner"></div>
- <div class="hero-banner-call-to-action"><a href="#register" class="button">Register</a>
- <a href="/terminal.html" target="_blank" onclick="window.open('/terminal.html','Starmire Terminal','resizable,height=800,width=600,scrollbars=yes'); return false;" class="button">Play</a></div>
- </section>
- <section id="info-section">
- <h2 id="info">Info</h2>
- <p>Starmire is a text-based multiplayer game that allows ultimate flexibility in who you are and how you play. Blah blah blah.</p>
- <h3>Types of Play</h3>
- <p>Starmire works hard to make sure there is content for each type of player.
- <img src="./images/types_of_players.png" style="width: 50%; display: block; margin-left: auto; margin-right: auto;"/>
- <div><a href="/terminal.html" target="_blank" onclick="window.open('/terminal.html','Starmire Terminal','resizable,height=800,width=600,scrollbars=yes'); return false;" class="button">Play</a></div>
- </section>
- <section id="spacer-section-1">
- <div class="hero-banner"></div>
- </section>
- <section id="register-section">
- <h2 id="register">Register</h2>
- <div><div id="registrationError"></div><form method="POST" action="/api/register" id="registrationForm">
- <input type="username" id="username" name="username" placeholder="username" />
- <input type="password" id="password" name="password" placeholder="password" />
- <input type="submit" id="submitRegistration" />
- </form><div id="registrationSuccess"></div></div>
- </section>
- <section id="spacer-section-1">
- <div class="hero-banner"></div>
- </section>
- <section id="contact-section">
- <h2 id="contact">Contact</h2>
- <div>Contact Info</div>
- </section>
- </main>
- <footer>
- <p>Website Provided by <a href="http://copperwirehosting.com" target="_blank">Copper Wire Hosting</a></p>
- </footer>
- <script>
- document.addEventListener('DOMContentLoaded', function(event) {
- var request = new XMLHttpRequest();
- request.open("GET", "/api/current", true);
- request.addEventListener("load", function () {
- var data = JSON.parse(this.responseText);
- if(data.players.length > 0) {
- var ulElement = document.createElement("ul");
- ulElement.className = "player-list";
- for(var i in data.players) {
- var playerName = data.players[i];
- var nameNode = document.createTextNode(playerName);
- var liElement = document.createElement("li");
- liElement.appendChild(nameNode);
- ulElement.appendChild(liElement);
- }
- var currentElement = document.getElementById('current');
- currentElement.innerHTML = "";
- currentElement.appendChild(ulElement);
- }
- });
- request.send();
- });
- document.getElementById("registrationForm").addEventListener("submit", function(event) {
- event.preventDefault();
- var form = document.getElementById("registrationForm");
- var usernameElement = document.getElementById("username");
- var passwordElement = document.getElementById("password");
- var params = [];
- params.push(encodeURIComponent(usernameElement.name) + '=' + encodeURIComponent(usernameElement.value));
- params.push(encodeURIComponent(passwordElement.name) + '=' + encodeURIComponent(passwordElement.value));
- params = params.join('&');
- var request = new XMLHttpRequest();
- request.open(form.method, form.action);
- request.setRequestHeader("Content-type", "application/x-form-urlencoded");
- request.addEventListener("load", function() {
- var response = JSON.parse(request.response);
- if(response.status != "ok") {
- document.getElementById("registrationError").innerHTML = response.error;
- } else {
- document.getElementById("registrationError").style.display = "none";
- document.getElementById("registrationSuccess").innerHTML = "Registration successful! Please connect via telnet or the <a href=\"/terminal.html\" target=\"_blank\">browser</a>.";
- document.getElementById("registrationForm").parentNode.removeChild(document.getElementById("registrationForm"));
- }
- });
- request.send(params);
- return true;
- })
- </script>
- </body>
- </html>
|