/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function TimeInput({ value, onChange, placeholder }) { const handleChange = (e) => { let newValue = e.target.value.replace(/\D/g, '').slice(0, 4); if (newValue.length === 4) { const hours = parseInt(newValue.slice(0, 2)); const minutes = parseInt(newValue.slice(2, 4)); if (hours < 24 && minutes < 60) { onChange(newValue); } } else { onChange(newValue); } }; return ( ); } function TimeRow({ index, startTime, endTime, subtractFullDay, onChange, fullDayHours }) { const duration = calculateTimeDifference(startTime, endTime, subtractFullDay, fullDayHours); const isNegative = duration.startsWith('-'); return (

onChange(index, "start", value)} placeholder="hhmm" /> onChange(index, "end", value)} placeholder="hhmm" /> {duration} onChange(index, "subtractFullDay", e.target.checked)} />

); } function calculateTimeDifference(start, end, subtractFullDay, fullDayHours) { if (start.length !== 4 || end.length !== 4) return ""; const startHours = parseInt(start.slice(0, 2)); const startMinutes = parseInt(start.slice(2, 4)); const endHours = parseInt(end.slice(0, 2)); const endMinutes = parseInt(end.slice(2, 4)); const startTotalMinutes = startHours * 60 + startMinutes; const endTotalMinutes = endHours * 60 + endMinutes; let diff = endTotalMinutes - startTotalMinutes; if (diff < 0) diff += 24 * 60; if (subtractFullDay) { diff -= fullDayHours * 60; } const sign = diff < 0 ? '-' : ''; const absDiff = Math.abs(diff); const hours = Math.floor(absDiff / 60); const minutes = absDiff % 60; return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`; } function calculateTotalDuration(rows, fullDayHours) { let totalMinutes = 0; rows.forEach(row => { const duration = calculateTimeDifference(row.start, row.end, row.subtractFullDay, fullDayHours); if (duration) { const sign = duration.startsWith('-') ? -1 : 1; const [hours, minutes] = duration.replace('-', '').split(':').map(Number); totalMinutes += sign * (hours * 60 + minutes); } }); const sign = totalMinutes < 0 ? '-' : ''; const absTotalMinutes = Math.abs(totalMinutes); const hours = Math.floor(absTotalMinutes / 60); const minutes = absTotalMinutes % 60; return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`; } function saveToQueryParams(rows, fullDayHours) { const params = new URLSearchParams(); params.append('fullDayHours', fullDayHours); rows.forEach((row, index) => { if (row.start) params.append(`start${index}`, row.start); if (row.end) params.append(`end${index}`, row.end); params.append(`subtractFullDay${index}`, row.subtractFullDay); }); window.history.replaceState({}, '', `${window.location.pathname}?${params}`); } function loadFromQueryParams() { const params = new URLSearchParams(window.location.search); const rows = []; let index = 0; while (params.has(`start${index}`) || params.has(`end${index}`)) { rows.push({ start: params.get(`start${index}`) || "", end: params.get(`end${index}`) || "", subtractFullDay: params.get(`subtractFullDay${index}`) === 'true' }); index++; } return { rows: rows.length > 0 ? rows : [{ start: "", end: "", subtractFullDay: false }], fullDayHours: parseInt(params.get('fullDayHours')) || 8 }; } function App() { const [rows, setRows] = useState([{ start: "", end: "", subtractFullDay: false }]); const [fullDayHours, setFullDayHours] = useState(8); useEffect(() => { const { rows: loadedRows, fullDayHours: loadedFullDayHours } = loadFromQueryParams(); setRows(loadedRows); setFullDayHours(loadedFullDayHours); }, []); const handleChange = (index, field, value) => { const newRows = [...rows]; newRows[index][field] = value; setRows(newRows); saveToQueryParams(newRows, fullDayHours); }; const addRow = () => { const newRows = [...rows, { start: "", end: "", subtractFullDay: false }]; setRows(newRows); saveToQueryParams(newRows, fullDayHours); }; const handleFullDayHoursChange = (e) => { const value = parseInt(e.target.value) || 0; setFullDayHours(value); saveToQueryParams(rows, value); }; return (

Time Calculator

Full day hours:

Start Time End Time Duration Subtract Full Day

{rows.map((row, index) => ( ))}

Total Rows: {rows.length}

Total Duration: {calculateTotalDuration(rows, fullDayHours)}

Shareable Link: {window.location.href}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Time Calculator

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; } .app { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 100%; max-width: 600px; } h1 { text-align: center; color: #333; } .full-day-hours { margin-bottom: 20px; } .time-row { display: flex; margin-bottom: 10px; justify-content: space-between; align-items: center; } .time-row.header { font-weight: bold; margin-bottom: 15px; } .time-row.header span { flex: 1; text-align: center; } input[type="text"], input[type="number"] { width: 60px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; text-align: center; } .duration { width: 60px; text-align: center; } .duration.negative { color: red; } button { display: block; margin: 20px auto 0; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } .summary { margin-top: 20px; text-align: right; font-weight: bold; } .share-link { margin-top: 20px; font-size: 0.9em; } .share-link a { display: block; word-break: break-all; } `;

timeCalculator