Phonics \u00b7 Impara i suoni dell'inglese<\/title>\r\n\r\n \r\n \r\n \r\n\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/open-sans@5.0.8\/index.css\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/roboto@5.0.8\/index.css\">\r\n\r\n \r\n <style>\r\n \/* Reset base per il menu *\/\r\n .site-header * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* Variabili colori *\/\r\n :root {\r\n --header-bg: #fcfbf8;\r\n --header-text: #2d2d2d;\r\n --header-accent: #c65d3a;\r\n }\r\n\r\n \/* ============ HEADER CONTAINER ============ *\/\r\n .site-header {\r\n background: var(--header-bg);\r\n border-bottom: 1px solid rgba(45, 45, 45, 0.1);\r\n position: sticky;\r\n top: 0;\r\n z-index: 9999;\r\n backdrop-filter: blur(12px);\r\n font-family: 'Open Sans', sans-serif;\r\n width: 100%;\r\n }\r\n\r\n .site-header-inner {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 16px 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .site-header-inner { padding: 14px 24px; }\r\n }\r\n @media (max-width: 640px) {\r\n .site-header-inner { padding: 12px 16px; gap: 12px; }\r\n }\r\n\r\n \/* Branding (Logo + Testo) *\/\r\n .site-brand {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n text-decoration: none;\r\n flex-shrink: 0;\r\n }\r\n\r\n .site-brand-logo {\r\n width: 52px;\r\n height: 52px;\r\n border-radius: 9999px;\r\n object-fit: cover;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);\r\n border: 2px solid var(--header-bg);\r\n outline: 2px solid rgba(198, 93, 58, 0.25);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n .site-brand:hover .site-brand-logo {\r\n transform: scale(1.05);\r\n box-shadow: 0 6px 14px rgba(198, 93, 58, 0.3);\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .site-brand-logo { width: 40px; height: 40px; }\r\n .site-brand { gap: 8px; }\r\n }\r\n\r\n .site-brand-text {\r\n display: flex;\r\n flex-direction: column;\r\n line-height: 1.15;\r\n }\r\n\r\n .site-brand-name {\r\n font-family: 'Open Sans', sans-serif;\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n color: var(--header-text);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .site-brand-role {\r\n font-family: 'Roboto', sans-serif;\r\n font-weight: 500;\r\n font-size: 0.75rem;\r\n color: var(--header-accent);\r\n letter-spacing: 0.03em;\r\n text-transform: uppercase;\r\n margin-top: 1px;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .site-brand-name { font-size: 1rem; }\r\n .site-brand-role { font-size: 0.65rem; }\r\n }\r\n\r\n \/* Desktop Navigation *\/\r\n .site-nav {\r\n display: flex;\r\n align-items: center;\r\n gap: 24px;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* Desktop e Tablet grande (>900px) *\/\r\n @media (min-width: 900px) {\r\n .site-nav a {\r\n font-family: 'Open Sans', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n color: var(--header-text);\r\n text-decoration: none;\r\n position: relative;\r\n padding: 6px 0;\r\n transition: color 0.25s ease;\r\n white-space: nowrap;\r\n }\r\n .site-nav a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--header-accent);\r\n transition: width 0.3s ease;\r\n }\r\n .site-nav a:hover { color: var(--header-accent); }\r\n .site-nav a:hover::after { width: 100%; }\r\n }\r\n\r\n \/* Tablet medio\/piccolo (641px - 899px) *\/\r\n @media (min-width: 641px) and (max-width: 899px) {\r\n .site-nav { gap: 16px; }\r\n .site-nav a {\r\n font-family: 'Open Sans', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.82rem;\r\n color: var(--header-text);\r\n text-decoration: none;\r\n position: relative;\r\n padding: 4px 0;\r\n transition: color 0.25s ease;\r\n white-space: nowrap;\r\n }\r\n .site-nav a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--header-accent);\r\n transition: width 0.3s ease;\r\n }\r\n .site-nav a:hover { color: var(--header-accent); }\r\n .site-nav a:hover::after { width: 100%; }\r\n }\r\n\r\n \/* Mobile Toggle Button (<640px) *\/\r\n .mobile-menu-toggle {\r\n display: none;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 8px;\r\n z-index: 10001;\r\n }\r\n\r\n .mobile-menu-toggle span {\r\n display: block;\r\n width: 24px;\r\n height: 2px;\r\n background: var(--header-text);\r\n margin: 5px 0;\r\n transition: 0.3s;\r\n border-radius: 2px;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .mobile-menu-toggle { display: block; }\r\n\r\n \/* Layout mobile header *\/\r\n .site-header-inner {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 12px 16px;\r\n }\r\n\r\n .site-brand {\r\n width: 100%;\r\n justify-content: flex-start;\r\n margin-bottom: 8px;\r\n }\r\n\r\n \/* Menu mobile verticale *\/\r\n .site-nav {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 12px 20px;\r\n width: 100%;\r\n padding-top: 8px;\r\n border-top: 1px solid rgba(45,45,45,0.05);\r\n }\r\n\r\n .site-nav a {\r\n font-family: 'Open Sans', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.85rem;\r\n color: var(--header-text);\r\n text-decoration: none;\r\n padding: 4px 0;\r\n }\r\n .site-nav a:hover { color: var(--header-accent); }\r\n }\r\n <\/style>\r\n\r\n <style>\r\n \/* ============================================================\r\n STILI PAGINA PHONICS\r\n ============================================================ *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;\r\n }\r\n\r\n body {\r\n background: linear-gradient(145deg, #fff9e6 0%, #ffe6f0 100%);\r\n min-height: 100vh;\r\n padding: 1.5rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n }\r\n\r\n \/* main card \/ container *\/\r\n .page-wrapper {\r\n max-width: 1300px;\r\n width: 100%;\r\n background: rgba(255, 255, 255, 0.7);\r\n backdrop-filter: blur(8px);\r\n border-radius: 60px 60px 40px 40px;\r\n box-shadow: 0 25px 50px -8px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(255, 215, 0, 0.3);\r\n padding: 2.5rem 2rem 3rem;\r\n margin-top: 1.5rem;\r\n }\r\n\r\n \/* ============================================\r\n STILI GENERALI DELLE SEZIONI\r\n ============================================ *\/\r\n .section {\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .section:last-of-type {\r\n margin-bottom: 0;\r\n }\r\n\r\n .section-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-bottom: 1.8rem;\r\n padding-bottom: 0.8rem;\r\n border-bottom: 4px dashed #f7b731;\r\n }\r\n\r\n .section-number {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 60px;\r\n height: 60px;\r\n min-width: 60px;\r\n border-radius: 50%;\r\n background: #2b2d42;\r\n color: #ffd966;\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n box-shadow: 4px 4px 0 #f7b731;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2.1rem;\r\n font-weight: 800;\r\n color: #2b2d42;\r\n letter-spacing: -0.01em;\r\n line-height: 1.2;\r\n }\r\n\r\n .section-header h2 span {\r\n display: block;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n color: #5e548e;\r\n margin-top: 0.15rem;\r\n }\r\n\r\n \/* ============================================\r\n SEZIONE 1 \u2013 HERO \/ INTRODUZIONE\r\n ============================================ *\/\r\n .hero {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 2rem;\r\n }\r\n\r\n .hero-text {\r\n flex: 1 1 300px;\r\n }\r\n\r\n .hero-text h1 {\r\n font-size: 3.2rem;\r\n font-weight: 800;\r\n line-height: 1.2;\r\n color: #2b2d42;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 0.5rem;\r\n text-shadow: 3px 3px 0 #ffd966;\r\n }\r\n\r\n .hero-text h1 span {\r\n background: linear-gradient(135deg, #ff6b6b, #f7b731);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n text-shadow: none;\r\n }\r\n\r\n .hero-text .tagline {\r\n font-size: 1.3rem;\r\n font-weight: 500;\r\n color: #3d405b;\r\n background: #fefae0;\r\n display: inline-block;\r\n padding: 0.4rem 1.2rem;\r\n border-radius: 40px;\r\n margin-bottom: 1.2rem;\r\n border: 2px dashed #f7b731;\r\n }\r\n\r\n .hero-text p {\r\n font-size: 1.1rem;\r\n color: #2f3e46;\r\n margin-bottom: 1.5rem;\r\n line-height: 1.6;\r\n background: rgba(255, 255, 255, 0.6);\r\n padding: 1rem 1.4rem;\r\n border-radius: 30px;\r\n box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);\r\n }\r\n\r\n .hero-images {\r\n flex: 1 1 320px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .hero-images img {\r\n width: 160px;\r\n height: 160px;\r\n object-fit: cover;\r\n border-radius: 50% 30% 50% 30% \/ 30% 50% 30% 50%;\r\n border: 5px solid white;\r\n box-shadow: 0 15px 25px -8px rgba(0, 0, 0, 0.2), 0 0 0 4px #f7b731;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .hero-images img:first-child {\r\n transform: rotate(-4deg);\r\n }\r\n\r\n .hero-images img:last-child {\r\n transform: rotate(5deg);\r\n }\r\n\r\n .hero-images img:hover {\r\n transform: scale(1.05) rotate(0deg);\r\n }\r\n\r\n \/* ============================================\r\n SEZIONE 2 \u2013 VIDEO PLAYER\r\n ============================================ *\/\r\n .video-section {\r\n background: #2b2d42;\r\n border-radius: 50px;\r\n padding: 2rem 2rem 1.8rem;\r\n box-shadow: 0 30px 40px -12px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(255, 215, 0, 0.5);\r\n transition: box-shadow 0.3s;\r\n }\r\n\r\n .video-section:hover {\r\n box-shadow: 0 35px 50px -10px rgba(247, 183, 49, 0.4), inset 0 0 0 3px #f7b731;\r\n }\r\n\r\n .video-section .section-header {\r\n border-bottom: 4px dashed #f7b731;\r\n }\r\n\r\n .video-section .section-number {\r\n background: #ffd966;\r\n color: #2b2d42;\r\n box-shadow: 4px 4px 0 #f7b731;\r\n }\r\n\r\n .video-section .section-header h2 {\r\n color: white;\r\n }\r\n\r\n .video-section .section-header h2 span {\r\n color: #ffd966;\r\n }\r\n\r\n .player-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.2rem;\r\n }\r\n\r\n .video-wrapper {\r\n position: relative;\r\n border-radius: 32px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 30px -8px black;\r\n background: #000;\r\n aspect-ratio: 16 \/ 9;\r\n }\r\n\r\n .video-wrapper video {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n object-fit: cover;\r\n border-radius: 32px;\r\n transition: opacity 0.2s;\r\n }\r\n\r\n .now-playing {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n color: #ffd966;\r\n font-weight: 600;\r\n font-size: 1.1rem;\r\n background: rgba(0, 0, 0, 0.4);\r\n border-radius: 40px;\r\n padding: 0.6rem 1.5rem;\r\n margin-top: 0.2rem;\r\n backdrop-filter: blur(4px);\r\n border: 1px solid rgba(255, 215, 0, 0.4);\r\n }\r\n\r\n .now-playing span {\r\n font-weight: 400;\r\n font-size: 0.95rem;\r\n background: #f7b731;\r\n padding: 0.2rem 1rem;\r\n border-radius: 30px;\r\n color: #1e1e2f;\r\n }\r\n\r\n .playlist-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n margin: 1.8rem 0 1rem 0.2rem;\r\n }\r\n\r\n .playlist-title h3 {\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n color: #ffd966;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 0.4rem 1.4rem;\r\n border-radius: 50px;\r\n display: inline-block;\r\n border: 2px solid #f7b731;\r\n }\r\n\r\n .playlist-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\r\n gap: 0.9rem;\r\n max-height: 380px;\r\n overflow-y: auto;\r\n padding: 0.5rem 0.5rem 1rem 0.5rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 40px;\r\n scrollbar-width: thin;\r\n scrollbar-color: #f7b731 #ffe6a7;\r\n }\r\n\r\n .playlist-grid::-webkit-scrollbar {\r\n width: 10px;\r\n }\r\n\r\n .playlist-grid::-webkit-scrollbar-track {\r\n background: #ffe6a7;\r\n border-radius: 20px;\r\n }\r\n\r\n .playlist-grid::-webkit-scrollbar-thumb {\r\n background: #f7b731;\r\n border-radius: 20px;\r\n border: 2px solid #ffe6a7;\r\n }\r\n\r\n .video-card {\r\n background: white;\r\n border-radius: 28px;\r\n padding: 0.9rem 1rem;\r\n box-shadow: 0 6px 0 #d4a373, 0 10px 18px -6px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n transition: all 0.15s ease;\r\n border: 2px solid #ffe6a7;\r\n text-align: center;\r\n font-weight: 600;\r\n color: #2b2d42;\r\n font-size: 1rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1.3;\r\n word-break: break-word;\r\n }\r\n\r\n .video-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 0 #d4a373, 0 18px 28px -8px rgba(0, 0, 0, 0.3);\r\n background: #fff9e6;\r\n border-color: #f7b731;\r\n }\r\n\r\n .video-card.active {\r\n background: #f7b731;\r\n color: #1e1e2f;\r\n border-color: #2b2d42;\r\n box-shadow: 0 6px 0 #b86b1f, 0 12px 20px -6px black;\r\n transform: scale(1.02);\r\n font-weight: 700;\r\n }\r\n\r\n .video-card .filename {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n background: rgba(0, 0, 0, 0.06);\r\n padding: 0.2rem 0.8rem;\r\n border-radius: 30px;\r\n margin-top: 0.3rem;\r\n color: #3d405b;\r\n max-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .video-card.active .filename {\r\n background: rgba(0, 0, 0, 0.15);\r\n color: #1e1e2f;\r\n }\r\n\r\n \/* ============================================\r\n SEZIONE 3 \u2013 FLIP CARDS\r\n ============================================ *\/\r\n .info-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 2rem;\r\n align-items: stretch;\r\n justify-content: center;\r\n }\r\n\r\n .flip-card {\r\n flex: 1 1 260px;\r\n max-width: 360px;\r\n height: 300px;\r\n perspective: 1400px;\r\n cursor: pointer;\r\n }\r\n\r\n .flip-card-inner {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n transform-style: preserve-3d;\r\n }\r\n\r\n .flip-card:hover .flip-card-inner,\r\n .flip-card.flipped .flip-card-inner {\r\n transform: rotateY(180deg);\r\n }\r\n\r\n .flip-card-front,\r\n .flip-card-back {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n -webkit-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n border-radius: 40px;\r\n padding: 1.8rem 1.6rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n }\r\n\r\n .flip-card-front {\r\n background: linear-gradient(145deg, #ffffff, #fff4d6);\r\n border: 4px solid #f7b731;\r\n box-shadow:\r\n 0 12px 0 #d4a373,\r\n 0 22px 35px -12px rgba(0, 0, 0, 0.35),\r\n inset 0 0 0 2px rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .flip-card-front .emoji-big {\r\n font-size: 4rem;\r\n line-height: 1;\r\n margin-bottom: 1rem;\r\n filter: drop-shadow(3px 3px 0 rgba(247, 183, 49, 0.5));\r\n }\r\n\r\n .flip-card-front h3 {\r\n font-size: 1.7rem;\r\n font-weight: 800;\r\n color: #2b2d42;\r\n line-height: 1.2;\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .flip-card-front .hint {\r\n margin-top: 1.2rem;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n color: #5e548e;\r\n background: #ffd966;\r\n padding: 0.3rem 1rem;\r\n border-radius: 30px;\r\n letter-spacing: 0.03em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .flip-card-back {\r\n background: linear-gradient(145deg, #2b2d42, #1e1e2f);\r\n border: 4px solid #f7b731;\r\n transform: rotateY(180deg);\r\n box-shadow:\r\n 0 12px 0 #0e0e1a,\r\n 0 22px 35px -12px rgba(0, 0, 0, 0.5),\r\n inset 0 0 0 2px rgba(255, 215, 0, 0.3);\r\n }\r\n\r\n .flip-card-back p {\r\n font-size: 0.98rem;\r\n line-height: 1.6;\r\n color: #fefae0;\r\n font-weight: 400;\r\n max-width: 100%;\r\n }\r\n\r\n .flip-card-back p strong {\r\n color: #ffd966;\r\n font-weight: 700;\r\n }\r\n\r\n .flip-card-back .back-emoji {\r\n font-size: 1.6rem;\r\n margin-bottom: 0.6rem;\r\n line-height: 1;\r\n }\r\n\r\n \/* footer *\/\r\n footer {\r\n margin-top: 2.8rem;\r\n text-align: center;\r\n color: #5e548e;\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n border-top: 3px dotted #f7b731;\r\n padding-top: 1.8rem;\r\n }\r\n\r\n footer strong {\r\n color: #f7b731;\r\n background: #2b2d42;\r\n padding: 0.2rem 0.9rem;\r\n border-radius: 30px;\r\n font-weight: 600;\r\n }\r\n\r\n \/* responsive *\/\r\n @media (max-width: 700px) {\r\n body { padding: 0.8rem; }\r\n .page-wrapper { padding: 1.6rem 1rem; border-radius: 40px; }\r\n .hero-text h1 { font-size: 2.4rem; }\r\n .hero-images img { width: 120px; height: 120px; }\r\n .video-section { padding: 1.2rem; border-radius: 40px; }\r\n .playlist-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\r\n .video-card { font-size: 0.85rem; padding: 0.7rem 0.4rem; }\r\n .now-playing { font-size: 0.9rem; flex-wrap: wrap; gap: 0.5rem; }\r\n .section-header h2 { font-size: 1.6rem; }\r\n .section-number { width: 48px; height: 48px; min-width: 48px; font-size: 1.4rem; }\r\n .flip-card { height: 280px; }\r\n .flip-card-front .emoji-big { font-size: 3rem; }\r\n .flip-card-front h3 { font-size: 1.4rem; }\r\n .flip-card-back p { font-size: 0.9rem; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n \r\n \r\n <header class=\"site-header\">\r\n <div class=\"site-header-inner\">\r\n\r\n \r\n <a href=\"https:\/\/www.profdifaziodonato.it\/\" class=\"site-brand\" aria-label=\"Homepage Prof. Di Fazio\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/1200x\/6b\/fe\/7d\/6bfe7dce374e5efb690241ef2e2ad367.jpg\" alt=\"Logo Prof. Di Fazio\" class=\"site-brand-logo\">\r\n <div class=\"site-brand-text\">\r\n <span class=\"site-brand-name\">Prof. Di Fazio<\/span>\r\n <span class=\"site-brand-role\">docente di Inglese<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n \r\n <nav class=\"site-nav\" aria-label=\"Menu principale\">\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/\">Homepage<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=41\">Libreria<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=651\">Phonics<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=424\" target=\"_blank\" rel=\"noopener\">Visual<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=528\">Writing<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=238\">Street Talk<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=147\">Quiz<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=98\">Privacy Policy<\/a>\r\n <\/nav>\r\n\r\n <\/div>\r\n <\/header>\r\n \r\n\r\n \r\n \r\n \r\n <div class=\"page-wrapper\">\r\n\r\n \r\n <section class=\"section\" id=\"sezione-scopri\">\r\n <div class=\"section-header\">\r\n <div class=\"section-number\">1<\/div>\r\n <h2>Scopri il metodo\r\n <span>Il Phonics in poche parole<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"hero\">\r\n <div class=\"hero-text\">\r\n <div class=\"tagline\">\u2728 impara giocando \u2728<\/div>\r\n <h1>Phonics <span>revolution<\/span><\/h1>\r\n <p>\r\n <strong>Il metodo innovativo<\/strong> per imparare i suoni delle lettere inglesi \r\n e leggere con sicurezza. Solo il 20% di teoria, l'80% di pratica con i video! \ud83c\udfac\r\n <\/p>\r\n <\/div>\r\n <div class=\"hero-images\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/1200x\/e5\/19\/98\/e51998522e6129dc829539facbb6191d.jpg\" alt=\"Phonics illustration 1\" loading=\"lazy\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/736x\/9d\/13\/b6\/9d13b64339407d6612927405ce4e449d.jpg\" alt=\"Phonics illustration 2\" loading=\"lazy\">\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section video-section\" id=\"sezione-video\">\r\n <div class=\"section-header\">\r\n <div class=\"section-number\">2<\/div>\r\n <h2>Guarda e impara\r\n <span>Il cuore della pagina: scegli la tua lezione<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"player-container\">\r\n <div class=\"video-wrapper\">\r\n <video id=\"mainVideo\" controls preload=\"metadata\" playsinline poster=\"\">\r\n <source src=\"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_a_e.mp4\" type=\"video\/mp4\">\r\n Il tuo browser non supporta il tag video.\r\n <\/video>\r\n <\/div>\r\n <div class=\"now-playing\">\r\n <span>\ud83c\udfa5 IN RIPRODUZIONE<\/span>\r\n <div id=\"currentVideoLabel\">opw_sb3_u01_a_e.mp4<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"playlist-title\">\r\n <h3>\ud83d\udcfa Scegli la tua lezione<\/h3>\r\n <\/div>\r\n <div class=\"playlist-grid\" id=\"playlistGrid\">\r\n \r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section\" id=\"sezione-perche\">\r\n <div class=\"section-header\">\r\n <div class=\"section-number\">3<\/div>\r\n <h2>Perch\u00e9 Phonics funziona\r\n <span>I tre pilastri del metodo \u00b7 passa il mouse o tocca per scoprire<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"info-row\">\r\n\r\n \r\n <div class=\"flip-card\" tabindex=\"0\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <div class=\"emoji-big\">\ud83d\udd24<\/div>\r\n <h3>Suoni,<br>non lettere<\/h3>\r\n <div class=\"hint\">scopri di pi\u00f9<\/div>\r\n <\/div>\r\n <div class=\"flip-card-back\">\r\n <div class=\"back-emoji\">\ud83d\udd24<\/div>\r\n <p>\r\n Phonics insegna a riconoscere i <strong>fonemi<\/strong> (i suoni) \r\n e a collegarli alle lettere. \u00c8 il modo naturale per imparare \r\n a leggere e parlare senza incertezze.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flip-card\" tabindex=\"0\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <div class=\"emoji-big\">\u26a1<\/div>\r\n <h3>Pi\u00f9<br>sicurezza<\/h3>\r\n <div class=\"hint\">scopri di pi\u00f9<\/div>\r\n <\/div>\r\n <div class=\"flip-card-back\">\r\n <div class=\"back-emoji\">\u26a1<\/div>\r\n <p>\r\n Con pochi minuti al giorno, i video ti guidano nella pronuncia. \r\n Il <strong>20% di regole<\/strong> e l'<strong>80% di ascolto attivo<\/strong> \r\n ti fanno migliorare velocemente.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flip-card\" tabindex=\"0\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <div class=\"emoji-big\">\ud83c\udf08<\/div>\r\n <h3>Allegria<br>e colore<\/h3>\r\n <div class=\"hint\">scopri di pi\u00f9<\/div>\r\n <\/div>\r\n <div class=\"flip-card-back\">\r\n <div class=\"back-emoji\">\ud83c\udf08<\/div>\r\n <p>\r\n Imparare \u00e8 pi\u00f9 facile quando \u00e8 divertente! Ogni video \u00e8 pensato \r\n per essere <strong>chiaro, vivace<\/strong> e adatto a tutte le et\u00e0.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n <p>\u00a9 2025 Phonics Revolution \u00b7 <strong>Prof. Di Fazio Donato<\/strong><\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n \/\/ Lista dei video\r\n const videoUrls = [\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_a_e.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_ake.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_ame.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_ate.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_ave.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u02_i_e.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u02_ike.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u02_ime.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u02_ine.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u02_ive.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u03_o_e.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u03_u_e.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u03_ube.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u04_ai.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u04_ay.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u05_ea.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u05_ee.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u05_ey.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u05_y.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u06_ie.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u06_igh.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u06_spy.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u07_oa.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u07_ow.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u08_ew.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u08_oo.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u08_ue.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u08_ui.mp4\"\r\n ];\r\n\r\n const videoElement = document.getElementById('mainVideo');\r\n const playlistGrid = document.getElementById('playlistGrid');\r\n const currentVideoLabel = document.getElementById('currentVideoLabel');\r\n\r\n function getFileName(url) {\r\n const parts = url.split('\/');\r\n return parts[parts.length - 1];\r\n }\r\n\r\n function setActiveVideo(url, cardElement) {\r\n videoElement.src = url;\r\n videoElement.load();\r\n currentVideoLabel.textContent = getFileName(url);\r\n document.querySelectorAll('.video-card').forEach(card => card.classList.remove('active'));\r\n if (cardElement) cardElement.classList.add('active');\r\n }\r\n\r\n videoUrls.forEach(url => {\r\n const fileName = getFileName(url);\r\n const card = document.createElement('div');\r\n card.className = 'video-card';\r\n const displayName = fileName.replace('.mp4', '');\r\n card.innerHTML = `\r\n <div>\ud83c\udfac<\/div>\r\n <div class=\"filename\">${displayName}<\/div>\r\n `;\r\n card.addEventListener('click', () => {\r\n setActiveVideo(url, card);\r\n });\r\n playlistGrid.appendChild(card);\r\n });\r\n\r\n const firstCard = playlistGrid.firstChild;\r\n if (firstCard) {\r\n currentVideoLabel.textContent = getFileName(videoUrls[0]);\r\n firstCard.classList.add('active');\r\n videoElement.src = videoUrls[0];\r\n }\r\n\r\n videoElement.addEventListener('error', () => {\r\n console.warn('Errore nel caricamento del video:', videoElement.src);\r\n });\r\n\r\n \/\/ Supporto click\/tap per dispositivi touch sulle flip card\r\n document.querySelectorAll('.flip-card').forEach(card => {\r\n card.addEventListener('click', function(e) {\r\n if (e.target.closest('a')) return;\r\n this.classList.toggle('flipped');\r\n });\r\n card.addEventListener('keydown', function(e) {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n this.classList.toggle('flipped');\r\n }\r\n });\r\n });\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Phonics \u00b7 Impara i suoni dell’inglese Prof. Di Fazio docente di Inglese Homepage Libreria Phonics Visual Writing Street Talk Quiz […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-697","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=697"}],"version-history":[{"count":7,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/697\/revisions"}],"predecessor-version":[{"id":704,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/697\/revisions\/704"}],"wp:attachment":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Phonics \u00b7 Impara i suoni dell'inglese<\/title>\r\n\r\n \r\n \r\n \r\n\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/open-sans@5.0.8\/index.css\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/roboto@5.0.8\/index.css\">\r\n\r\n \r\n <style>\r\n \/* Reset base per il menu *\/\r\n .site-header * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* Variabili colori *\/\r\n :root {\r\n --header-bg: #fcfbf8;\r\n --header-text: #2d2d2d;\r\n --header-accent: #c65d3a;\r\n }\r\n\r\n \/* ============ HEADER CONTAINER ============ *\/\r\n .site-header {\r\n background: var(--header-bg);\r\n border-bottom: 1px solid rgba(45, 45, 45, 0.1);\r\n position: sticky;\r\n top: 0;\r\n z-index: 9999;\r\n backdrop-filter: blur(12px);\r\n font-family: 'Open Sans', sans-serif;\r\n width: 100%;\r\n }\r\n\r\n .site-header-inner {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 16px 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .site-header-inner { padding: 14px 24px; }\r\n }\r\n @media (max-width: 640px) {\r\n .site-header-inner { padding: 12px 16px; gap: 12px; }\r\n }\r\n\r\n \/* Branding (Logo + Testo) *\/\r\n .site-brand {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n text-decoration: none;\r\n flex-shrink: 0;\r\n }\r\n\r\n .site-brand-logo {\r\n width: 52px;\r\n height: 52px;\r\n border-radius: 9999px;\r\n object-fit: cover;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);\r\n border: 2px solid var(--header-bg);\r\n outline: 2px solid rgba(198, 93, 58, 0.25);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n .site-brand:hover .site-brand-logo {\r\n transform: scale(1.05);\r\n box-shadow: 0 6px 14px rgba(198, 93, 58, 0.3);\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .site-brand-logo { width: 40px; height: 40px; }\r\n .site-brand { gap: 8px; }\r\n }\r\n\r\n .site-brand-text {\r\n display: flex;\r\n flex-direction: column;\r\n line-height: 1.15;\r\n }\r\n\r\n .site-brand-name {\r\n font-family: 'Open Sans', sans-serif;\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n color: var(--header-text);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .site-brand-role {\r\n font-family: 'Roboto', sans-serif;\r\n font-weight: 500;\r\n font-size: 0.75rem;\r\n color: var(--header-accent);\r\n letter-spacing: 0.03em;\r\n text-transform: uppercase;\r\n margin-top: 1px;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .site-brand-name { font-size: 1rem; }\r\n .site-brand-role { font-size: 0.65rem; }\r\n }\r\n\r\n \/* Desktop Navigation *\/\r\n .site-nav {\r\n display: flex;\r\n align-items: center;\r\n gap: 24px;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* Desktop e Tablet grande (>900px) *\/\r\n @media (min-width: 900px) {\r\n .site-nav a {\r\n font-family: 'Open Sans', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n color: var(--header-text);\r\n text-decoration: none;\r\n position: relative;\r\n padding: 6px 0;\r\n transition: color 0.25s ease;\r\n white-space: nowrap;\r\n }\r\n .site-nav a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--header-accent);\r\n transition: width 0.3s ease;\r\n }\r\n .site-nav a:hover { color: var(--header-accent); }\r\n .site-nav a:hover::after { width: 100%; }\r\n }\r\n\r\n \/* Tablet medio\/piccolo (641px - 899px) *\/\r\n @media (min-width: 641px) and (max-width: 899px) {\r\n .site-nav { gap: 16px; }\r\n .site-nav a {\r\n font-family: 'Open Sans', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.82rem;\r\n color: var(--header-text);\r\n text-decoration: none;\r\n position: relative;\r\n padding: 4px 0;\r\n transition: color 0.25s ease;\r\n white-space: nowrap;\r\n }\r\n .site-nav a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--header-accent);\r\n transition: width 0.3s ease;\r\n }\r\n .site-nav a:hover { color: var(--header-accent); }\r\n .site-nav a:hover::after { width: 100%; }\r\n }\r\n\r\n \/* Mobile Toggle Button (<640px) *\/\r\n .mobile-menu-toggle {\r\n display: none;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 8px;\r\n z-index: 10001;\r\n }\r\n\r\n .mobile-menu-toggle span {\r\n display: block;\r\n width: 24px;\r\n height: 2px;\r\n background: var(--header-text);\r\n margin: 5px 0;\r\n transition: 0.3s;\r\n border-radius: 2px;\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .mobile-menu-toggle { display: block; }\r\n\r\n \/* Layout mobile header *\/\r\n .site-header-inner {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 12px 16px;\r\n }\r\n\r\n .site-brand {\r\n width: 100%;\r\n justify-content: flex-start;\r\n margin-bottom: 8px;\r\n }\r\n\r\n \/* Menu mobile verticale *\/\r\n .site-nav {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 12px 20px;\r\n width: 100%;\r\n padding-top: 8px;\r\n border-top: 1px solid rgba(45,45,45,0.05);\r\n }\r\n\r\n .site-nav a {\r\n font-family: 'Open Sans', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.85rem;\r\n color: var(--header-text);\r\n text-decoration: none;\r\n padding: 4px 0;\r\n }\r\n .site-nav a:hover { color: var(--header-accent); }\r\n }\r\n <\/style>\r\n\r\n <style>\r\n \/* ============================================================\r\n STILI PAGINA PHONICS\r\n ============================================================ *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;\r\n }\r\n\r\n body {\r\n background: linear-gradient(145deg, #fff9e6 0%, #ffe6f0 100%);\r\n min-height: 100vh;\r\n padding: 1.5rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n }\r\n\r\n \/* main card \/ container *\/\r\n .page-wrapper {\r\n max-width: 1300px;\r\n width: 100%;\r\n background: rgba(255, 255, 255, 0.7);\r\n backdrop-filter: blur(8px);\r\n border-radius: 60px 60px 40px 40px;\r\n box-shadow: 0 25px 50px -8px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(255, 215, 0, 0.3);\r\n padding: 2.5rem 2rem 3rem;\r\n margin-top: 1.5rem;\r\n }\r\n\r\n \/* ============================================\r\n STILI GENERALI DELLE SEZIONI\r\n ============================================ *\/\r\n .section {\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .section:last-of-type {\r\n margin-bottom: 0;\r\n }\r\n\r\n .section-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-bottom: 1.8rem;\r\n padding-bottom: 0.8rem;\r\n border-bottom: 4px dashed #f7b731;\r\n }\r\n\r\n .section-number {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 60px;\r\n height: 60px;\r\n min-width: 60px;\r\n border-radius: 50%;\r\n background: #2b2d42;\r\n color: #ffd966;\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n box-shadow: 4px 4px 0 #f7b731;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2.1rem;\r\n font-weight: 800;\r\n color: #2b2d42;\r\n letter-spacing: -0.01em;\r\n line-height: 1.2;\r\n }\r\n\r\n .section-header h2 span {\r\n display: block;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n color: #5e548e;\r\n margin-top: 0.15rem;\r\n }\r\n\r\n \/* ============================================\r\n SEZIONE 1 \u2013 HERO \/ INTRODUZIONE\r\n ============================================ *\/\r\n .hero {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 2rem;\r\n }\r\n\r\n .hero-text {\r\n flex: 1 1 300px;\r\n }\r\n\r\n .hero-text h1 {\r\n font-size: 3.2rem;\r\n font-weight: 800;\r\n line-height: 1.2;\r\n color: #2b2d42;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 0.5rem;\r\n text-shadow: 3px 3px 0 #ffd966;\r\n }\r\n\r\n .hero-text h1 span {\r\n background: linear-gradient(135deg, #ff6b6b, #f7b731);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n text-shadow: none;\r\n }\r\n\r\n .hero-text .tagline {\r\n font-size: 1.3rem;\r\n font-weight: 500;\r\n color: #3d405b;\r\n background: #fefae0;\r\n display: inline-block;\r\n padding: 0.4rem 1.2rem;\r\n border-radius: 40px;\r\n margin-bottom: 1.2rem;\r\n border: 2px dashed #f7b731;\r\n }\r\n\r\n .hero-text p {\r\n font-size: 1.1rem;\r\n color: #2f3e46;\r\n margin-bottom: 1.5rem;\r\n line-height: 1.6;\r\n background: rgba(255, 255, 255, 0.6);\r\n padding: 1rem 1.4rem;\r\n border-radius: 30px;\r\n box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);\r\n }\r\n\r\n .hero-images {\r\n flex: 1 1 320px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .hero-images img {\r\n width: 160px;\r\n height: 160px;\r\n object-fit: cover;\r\n border-radius: 50% 30% 50% 30% \/ 30% 50% 30% 50%;\r\n border: 5px solid white;\r\n box-shadow: 0 15px 25px -8px rgba(0, 0, 0, 0.2), 0 0 0 4px #f7b731;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .hero-images img:first-child {\r\n transform: rotate(-4deg);\r\n }\r\n\r\n .hero-images img:last-child {\r\n transform: rotate(5deg);\r\n }\r\n\r\n .hero-images img:hover {\r\n transform: scale(1.05) rotate(0deg);\r\n }\r\n\r\n \/* ============================================\r\n SEZIONE 2 \u2013 VIDEO PLAYER\r\n ============================================ *\/\r\n .video-section {\r\n background: #2b2d42;\r\n border-radius: 50px;\r\n padding: 2rem 2rem 1.8rem;\r\n box-shadow: 0 30px 40px -12px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(255, 215, 0, 0.5);\r\n transition: box-shadow 0.3s;\r\n }\r\n\r\n .video-section:hover {\r\n box-shadow: 0 35px 50px -10px rgba(247, 183, 49, 0.4), inset 0 0 0 3px #f7b731;\r\n }\r\n\r\n .video-section .section-header {\r\n border-bottom: 4px dashed #f7b731;\r\n }\r\n\r\n .video-section .section-number {\r\n background: #ffd966;\r\n color: #2b2d42;\r\n box-shadow: 4px 4px 0 #f7b731;\r\n }\r\n\r\n .video-section .section-header h2 {\r\n color: white;\r\n }\r\n\r\n .video-section .section-header h2 span {\r\n color: #ffd966;\r\n }\r\n\r\n .player-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.2rem;\r\n }\r\n\r\n .video-wrapper {\r\n position: relative;\r\n border-radius: 32px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 30px -8px black;\r\n background: #000;\r\n aspect-ratio: 16 \/ 9;\r\n }\r\n\r\n .video-wrapper video {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n object-fit: cover;\r\n border-radius: 32px;\r\n transition: opacity 0.2s;\r\n }\r\n\r\n .now-playing {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n color: #ffd966;\r\n font-weight: 600;\r\n font-size: 1.1rem;\r\n background: rgba(0, 0, 0, 0.4);\r\n border-radius: 40px;\r\n padding: 0.6rem 1.5rem;\r\n margin-top: 0.2rem;\r\n backdrop-filter: blur(4px);\r\n border: 1px solid rgba(255, 215, 0, 0.4);\r\n }\r\n\r\n .now-playing span {\r\n font-weight: 400;\r\n font-size: 0.95rem;\r\n background: #f7b731;\r\n padding: 0.2rem 1rem;\r\n border-radius: 30px;\r\n color: #1e1e2f;\r\n }\r\n\r\n .playlist-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n margin: 1.8rem 0 1rem 0.2rem;\r\n }\r\n\r\n .playlist-title h3 {\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n color: #ffd966;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 0.4rem 1.4rem;\r\n border-radius: 50px;\r\n display: inline-block;\r\n border: 2px solid #f7b731;\r\n }\r\n\r\n .playlist-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\r\n gap: 0.9rem;\r\n max-height: 380px;\r\n overflow-y: auto;\r\n padding: 0.5rem 0.5rem 1rem 0.5rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 40px;\r\n scrollbar-width: thin;\r\n scrollbar-color: #f7b731 #ffe6a7;\r\n }\r\n\r\n .playlist-grid::-webkit-scrollbar {\r\n width: 10px;\r\n }\r\n\r\n .playlist-grid::-webkit-scrollbar-track {\r\n background: #ffe6a7;\r\n border-radius: 20px;\r\n }\r\n\r\n .playlist-grid::-webkit-scrollbar-thumb {\r\n background: #f7b731;\r\n border-radius: 20px;\r\n border: 2px solid #ffe6a7;\r\n }\r\n\r\n .video-card {\r\n background: white;\r\n border-radius: 28px;\r\n padding: 0.9rem 1rem;\r\n box-shadow: 0 6px 0 #d4a373, 0 10px 18px -6px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n transition: all 0.15s ease;\r\n border: 2px solid #ffe6a7;\r\n text-align: center;\r\n font-weight: 600;\r\n color: #2b2d42;\r\n font-size: 1rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1.3;\r\n word-break: break-word;\r\n }\r\n\r\n .video-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 10px 0 #d4a373, 0 18px 28px -8px rgba(0, 0, 0, 0.3);\r\n background: #fff9e6;\r\n border-color: #f7b731;\r\n }\r\n\r\n .video-card.active {\r\n background: #f7b731;\r\n color: #1e1e2f;\r\n border-color: #2b2d42;\r\n box-shadow: 0 6px 0 #b86b1f, 0 12px 20px -6px black;\r\n transform: scale(1.02);\r\n font-weight: 700;\r\n }\r\n\r\n .video-card .filename {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n background: rgba(0, 0, 0, 0.06);\r\n padding: 0.2rem 0.8rem;\r\n border-radius: 30px;\r\n margin-top: 0.3rem;\r\n color: #3d405b;\r\n max-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .video-card.active .filename {\r\n background: rgba(0, 0, 0, 0.15);\r\n color: #1e1e2f;\r\n }\r\n\r\n \/* ============================================\r\n SEZIONE 3 \u2013 FLIP CARDS\r\n ============================================ *\/\r\n .info-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 2rem;\r\n align-items: stretch;\r\n justify-content: center;\r\n }\r\n\r\n .flip-card {\r\n flex: 1 1 260px;\r\n max-width: 360px;\r\n height: 300px;\r\n perspective: 1400px;\r\n cursor: pointer;\r\n }\r\n\r\n .flip-card-inner {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n transform-style: preserve-3d;\r\n }\r\n\r\n .flip-card:hover .flip-card-inner,\r\n .flip-card.flipped .flip-card-inner {\r\n transform: rotateY(180deg);\r\n }\r\n\r\n .flip-card-front,\r\n .flip-card-back {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n -webkit-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n border-radius: 40px;\r\n padding: 1.8rem 1.6rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n }\r\n\r\n .flip-card-front {\r\n background: linear-gradient(145deg, #ffffff, #fff4d6);\r\n border: 4px solid #f7b731;\r\n box-shadow:\r\n 0 12px 0 #d4a373,\r\n 0 22px 35px -12px rgba(0, 0, 0, 0.35),\r\n inset 0 0 0 2px rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .flip-card-front .emoji-big {\r\n font-size: 4rem;\r\n line-height: 1;\r\n margin-bottom: 1rem;\r\n filter: drop-shadow(3px 3px 0 rgba(247, 183, 49, 0.5));\r\n }\r\n\r\n .flip-card-front h3 {\r\n font-size: 1.7rem;\r\n font-weight: 800;\r\n color: #2b2d42;\r\n line-height: 1.2;\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .flip-card-front .hint {\r\n margin-top: 1.2rem;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n color: #5e548e;\r\n background: #ffd966;\r\n padding: 0.3rem 1rem;\r\n border-radius: 30px;\r\n letter-spacing: 0.03em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .flip-card-back {\r\n background: linear-gradient(145deg, #2b2d42, #1e1e2f);\r\n border: 4px solid #f7b731;\r\n transform: rotateY(180deg);\r\n box-shadow:\r\n 0 12px 0 #0e0e1a,\r\n 0 22px 35px -12px rgba(0, 0, 0, 0.5),\r\n inset 0 0 0 2px rgba(255, 215, 0, 0.3);\r\n }\r\n\r\n .flip-card-back p {\r\n font-size: 0.98rem;\r\n line-height: 1.6;\r\n color: #fefae0;\r\n font-weight: 400;\r\n max-width: 100%;\r\n }\r\n\r\n .flip-card-back p strong {\r\n color: #ffd966;\r\n font-weight: 700;\r\n }\r\n\r\n .flip-card-back .back-emoji {\r\n font-size: 1.6rem;\r\n margin-bottom: 0.6rem;\r\n line-height: 1;\r\n }\r\n\r\n \/* footer *\/\r\n footer {\r\n margin-top: 2.8rem;\r\n text-align: center;\r\n color: #5e548e;\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n border-top: 3px dotted #f7b731;\r\n padding-top: 1.8rem;\r\n }\r\n\r\n footer strong {\r\n color: #f7b731;\r\n background: #2b2d42;\r\n padding: 0.2rem 0.9rem;\r\n border-radius: 30px;\r\n font-weight: 600;\r\n }\r\n\r\n \/* responsive *\/\r\n @media (max-width: 700px) {\r\n body { padding: 0.8rem; }\r\n .page-wrapper { padding: 1.6rem 1rem; border-radius: 40px; }\r\n .hero-text h1 { font-size: 2.4rem; }\r\n .hero-images img { width: 120px; height: 120px; }\r\n .video-section { padding: 1.2rem; border-radius: 40px; }\r\n .playlist-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\r\n .video-card { font-size: 0.85rem; padding: 0.7rem 0.4rem; }\r\n .now-playing { font-size: 0.9rem; flex-wrap: wrap; gap: 0.5rem; }\r\n .section-header h2 { font-size: 1.6rem; }\r\n .section-number { width: 48px; height: 48px; min-width: 48px; font-size: 1.4rem; }\r\n .flip-card { height: 280px; }\r\n .flip-card-front .emoji-big { font-size: 3rem; }\r\n .flip-card-front h3 { font-size: 1.4rem; }\r\n .flip-card-back p { font-size: 0.9rem; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n \r\n \r\n <header class=\"site-header\">\r\n <div class=\"site-header-inner\">\r\n\r\n \r\n <a href=\"https:\/\/www.profdifaziodonato.it\/\" class=\"site-brand\" aria-label=\"Homepage Prof. Di Fazio\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/1200x\/6b\/fe\/7d\/6bfe7dce374e5efb690241ef2e2ad367.jpg\" alt=\"Logo Prof. Di Fazio\" class=\"site-brand-logo\">\r\n <div class=\"site-brand-text\">\r\n <span class=\"site-brand-name\">Prof. Di Fazio<\/span>\r\n <span class=\"site-brand-role\">docente di Inglese<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n \r\n <nav class=\"site-nav\" aria-label=\"Menu principale\">\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/\">Homepage<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=41\">Libreria<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=651\">Phonics<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=424\" target=\"_blank\" rel=\"noopener\">Visual<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=528\">Writing<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=238\">Street Talk<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=147\">Quiz<\/a>\r\n <a href=\"https:\/\/www.profdifaziodonato.it\/?page_id=98\">Privacy Policy<\/a>\r\n <\/nav>\r\n\r\n <\/div>\r\n <\/header>\r\n \r\n\r\n \r\n \r\n \r\n <div class=\"page-wrapper\">\r\n\r\n \r\n <section class=\"section\" id=\"sezione-scopri\">\r\n <div class=\"section-header\">\r\n <div class=\"section-number\">1<\/div>\r\n <h2>Scopri il metodo\r\n <span>Il Phonics in poche parole<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"hero\">\r\n <div class=\"hero-text\">\r\n <div class=\"tagline\">\u2728 impara giocando \u2728<\/div>\r\n <h1>Phonics <span>revolution<\/span><\/h1>\r\n <p>\r\n <strong>Il metodo innovativo<\/strong> per imparare i suoni delle lettere inglesi \r\n e leggere con sicurezza. Solo il 20% di teoria, l'80% di pratica con i video! \ud83c\udfac\r\n <\/p>\r\n <\/div>\r\n <div class=\"hero-images\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/1200x\/e5\/19\/98\/e51998522e6129dc829539facbb6191d.jpg\" alt=\"Phonics illustration 1\" loading=\"lazy\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/736x\/9d\/13\/b6\/9d13b64339407d6612927405ce4e449d.jpg\" alt=\"Phonics illustration 2\" loading=\"lazy\">\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section video-section\" id=\"sezione-video\">\r\n <div class=\"section-header\">\r\n <div class=\"section-number\">2<\/div>\r\n <h2>Guarda e impara\r\n <span>Il cuore della pagina: scegli la tua lezione<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"player-container\">\r\n <div class=\"video-wrapper\">\r\n <video id=\"mainVideo\" controls preload=\"metadata\" playsinline poster=\"\">\r\n <source src=\"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_a_e.mp4\" type=\"video\/mp4\">\r\n Il tuo browser non supporta il tag video.\r\n <\/video>\r\n <\/div>\r\n <div class=\"now-playing\">\r\n <span>\ud83c\udfa5 IN RIPRODUZIONE<\/span>\r\n <div id=\"currentVideoLabel\">opw_sb3_u01_a_e.mp4<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"playlist-title\">\r\n <h3>\ud83d\udcfa Scegli la tua lezione<\/h3>\r\n <\/div>\r\n <div class=\"playlist-grid\" id=\"playlistGrid\">\r\n \r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section\" id=\"sezione-perche\">\r\n <div class=\"section-header\">\r\n <div class=\"section-number\">3<\/div>\r\n <h2>Perch\u00e9 Phonics funziona\r\n <span>I tre pilastri del metodo \u00b7 passa il mouse o tocca per scoprire<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"info-row\">\r\n\r\n \r\n <div class=\"flip-card\" tabindex=\"0\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <div class=\"emoji-big\">\ud83d\udd24<\/div>\r\n <h3>Suoni,<br>non lettere<\/h3>\r\n <div class=\"hint\">scopri di pi\u00f9<\/div>\r\n <\/div>\r\n <div class=\"flip-card-back\">\r\n <div class=\"back-emoji\">\ud83d\udd24<\/div>\r\n <p>\r\n Phonics insegna a riconoscere i <strong>fonemi<\/strong> (i suoni) \r\n e a collegarli alle lettere. \u00c8 il modo naturale per imparare \r\n a leggere e parlare senza incertezze.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flip-card\" tabindex=\"0\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <div class=\"emoji-big\">\u26a1<\/div>\r\n <h3>Pi\u00f9<br>sicurezza<\/h3>\r\n <div class=\"hint\">scopri di pi\u00f9<\/div>\r\n <\/div>\r\n <div class=\"flip-card-back\">\r\n <div class=\"back-emoji\">\u26a1<\/div>\r\n <p>\r\n Con pochi minuti al giorno, i video ti guidano nella pronuncia. \r\n Il <strong>20% di regole<\/strong> e l'<strong>80% di ascolto attivo<\/strong> \r\n ti fanno migliorare velocemente.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flip-card\" tabindex=\"0\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <div class=\"emoji-big\">\ud83c\udf08<\/div>\r\n <h3>Allegria<br>e colore<\/h3>\r\n <div class=\"hint\">scopri di pi\u00f9<\/div>\r\n <\/div>\r\n <div class=\"flip-card-back\">\r\n <div class=\"back-emoji\">\ud83c\udf08<\/div>\r\n <p>\r\n Imparare \u00e8 pi\u00f9 facile quando \u00e8 divertente! Ogni video \u00e8 pensato \r\n per essere <strong>chiaro, vivace<\/strong> e adatto a tutte le et\u00e0.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n <p>\u00a9 2025 Phonics Revolution \u00b7 <strong>Prof. Di Fazio Donato<\/strong><\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n \/\/ Lista dei video\r\n const videoUrls = [\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_a_e.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_ake.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_ame.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_ate.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u01_ave.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u02_i_e.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u02_ike.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u02_ime.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u02_ine.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u02_ive.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u03_o_e.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u03_u_e.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u03_ube.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u04_ai.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u04_ay.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u05_ea.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u05_ee.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u05_ey.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u05_y.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u06_ie.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u06_igh.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u06_spy.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u07_oa.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u07_ow.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u08_ew.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u08_oo.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u08_ue.mp4\",\r\n \"https:\/\/www.profdifaziodonato.it\/ddf_online\/phonic\/video\/opw_sb3_u08_ui.mp4\"\r\n ];\r\n\r\n const videoElement = document.getElementById('mainVideo');\r\n const playlistGrid = document.getElementById('playlistGrid');\r\n const currentVideoLabel = document.getElementById('currentVideoLabel');\r\n\r\n function getFileName(url) {\r\n const parts = url.split('\/');\r\n return parts[parts.length - 1];\r\n }\r\n\r\n function setActiveVideo(url, cardElement) {\r\n videoElement.src = url;\r\n videoElement.load();\r\n currentVideoLabel.textContent = getFileName(url);\r\n document.querySelectorAll('.video-card').forEach(card => card.classList.remove('active'));\r\n if (cardElement) cardElement.classList.add('active');\r\n }\r\n\r\n videoUrls.forEach(url => {\r\n const fileName = getFileName(url);\r\n const card = document.createElement('div');\r\n card.className = 'video-card';\r\n const displayName = fileName.replace('.mp4', '');\r\n card.innerHTML = `\r\n <div>\ud83c\udfac<\/div>\r\n <div class=\"filename\">${displayName}<\/div>\r\n `;\r\n card.addEventListener('click', () => {\r\n setActiveVideo(url, card);\r\n });\r\n playlistGrid.appendChild(card);\r\n });\r\n\r\n const firstCard = playlistGrid.firstChild;\r\n if (firstCard) {\r\n currentVideoLabel.textContent = getFileName(videoUrls[0]);\r\n firstCard.classList.add('active');\r\n videoElement.src = videoUrls[0];\r\n }\r\n\r\n videoElement.addEventListener('error', () => {\r\n console.warn('Errore nel caricamento del video:', videoElement.src);\r\n });\r\n\r\n \/\/ Supporto click\/tap per dispositivi touch sulle flip card\r\n document.querySelectorAll('.flip-card').forEach(card => {\r\n card.addEventListener('click', function(e) {\r\n if (e.target.closest('a')) return;\r\n this.classList.toggle('flipped');\r\n });\r\n card.addEventListener('keydown', function(e) {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n this.classList.toggle('flipped');\r\n }\r\n });\r\n });\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Phonics \u00b7 Impara i suoni dell’inglese Prof. Di Fazio docente di Inglese Homepage Libreria Phonics Visual Writing Street Talk Quiz […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-697","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=697"}],"version-history":[{"count":7,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/697\/revisions"}],"predecessor-version":[{"id":704,"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=\/wp\/v2\/pages\/697\/revisions\/704"}],"wp:attachment":[{"href":"https:\/\/www.profdifaziodonato.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}