src/ui/hosting.html
Rama main · réplica de lectura del repositorio original.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Choose hosting, review a manual plan, and download files without deploying anything." />
<title>Relmio | Hosting options</title>
<link rel="icon" href="/relmio-icon-rounded.svg" type="image/svg+xml" />
<link rel="stylesheet" href="/relmio-ui.css" />
<link rel="stylesheet" href="/hosting.css" />
<link rel="stylesheet" href="/guide.css" />
<script src="/session-bootstrap.js"></script>
<script src="/theme.js" type="module"></script>
<script src="/hosting.js" type="module"></script>
<script src="/guide.js" type="module"></script>
</head>
<body class="rm-app rm-app--fit hosting-page" data-hosting-view="choose" data-guide-page="hosting">
<a class="rm-skip-link" href="#main-content">Skip to hosting options</a>
<header class="rm-topbar">
<div class="rm-topbar__inner">
<a class="rm-brand" href="/" data-wizard-route="/" aria-label="Relmio home">
<img class="rm-brand__logo" src="/relmio-icon-96.png" width="32" height="32" alt="" />
<span>Relmio</span>
</a>
<nav class="rm-nav" aria-label="Primary">
<ul class="rm-nav__list">
<li><a class="rm-nav__link" href="/" data-wizard-route="/">Setup</a></li>
<li><a class="rm-nav__link" href="/local" data-wizard-route="/local">This computer</a></li>
<li><a class="rm-nav__link" href="/hosting" data-wizard-route="/hosting" aria-current="page">Hosting options</a></li>
<li><a class="rm-nav__link" href="https://relmio.jpfusin.tech/docs" target="_blank" rel="noopener noreferrer">Docs<span class="rm-icon rm-icon--external rm-icon--xs" aria-hidden="true"></span><span class="rm-visually-hidden"> (opens in a new tab)</span></a></li>
</ul>
</nav>
<div class="rm-topbar__actions">
<span class="rm-status rm-topbar__wide" data-tone="success"><span class="rm-status__dot"></span>Runs on this computer</span>
<button id="guide-toggle" class="rm-icon-button" type="button" aria-pressed="false" aria-label="Setup guide" title="Setup guide" hidden><span class="rm-icon rm-icon--help" aria-hidden="true"></span></button>
<fieldset class="rm-segmented">
<legend class="rm-visually-hidden">Color theme</legend>
<label class="rm-segmented__item" title="System"><input class="rm-segmented__input" type="radio" name="color-theme" value="system" checked /><span class="rm-icon rm-icon--monitor rm-icon--sm" aria-hidden="true"></span><span class="rm-visually-hidden">System</span></label>
<label class="rm-segmented__item" title="Light"><input class="rm-segmented__input" type="radio" name="color-theme" value="light" /><span class="rm-icon rm-icon--sun rm-icon--sm" aria-hidden="true"></span><span class="rm-visually-hidden">Light</span></label>
<label class="rm-segmented__item" title="Dark"><input class="rm-segmented__input" type="radio" name="color-theme" value="dark" /><span class="rm-icon rm-icon--moon rm-icon--sm" aria-hidden="true"></span><span class="rm-visually-hidden">Dark</span></label>
</fieldset>
<a class="rm-chip rm-topbar__wide" data-rm-repo-link href="https://github.com/Demonbane18/relmio" target="_blank" rel="noopener noreferrer" aria-label="Open Relmio version __RELMIO_PACKAGE_VERSION__ on GitHub. Opens in a new tab.">
<span class="rm-icon rm-icon--github rm-icon--sm" aria-hidden="true"></span>GitHub
<span class="rm-chip__meta"><span class="rm-icon rm-icon--star rm-icon--xs" aria-hidden="true"></span><span data-rm-repo-stars>?</span></span>
<span class="rm-chip__meta">v__RELMIO_PACKAGE_VERSION__</span>
</a>
<a class="rm-icon-button rm-topbar__wide" href="https://ko-fi.com/paldogies" target="_blank" rel="noopener noreferrer" aria-label="Support Relmio on Ko-fi (opens in a new tab)" title="Support Relmio on Ko-fi"><span class="rm-icon rm-icon--coffee" aria-hidden="true"></span></a>
<details class="rm-menu">
<summary class="rm-icon-button" aria-label="Menu"><span class="rm-icon rm-icon--menu" aria-hidden="true"></span></summary>
<div class="rm-menu__panel">
<nav aria-label="Primary">
<ul class="rm-menu__list">
<li><a class="rm-menu__link" href="/" data-wizard-route="/">Setup</a></li>
<li><a class="rm-menu__link" href="/local" data-wizard-route="/local">This computer</a></li>
<li><a class="rm-menu__link" href="/hosting" data-wizard-route="/hosting" aria-current="page">Hosting options</a></li>
<li><a class="rm-menu__link" href="https://relmio.jpfusin.tech/docs" target="_blank" rel="noopener noreferrer"><span class="rm-icon rm-icon--book rm-icon--sm" aria-hidden="true"></span>Docs<span class="rm-visually-hidden"> (opens in a new tab)</span></a></li>
</ul>
</nav>
<ul class="rm-menu__list rm-menu__section">
<li><button class="rm-menu__link" type="button" data-guide-toggle aria-pressed="false" hidden><span class="rm-icon rm-icon--help rm-icon--sm" aria-hidden="true"></span>Setup guide</button></li>
<li><a class="rm-menu__link" href="https://github.com/Demonbane18/relmio" target="_blank" rel="noopener noreferrer"><span class="rm-icon rm-icon--github rm-icon--sm" aria-hidden="true"></span>GitHub<span class="rm-visually-hidden"> (opens in a new tab)</span></a></li>
<li><a class="rm-menu__link" href="https://ko-fi.com/paldogies" target="_blank" rel="noopener noreferrer"><span class="rm-icon rm-icon--coffee rm-icon--sm" aria-hidden="true"></span>Support on Ko-fi<span class="rm-visually-hidden"> (opens in a new tab)</span></a></li>
</ul>
</div>
</details>
</div>
</div>
</header>
<main id="main-content" class="rm-app__main" tabindex="-1">
<noscript><p class="rm-callout rm-callout--warning">This setup needs JavaScript to build and download a plan. Enable JavaScript, then reload before continuing.</p></noscript>
<div class="hosting-shell">
<div class="hosting-head">
<div class="hosting-head__title">
<h1 id="page-title" class="rm-h1">Hosting options</h1>
<p class="rm-muted">Creating a plan checks no server or Docker state and makes no remote changes.</p>
</div>
<div class="hosting-head__state">
<p id="hosting-status" class="hosting-status" role="status" aria-live="polite">Loading hosting options…</p>
<p id="hosting-error" class="rm-field__error hosting-error" role="alert" tabindex="-1" hidden></p>
</div>
</div>
<form id="hosting-form" class="hosting-form">
<section id="hosting-choose" class="rm-panel hosting-view" aria-labelledby="matrix-title">
<header class="rm-panel__header">
<div class="rm-panel__heading">
<span class="rm-eyebrow">Step 1 of 3</span>
<h2 id="matrix-title" class="rm-h2" tabindex="-1">What is available?</h2>
<p class="rm-muted">Relmio is tested on Hostinger KVM VPS and local Docker. Other providers and all generated files are experimental and not live tested.</p>
</div>
</header>
<div class="rm-panel__body">
<div class="hosting-compare">
<div class="hosting-compare__chooser">
<div class="rm-field">
<label class="rm-field__label" for="hosting-provider">Hosting provider <span id="hosting-provider-experimental" class="rm-badge rm-badge--accent" hidden>Experimental</span></label>
<select id="hosting-provider" class="rm-select" required disabled></select>
</div>
<div class="rm-field">
<label class="rm-field__label" for="hosting-component">What to set up</label>
<select id="hosting-component" class="rm-select" required disabled></select>
</div>
<p id="hosting-capability" class="hosting-capability">Choose what to set up to see what's available.</p>
<details id="hosting-claude-details" class="rm-disclosure" hidden>
<summary>Claude disclaimer and n8n settings</summary>
<div class="rm-disclosure__body"><p>Experimental. Not affiliated with or endorsed by Anthropic. Uses the official Claude Code that you sign in to yourself; Relmio never sees your Claude login. Personal use only; Anthropic's terms apply and this may stop working.</p><p>Basic LLM Chain + OpenAI Chat Model. Use Responses API off, Max Retries 0, Timeout at least 135000 ms, Batch Size 1. Text only, one request at a time; not AI Agent tools or the n8n AI Assistant. Approval expires within 7 days; renew it in the wizard.</p></div>
</details>
<button class="rm-button rm-button--ghost rm-button--sm hosting-notes-trigger" type="button" popovertarget="hosting-notes"><span class="rm-icon rm-icon--info rm-icon--sm" aria-hidden="true"></span>Login notes and sources</button>
<div id="hosting-notes" class="hosting-notes" popover role="dialog" aria-labelledby="hosting-notes-title">
<div class="hosting-notes__header">
<h3 id="hosting-notes-title" class="rm-h3">Login notes and sources</h3>
<button class="rm-icon-button" type="button" popovertarget="hosting-notes" popovertargetaction="hide" aria-label="Close login notes"><span class="rm-icon rm-icon--x" aria-hidden="true"></span></button>
</div>
<p id="hosting-hint">Choose hosting to see what it supports.</p>
<div id="hosting-sources" class="hosting-sources"></div>
</div>
</div>
<div class="hosting-compare__matrix">
<div class="rm-table-wrap hosting-matrix-wrap" tabindex="0" role="region" aria-labelledby="hosting-matrix-caption">
<table class="rm-table hosting-matrix" aria-describedby="hosting-legend">
<caption id="hosting-matrix-caption" class="rm-visually-hidden">Availability by hosting type and component</caption>
<thead>
<tr>
<th scope="col">Hosting</th>
<th scope="col">Model</th>
<th scope="col">OpenAI</th>
<th scope="col">Assistant</th>
<th scope="col">SearXNG</th>
<th scope="col">SuperGrok</th>
<th scope="col">Claude</th>
<th scope="col">Endpoint</th>
</tr>
</thead>
<tbody id="hosting-matrix"></tbody>
</table>
</div>
<dl id="hosting-legend" class="hosting-legend">
<div><dt><span class="hosting-mark" data-mode="managed"><span class="rm-icon rm-icon--check-circle rm-icon--sm" aria-hidden="true"></span></span>Managed</dt><dd>Relmio setup with checks and a final confirmation before installation</dd></div>
<div><dt><span class="hosting-mark" data-mode="manual"><span class="rm-icon rm-icon--download rm-icon--sm" aria-hidden="true"></span></span>Manual</dt><dd>Files you apply yourself</dd></div>
<div><dt><span class="hosting-mark" data-mode="external"><span class="rm-icon rm-icon--external rm-icon--sm" aria-hidden="true"></span></span>External</dt><dd>Needs another service</dd></div>
<div><dt><span class="hosting-mark" data-mode="unavailable"></span>None</dt><dd>No native route</dd></div>
<div><dt>Two marks</dt><dd>Varies by host. Choose one to see its own row.</dd></div>
</dl>
</div>
</div>
</div>
<footer class="rm-panel__footer">
<p id="hosting-limits" class="hosting-footer-hint"></p>
<a id="hosting-managed-link" class="rm-button rm-button--primary" hidden>Open managed setup</a>
<button id="hosting-continue" class="rm-button rm-button--primary" type="button" disabled>Continue</button>
</footer>
</section>
<section id="hosting-details" class="rm-panel hosting-view" aria-labelledby="details-title" hidden>
<header class="rm-panel__header">
<div class="rm-panel__heading">
<span class="rm-eyebrow">Step 2 of 3</span>
<h2 id="details-title" class="rm-h2" tabindex="-1">Add plan details</h2>
</div>
</header>
<div class="rm-panel__body">
<div class="hosting-fields">
<div id="hosting-model-wrap" class="rm-field" hidden>
<label class="rm-field__label" for="hosting-model">Allowlisted model</label>
<select id="hosting-model" class="rm-select" aria-describedby="hosting-model-hint" disabled></select>
<p id="hosting-model-hint" class="rm-field__hint">Model downloads, storage, memory, entitlement and live inference must be checked separately.</p>
</div>
<div id="hosting-inputs" class="hosting-inputs"></div>
</div>
<p id="hosting-no-inputs" class="rm-muted" hidden>This plan needs no extra details.</p>
</div>
<footer class="rm-panel__footer">
<button id="hosting-details-back" class="rm-button rm-button--ghost" type="button">Back</button>
<p class="hosting-footer-hint">Do not enter passwords, API keys, tokens, or private keys.</p>
<button id="hosting-generate" class="rm-button rm-button--primary" type="submit" disabled>Review the plan</button>
</footer>
</section>
</form>
<section id="hosting-review" class="rm-panel hosting-view hosting-review" aria-labelledby="review-title" hidden>
<header class="rm-panel__header">
<div class="rm-panel__heading">
<span class="rm-eyebrow">Step 3 of 3 · Manual files</span>
<h2 id="review-title" class="rm-h2" tabindex="-1">Review the plan</h2>
</div>
</header>
<div class="rm-panel__body">
<div class="hosting-review__layout">
<div class="hosting-review__side">
<div class="rm-callout rm-callout--warning">
<span class="rm-icon rm-icon--alert rm-icon--sm rm-callout__icon" aria-hidden="true"></span>
<div class="rm-callout__content">
<p class="rm-callout__body hosting-boundary">Relmio does not apply these files. Read the requirements, settings, limitations, and steps before using them in your provider account. Do not apply them to your existing n8n definition.</p>
</div>
</div>
<dl id="hosting-review-facts" class="rm-dl"></dl>
<p class="hosting-zip-note">Download the complete ZIP to keep folders such as <code>api/</code>, <code>src/</code>, and <code>netlify/functions/</code> with hidden configuration files.</p>
</div>
<details id="hosting-review-details" class="rm-disclosure">
<summary>Read plan instructions and file previews</summary>
<div class="rm-disclosure__body hosting-review__doc">
<section><h3>Ordered steps</h3><ol id="hosting-steps"></ol></section>
<section><h3>Requirements</h3><ul id="hosting-requirements"></ul></section>
<section><h3>Limitations</h3><ul id="hosting-limitations"></ul></section>
<section><h3>Provider settings</h3><dl id="hosting-settings" class="rm-dl"></dl></section>
<section><h3>Connection details</h3><pre id="hosting-connection" class="hosting-code"></pre></section>
<section><h3>Reviewed sources</h3><p id="hosting-reviewed-on" class="rm-small"></p><div id="hosting-plan-sources" class="hosting-sources"></div></section>
<section>
<h3>Files</h3>
<p class="hosting-files-note">Individual downloads replace each path separator with <code>__</code> in the filename. Restore the displayed relative path before using a file; use the ZIP to keep folders intact.</p>
<div id="hosting-files" class="hosting-files"></div>
</section>
</div>
</details>
</div>
</div>
<footer class="rm-panel__footer">
<button id="hosting-review-back" class="rm-button rm-button--ghost" type="button">Back</button>
<button id="hosting-download-bundle" class="rm-button rm-button--primary rm-push" type="button"><span class="rm-icon rm-icon--download rm-icon--sm" aria-hidden="true"></span>Download files (ZIP)</button>
</footer>
</section>
</div>
</main>
</body>
</html>