🔄 StateSync
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warden Node Setup - CoinSeyir</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/night-owl.min.css">
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #2d2d2d;
color: #d6d6d6;
margin: 0;
padding: 0;
max-width: 75%;
margin: 0 auto;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #222;
border-radius: 10px;
margin-bottom: 50px;
}
.navbar a {
display: inline-block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
border-radius: 15px;
margin: 0 10px;
font-weight: bold;
transition: background-color 0.3s, transform 0.3s;
}
.explorer-button {
background-color: #0066cc;
}
.stake-button {
background-color: #0066cc;
}
.navbar a:hover {
transform: scale(1.1);
}
.merienda-regular {
font-family: "Merienda", cursive;
font-weight: 400;
font-style: normal;
}
.logo {
font-size: 45px;
cursor: pointer;
}
.container {
text-align: center;
position: relative;
}
.section-button {
display: inline-block;
width: 200px;
height: 100px;
cursor: pointer;
border: 2px solid transparent;
border-radius: 10px;
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
line-height: 100px;
transition: border-color 0.3s, background-color 0.3s;
background-color: #1e1e1e;
color: #d6d6d6;
}
.section-button:hover,
.section-button.active {
border-color: #00aaff;
background-color: #111;
}
.content {
display: none;
margin-top: 20px;
text-align: left;
overflow-x: auto;
}
.content.active {
display: block;
}
.box {
background-color: #1e1e1e;
padding: 10px;
border-radius: 10px;
margin-bottom: 5px;
line-height: 1.6;
}
h2,
h3,
h4 {
color: #00aaff;
}
h4 {
margin-top: 0;
margin-bottom: 4px;
}
p,
li {
font-size: 13px;
line-height: 1.1;
color: #d6d6d6;
}
a {
color: #00aaff;
text-decoration: none;
}
.footer {
background-color: #111;
padding: 20px;
text-align: center;
border-radius: 15px;
margin-top: 20px;
}
.rent-server-links {
display: flex;
justify-content: flex-start;
margin-top: 10px;
margin-left: 10px;
}
.rent-server-link {
display: block;
color: #00aaff;
margin: 0 15px;
}
.sponsor-title {
color: #c300ff;
margin-right: 15px;
}
</style>
</head>
<body>
<!-- Navbar Başlangıç -->
<div class="navbar">
<a href="https://explorer.ynranil.com/warden" class="explorer-button">Explorer</a>
<span class="logo merienda-regular">CoinSeyir</span>
<a href="https://explorer.ynranil.com/warden/staking/wardenvaloper1cuajxkt9rzhlwwxftn73rkup5z0fcprvzea33r" class="stake-button">Stake</a>
</div>
<!-- Navbar Bitiş -->
<!-- Gruplandırma Başlangıç -->
<div class="container">
<div class="images">
<div class="section-button active" id="install-button" onclick="showContent('install')">⬇️ Install</div>
<div class="section-button" id="snapshot-button" onclick="showContent('snapshot')">📸 Snapshot</div>
<div class="section-button" id="state-sync-button" onclick="showContent('state-sync')">🔁 State Sync</div>
<div class="section-button" id="info-button" onclick="showContent('info')">📜 Info</div>
<div class="section-button" id="cheat-sheet-button" onclick="showContent('cheat-sheet')">📌 Cheat Sheet</div>
</div>
<br>
<div class="rent-server-links">
<span class="sponsor-title">Rent a server:</span>
<a href="https://hetzner.cloud/?ref=xs4n5JrSuKfS" class="rent-server-link">Hetzner</a>
<a href="https://www.serverprovider2.com" class="rent-server-link">Contabo</a>
</div>
<br>
<!-- install içeriği başlangıç -->
<div id="install" class="content active">
<iframe src="https://services.ynranil.com/testnet/alignedlayer" style="width: 100%; height: 500px; border: none;"></iframe>
</div>
<!-- install içeriği bitiş -->
<!-- snapshot içeriği başlangıç -->
<div id="snapshot" class="content">
<iframe src="https://services.ynranil.com/testnet/alignedlayer/snapshot" style="width: 100%; height: 500px; border: none;"></iframe>
</div>
<!-- snapshot içeriği bitiş -->
<!-- state-sync içeriği başlangıç -->
<div id="state-sync" class="content">
<iframe src="https://services.ynranil.com/testnet/alignedlayer/statesync" style="width: 100%; height: 500px; border: none;"></iframe>
</div>
<!-- state-sync içeriği bitiş -->
<!-- info içeriği başlangıç -->
<div id="info" class="content">
<iframe src="https://services.ynranil.com/testnet/alignedlayer/info" style="width: 100%; height: 500px; border: none;"></iframe>
</div>
<!-- info içeriği bitiş -->
<!-- cheat-sheet içeriği başlangıç -->
<div id="cheat-sheet" class="content">
<iframe src="https://services.ynranil.com/testnet/alignedlayer/useful-commands" style="width: 100%; height: 500px; border: none;"></iframe>
</div>
<!-- cheat-sheet içeriği bitiş -->
<div class="footer">
<p>CoinSeyir © 2024</p>
</div>
</div>
<!-- Gruplandırma Bitiş -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
function showContent(section) {
const buttons = document.querySelectorAll('.section-button');
const contents = document.querySelectorAll('.content');
buttons.forEach(button => {
button.classList.remove('active');
});
contents.forEach(content => {
content.classList.remove('active');
});
document.getElementById(section).classList.add('active');
document.getElementById(section + '-button').classList.add('active');
}
</script>
</body>
</html>
Last updated