my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	<!DOCTYPE html>
#2	<html lang="en">
#3	<head>
#4	<meta charset="UTF-8">
#5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
#6	<title>Loading - Moltworker</title>
#7	<style>
#8	* {
#9	margin: 0;
#10	padding: 0;
#11	box-sizing: border-box;
#12	}
#13
#14	body {
#15	min-height: 100vh;
#16	display: flex;
#17	flex-direction: column;
#18	align-items: center;
#19	justify-content: center;
#20	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
#21	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
#22	color: #e0e0e0;
#23	padding: 20px;
#24	}
#25
#26	.container {
#27	text-align: center;
#28	max-width: 500px;
#29	}
#30
#31	.logo {
#32	width: 200px;
#33	height: auto;
#34	margin-bottom: 40px;
#35	animation: pulse 2s ease-in-out infinite;
#36	}
#37
#38	@keyframes pulse {
#39	0%, 100% { opacity: 1; transform: scale(1); }
#40	50% { opacity: 0.9; transform: scale(0.95); }
#41	}
#42
#43	h1 {
#44	font-size: 1.5rem;
#45	font-weight: 500;
#46	margin-bottom: 16px;
#47	color: #ffffff;
#48	}
#49
#50	.status {
#51	font-size: 0.9rem;
#52	color: #a0a0a0;
#53	margin-bottom: 30px;
#54	}
#55
#56	.spinner-container {
#57	display: flex;
#58	align-items: center;
#59	justify-content: center;
#60	gap: 12px;
#61	margin-bottom: 20px;
#62	}
#63
#64	.spinner-container h1 {
#65	margin: 0;
#66	}
#67
#68	.spinner {
#69	width: 24px;
#70	height: 24px;
#71	border: 3px solid rgba(255, 255, 255, 0.1);
#72	border-top-color: #60a5fa;
#73	border-radius: 50%;
#74	animation: spin 1s linear infinite;
#75	}
#76
#77	@keyframes spin {
#78	to { transform: rotate(360deg); }
#79	}
#80
#81	.dots {
#82	display: inline-block;
#83	}
#84
#85	.dots::after {
#86	content: '';
#87	animation: dots 1.5s steps(4, end) infinite;
#88	}
#89
#90	@keyframes dots {
#91	0%, 20% { content: ''; }
#92	40% { content: '.'; }
#93	60% { content: '..'; }
#94	80%, 100% { content: '...'; }
#95	}
#96
#97	.info {
#98	font-size: 0.8rem;
#99	color: #707070;
#100	margin-top: 40px;
#101	}
#102
#103	.error {
#104	color: #f87171;
#105	margin-top: 20px;
#106	padding: 12px 20px;
#107	background: rgba(248, 113, 113, 0.1);
#108	border-radius: 8px;
#109	display: none;
#110	}
#111
#112	.ready {
#113	color: #4ade80;
#114	}
#115	</style>
#116	</head>
#117	<body>
#118	<div class="container">
#119	<img src="/logo.png" alt="Moltworker" class="logo">
#120
#121	<div class="spinner-container">
#122	<div class="spinner"></div>
#123	<h1 id="title">Waiting for Moltworker to load</h1>
#124	</div>
#125
#126	<p class="status" id="status">Starting container...</p>
#127
#128	<p class="error" id="error"></p>
#129
#130	<p class="info">This usually takes 1-2 minutes on cold start</p>
#131	</div>
#132
#133	<script>
#134	const statusEl = document.getElementById('status');
#135	const titleEl = document.getElementById('title');
#136	const errorEl = document.getElementById('error');
#137	let pollCount = 0;
#138	let consecutiveErrors = 0;
#139	const maxConsecutiveErrors = 5;
#140
#141	async function checkStatus() {
#142	pollCount++;
#143
#144	try {
#145	const response = await fetch('/api/status');
#146	const data = await response.json();
#147	consecutiveErrors = 0;
#148
#149	if (data.ok && data.status === 'running') {
#150	// Container is ready! Reload the page
#151	titleEl.innerHTML = '<span class="ready">Moltworker is ready!</span>';
#152	statusEl.textContent = 'Redirecting...';
#153	document.querySelector('.spinner').style.display = 'none';
#154
#155	// Small delay so user sees the "ready" message
#156	setTimeout(() => {
#157	window.location.reload();
#158	}, 500);
#159	return;
#160	}
#161
#162	// Update status message based on state
#163	if (data.status === 'not_running') {
#164	statusEl.textContent = 'Container is starting up...';
#165	} else if (data.status === 'not_responding') {
#166	statusEl.textContent = 'Container started, waiting for gateway...';
#167	} else {
#168	statusEl.textContent = 'Checking status... (poll #' + pollCount + ')';
#169	}
#170
#171	// Continue polling
#172	setTimeout(checkStatus, 2000);
#173
#174	} catch (err) {
#175	consecutiveErrors++;
#176
#177	if (consecutiveErrors >= maxConsecutiveErrors) {
#178	errorEl.textContent = 'Unable to reach server. Please refresh the page.';
#179	errorEl.style.display = 'block';
#180	statusEl.textContent = 'Connection lost';
#181	} else {
#182	statusEl.textContent = 'Retrying... (' + consecutiveErrors + '/' + maxConsecutiveErrors + ')';
#183	setTimeout(checkStatus, 3000);
#184	}
#185	}
#186	}
#187
#188	// Start polling after a brief delay
#189	setTimeout(checkStatus, 1000);
#190	</script>
#191	</body>
#192	</html>
#193

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public