Discusión

Crea un Panel Personalizado en un Solo Archivo HTML

De Wikiprompt, la enciclopedia libre de prompts

Eyisha Zyer
Contribuido porEyisha ZyerXFuente

3 jul 2026

Crea un Panel Personalizado en un Solo Archivo HTML Un prompt completo para crear un panel personal rico en funciones con tareas, calendario, notas, métricas, personalización y persistencia de datos en un solo archivo HTML.

Contenido del PromptGuardar

🌐
Build a complete, functional personal dashboard in a single HTML file using HTML, CSS, and JavaScript. WHAT IT DOES A personal dashboard that shows you everything that matters, tasks, calendar, notes, and key metrics, all in one clean, beautiful page. Think of it as your command center for the day. CORE FEATURES 1. Dashboard Overview (Main View) - A clean, at-a-glance view of today's tasks, upcoming events, and recent notes - A greeting that changes based on time of day (Good morning / afternoon / evening) - Quick-add buttons for tasks, events, and notes - Widget-style layout with drag-to-rearrange cards 2. Task Widget - Show today's tasks with checkboxes to mark complete - Group tasks by: Today, This Week, Later - Add new tasks with title, due date, and priority (High/Medium/Low) - Edit or delete tasks - Visual indicator for overdue tasks 3. Calendar Widget - Mini calendar showing current month - Highlight dates with events or tasks - Click a date to see what's scheduled - Add events with title, time, and category (Work, Personal, Birthday, Meeting) - Upcoming events list below the calendar 4. Notes Widget - Quick capture for thoughts and ideas - Show recent notes (last 5) with timestamps - Click a note to view or edit it - Search bar to find past notes - Rich text editing: bold, italic, bullet points 5. Metrics Widget - Show 3-5 key numbers you care about (e.g., tasks completed today, days until a deadline, total notes) - Customizable, user can choose which metrics to display - Simple visual progress bars or counters 6. Customization - Light mode / Dark mode toggle - Choose primary and accent colors from a color picker - Show/hide widgets you don't use - Rearrange widgets by drag-and-drop 7. Data Persistence - All data saved to localStorage - Data persists across browser sessions - Export data as JSON backup - Import data from a JSON file LAYOUT - Left sidebar: Navigation (Dashboard, Tasks, Calendar, Notes, Settings) with icons - Main area: The dashboard view with widgets - Top bar: App name, time, date, profile icon, dark/light toggle TECHNICAL REQUIREMENTS - Single HTML file with embedded CSS and JavaScript - Responsive: works on desktop and tablet - Smooth animations and transitions - Clean, modern, minimal aesthetic - No external dependencies (use vanilla JS) Build a polished, functional dashboard that someone would actually want to open every morning.

Iniciá sesión para ver el prompt completo

Continuar con:

Al iniciar sesión, aceptás nuestros Términos de uso y Política de privacidad

Uso

Este prompt está diseñado para usarse con coding. Copiá el contenido de arriba y pegalo en tu herramienta de IA preferida.

Para mejores resultados, personalizá los marcadores (indicados con corchetes o mayúsculas) con tus requisitos específicos.

Referencias

Categorías:coding| twitter| dashboard| html

Discusión