netget
Version:
Rette Adepto/ Recibido Directamente.
129 lines (112 loc) • 3.94 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netget Gateway</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
p {
font-family: 'Roboto', sans-serif;
}
.main {
font-size: 18px; /* Or any size you prefer */
font-weight: 700; /* Bold */
}
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Press Start 2P', cursive;
background: #020708;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(6, 31, 58, 0.2) 50%, transparent 50%),
linear-gradient(rgba(0, 0, 0, 0.2) 50%, transparent 50%);
background-size: 100% 25px, 50px 50px, 50px 50px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
color: #333;
}
body::before {
background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
background-size: 50px 50px;
opacity: 0.3;
}
.container {
text-align: center;
padding: 20px;
border: 5px solid #333;
background: #fff;
max-width: 666px;
box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
h1 {
color: #ff6347; /* Tomato */
text-shadow: 3.5px 3.5px 0 #333;
font-size: 1.6rem;
line-height: 2.5rem;
}
.action-button, .info-button {
font-family: 'Press Start 2P', cursive;
background-color: #333;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 20px auto;
cursor: pointer;
}
.info-button {
margin: 0;
padding: 5px 10px;
font-size: 0.75rem;
}
.pixel-info {
display: none;
margin-top: 10px;
}
@media (max-width: 768px) {
h1 {
font-size: 1.5rem;
line-height: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1><%= title %></h1>
<p><b><%- message %></b></p>
<% if (showDomainListLink) { %>
<a href="/domainList" class="action-button">View Domain List</a>
<% } %>
<button class="info-button" onclick="toggleInfo()">
<i class="fas fa-info-circle"></i>
</button>
<div id="pixelGrid" class="pixel-info"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
updatePixelGrid();
});
function updatePixelGrid() {
const width = window.innerWidth;
const height = window.innerHeight;
const pixelGrid = document.getElementById('pixelGrid');
pixelGrid.textContent = `Size of the PixelGrid: ${width} x ${height}`;
}
function toggleInfo() {
const pixelGrid = document.getElementById('pixelGrid');
pixelGrid.style.display = pixelGrid.style.display === 'block' ? 'none' : 'block';
}
window.addEventListener('resize', updatePixelGrid);
</script>
</div>
</body>
</html>