TESTA IL TUO SITO E GUARDA SE E' RESPONSIVE

Pubblicato da TEMPLATEWEBDESIGN in NEWS · Lunedì 08 Dic 2025

Questo progetto nasce dall’ispirazione di Giancarloweb, punto di partenza creativo e tecnico. La base originaria è stata ripresa e adattata con nuove icone e qualche ulteriore funzione. Il risultato è un tool di anteprima responsive che unisce tradizione e innovazione.

TESTA IL TUO SITO: ▼

Questo codice definisce l’interfaccia grafica di un preview tool: una barra superiore con pulsanti e input, e un’area centrale dove viene mostrato un sito dentro un iframe.
Permette di simulare diverse risoluzioni (desktop, laptop, tablet, mobile) cambiando le dimensioni dell’iframe.
Gestisce il tema chiaro/scuro con transizioni animate.
Offre un look moderno con glassmorphism, gradienti e glow sugli elementi interattivi.
È pensato per essere responsive e interattivo, con animazioni fluide che migliorano l’esperienza utente.

È simile a un device preview tool usato dai web designer per testare siti su diverse risoluzioni.
Ricorda strumenti come Chrome DevTools o servizi online di responsive testing, ma con un’interfaccia personalizzata e più estetica.
L’uso di variabili CSS e gradienti lo avvicina a un design system moderno, con attenzione a estetica e usabilità.

Come è stato fatto:▼

Struttura HTML:
- La barra superiore (.preview-bar) contiene:
  - Il logo con link esterno.
  - Un campo input per inserire l’URL del sito e un pulsante “Carica”.
  - Un gruppo di pulsanti per simulare diversi dispositivi (desktop, laptop, tablet, mobile).
  - Un pulsante toggle per cambiare tema (chiaro/scuro).
- La sezione centrale (.preview-container) ospita:
  - Un iframe dove viene caricato il sito da testare.
  - Un’immagine di fallback (mostrata se l’iframe non funziona).
JavaScript:

Recupera gli elementi principali (iframe, pulsanti, input, toggle).
Funzione loadSite(url):
- Controlla se l’URL ha il prefisso http, altrimenti lo aggiunge.
- Imposta l’src dell’iframe per caricare il sito.
- Mostra l’iframe e nasconde l’immagine di fallback.
Gestione pulsante “Carica”:
- Al click, prende l’URL dall’input.
- Carica il sito nell’iframe.
- Aggiorna la barra degli indirizzi del browser con ?url=... (senza ricaricare la pagina) usando history.replaceState.
Gestione pulsanti device:
- Ogni pulsante ha un attributo data-device (desktop, laptop, tablet, ecc.).
- Al click:
  - Rimuove la classe active dagli altri pulsanti e la assegna a quello cliccato.
  - Applica al contenitore .preview-container la classe corrispondente (es. preview-container laptop).
  - Aggiunge un piccolo effetto zoom (scale(0.95) → scale(1)) per rendere la transizione più fluida.
Gestione tema (setTheme):
- Cambia la classe del body in light o dark.
- Salva la preferenza in localStorage per mantenerla tra le sessioni.
- Aggiorna l’icona e il testo del pulsante toggle (🌙 Dark / ☀️ Light).
Caricamento automatico da URL:

Se la pagina viene aperta con un parametro ?url=..., il sito viene caricato subito nell’iframe e l’input viene riempito.

TESTA ORA IL TUO SITO

Non sono presenti ancora recensioni.