Files
fireportal/public/index.html

196 lines
7.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- OpenGraph meta tags -->
<meta property="og:title" content="Fire Portal">
<meta property="og:description" content="IPFS Gateway for Handshake Domains">
<meta property="og:image" content="https://ipfs.woodburn.au/og.png">
<meta property="og:type" content="website">
<title>Fire Portal</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="https://woodburn.au/favicon.png" type="image/png">
<style>
:root {
--bg-color: #121212;
--card-bg-color: #1e1e1e;
--text-color: #e0e0e0;
--accent-color: #6E0E9C;
--link-color: #64b5f6;
--secondary-text: #aaaaaa;
--border-color: #333333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
}
header h1 {
color: var(--accent-color);
}
header p {
color: var(--secondary-text);
}
section {
background-color: var(--card-bg-color);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid var(--border-color);
}
h2, h3 {
color: var(--accent-color);
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.search-form input {
background-color: #2d2d2d;
border: 1px solid var(--border-color);
color: var(--text-color);
padding: 8px 12px;
border-radius: 4px;
}
.search-form button {
background-color: var(--accent-color);
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
code {
background-color: #2d2d2d;
padding: 2px 5px;
border-radius: 3px;
}
footer {
text-align: center;
color: var(--secondary-text);
margin-top: 30px;
padding-top: 15px;
border-top: 1px solid var(--border-color);
}
</style>
<!-- Analytics -->
<script async src="https://umami.woodburn.au/script.js" data-website-id="2ced0833-1c76-4684-880d-65afb58f16f2"></script>
</head>
<body>
<div class="container">
<header>
<h1>Fire Portal</h1>
<p>IPFS Gateway for Handshake Domains</p>
</header>
<main>
<section class="search-section">
<h2>Access Handshake + IPFS Content</h2>
<div class="search-form">
<input type="text" id="domainInput" placeholder="Enter a Handshake domain (e.g., example/)">
<button id="searchBtn">Go</button>
</div>
<div class="example-note">
<p>Examples:</p>
<ul>
<li><a href="#" class="example-link" data-domain="ipfs.act/">ipfs.act/</a> - Example Page created by <b>Nathan.Woodburn/</b></li>
<li><a href="#" class="example-link" data-domain="ipfs.freeconcept/">ipfs.freeconcept/</a> - Example Multipage website created by <b>Nathan.Woodburn/</b></li>
</ul>
</div>
</section>
<section class="info-section">
<h2>About Fire Portal</h2>
<p>
Fire Portal connects Handshake domains to IPFS content, enabling truly decentralized websites.
It resolves Handshake domains, finds their IPFS content identifiers, and serves the content.
</p>
<h3>How it works</h3>
<ol>
<li>A Handshake domain is resolved to get its DNS records</li>
<li>IPFS content identifiers are extracted from TXT records</li>
<li>Content is fetched from the IPFS network</li>
<li>The content is served to your browser</li>
</ol>
<p>
<strong>URL format:</strong> <code>https://ipfs.hnsproxy.au/[domain]/[path]</code><br>
Replace <code>[domain]</code> with any Handshake domain and <code>[path]</code> with an optional path.
</p>
</section>
<section class="info-section">
<h2>How to setup IPFS on your domain</h2>
<p>
To set up your Handshake domain to work with IPFS, follow these steps:
</p>
<ol>
<li>Get the IPFS hash of your content using any IPFS content hosting provider</li>
<li>Update your Handshake domain's DNS records with a TXT record</li>
<li>Use the format: <code>ipfs=Qm...your-ipfs-hash</code> or using IPNS <code>ipns=your-ipns-hash</code></li>
<li>Add an A record to point your domain to this portal <code>192.9.167.104</code> <br>
Alternatively you can use this ALIAS <code>ipfs.hnshosting</code></li>
</li>
<li>Wait a few minutes and you should be able to see your IPFS content on the domain</li>
</ol>
<a href="https://www.youtube.com/watch?v=78oa_a1zlLk" target="_blank" class="video-tutorial">
<strong>Watch a video tutorial</strong>
</a>
</section>
<section class="info-section">
<h2>API Reference</h2>
<p>
Fire Portal provides API endpoints to programmatically interact with the service:
</p>
<ul>
<li>
<strong>Force Refresh:</strong>
<code>GET /api/refresh/{domain}</code> - Forces a refresh of IPFS content for a domain
</li>
</ul>
</section>
</main>
<footer>
<p>&copy; 2025 <a href="https://nathan.woodburn.au" target="_blank">Nathan.Woodburn/</a> | <a href="https://git.woodburn.au/nathanwoodburn/fireportal" target="_blank">Git Repo</a></p>
<p><small>Status: <span id="status-indicator">Checking...</span></small></p>
</footer>
</div>
<script src="app.js"></script>
</body>
</html>