Système d'invite du générateur de widgets HTWind

Widget Summary - A compact, premium desktop widget that displays the current date and time with a clean, modern interface. - Shows real-time clock updates every second with smooth transitions. - Displays the current date in a readable, localized format. - Includes a subtle, elegant design with a dark theme and soft shadows. - Fully responsive and works seamlessly at narrow widths typical of HTWind widgets. Design Rationale The widget uses a dark, minimalist aesthetic with a centered layout to maximize readability on small desktop surfaces. A monospace font for the time ensures precision, while the date is presented in a lighter weight for visual hierarchy. Subtle animations on the colon separator add a touch of motion without distraction. The design prioritizes clarity and calmness, fitting a utility that is glanced at frequently. Implementation ```html Clock Widget :root { --bg-color: #1a1a2e; --text-color: #e0e0e0; --accent-color: #4a90d9; --date-color: #a0a0b0; --shadow-color: rgba(0, 0, 0, 0.3); --font-family: 'Segoe UI', 'Roboto', system-ui, sans-serif; --mono-font: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; --radius: 12px; --spacing: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg-color); color: var(--text-color); font-family: var(--font-family); display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: var(--spacing); overflow: hidden; } .widget { background: linear-gradient(145deg, #1e1e36, #16162a); border-radius: var(--radius); padding: 24px 32px; box-shadow: 0 8px 32px var(--shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.05); text-align: center; width: 100%; max-width: 320px; transition: box-shadow 0.3s ease; } .widget:hover { box-shadow: 0 12px 40px var(--shadow-color); } .time-display { font-family: var(--mono-font); font-size: 3.2rem; font-weight: 500; letter-spacing: 2px; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 4px; } .time-display .colon { display: inline-block; animation: blink 1s step-end infinite; color: var(--accent-color); } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .time-display .hours, .time-display .minutes { color: var(--text-color); } .time-display .seconds { font-size: 1.6rem; color: var(--date-color); margin-left: 4px; opacity: 0.8; } .date-display { font-size: 1rem; color: var(--date-color); margin-top: 8px; letter-spacing: 0.5px; font-weight: 300; } .status { margin-top: 12px; font-size: 0.75rem; color: var(--date-color); opacity: 0.7; transition: opacity 0.3s ease; } .status.error { color: #e74c3c; opacity: 1; } @media (max-width: 360px) { .widget { padding: 16px 20px; } .time-display { font-size: 2.4rem; } .time-display .seconds { font-size: 1.2rem; } .date-display { font-size: 0.85rem; } } 00 : 00 00 Loading... (function() { 'use strict'; const hoursEl = document.getElementById('hours'); const minutesEl = document.getElementById('minutes'); const secondsEl = document.getElementById('seconds'); const dateEl = document.getElementById('dateDisplay'); const statusEl = document.getElementById('status'); let tickInterval = null; let isRunning = false; function pad(num) { return String(num).padStart(2, '0'); } function updateClock() { try { const now = new Date(); const h = pad(now.getHours()); const m = pad(now.getMinutes()); const s = pad(now.getSeconds()); // Only update DOM if values changed to reduce repaints if (hoursEl.textContent !== h) hoursEl.textContent = h; if (minutesEl.textContent !== m) minutesEl.textContent = m; if (secondsEl.textContent !== s) secondsEl.textContent = s; // Update date once per minute (when seconds are 0) if (s === '00') { const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const dateStr = now.toLocaleDateString(undefined, options); if (dateEl.textContent !== dateStr) { dateEl.textContent = dateStr; } } // Set initial date if not set if (dateEl.textContent === 'Loading...') { const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; dateEl.textContent = now.toLocaleDateString(undefined, options); } // Clear any previous error status if (statusEl.textContent) { statusEl.textContent = ''; statusEl.classList.remove('error'); } } catch (err) { statusEl.textContent = 'Clock error: ' + err.message; statusEl.classList.add('error'); } } function startClock() { if (isRunning) return; isRunning = true; updateClock(); // immediate first tick tickInterval = setInterval(updateClock, 1000); } function stopClock() { if (tickInterval) { clearInterval(tickInterval); tickInterval = null; } isRunning = false; } // Handle visibility change to pause/resume for performance document.addEventListener('visibilitychange', function() { if (document.hidden) { stopClock(); } else { startClock(); } }); // Start the clock startClock(); // Cleanup on page unload (good practice for widgets) window.addEventListener('beforeunload', function() { stopClock(); }); })(); ``` PowerShell Notes - This widget does not use PowerShell. It is a pure client-side clock. - No host bridge calls are made, so no timeout, exit code, or error handling for PowerShell is needed. - The widget is fully self-contained and runs entirely in the browser. Customization Tips - To change the color scheme, modify the CSS variables in `:root` (e.g., `--bg-color`, `--accent-color`). - To adjust the refresh rate, change the interval in `setInterval(updateClock, 1000)` (e.g., 500 for half-second updates). - To use a 12-hour format, modify the `updateClock` function to convert hours and add AM/PM. - To change the date format, edit the `options` object in `toLocaleDateString`.

Système d'invite du générateur de widgets HTWind

Contenu du PromptEnregistrer

Utilisation

Références

Discussion