baraqex
Version:
A powerful full-stack framework for modern web development
98 lines (88 loc) • 2.68 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frontend Hamroun + Go WASM</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.loading-fallback {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background: #f7f7f7;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #007acc;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="app">
<div class="loading-fallback">
<div class="loading-spinner"></div>
<h2>Loading Frontend Hamroun + WASM...</h2>
<p>Initializing application and WebAssembly runtime...</p>
</div>
</div>
<!-- Go WASM Runtime -->
<script src="/wasm_exec.js"></script>
<!-- Application -->
<script type="module">
import { jsx, render } from 'frontend-hamroun';
import App from './src/App.tsx';
// Wait for WASM runtime to be available
function waitForGo() {
return new Promise((resolve) => {
if (window.Go) {
resolve();
} else {
setTimeout(() => waitForGo().then(resolve), 50);
}
});
}
async function startApp() {
try {
// Wait for Go WASM runtime
await waitForGo();
// Render the app
const appElement = jsx(App, {});
render(appElement, document.getElementById('app'));
} catch (error) {
console.error('Failed to start app:', error);
document.getElementById('app').innerHTML = `
<div class="loading-fallback">
<h2 style="color: #dc2626;">Application Error</h2>
<p>Failed to initialize the application. Check the console for more details.</p>
<button onclick="window.location.reload()" style="
background: #007acc;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
">Reload Page</button>
</div>
`;
}
}
startApp();
</script>
</body>
</html>