Scribd
Upload
5 views15 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views15 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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