master
Nathan Steel 4 years ago
parent 00f701a8c9
commit d3665e398a

@ -9,19 +9,28 @@ function copyToClipboard(elementId) {
/* Copy the text inside the text field */ /* Copy the text inside the text field */
navigator.clipboard.writeText(copyText); navigator.clipboard.writeText(copyText);
var tooltip = document.getElementById("myTooltip"); var tooltip = document.getElementById("tooltip");
tooltip.innerHTML = "Copied"; tooltip.innerHTML = "Copied";
} }
function resetCopy() { function resetCopy() {
var tooltip = document.getElementById("myTooltip"); var tooltip = document.getElementById("tooltip");
tooltip.innerHTML = "Copy to clipboard"; tooltip.innerHTML = "Copy to clipboard";
} }
// Event Listeners
// tooltipped has tooltip and clipboard classes
//const clipboard = querySelector('.tooltiptext'); //const clipboard = querySelector('.tooltiptext');
const minecraft = document.getElementById('minecraft-clip'); const minecraft = document.getElementById('minecraft-clip');
minecraft.addEventListener('click', copyToClipboard('minecraft-server')); minecraft.addEventListener('click', function (event) { copyToClipboard('minecraft-server'); });
minecraft.addEventListener('mouseout', resetCopy());
var tooltipped = document.getElementsByClassName('tooltipped');
for (var i = 0; i < tooltipped.length; i++) {
//tooltipped[i].addEventListener('click', function (event) { copyToClipboard(); });
tooltipped[i].addEventListener('mouseout', function (event) { resetCopy(); });
}

@ -0,0 +1,80 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Expenses</title>
<meta name="description" content="A breakdown of the monthly expeses of aNetwork to keep servers, etc. operational">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<script src="clipboard.js" defer></script>
<meta name="theme-color" content="#fafafa">
</head>
<body>
<header>
<div class="layout-wrapper">
<a class="logo" href="/">aNetwork</a>
<nav>
<ul class="inline-list">
<li><a href="/">Home</a></li>
<!--<li><a href="#">Servers</a></li>
<li><a href="#">About</a></li>-->
<li><a href="/discord">Discord</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="layout-wrapper">
<h1>Expenses</h1>
<p>We want to be as transparent as possible, so our (est) monthly outgoings will be displayed here.</p>
<p>Estimated expenses will be based on the previous month, however additional servers may be added during the current month.</p>
</section>
<section class="layout-wrapper">
<h2>Current Month</h2>
<h3>Servers</h3>
<p>Minecraft - £0/£10 *</p>
<p>Web Server - £0/£3 *</p>
<h3>Domains</h3>
<p>anetwork.uk - £0.70 (£8.40 annually) **</p>
<hr/>
</section>
<section class="layout-wrapper">
<h2>Last Month</h2>
<h3>Servers</h3>
<p>Minecraft - £0/£10 *</p>
<p>Web Server - £0/£3 *</p>
<h3>Domains</h3>
<p>anetwork.uk - £0.70 (£8.40 annually) **</p>
<hr/>
</section>
<section class="layout-wrapper">
<h2>2 Months Ago</h2>
<h3>Servers</h3>
<p>Minecraft - £0/£10 *</p>
<p>Web Server - £0/£3 *</p>
<hr/>
</section>
<section class="layout-wrapper">
<p>* - Currently hosted on the same internal server. This does not have a UPS or any professional measures against downtime, so costs are estimated based on VPS alternatives to the resources used.</p>
<p>** - Paid annually, but added to monthly breakdowns</p>
<p>Contributing any amount to aNetwork will not be cause affect how you are treat on servers, nor be accounted for in bans/unbans</p>
</section>
</main>
</body>

@ -57,12 +57,12 @@
<img class="centre-image" src="mc.png"/> <img class="centre-image" src="mc.png"/>
<p class="heading">MC</p> <p class="heading">MC</p>
<p class="content"> <p class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis. A publically available minecraft server that is currenly a WIP. i.e. We are trying plugins, and administration to see what people would like best.
</p> </p>
<p id="minecraft-clip" class="tooltipped"> <p id="minecraft-clip" class="tooltipped">
IP: IP:
<span id="minecraft-server" class="clipboard">minecraft.anetwork.uk</span> <span id="minecraft-server" class="clipboard">minecraft.anetwork.uk</span>
<span class="tooltiptext" id="myTooltip">Copy to clipboard</span> <span class="tooltiptext" id="tooltip">Copy to clipboard</span>
</p> </p>
<p>Map: <a href="https://mcmap.anetwork.uk">mcmap.anetwork.uk</a></p> <p>Map: <a href="https://mcmap.anetwork.uk">mcmap.anetwork.uk</a></p>
</div> </div>
@ -72,14 +72,18 @@
<section class="moar"> <section class="moar">
<div class="layout-wrapper"> <div class="layout-wrapper">
<img class="centre-image" src="moo-cow.gif"/> <img class="centre-image" src="moo-cow.gif"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibu</p> <p>aNetwork is a small gaming community with the aim of setting up servers, and events for all to enjoy.</p>
<p>Formed sometime in 2021 as a private, and small growing group, the aim has become to create a more public community, venturing into server hosting to allow people to play the games they want with friends.</p>
</div> </div>
</section> </section>
<section class="extra"> <section class="extra">
<div class="layout-wrapper"> <div class="layout-wrapper">
<h2>YEEE HAAAWWW</h2> <h2>Contribute</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.</p> <p>aNetwork hosts and maintains a number of <a href="servers" target="_blank">servers</a>, and to keep these servers operational we need to pay the big bucks.</p>
<p>If you'd like to contribute, or see a breakdown of our outgoings click below</p>
<a class="button" href="#">Contribute</a>
<a class="button" href="expenses.html">Our Costs</a>
</div> </div>
</section> </section>

Loading…
Cancel
Save