Scribd
Upload
5 views

Text

The document is an HTML webpage designed with a dark theme, featuring a sticky navigation bar and animated elements. It includes sections for displaying domain pricing and VPS plans, with interactive tabs for user navigation. The page is styled with CSS for a modern look and includes JavaScript for tab functionality.

Uploaded by

mrfire95.com
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

Text

The document is an HTML webpage designed with a dark theme, featuring a sticky navigation bar and animated elements. It includes sections for displaying domain pricing and VPS plans, with interactive tabs for user navigation. The page is styled with CSS for a modern look and includes JavaScript for tab functionality.

Uploaded by

mrfire95.com
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 15

<!

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Generated Page</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
color: #fff;
line-height: 1.6;
height: 100%;
overflow-x: hidden;
background-color: #121212;
}

#particles-js {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, #333, #000);
/* Black and dark grey Gradient */
z-index: -1;
/* Behind all content */
}

header {
background-color: rgba(0, 0, 0, 0.8);
/* Black with transparency */
color: #fff;
padding: 20px 0;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
animation: fadeIn 1s ease-in-out;
position: relative;
/* Ensure header is above particles */
z-index: 1;
margin-top: 60px;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.logo {
width: 80px;
height: auto;
vertical-align: middle;
margin-right: 10px;
animation: pulse 2s infinite alternate;
}

@keyframes pulse {
0% {
transform: scale(1);
}

100% {
transform: scale(1.1);
}
}

h1 {
display: inline-block;
vertical-align: middle;
font-size: 2em;
margin: 0;
}

main {
padding: 30px;
max-width: 90%;
margin: 0 auto;
animation: slideInUp 1s ease-in-out;
position: relative;
/* Ensure main is above particles */
z-index: 1;
}

@keyframes slideInUp {
from {
transform: translateY(50px);
opacity: 0;
}

to {
transform: translateY(0);
opacity: 1;
}
}

section {
background-color: rgba(50, 50, 50, 0.9);
padding: 30px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}

section:hover {
transform: translateY(-5px);
}

section h2 {
font-size: 1.8em;
margin-bottom: 15px;
color: #eee;
}

section p {
font-size: 1.1em;
color: #ccc;
margin-bottom: 20px;
}

.discord-button,
.panel-button {
display: inline-block;
padding: 12px 24px;
font-size: 1em;
font-weight: bold;
text-decoration: none;
border-radius: 6px;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.discord-button {
background-color: #7289da;
/* Discord Blue */
color: #fff;
}

.discord-button:hover {
background-color: #677bc4;
transform: scale(1.05);
}

.panel-button {
background-color: #4CAF50;
/* Green */
color: #fff;
}

.panel-button:hover {
background-color: #45a049;
transform: scale(1.05);
}

footer {
background-color: rgba(0, 0, 0, 0.8);
/* Black with transparency */
color: #fff;
text-align: center;
padding: 15px 0;
font-size: 0.9em;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
animation: fadeIn 1s ease-in-out;
position: relative;
/* Ensure footer is above particles */
z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 600px) {
header {
padding: 15px 0;
margin-top: 60px;
}

.logo {
width: 60px;
margin-right: 5px;
}

h1 {
font-size: 1.5em;
}

main {
padding: 20px;
}

section {
padding: 20px;
}

section h2 {
font-size: 1.5em;
}

section p {
font-size: 1em;
}

.discord-button,
.panel-button {
padding: 10px 20px;
font-size: 0.9em;
}

.domains ul,
.vps-plans {
padding: 0;
}

.domains li {
font-size: 0.9em;
}

.plan ul {
padding: 0;
}

.plan li {
font-size: 0.9em;
}
}

/* Additional styles for domains and VPS plans */


.domains ul {
list-style: none;
padding: 0;
}

.domains li {
margin-bottom: 5px;
font-size: 1em;
color: #ddd;
display: flex;
align-items: center;
}

.domains li img {
margin-right: 5px;
}

.vps-plans {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.plan {
background-color: rgba(70, 70, 70, 0.9);
border-radius: 8px;
padding: 15px;
margin: 10px;
width: 300px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.plan h3 {
font-size: 1.4em;
margin-bottom: 10px;
color: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

.plan h3 img {
margin-left: 5px;
}

.plan ul {
list-style: none;
padding: 0;
}

.plan li {
font-size: 1em;
color: #ccc;
margin-bottom: 5px;
display: flex;
align-items: center;
}

.plan li img {
margin-right: 5px;
}
/* Tab Styles */
.tab-container {
width: 100%;
margin: 20px auto;
}

.tab-buttons {
display: flex;
justify-content: space-around;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 8px;
margin-bottom: 10px;
}

.tab-button {
background: none;
border: none;
color: #fff;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 8px;
/* Added border-radius for a smoother look */
}

.tab-button:hover {
background-color: rgba(255, 255, 255, 0.1);
/* Subtle hover feedback */
}

.tab-button.active {
background-color: rgba(255, 255, 255, 0.2);
/* Highlight the active tab */
font-weight: bold;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

/* Sticky Nav Styles */


.sticky-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 100;
/* Ensure it's above all other content */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
padding: 10px 0;
}
.nav-container {
display: flex;
justify-content: space-around;
align-items: center;
/* Vertically center the links */
max-width: 90%;
margin: 0 auto;
}

.nav-button {
color: #fff;
text-decoration: none;
font-size: 1.1em;
padding: 8px 16px;
/* Adjust padding for better touch targets */
border-radius: 5px;
transition: background-color 0.3s ease;
}

.nav-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.nav-button.active {
background-color: rgba(255, 255, 255, 0.2);
/* Highlight the active tab */
font-weight: bold;
}

/* Inner Tab Styles */


.inner-tab-container {
width: 100%;
}

.inner-tab-buttons {
display: flex;
justify-content: flex-start;
/* Align inner tabs to the left */
background-color: rgba(0, 0, 0, 0.7);
/* Darker background for contrast */
border-radius: 8px;
margin-bottom: 10px;
}

.inner-tab-button {
background: none;
border: none;
color: #fff;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 8px;
}

.inner-tab-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.inner-tab-button.active {
background-color: rgba(255, 255, 255, 0.2);
font-weight: bold;
}

.inner-tab-content {
display: none;
}

.inner-tab-content.active {
display: block;
}
body { margin: 0; padding: 0; }
</style>
</head>
<body>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Node</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0/css/all.min.css"
integrity="sha512-
9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnz
Feg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
document.addEventListener('DOMContentLoaded', function () {
const tabButtons = document.querySelectorAll('.nav-button');
const tabContents = document.querySelectorAll('.tab-content');
const innerTabButtons = document.querySelectorAll('.inner-tab-button');
const innerTabContents = document.querySelectorAll('.inner-tab-
content');

function showTab(tabId) {
tabContents.forEach(content => content.classList.remove('active'));
tabButtons.forEach(button => button.classList.remove('active'));

const tabContent = document.getElementById(tabId);


const tabButton = document.querySelector(`.nav-button[data-tab="$
{tabId}"]`);

if (tabContent && tabButton) {


tabContent.classList.add('active');
tabButton.classList.add('active');
}
}

function showInnerTab(tabId) {
innerTabContents.forEach(content =>
content.classList.remove('active'));
innerTabButtons.forEach(button =>
button.classList.remove('active'));

const tabContent = document.querySelector(`#plans .inner-tab-


content#${tabId}`);
const tabButton = document.querySelector(`#plans .inner-tab-buttons
.inner-tab-button[data-inner-tab="${tabId}"]`);

if (tabContent && tabButton) {


tabContent.classList.add('active');
tabButton.classList.add('active');
}
}

tabButtons.forEach(button => {
button.addEventListener('click', function (event) {
event.preventDefault();
const tabId = this.dataset.tab;
showTab(tabId);
if (tabId === 'plans') {
showInnerTab('domains');
}
});
});

innerTabButtons.forEach(button => {
button.addEventListener('click', function (event) {
event.preventDefault();
const tabId = this.dataset.innerTab;
showInnerTab(tabId);
});
});

// Optionally, set a default tab on page load


showTab('plans');
showInnerTab('domains');
});
</script>
</head>

<body>
<div id="particles-js"></div>

<nav class="sticky-nav">
<div class="nav-container">
<a href="#" class="nav-button" data-tab="plans">Plans</a>
<a href="#" class="nav-button" data-tab="community">Community</a>
<a href="#" class="nav-button" data-tab="panel">Panel</a>
<a href="#" class="nav-button" data-tab="dash">Dash</a>

</div>
</nav>

<header>
<img
src="https://cdn.discordapp.com/attachments/1328345961495396392/1344561314089144410
/photo-output.jpg?
ex=67c15bce&is=67c00a4e&hm=a597d3594df5cf670199d9304f3c8857e97a0f5a8e7c0d2f26541b0e
cbd1ca61&"
alt="Dark Node Logo" class="logo">
<h1>Dark Node</h1>
</header>
<main>
<div class="tab-container">
<div id="plans" class="tab-content">
<div class="inner-tab-container">
<div class="inner-tab-buttons">
<button class="inner-tab-button active" data-inner-
tab="domains">Domains</button>
<button class="inner-tab-button" data-inner-tab="vps">VPS
Plans</button>
</div>

<div id="domains" class="inner-tab-content active">


<section class="domains">
<h2>DARK NODES DOMAINS <img

src="https://cdn.discordapp.com/emojis/1344267347632062464.png?size=24"
alt="Darknodes Icon"></h2>
<ul>
<li><img
src="https://cdn.discordapp.com/emojis/1196648650806399048.png?size=24"
alt="Arrow Icon"> .site - 120₹</li>
<li><img
src="https://cdn.discordapp.com/emojis/1196648650806399048.png?size=24"
alt="Arrow Icon"> .fun - 150₹</li>
<li><img
src="https://cdn.discordapp.com/emojis/1196648650806399048.png?size=24"
alt="Arrow Icon"> .shop - 120₹</li>
<li><img
src="https://cdn.discordapp.com/emojis/1196648650806399048.png?size=24"
alt="Arrow Icon"> .org - 800₹</li>
<li><img
src="https://cdn.discordapp.com/emojis/1196648650806399048.png?size=24"
alt="Arrow Icon"> .store - 120₹</li>
<li><img
src="https://cdn.discordapp.com/emojis/1196648650806399048.png?size=24"
alt="Arrow Icon"> .me - 800₹</li>
<li><img
src="https://cdn.discordapp.com/emojis/1196648650806399048.png?size=24"
alt="Arrow Icon"> .online - 200₹</li>
<li><img
src="https://cdn.discordapp.com/emojis/1196648650806399048.png?size=24"
alt="Arrow Icon"> .tech - 200₹</li>
<li><img
src="https://cdn.discordapp.com/emojis/1196648650806399048.png?size=24"
alt="Arrow Icon"> .net - 1200₹</li>
<li><img
src="https://cdn.discordapp.com/emojis/1196648650806399048.png?size=24"
alt="Arrow Icon"> .ai - 7500₹</li>
</ul>
</section>
</div>

<div id="vps" class="inner-tab-content">


<section class="vps-plans">
<h2><img
src="https://cdn.discordapp.com/emojis/1311728853885911080.png?size=24"
alt="Arrow Icon"> DARK NODES VPS PLAN</h2>

<div class="plan">
<h3>WOOD PLAN <img

src="https://cdn.discordapp.com/emojis/1325608919372136488.png?size=24"
alt="Wood Icon"></h3>
<ul>
<li><img
src="https://cdn.discordapp.com/emojis/1342769489875304458.png?size=24"
alt="Ram Icon"> RAM - 8GB</li>
<li><img
src="https://cdn.discordapp.com/emojis/1342769492073386065.png?size=24"
alt="CPU Icon"> CPU - 2 CORES</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608864720093185.png?size=24"
alt="Processor Icon"> PROCESSOR - RYZEN
7 / INTEL XEON</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608848136081488.png?size=24"
alt="Money Icon"> PRICE - 200₹ INR</li>
</ul>
</div>

<div class="plan">
<h3>STONE PLAN <img

src="https://cdn.discordapp.com/emojis/1256599306631118859.png?size=24"
alt="Stone Icon"></h3>
<ul>
<li><img
src="https://cdn.discordapp.com/emojis/1342769489875304458.png?size=24"
alt="Ram Icon"> RAM - 16GB</li>
<li><img
src="https://cdn.discordapp.com/emojis/1342769492073386065.png?size=24"
alt="CPU Icon"> CPU - 4 CORES</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608864720093185.png?size=24"
alt="Processor Icon"> PROCESSOR - RYZEN
7 / INTEL XEON</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608848136081488.png?size=24"
alt="Money Icon"> PRICE - 400₹ INR</li>
</ul>
</div>

<div class="plan">
<h3>COAL PLAN <img

src="https://cdn.discordapp.com/emojis/631754680753717258.png?size=24"
alt="Coal Icon"></h3>
<ul>
<li><img
src="https://cdn.discordapp.com/emojis/1342769489875304458.png?size=24"
alt="Ram Icon"> RAM - 32GB</li>
<li><img
src="https://cdn.discordapp.com/emojis/1342769492073386065.png?size=24"
alt="CPU Icon"> CPU - 8 CORES</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608864720093185.png?size=24"
alt="Processor Icon"> PROCESSOR - RYZEN
7 / INTEL XEON</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608848136081488.png?size=24"
alt="Money Icon"> PRICE - 800₹ INR</li>
</ul>
</div>

<div class="plan">
<h3>IRON PLAN <img

src="https://cdn.discordapp.com/emojis/1223133134250311703.png?size=24"
alt="Iron Icon"></h3>
<ul>
<li><img
src="https://cdn.discordapp.com/emojis/1342769489875304458.png?size=24"
alt="Ram Icon"> RAM - 64GB</li>
<li><img
src="https://cdn.discordapp.com/emojis/1342769492073386065.png?size=24"
alt="CPU Icon"> CPU - 16 CORES</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608864720093185.png?size=24"
alt="Processor Icon"> PROCESSOR - RYZEN
7 / INTEL XEON</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608848136081488.png?size=24"
alt="Money Icon"> PRICE - 1400₹
INR</li>
</ul>
</div>

<div class="plan">
<h3>DIAMOND PLAN <img

src="https://cdn.discordapp.com/emojis/1223132937000587284.png?size=24"
alt="Diamond Icon"></h3>
<ul>
<li><img
src="https://cdn.discordapp.com/emojis/1342769489875304458.png?size=24"
alt="Ram Icon"> RAM - 128GB</li>
<li><img
src="https://cdn.discordapp.com/emojis/1342769492073386065.png?size=24"
alt="CPU Icon"> CPU - 20 CORES</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608864720093185.png?size=24"
alt="Processor Icon"> PROCESSOR - RYZEN
7 / INTEL XEON</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608848136081488.png?size=24"
alt="Money Icon"> PRICE - 2800₹
INR</li>
</ul>
</div>

<div class="plan">
<h3>NETHRITE PLAN <img

src="https://cdn.discordapp.com/emojis/1256599620415520848.png?size=24"
alt="Nethrite Icon"></h3>
<ul>
<li><img
src="https://cdn.discordapp.com/emojis/1342769489875304458.png?size=24"
alt="Ram Icon"> RAM - 256GB</li>
<li><img
src="https://cdn.discordapp.com/emojis/1342769492073386065.png?size=24"
alt="CPU Icon"> CPU - 30 CORES</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608864720093185.png?size=24"
alt="Processor Icon"> PROCESSOR - RYZEN
7 / INTEL XEON</li>
<li><img
src="https://cdn.discordapp.com/emojis/1325608848136081488.png?size=24"
alt="Money Icon"> PRICE - 5600₹
INR</li>
</ul>
</div>
</section>
</div>
</div>
</div>

<div id="community" class="tab-content">


<section class="hero">
<h2>Join Our Discord Community!</h2>
<p>Connect with us and stay updated on the latest news.</p>
<a href="https://discord.gg/ubDwwgyDQR" class="discord-
button">Join Discord Server</a>
</section>
</div>

<div id="panel" class="tab-content">


<section class="panel">
<h2>Control Panel</h2>
<p>Access and manage your hosting services.</p>
<a href="https://panel.darknode.site" class="panel-
button">Access Panel</a>
</section>
</div>

<div id="dash" class="tab-content">


<section class="panel">
<h2>Dash</h2>
<p>Go to the dashboard to see the statistics.</p>
<a href="https://dash.darknodes.site" class="panel-button">Go
to Dashboard</a>
</section>
</div>
</div>
</main>
<footer>
<p>&copy; 2025 Dark Node</p>
</footer>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></
script>
<script src="script.js"></script>

</body>

</html>
<script>
document.addEventListener('DOMContentLoaded', function () {
const tabButtons = document.querySelectorAll('.nav-button');
const tabContents = document.querySelectorAll('.tab-content');
const innerTabButtons = document.querySelectorAll('.inner-tab-button');
const innerTabContents = document.querySelectorAll('.inner-tab-content');

function showTab(tabId) {
tabContents.forEach(content => content.classList.remove('active'));
tabButtons.forEach(button => button.classList.remove('active'));

const tabContent = document.getElementById(tabId);


const tabButton = document.querySelector(`.nav-button[data-tab="$
{tabId}"]`);

if (tabContent && tabButton) {


tabContent.classList.add('active');
tabButton.classList.add('active');
}
}

function showInnerTab(tabId) {
innerTabContents.forEach(content => content.classList.remove('active'));
innerTabButtons.forEach(button => button.classList.remove('active'));

const tabContent = document.querySelector(`#plans .inner-tab-content#$


{tabId}`);
const tabButton = document.querySelector(`#plans .inner-tab-buttons .inner-
tab-button[data-inner-tab="${tabId}"]`);

if (tabContent && tabButton) {


tabContent.classList.add('active');
tabButton.classList.add('active');
}
}

tabButtons.forEach(button => {
button.addEventListener('click', function (event) {
event.preventDefault();
const tabId = this.dataset.tab;
showTab(tabId);
if (tabId === 'plans') {
showInnerTab('domains');
}
});
});

innerTabButtons.forEach(button => {
button.addEventListener('click', function (event) {
event.preventDefault();
const tabId = this.dataset.innerTab;
showInnerTab(tabId);
});
});

// Optionally, set a default tab on page load


showTab('plans');
showInnerTab('domains');
});
</script>
</body>
</html>

You might also like