Ecosystem/xmr-remote-nodes
1
0
Fork 0
mirror of https://github.com/ditatompel/xmr-remote-nodes.git synced 2024-12-23 03:59:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
xmr-remote-nodes/internal/handler/views/home.templ
Christian Ditaputratama a8c94ca0aa
Some checks are pending
Test / test (push) Waiting to run
Details
feat!: Added Add node form and action
2024-11-04 23:53:09 +07:00

206 lines
15 KiB
Text
Raw Blame History

package views
templ Home() {
<!-- Hero -->
<section class="relative overflow-hidden pt-6">
@heroGradient()
<div class="relative z-10">
<div class="max-w-4xl mx-auto px-4 pt-10 pb-6 sm:px-6 lg:px-8 lg:pt-16">
<div class="text-center">
<h1 class="block font-extrabold text-4xl md:text-5xl lg:text-6xl text-neutral-200 mt-5">Monero Remote Node</h1>
<p class="text-lg text-neutral-300 mt-2">A website that helps you monitor your favourite Monero remote nodes, but YOU BETTER RUN AND USE YOUR OWN NODE.</p>
<div class="mt-3 gap-2">
<a href="https://www.getmonero.org/" target="_blank" rel="noopener" class="btn-link">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 496 512" fill="currentColor"><path d="M352 384h108.4C417 455.9 338.1 504 248 504S79 455.9 35.6 384H144V256.2L248 361l104-105v128zM88 336V128l159.4 159.4L408 128v208h74.8c8.5-25.1 13.2-52 13.2-80C496 119 385 8 248 8S0 119 0 256c0 28 4.6 54.9 13.2 80H88z"></path></svg>
GetMonero.org
</a>
<a href="https://github.com/monero-project" target="_blank" rel="noopener" class="btn-link">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>
monero-project
</a>
<a href="https://www.reddit.com/r/Monero/" target="_blank" rel="noopener" class="btn-link">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 512 512"><path d="M373 138.6c-25.2 0-46.3-17.5-51.9-41l0 0c-30.6 4.3-54.2 30.7-54.2 62.4l0 .2c47.4 1.8 90.6 15.1 124.9 36.3c12.6-9.7 28.4-15.5 45.5-15.5c41.3 0 74.7 33.4 74.7 74.7c0 29.8-17.4 55.5-42.7 67.5c-2.4 86.8-97 156.6-213.2 156.6S45.5 410.1 43 323.4C17.6 311.5 0 285.7 0 255.7c0-41.3 33.4-74.7 74.7-74.7c17.2 0 33 5.8 45.7 15.6c34-21.1 76.8-34.4 123.7-36.4l0-.3c0-44.3 33.7-80.9 76.8-85.5C325.8 50.2 347.2 32 373 32c29.4 0 53.3 23.9 53.3 53.3s-23.9 53.3-53.3 53.3zM157.5 255.3c-20.9 0-38.9 20.8-40.2 47.9s17.1 38.1 38 38.1s36.6-9.8 37.8-36.9s-14.7-49.1-35.7-49.1zM395 303.1c-1.2-27.1-19.2-47.9-40.2-47.9s-36.9 22-35.7 49.1c1.2 27.1 16.9 36.9 37.8 36.9s39.3-11 38-38.1zm-60.1 70.8c1.5-3.6-1-7.7-4.9-8.1c-23-2.3-47.9-3.6-73.8-3.6s-50.8 1.3-73.8 3.6c-3.9 .4-6.4 4.5-4.9 8.1c12.9 30.8 43.3 52.4 78.7 52.4s65.8-21.6 78.7-52.4z"></path></svg>
r/Monero
</a>
<a href="https://x.com/monero" target="_blank" rel="noopener" class="btn-link">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg>
{ "@monero" }
</a>
<a href="https://www.facebook.com/monerocurrency/" target="_blank" rel="noopener" class="btn-link">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 512 512"><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"></path></svg>
monerocurrency
</a>
<a href="https://telegram.me/monero" target="_blank" rel="noopener" class="btn-link">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"></path></svg>
monero
</a>
</div>
</div>
<div class="max-w-2xl text-center mx-auto mt-8 prose prose-invert">
<p>If you're new to Monero, the official links above is a perfect place to start.</p>
<p>
Of course, there are lots of personal and community sites which generally discusses a lot about Monero, such as
for _, link := range communityLinks {
<a href={ templ.URL(link.URI) } class="external" target="_blank" rel="noopener">{ link.Text }</a>,
}
etc; can be an other good reference for you.
</p>
</div>
</div>
</div>
</section>
<!-- End Hero -->
<!-- Alt Nav Section -->
<section class="max-w-5xl px-4 pb-10 sm:px-6 lg:px-8 mx-auto">
<div class="grid sm:grid-cols-2 gap-3 sm:gap-6">
<a href="/remote-nodes" class="group flex flex-col text-center bg-neutral-900 border border-orange-400 shadow-sm rounded-xl transition hover:shadow-md hover:brightness-125">
<div class="p-4 md:p-5">
<div class="grow">
<p class="font-semibold text-orange-400">Remote Nodes</p>
<p class="text-sm">List of submitted Monero remote nodes you can use when you <strong>cannot</strong> run your own node.</p>
</div>
</div>
</a>
<a href="/add-node" class="group flex flex-col text-center bg-neutral-900 border border-orange-400 shadow-sm rounded-xl transition hover:shadow-md hover:brightness-125">
<div class="p-4 md:p-5">
<div class="grow">
<p class="font-semibold text-orange-400">Add Node</p>
<p class="text-sm">Add your Monero public node to be monitored and see how it performs.</p>
</div>
</div>
</a>
</div>
</section>
<!-- End Alt Nav Section -->
<!-- My Public Nodes Section -->
<section id="my-nodes" class="bg-neutral-800">
<div class="max-w-5xl px-4 py-10 sm:px-6 lg:px-8 mx-auto">
<div class="max-w-2xl text-center mx-auto mb-8 prose prose-invert">
<p>You can find few resources I provide related to Monero below:</p>
</div>
<!-- Grid -->
<div class="grid gap-2 sm:grid-cols-2 sm:gap-3">
<!-- Card -->
<div class="group flex flex-col text-center gap-2">
<h2 class="font-semibold text-neutral-200 text-3xl">My Stagenet Public Node</h2>
<p>Stagenet is what you need to learn Monero safely. Stagenet is technically equivalent to mainnet, both in terms of features and consensus rules.</p>
<div>
<label for="stagenet-p2p" class="sr-only">Stagenet P2P</label>
<div class="flex rounded-lg shadow-sm">
<span class="px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-neutral-700 bg-neutral-700 text-sm">
<span class="text-sm text-neutral-400">P2P</span>
</span>
<input type="text" id="stagenet-p2p" name="stagenet-p2p" class="py-3 px-4 block w-full text-neutral-400 bg-neutral-900 border-neutral-700 shadow-sm rounded-0 text-sm focus:z-10 focus:border-orange-500 focus:ring-orange-500" value="stagenet.xmr.ditatompel.com:38080" readonly/>
<button class="clipboard copy-input" data-clipboard-target="#stagenet-p2p">
Copy
</button>
</div>
</div>
<div>
<label for="stagenet-rpc" class="sr-only">Stagenet RPC</label>
<div class="flex rounded-lg shadow-sm">
<span class="px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-neutral-700 bg-neutral-700 text-sm">
<span class="text-sm text-neutral-400">RPC</span>
</span>
<input type="text" id="stagenet-rpc" name="stagenet-rpc" class="py-3 px-4 block w-full text-neutral-400 bg-neutral-900 border-neutral-700 shadow-sm rounded-0 text-sm focus:z-10 focus:border-orange-500 focus:ring-orange-500" value="stagenet.xmr.ditatompel.com:38089" readonly/>
<button class="clipboard copy-input" data-clipboard-target="#stagenet-rpc">
Copy
</button>
</div>
</div>
<div>
<label for="stagenet-ssl" class="sr-only">Stagenet RPC SSL</label>
<div class="flex rounded-lg shadow-sm">
<span class="px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-neutral-700 bg-neutral-700 text-sm">
<span class="text-sm text-neutral-400">RPC SSL</span>
</span>
<input type="text" id="stagenet-ssl" name="stagenet-ssl" class="py-3 px-4 block w-full text-neutral-400 bg-neutral-900 border-neutral-700 shadow-sm rounded-0 text-sm focus:z-10 focus:border-orange-500 focus:ring-orange-500" value="stagenet.xmr.ditatompel.com:443" readonly/>
<button class="clipboard copy-input" data-clipboard-target="#stagenet-ssl">
Copy
</button>
</div>
</div>
</div>
<!-- Card -->
<div class="group flex flex-col text-center gap-2">
<h2 class="font-semibold text-neutral-200 text-3xl">My Testnet Public Node</h2>
<p>Testnet is the <em>"experimental"</em> network and blockchain where things get released long before mainnet. As a normal user, use mainnet instead.</p>
<div>
<label for="testnet-p2p" class="sr-only">Testnet P2P</label>
<div class="flex rounded-lg shadow-sm">
<span class="px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-neutral-700 bg-neutral-700 text-sm">
<span class="text-sm text-neutral-400">P2P</span>
</span>
<input type="text" id="testnet-p2p" name="testnet-p2p" class="py-3 px-4 block w-full text-neutral-400 bg-neutral-900 border-neutral-700 shadow-sm rounded-0 text-sm focus:z-10 focus:border-orange-500 focus:ring-orange-500" value="testnet.xmr.ditatompel.com:28080" readonly/>
<button class="clipboard copy-input" data-clipboard-target="#testnet-p2p">
Copy
</button>
</div>
</div>
<div>
<label for="testnet-rpc" class="sr-only">Testnet RPC</label>
<div class="flex rounded-lg shadow-sm">
<span class="px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-neutral-700 bg-neutral-700 text-sm">
<span class="text-sm text-neutral-400">RPC</span>
</span>
<input type="text" id="testnet-rpc" name="testnet-rpc" class="py-3 px-4 block w-full text-neutral-400 bg-neutral-900 border-neutral-700 shadow-sm rounded-0 text-sm focus:z-10 focus:border-orange-500 focus:ring-orange-500" value="testnet.xmr.ditatompel.com:28089" readonly/>
<button class="clipboard copy-input" data-clipboard-target="#testnet-rpc">
Copy
</button>
</div>
</div>
<div>
<label for="testnet-ssl" class="sr-only">Testnet RPC SSL</label>
<div class="flex rounded-lg shadow-sm">
<span class="px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-neutral-700 bg-neutral-700 text-sm">
<span class="text-sm text-neutral-400">RPC SSL</span>
</span>
<input type="text" id="testnet-ssl" name="testnet-ssl" class="py-3 px-4 block w-full text-neutral-400 bg-neutral-900 border-neutral-700 shadow-sm rounded-0 text-sm focus:z-10 focus:border-orange-500 focus:ring-orange-500" value="testnet.xmr.ditatompel.com:443" readonly/>
<button class="clipboard copy-input" data-clipboard-target="#testnet-ssl">
Copy
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End My Public Nodes Section -->
<!-- Quote Section -->
<section class="max-w-5xl px-4 py-10 sm:px-6 lg:px-8 mx-auto">
<blockquote class="relative">
<svg class="absolute -top-6 -start-8 size-16 text-neutral-700" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z" fill="currentColor"></path>
</svg>
<div class="relative z-10 text-center">
<p class="text-xl text-white md:text-2xl md:leading-normal">
<em>
Since we desire privacy, we must ensure that each party to a transaction have knowledge only of that which is directly necessary for that transaction.
</em>
</p>
<p class="my-2">
<strong>Eric Hughes</strong> in <a href="https://www.activism.net/cypherpunk/manifesto.html" class="external" target="_blank" rel="noopener"><cite title="Source Title">A Cypherpunk's Manifesto</cite></a>.
</p>
</div>
</blockquote>
</section>
<!-- End Quote Section -->
<hr class="border-orange-400 mx-auto max-w-3xl"/>
<!-- Monero Donation Section -->
<section id="monero-donation" class="max-w-5xl px-4 py-10 sm:px-6 lg:px-8 mx-auto text-center">
<div class="mx-auto flex w-full max-w-4xl flex-col md:flex-row items-center gap-2 md:gap-10">
<div class="md:basis-3/4">
<p>If you find this project useful, please consider making a donation to help cover the ongoing expenses. Your contribution will go towards ensuring the continued availability of <strong>this website</strong>, my <strong>stagenet</strong> and <strong>testnet</strong> public nodes.</p>
<label for="donate" class="block text-sm text-white font-medium my-2">XMR Donation address:</label>
<textarea id="donate" class="py-3 px-4 block w-full text-neutral-400 bg-neutral-900 border-neutral-700 rounded-lg text-sm focus:border-neutral-500 focus:ring-neutral-600" rows="3" readonly>8BWYe6GzbNKbxe3D8mPkfFMQA2rViaZJFhWShhZTjJCNG6EZHkXRZCKHiuKmwwe4DXDYF8KKcbGkvNYaiRG3sNt7JhnVp7D</textarea>
<button type="button" class="clipboard mt-2 py-2 px-3 inline-flex items-center gap-x-2 text-sm font-bold rounded-full border border-transparent bg-orange-600 text-white hover:bg-orange-500 focus:outline-none disabled:bg-green-600 disabled:opacity-60 disabled:pointer-events-none" data-clipboard-target="#donate" data-success-text="Donation Address Copied! 🤩">
Copy Donation Address
</button>
</div>
<div class="md:basis-1/4">
<img src="/assets/img/monerotip.png" class="w-full pb-2" alt="ditatompel's monero address"/>
<p>Thank you so much! It means a lot to me. 🥰</p>
</div>
</div>
</section>
}
Reference in a new issue View git blame Copy permalink