index.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.0" />
<meta name="theme-color" content="#081325" />
<meta name="color-scheme" content="dark light" />
<meta name="author" content="PaaSDeployer" />
<meta name="application-name" content="PaaSDeployer" />
<script>
document.documentElement.classList.add("js-enabled");
</script>
<script>
(() => {
const BOOT_TIMEOUT_MS = 15000;
let failed = false;
let ready = false;
const escapeHtml = (value) =>
String(value ?? "")
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
const showError = (message, error) => {
if (ready || failed) return;
failed = true;
const root = document.getElementById("root");
if (!root) return;
const text = String(
message ||
error?.message ||
"The application could not be started.",
);
const technical =
error?.stack && String(error.stack).trim()
? String(error.stack)
: "";
root.innerHTML = `
<main class="app-boot-error" role="alert">
<section class="app-boot-error__card">
<div class="app-boot-error__icon" aria-hidden="true">!</div>
<p class="app-boot-error__eyebrow">PaaSDeployer</p>
<h1>We couldn't load the application</h1>
<p class="app-boot-error__intro">
The browser could not finish starting the PaaSDeployer interface.
You can retry or return to a safe page.
</p>
<div class="app-boot-error__details">
<div class="app-boot-error__label">Error message</div>
<code>${escapeHtml(text)}</code>
</div>
${technical ? `
<details class="app-boot-error__technical">
<summary>Technical details</summary>
<pre>${escapeHtml(technical)}</pre>
</details>
` : ""}
<div class="app-boot-error__actions">
<button type="button" onclick="window.location.reload()">Reload</button>
${window.history.length > 1 ? '<button type="button" class="secondary" onclick="window.history.back()">Go back</button>' : ""}
<a href="/" class="secondary">Home</a>
</div>
</section>
</main>
`;
document.documentElement.classList.add("app-boot-failed");
};
window.__PASSDEPLOYER_BOOT__ = {
markReady() {
if (failed) return;
ready = true;
window.clearTimeout(window.__PASSDEPLOYER_BOOT_TIMEOUT__);
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
if (failed) return;
document.documentElement.classList.remove("app-boot-failed");
document.documentElement.classList.add("app-ready");
});
});
},
showError,
};
window.__PASSDEPLOYER_BOOT_TIMEOUT__ = window.setTimeout(() => {
if (!ready && !failed) {
showError(
"React did not finish loading within 15 seconds. The application bundle may be unavailable or blocked.",
);
}
}, BOOT_TIMEOUT_MS);
window.addEventListener("error", (event) => {
if (ready || failed) return;
if (event?.target && event.target !== window) {
if (!(event.target instanceof HTMLScriptElement)) return;
}
showError(
event?.message || event?.error?.message || "A JavaScript error prevented the application from starting.",
event?.error,
);
});
window.addEventListener("unhandledrejection", (event) => {
if (ready || failed) return;
const reason = event?.reason;
showError(
reason?.message || String(reason || "An asynchronous error prevented the application from starting."),
reason instanceof Error ? reason : undefined,
);
});
})();
</script>
<!-- Inter font (theme's primary typeface). Falls back to system-ui
gracefully when the CDN is unreachable. -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700;800;900&display=swap" media="print" onload="this.media='all'" />
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700;800;900&display=swap" /></noscript>
<style>
html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; background: #f7f9fc; }
#root { min-height: 100vh; }
html.js-enabled:not(.app-ready) #root { visibility: hidden; }
html.js-enabled:not(.app-ready) #root > .app-loading { visibility: visible; }
html.app-boot-failed #root { visibility: visible !important; }
.app-boot-error {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
padding: 32px 20px;
background: radial-gradient(circle at top, rgba(65, 105, 225, 0.12), transparent 34%), #0b1020;
color: #e8edf7;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.app-boot-error__card {
width: min(100%, 720px);
box-sizing: border-box;
padding: 32px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 20px;
background: rgba(17, 24, 39, 0.88);
box-shadow: 0 24px 70px rgba(2, 8, 23, 0.42);
}
.app-boot-error__icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 14px;
background: rgba(248, 113, 113, 0.12);
border: 1px solid rgba(248, 113, 113, 0.18);
color: #fca5a5;
font-size: 24px;
font-weight: 800;
}
.app-boot-error__eyebrow {
margin: 0 0 8px;
color: #8ab4ff;
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.app-boot-error h1 {
margin: 0;
color: #f8fafc;
font-size: clamp(1.9rem, 4vw, 2.6rem);
line-height: 1.08;
letter-spacing: -.035em;
}
.app-boot-error__intro {
margin: 14px 0 0;
color: #a9b5c7;
font-size: 15px;
line-height: 1.7;
}
.app-boot-error__details {
margin-top: 22px;
padding: 14px 16px;
border-radius: 12px;
background: rgba(2, 8, 23, 0.52);
border: 1px solid rgba(148, 163, 184, 0.14);
}
.app-boot-error__label {
margin-bottom: 6px;
color: #cbd5e1;
font-size: 12px;
font-weight: 800;
}
.app-boot-error__details code {
display: block;
overflow-wrap: anywhere;
color: #fda4af;
font-size: 13px;
line-height: 1.65;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.app-boot-error__technical { margin-top: 14px; color: #94a3b8; font-size: 13px; }
.app-boot-error__technical summary { cursor: pointer; font-weight: 700; }
.app-boot-error__technical pre {
margin: 10px 0 0;
padding: 14px;
overflow: auto;
max-height: 260px;
border-radius: 10px;
background: rgba(2, 8, 23, 0.42);
color: #94a3b8;
font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.app-boot-error__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
}
.app-boot-error__actions button,
.app-boot-error__actions a {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border-radius: 12px;
padding: 11px 16px;
text-decoration: none;
cursor: pointer;
font: 700 14px/1.2 Inter, system-ui, sans-serif;
}
.app-boot-error__actions button {
border: 0;
background: #8ab4ff;
color: #081325;
}
.app-boot-error__actions .secondary {
border: 1px solid rgba(148, 163, 184, 0.24);
background: rgba(148, 163, 184, 0.08);
color: #e2e8f0;
}
@media (max-width: 560px) {
.app-boot-error__card { padding: 24px; }
.app-boot-error__actions button,
.app-boot-error__actions a { flex: 1 1 100%; }
}
.app-loading {
min-height: 100vh; display: grid; place-items: center;
background: #f7f9fc; color: #0f172a;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.app-loading__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.app-loading__spinner {
width: 28px; height: 28px;
border: 3px solid rgba(47, 102, 255, 0.16); border-top-color: #2f66ff;
border-radius: 50%; animation: app-loading-spin 0.8s linear infinite;
}
.app-loading__text { margin: 0; font-size: 0.95rem; color: #64748b; letter-spacing: 0.02em; }
@keyframes app-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-color-scheme: dark) {
html, body, .app-loading { background: #0b1020; color: #e2e8f0; }
.app-loading__spinner { border-color: rgba(138, 180, 255, 0.18); border-top-color: #8ab4ff; }
.app-loading__text { color: #94a3b8; }
}
@media (prefers-reduced-motion: reduce) { .app-loading__spinner { animation-duration: 1.8s; } }
.js-enabled #seo-noscript-fallback { display: none !important; }
.seo-noscript {
box-sizing: border-box; min-height: 100vh; padding: clamp(48px, 8vw, 96px) 20px;
background: #f7f9fc; color: #0f172a;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.seo-noscript > * { max-width: 960px; margin-inline: auto; }
.seo-noscript__hero { text-align: center; }
.seo-noscript__eyebrow {
margin: 0 0 14px; font-size: 13px; font-weight: 800;
letter-spacing: .16em; text-transform: uppercase; color: #2f66ff;
}
.seo-noscript h1, .seo-noscript h2, .seo-noscript h3 {
margin: 0 0 18px; line-height: 1.08; letter-spacing: -.035em; color: #0f172a;
}
.seo-noscript h1 { font-size: clamp(2.35rem, 6vw, 5.1rem); }
.seo-noscript h2 { margin-top: 48px; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.seo-noscript p {
max-width: 780px; margin: 0 auto 18px; font-size: 1.03rem; line-height: 1.82; color: #475569;
}
.seo-noscript nav {
display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; margin-top: 28px;
}
.seo-noscript a { color: #2f66ff; font-weight: 700; text-decoration: none; }
.seo-noscript a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
.seo-noscript { background: #0b1020; color: #e2e8f0; }
.seo-noscript h1, .seo-noscript h2, .seo-noscript h3 { color: #f8fafc; }
.seo-noscript p { color: #b8c3d1; }
}
</style>
</head>
<body>
<div id="root">
<div
class="app-loading"
role="status"
aria-live="polite"
aria-label="Loading PaaSDeployer…"
>
<div class="app-loading__inner">
<div class="app-loading__spinner" aria-hidden="true"></div>
<p class="app-loading__text">Loading PaaSDeployer…</p>
</div>
</div>
</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>