Getting Started

Prerequisites

Before you begin, ensure you have the following:

Web Browser

Any modern browser (Chrome, Firefox, Safari, Edge)

Text Editor

VS Code, Sublime Text, or your preferred editor

Local Server

Optional: VS Code Live Server or Python’s HTTP server

Basic Knowledge

HTML, CSS, and basic JavaScript understanding

This is a static HTML/CSS/JS project with no build process or package dependencies required. You can open the files directly in your browser!

Quick Start

Clone or Download

Get the project files from your repository:

git clone <repository-url>
cd dni-cita-previa-redesign

Or download and extract the ZIP file to your preferred location.

Open in Browser

Navigate to the project directory and open index.html in your web browser:

# Option 1: Open directly
open index.html  # macOS
start index.html # Windows
xdg-open index.html # Linux

# Option 2: Use Python's HTTP server
python -m http.server 8000
# Then visit: http://localhost:8000

# Option 3: Use VS Code Live Server extension
# Right-click index.html > Open with Live Server

Explore the Application

Navigate through the appointment booking flow:

Start at the landing page (index.html)
Click “Iniciar Solicitud” to begin
Select an authentication method (iniciar-solicitud.html)
Fill out the appointment form (seleccionar-cita.html)
Review the summary page (resumen.html)

Project Structure

dni-cita-previa-redesign/
├── index.html                  # Landing page
├── iniciar-solicitud.html      # Authentication selection
├── seleccionar-cita.html       # Appointment form
├── resumen.html                # Summary/confirmation
├── css/
│   ├── style.css              # Global styles & CSS variables
│   ├── headerfooter.css       # Header & footer components
│   ├── index.css              # Landing page styles
│   ├── iniciar-solicitud.css  # Authentication page styles
│   ├── seleccionar-cita.css   # Form page styles
│   └── resumen.css            # Summary page styles
├── js/
│   └── index.js               # Mobile menu toggle
└── images/
    ├── logo.png               # Favicon
    ├── logo-ministerio.*      # Ministry logo (PNG, WebP, AVIF)
    ├── logo-polia-nacional.*  # Police logo (JPEG, WebP, AVIF)
    └── menu.svg               # Hamburger menu icon

File Descriptions

HTML Files

Each HTML file represents a step in the appointment booking process:

index.html: Entry point with two main options (book new or manage existing)
iniciar-solicitud.html: Choose between DNI/NIE or electronic certificate authentication
seleccionar-cita.html: Multi-section form for appointment details
resumen.html: Confirmation page with appointment summary and reference code

All pages share the same header/footer structure for consistency.

CSS Files

Modular CSS architecture:

style.css: CSS custom properties, reset, and global styles
headerfooter.css: Responsive header/footer with mobile menu
index.css: Landing page specific styles
iniciar-solicitud.css: Authentication options layout
seleccionar-cita.css: Form styling with validation
resumen.css: Summary page with tables and status display

JavaScript Files

Minimal JavaScript footprint:

index.js: 13-line mobile navigation toggle

The project prioritizes CSS-based interactions over heavy JavaScript.

Images Directory

Optimized assets:

Multiple format support (PNG, WebP, AVIF) for performance
SVG icons inline in HTML for styling flexibility
Official government logos maintained for authenticity

Understanding the CSS System

CSS Custom Properties

The entire design system is built on CSS variables defined in style.css:

:root {
    /* Colors */
    --header-yellow: #ffce00;
    --footer-background-blue: #1f2937;
    --primary-blue: #003366;
    --primary-blue-dark: #002244;
    --background-gray: #f5f5f5;
    --white: #ffffff;
    
    /* Text colors */
    --text-gray-light: #6a6f7b;
    --text-gray: #374151;
    --text-gray-dark: #1f2937;
    
    /* Borders */
    --border-light: #e5e7eb;
    --bg-blue-light: #eff6ff;
    
    /* Status */
    --success-green: #059669;
}

To customize the color scheme, simply modify these CSS variables. All components will automatically update!

Global Layout

All main content uses a consistent centered layout:

main {
    display: flex;
    flex-direction: column;
    margin: 0px auto;
    max-width: 900px;
}

@media (width <= 1024px) {
    main {
        padding-inline: 1rem;
    }
}

Responsive Breakpoints

The project uses two main breakpoints:

@media (width <= 1024px) {
    /* Stack cards vertically */
    #opciones-cita {
        flex-wrap: wrap;
        width: 100%;
    }
    
    #opciones-cita > div {
        width: 100%;
    }
}

Customization Guide

Changing Colors

Edit the CSS variables in css/style.css:

:root {
    --primary-blue: #YOUR_COLOR;        /* Main buttons and headings */
    --header-yellow: #YOUR_COLOR;       /* Header background */
    --footer-background-blue: #YOUR_COLOR; /* Footer background */
}

Adding New Pages

Create HTML file

Copy the structure from an existing page:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DNI - Your Page Title</title>
    
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/headerfooter.css">
    <link rel="stylesheet" href="./css/your-page.css">
</head>
<body>
    <!-- Copy header from existing page -->
    <header>...</header>
    
    <main>
        <!-- Your content here -->
    </main>
    
    <!-- Copy footer from existing page -->
    <footer>...</footer>
    
    <script src="./js/index.js"></script>
</body>
</html>

Create corresponding CSS

Add page-specific styles in css/your-page.css:

/* Your page styles here */
/* Use existing CSS variables for consistency */
.your-component {
    background-color: var(--white);
    color: var(--text-gray);
    border: 1px solid var(--border-light);
}

Update navigation

Add links to your new page in the header navigation across all HTML files.

Modifying Forms

The form structure in seleccionar-cita.html uses semantic HTML:

<div class="seccion-formulario">
    <h2>
        <svg><!-- Section icon --></svg>
        Section Title
    </h2>
    
    <div class="campos-fila">
        <div class="campo-formulario">
            <label for="field-id">Field Label:</label>
            <input type="text" 
                   id="field-id" 
                   name="field-name" 
                   placeholder="Example"
                   required>
        </div>
    </div>
</div>

Adding Form Fields

<div class="campo-formulario">
    <label for="field-name">Label:</label>
    <input type="text" 
           id="field-name" 
           name="field-name" 
           placeholder="Placeholder text"
           required>
</div>

Testing Responsive Design

Browser DevTools
Physical Devices
Browser Window

Open DevTools (F12 or Cmd/Ctrl + Shift + I)
Toggle device toolbar (Cmd/Ctrl + Shift + M)
Test different screen sizes:
- Desktop: 1920x1080
- Tablet: 768x1024
- Mobile: 375x667 (iPhone SE)
- Mobile: 390x844 (iPhone 12/13)

Find your local IP address:

# macOS/Linux
ifconfig | grep "inet "

# Windows
ipconfig

Start a local server:
```
python -m http.server 8000
```
Visit http://YOUR_IP:8000 on mobile device

Browser Compatibility

The project uses modern CSS features with excellent browser support:

Supported Browsers:

Chrome/Edge 88+
Firefox 85+
Safari 14+
Opera 74+

CSS Features Used

CSS Custom Properties: Widely supported
Flexbox: Universal support
Modern image formats: Graceful fallbacks to PNG
CSS Media Queries: Universal support

Deployment

Static Hosting Options

Since this is a static site, deployment is straightforward:

GitHub Pages

# Push to GitHub
git add .
git commit -m "Initial commit"
git push origin main

# Enable Pages in repo settings
# Settings > Pages > Source: main branch

Netlify

Drag and drop project folder to netlify.com
Or connect GitHub repository
No build settings needed
Site deploys instantly

Vercel

npm i -g vercel
vercel
# Follow prompts

Or connect GitHub repository via dashboard

Traditional Hosting

Upload via FTP to any web hosting:

Upload all files to public_html/
Ensure index.html is in root
Check file permissions (644 for files)

Development Tips

Use Live Reloading: Install the VS Code Live Server extension for automatic browser refresh on file save.

Test Forms: The form in seleccionar-cita.html uses HTML5 validation. Test with both valid and invalid data.

File Paths: Use relative paths (./css/style.css) to ensure files work when moved between environments.

Common Issues

Styles not loading

Problem: CSS files aren’t applying.Solutions:

Check file paths in <link> tags
Clear browser cache (Cmd/Ctrl + Shift + R)
Verify CSS files exist in css/ directory
Check browser console for 404 errors

Images not displaying

Problem: Logos or icons are broken.Solutions:

Verify images exist in images/ directory
Check file paths in <img> tags
Ensure file extensions match (case-sensitive on Linux)
Check browser console for 404 errors

Mobile menu not working

Form submission issues

Problem: Form doesn’t submit or validate.Solutions:

This is a frontend prototype - form doesn’t POST anywhere
To add backend: modify <form action="..." method="post">
HTML5 validation runs automatically on submit
Use pattern attribute for custom validation

Next Steps

Now that you have the project running:

Explore Features

Learn about all the features and see detailed code examples

Customize Design

Modify CSS variables to match your brand or preferences

Add Backend

Connect forms to a backend API for real appointment booking

Enhance Accessibility

Add more ARIA labels and keyboard navigation improvements

Need Help? Open an issue in the project repository or consult the HTML comments in the source files for inline guidance.

Overview

Design System

Pages

Development

Deployment

Prerequisites

Web Browser

Text Editor

Local Server

Basic Knowledge

Quick Start

Project Structure

File Descriptions

Understanding the CSS System

CSS Custom Properties

Global Layout

Responsive Breakpoints

Customization Guide

Changing Colors

Adding New Pages

Modifying Forms

Adding Form Fields

Testing Responsive Design

Browser Compatibility

CSS Features Used

Deployment

Static Hosting Options

GitHub Pages

Netlify

Vercel

Traditional Hosting

Development Tips

Common Issues

Next Steps

Explore Features

Customize Design

Add Backend

Enhance Accessibility

Build docs developers (and LLMs) love

Overview

Design System

Pages

Development

Deployment

​Prerequisites

Web Browser

Text Editor

Local Server

Basic Knowledge

​Quick Start

​Project Structure

​File Descriptions

​Understanding the CSS System

​CSS Custom Properties

​Global Layout

​Responsive Breakpoints

​Customization Guide

​Changing Colors

​Adding New Pages

​Modifying Forms

​Adding Form Fields

​Testing Responsive Design

​Browser Compatibility

​CSS Features Used

​Deployment

​Static Hosting Options

GitHub Pages

Netlify

Vercel

Traditional Hosting

​Development Tips

​Common Issues

​Next Steps

Explore Features

Customize Design

Add Backend

Enhance Accessibility

Build docs developers (and LLMs) love

Prerequisites

Quick Start

Project Structure

File Descriptions

Understanding the CSS System

CSS Custom Properties

Global Layout

Responsive Breakpoints

Customization Guide

Changing Colors

Adding New Pages

Modifying Forms

Adding Form Fields

Testing Responsive Design

Browser Compatibility

CSS Features Used

Deployment

Static Hosting Options

Development Tips

Common Issues

Next Steps