1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<!--************************************************************************************************************--> 5<!--********************************************** aioPop Player ***********************************************--> 6<!--*********************************************** Version 1.0 ************************************************--> 7<!--********************************************** June 13, 2026 ***********************************************--> 8<!--************************************************************************************************************--> 9<!----------------------------------------------------------------------------------------------------------------> 10<!---------------------------------------- Code by: Bernd Sebastian Kamps ----------------------------------------> 11<!----------------------------------------------------------------------------------------------------------------> 12<!-- Description: aioPop is a free multilingual audio language player using the Powerplay method. --> 13<!-- Listen to sentences in six languages, repeat aloud, and follow along in 30 translation languages. --> 14<!-- Twenty episodes per language, all set in Sardinia. Free PDF downloads. No account required. --> 15<!-- --> 16<!-- Features: --> 17<!-- ⢠Powerplay: sentence plays â you repeat aloud â sentence plays again. At your own pace. --> 18<!-- ⢠6 Audio Languages: English, Spanish, French, Italian, Portuguese, Chinese --> 19<!-- ⢠30 Translation Languages: read along in your own language --> 20<!-- ⢠20 Episodes per language, all set in Sardinia --> 21<!-- ⢠Continuous and Loop modes, adjustable speed and pause duration --> 22<!-- ⢠Megaloop: drill across multiple lessons in sequence --> 23<!-- ⢠PDF download for every language pair â no account, no registration --> 24<!-- ⢠Responsive: optimised for desktop and mobile --> 25<!-- --> 26<!-- Repository: https://github.com/bsk54/aioPop.git ------------------------------------------------------> 27<!-- Web site: https://aiopop.com --> 28<!--************************************************************************************************************--> 29 30 31<meta charset="UTF-8"> 32<meta name="viewport" content="width=device-width, initial-scale=1.0"> 33<title>aioPop â Free Language Courses for the World</title> 34<meta name="description" content="Learn English, Spanish, French, Italian, Portuguese or Chinese free. No app. No account. No payment. Ever. Just open it and listen."> 35 36<!-- âââââââ INVISIBLE SEO: Meta Tags âââââââ --> 37<meta name="keywords" content="learn languages free, free language courses, language learning online, English, Spanish, French, Italian, Portuguese, Chinese, Powerplay method, free language learning, duolingo alternative, free language app alternative"> 38<meta name="author" content="Patricia Bourcillier and Bernd Sebastian Kamps"> 39<meta name="robots" content="index, follow"> 40<link rel="canonical" href="https://aiopop.com"> 41 42<!-- âââââââ INVISIBLE SEO: Open Graph (Social Sharing) âââââââ --> 43<meta property="og:type" content="website"> 44<meta property="og:url" content="https://aiopop.com"> 45<meta property="og:title" content="aioPop â Free Language Courses for the World"> 46<meta property="og:description" content="Learn English, Spanish, French, Ital
46ian, Portuguese or Chinese free. No app. No account. No payment. Ever. Just open it and listen."> 47<meta property="og:image" content="https://aiopop.com/img/og-aiopop.jpg"> 48<meta property="og:site_name" content="aioPop"> 49<meta property="og:locale" content="en_US"> 50 51<!-- âââââââ INVISIBLE SEO: Twitter/X Tags âââââââ --> 52<meta name="twitter:card" content="summary_large_image"> 53<meta name="twitter:url" content="https://aiopop.com"> 54<meta name="twitter:title" content="aioPop â Free Language Learning"> 55<meta name="twitter:description" content="Learn 6 languages free. No app. No account. No payment. Ever."> 56<meta name="twitter:image" content="https://aiopop.com/img/og-aiopop.jpg"> 57<meta name="twitter:creator" content="@aiopop"> 58 59<!-- Favicons (site root) --> 60<link rel="icon" href="/favicons/favicon.ico" sizes="any"> 61<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg"> 62<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"> 63<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"> 64<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png"> 65<link rel="manifest" href="/favicons/site.webmanifest"> 66<meta name="theme-color" content="#06283D"> 67 68 69 70<style> 71@font-face { 72 font-family: 'Outfit'; 73 src: url('fonts/Outfit[wght].ttf') format('truetype'); 74 font-weight: 100 900; font-style: normal; font-display: swap; 75} 76@font-face { 77 font-family: 'Cormorant Garamond'; 78 src: url('fonts/CormorantGaramond[wght].ttf') format('truetype'); 79 font-weight: 100 900; font-style: normal; font-display: swap; 80} 81@font-face { 82 font-family: 'Cormorant Garamond'; 83 src: url('fonts/CormorantGaramond-Italic[wght].ttf') format('truetype'); 84 font-weight: 100 900; font-style: italic; font-display: swap; 85} 86 87*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } 88html { scroll-behavior:smooth; } 89body { font-family:'Outfit',sans-serif; background:#fff; color:#1a1a1a; overflow-x:hidden; } 90 91/* ââââââââââ NAV ââââââââââ */ 92.nav { 93 position: fixed; top:0; left:0; right:0; z-index:1000; 94 background: rgba(11,34,64,0.97); 95 backdrop-filter: blur(8px); 96 border-bottom: 1px solid rgba(255,255,255,0.07); 97 height: 52px; 98 display: flex; align-items: center; 99 padding: 0 2rem; 100} 101.nav-logo { 102 font-family:'Cormorant Garamond',serif; 103 font-size:1.5rem; font-weight:600; 104 color:#fff; text-decoration:none; letter-spacing:0.01em; 105} 106.nav-logo span { color:#E8C448; } 107.nav-spacer { flex:1; } 108.aio-lang-wrap { position: relative; } 109.aio-lang-btn { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.3rem 0.55rem; border-radius: 4px; cursor: pointer; min-width: 2.4rem; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: background 0.15s; } 110.aio-lang-btn:hover { background: rgba(255,255,255,0.26); } 111.aio-lang-panel { display: none; position: absolute; top: calc(100% + 0.35rem); right: 0; background: #fff; border: 1px solid rgba(0,0,0,0.10); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.14); min-width: 150px; max-height: 260px; overflow-y: auto; padding: 0.3rem 0; z-index: 1100; } 112.aio-lang-panel.open { display: block; } 113.aio-lang-list { display: flex; flex-direction: column; } 114.aio-lang-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.5rem 1rem; font-size: 0.88rem; color: #222; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: background 0.1s; } 115.aio-lang-item:hover { background: #f4f4f4; } 116.aio-lang-item.active { background: #e8f2fb; color: #063A5B; font-weight: 600; } 117.nav-hamburger { 118 background:none; border:none; cursor:pointer; 119 display:flex; flex-direction:column; gap:5px; 120 padding:6px; border-radius:4px; 121 transition: background 0.15s; 122} 123.nav-hamburger:hover { background: rgba(255,255,255,0.08); } 124.nav-hamburger span { 125 display:block; width:22px; height:2px; 126 background:#fff; border-radius:2px; 127 transition: transform 0.25s, opacity 0.25s; 128} 129.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } 130.nav-hamburger.open span:nth-child(2) { opacity:0; } 131.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } 132
133.nav-drawer { 134 position:fixed; top:52px; right:0; bottom:0; 135 width:260px; background:#0B2240; 136 border-left:1px solid rgba(255,255,255,0.08); 137 z-index:999; 138 display:flex; flex-direction:column; 139 padding:2rem 1.5rem; 140 transform: translateX(100%); 141 transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); 142} 143.nav-drawer.open { transform: translateX(0); } 144.nav-drawer a { 145 color:rgba(255,255,255,0.75); 146 text-decoration:none; 147 font-size:0.95rem; font-weight:500; 148 padding:0.8rem 0; 149 border-bottom:1px solid rgba(255,255,255,0.07); 150 transition: color 0.15s; 151 display:flex; align-items:center; gap:10px; 152} 153.nav-drawer a:hover { color:#E8C448; } 154.nav-drawer a:last-child { border-bottom:none; } 155.nav-drawer-cta { 156 margin-top:auto; 157 padding:0.9rem 1.2rem; 158 background:#E8C448; color:#0B2240 !important; 159 border-radius:5px; font-weight:700 !important; 160 text-align:center; justify-content:center !important; 161 border-bottom:none !important; 162} 163.nav-drawer-cta:hover { background:#f5d460; color:#0B2240 !important; } 164.nav-overlay { 165 position:fixed; inset:0; background:rgba(0,0,0,0.4); 166 z-index:998; opacity:0; pointer-events:none; 167 transition: opacity 0.28s; 168} 169.nav-overlay.open { opacity:1; pointer-events:all; } 170.hero { 171 background: #0B2240; 172 min-height: 100svh; 173 display: flex; 174 flex-direction: column; 175 justify-content: center; 176 padding: 7rem 4rem 4rem; 177 position: relative; 178 overflow: hidden; 179} 180 181.hero-sardinia { 182 position: absolute; right: -2%; top: 0; bottom: 0; 183 width: 38%; max-width: 420px; 184 opacity: 0.06; pointer-events: none; z-index: 0; 185} 186.hero-sardinia path { stroke:#fff; stroke-width:8; fill:none; stroke-linejoin:round; stroke-linecap:round; } 187 188.hero-ghost { 189 position: absolute; right: -0.03em; bottom: -0.12em; 190 font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700; 191 font-size: clamp(7rem,26vw,20rem); line-height:1; 192 color: rgba(255,255,255,0.025); pointer-events:none; user-select:none; white-space:nowrap; z-index:0; 193} 194 195.hero-inner { position:relative; z-index:1; max-width:820px; } 196 197.hero-eyebrow { 198 font-size:0.7rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; 199 color:#E8C448; margin-bottom:1.8rem; display:flex; align-items:center; gap:10px; 200} 201.hero-eyebrow::before { 202 content:''; display:block; width:28px; height:2px; background:#E8C448; flex-shrink:0; 203} 204 205.hero-headline { 206 font-family:'Cormorant Garamond',serif; 207 font-size: clamp(3.2rem,7vw,7rem); 208 font-weight:600; line-height:0.9; 209 letter-spacing:-0.02em; color:#fff; 210 margin-bottom:0.6rem; 211} 212.hero-headline em { 213 font-style:italic; color:#E8C448; 214} 215 216.hero-languages { 217 margin:1.5rem 0 2.2rem 0; 218 font-size:1.05rem; 219 color:rgba(255,255,255,0.75); 220 letter-spacing:0.04em; 221 line-height:1.8; 222 font-weight:500; 223} 224 225.hero-honest { 226 font-family:'Cormorant Garamond',serif; 227 font-style:italic; 228 font-size: clamp(1.1rem,2.2vw,1.5rem); 229 color:rgba(255,255,255,0.45); 230 line-height:1.5; margin:1.8rem 0 0.8rem; 231 border-left:2px solid rgba(232,196,72,0.4); 232 padding-left:1rem; 233} 234 235.hero-claims { 236 display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; 237 margin-bottom:2.8rem; 238} 239.hero-claim { 240 font-size:0.82rem; font-weight:500; 241 color:rgba(255,255,255,0.5); 242 display:flex; align-items:center; gap:6px; 243} 244.hero-claim::before { 245 content:''; display:block; width:5px; height:5px; 246 border-radius:50%; background:#E8C448; flex-shrink:0; 247} 248 249/* ââ Language Picker ââ */ 250.picker-label { 251 font-size:0.75rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; 252 color:rgba(255,255,255,0.4); margin-bottom:0.8rem; 253} 254 255.picker { 256 display:flex; align-items:stretch; gap:0; flex-wrap:wrap; 257 background:rgba(255,255,255,0.06); 258 border:1px solid rgba(255,255,255,0.15); 259 border-radius:8px; overflow:hidden; 260 width:fit-content; max-width:100%; 261} 262 263.picker-group { 264 display:flex; flex-direction:column; 265 padding:0.8rem 1.2rem; 266 border-right:1px solid rgba(255,255,255,0.1); 267 min-width:160px; 268} 269.picker-group-label { 270 font-size:0.62rem; font-weight:600; letter-spacing:0.15em; 271 text-transform:uppercase; color:rgba(255,255,255,0.3); 272 margin-bottom:0.4rem; 273} 274.picker select { 275 background:transparent; border:none; outline:none; 276 color:#fff; font-family:'Outfit',sans-serif; 277 font-size:1rem; font-weight:600; 278 cursor:pointer; appearance:none; 279 padding-right:1.2rem; 280 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgba(255,255,255,0.4)' d='M7 8l3 3 3-3H7z'/%3E%3C/svg%3E"); 281 background-repeat:no-repeat; background-position:right 0 center; background-size:1.1em; 282} 283.picker select option { background:#0B2240; color:#fff; } 284 285.picker-go { 286 display:flex; align-items:center; justify-content:center; 287 padding:1rem 2rem; 288 background:#E8C448; color:#0B2240; 289 font-family:'Outfit',sans-serif; 290 font-size:0.95rem; font-weight:700; 291 border:none; cursor:pointer; 292 transition:background 0.18s; 293 white-space:nowrap; gap:8px; 294 text-decoration:none; 295} 296.picker-go:hover { background:#f5d460; } 297.picker-go svg { flex-shrink:0; } 298 299.hero-since { 300 margin-top:2rem; 301 font-size:0.75rem; color:rgba(255,255,255,0.25); 302 letter-spacing:0.08em; 303} 304 305/* ââââââââââ HOW IT WORKS ââââââââââ */ 306.how { 307 background:#f7f6f2; 308 padding:5rem 4rem; 309} 310.how-inner { max-width:1100px; margin:0 auto; } 311 312.section-eyebrow { 313 font-size:0.7rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; 314 color:#E8C448; margin-bottom:1.2rem; 315 display:flex; align-items:center; gap:10px; 316} 317.section-eyebrow::before { content:''; display:block; width:28px; height:2px; background:#E8C448; flex-shrink:0; } 318 319.how-headline { 320 font-family:'Cormorant Garamond',serif; 321 font-size:clamp(2rem,4vw,3.2rem); 322 font-weight:600; color:#0B2240; margin-bottom:0.6rem; 323} 324.how-sub { 325 font-size:0.9rem; color:#888; line-height:1.7; max-width:520px; margin-bottom:3rem; 326} 327 328.steps { 329 display:grid; grid-template-columns:repeat(3,1fr); gap:0; 330 border:1.5px solid #e0ddd5; border-radius:10px; overflow:hidden; 331} 332.step { 333 padding:2rem 2rem 2.2rem; 334 border-right:1.5px solid #e0ddd5; 335 background:#fff; 336} 337.step:last-child { border-right:none; } 338 339.step-num { 340 font-family:'Cormorant Garamond',serif; 341 font-size:3.5rem; font-weight:700; line-height:1; 342 color:#E8C448; margin-bottom:1rem; 343 opacity:0.8; 344} 345.step-title { 346 font-size:1rem; font-weight:700; color:#0B2240; 347 margin-bottom:0.5rem; 348} 349.step-desc { 350 font-size:0.85rem; color:#666; line-height:1.65; 351} 352.step-desc em { 353 font-style:italic; color:#0B2240; font-weight:500; 354} 355 356.how-note { 357 margin-top:2rem; 358 padding:1.2rem 1.5rem; 359 background:#fff; border:1.5px solid #e0ddd5; border-radius:8px; 360 font-family:'Cormorant Garamond',serif; font-style:italic; 361 font-size:1.1rem; color:#555; line-height:1.6; 362 max-width:640px; 363} 364 365/* ââââââââââ NUMBERS ââââââââââ */ 366.numbers { background:#0B2240; } 367.numbers-inner { 368 max-width:1100px; margin:0 auto; 369 display:grid; grid-template-columns:repeat(5,1fr); 370 border-left:1px solid rgba(255,255,255,0.07); 371} 372.number-item { 373 padding:3rem 2rem; 374 border-right:1px solid rgba(255,255,255,0.07); 375 border-bottom:1px solid rgba(255,255,255,0.07); 376} 377.number-big { 378 font-family:'Cormorant Garamond',serif; 379 font-size:3.5rem; font-weight:700; line-height:1; 380 color:#E8C448; margin-bottom:0.4rem; 381} 382.number-label { font-size:0.8rem; color:rgba(255,255,255,0.45); font-weight:500; line-height:1.4; } 383.number-since { font-size:0.7rem; color:rgba(255,255,255,0.25); margin-top:0.3rem; } 384 385/* ââââââââââ SARDINIA STORY ââââââââââ */ 386.sardinia { 387 padding:5rem 4rem; 388 display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; 389 max-width:1100px; margin:0 auto; 390} 391.sardinia-text .section-eyebrow { color:#0B2240; } 392.sardinia-text .section-eyebrow::before { background:#0B2240; } 393.sardinia-headline { 394 font-family:'Cormorant Garamond',serif; 395 font-size:clamp(2rem,3.5vw,2.8rem); 396 font-weight:600; color:#0B2240; line-height:1.05; 397 margin-bottom:1.2rem; 398} 399.sardinia-headline em { font-style:italic; color:#E8C448; } 400.sardinia-body { 401 font-size:0.9rem; color:#555; line-height:1.8; margin-bottom:1.5rem; 402} 403.sardinia-svg { 404 opacity:0.15; 405} 406.sardinia-svg path { stroke:#0B2240; stroke-width:8; fill:none; stroke-linejoin:round; stroke-linecap:round; } 407 408/* ââââââââââ PROJECTS SECTION ââââââââââ */ 409.projects-section { 410 background:#f7f6f2; 411 padding:5rem 4rem; 412 border-top:1px solid #e8e5dd; 413} 414.projects-inner { max-width:1100px; margin:0 auto; } 415 416/* Featured Projects */ 417.projects-featured { margin-bottom:5rem; } 418.projects-featured-title { 419 font-family:'Cormorant Garamond',serif; 420 font-size:clamp(1.6rem, 3vw, 2.2rem); 421 font-weight:600; color:#0B2240; margin-bottom:2.5rem; 422 font-style:italic; 423} 424.featured-grid { 425 display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); 426 gap:2rem; margin-bottom:3rem; 427} 428 429.featured-card { 430 background:#fff; 431 border:1.5px solid #e0ddd5; 432 border-radius:10px; 433 overflow:hidden; 434 text-decoration:none; color:inherit; 435 display:flex; flex-direction:column;
436 transition:box-shadow 0.22s, transform 0.18s; 437} 438.featured-card:hover { 439 box-shadow:0 8px 32px rgba(0,0,0,0.09); 440 transform:translateY(-3px); 441} 442 443.featured-header { 444 height:4px; 445 background:var(--grad1); 446} 447 448.featured-body { 449 padding:1.2rem; flex:1; display:flex; flex-direction:column; gap:5px; 450} 451 452.featured-year { 453 font-size:0.65rem; font-weight:600; letter-spacing:0.12em; 454 text-transform:uppercase; color:#bbb; 455} 456 457.featured-name { 458 font-family:'Cormorant Garamond',serif; 459 font-size:1.35rem; font-weight:600; color:#111; line-height:1.1; 460} 461 462.featured-name em { 463 font-style:italic; color:var(--grad1); 464} 465 466.featured-desc { 467 font-size:0.78rem; color:#888; line-height:1.6; flex:1; 468} 469 470.featured-meta { 471 font-size:0.8rem; color:#999; 472 display:flex; gap:1rem; flex-wrap:wrap; 473} 474 475.featured-cta { 476 font-size:0.74rem; font-weight:600; 477 color:var(--grad1); margin-top:0.5rem; 478 text-decoration:none; 479 transition:color 0.18s; 480} 481.featured-card:hover .featured-cta { 482 color:var(--accent-dark); 483 opacity:0.8; 484} 485 486/* Archive Projects */ 487.projects-archive-title { 488 font-size:0.75rem; font-weight:600; letter-spacing:0.18em; 489 text-transform:uppercase; color:#999; margin-bottom:1.5rem; 490 padding-bottom:1rem; border-bottom:1px solid #e0ddd5; 491} 492.archive-grid { 493 display:grid; 494 grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); 495 gap:1.2rem; 496} 497 498.archive-card { 499 background:#fff; 500 border:1.5px solid #e0ddd5; 501 border-radius:10px; 502 overflow:hidden; 503 text-decoration:none; color:inherit; 504 display:flex; flex-direction:column; 505 transition:box-shadow 0.22s, transform 0.18s; 506} 507.archive-card:hover { 508 box-shadow:0 8px 32px rgba(0,0,0,0.09); 509 transform:translateY(-3px); 510} 511 512.archive-card-top { height:4px; background:var(--accent); } 513.archive-card-body { 514 padding:1.2rem; flex:1; display:flex; 515 flex-direction:column; gap:5px; 516} 517.archive-year { 518 font-size:0.65rem; font-weight:600; letter-spacing:0.12em; 519 text-transform:uppercase; color:#bbb; 520} 521.archive-name { 522 font-family:'Cormorant Garamond',serif; 523 font-size:1.35rem; font-weight:600; color:#111; line-height:1.1; 524} 525.archive-name em { font-style:italic; color:var(--accent); } 526.archive-desc { 527 font-size:0.78rem; color:#888; line-height:1.6; flex:1; 528} 529.archive-link { 530 font-size:0.74rem; font-weight:600; 531 color:var(--accent); margin-top:0.5rem; 532 transition:color 0.18s; 533} 534.archive-card:hover .archive-link { color:var(--accent-dark); opacity:0.8; } 535 536/* ââââââââââ AMEDEO CALLOUT ââââââââââ */ 537.amedeo { 538 background:#0B2240; 539 padding:4rem; 540} 541.amedeo-inner { 542 max-width:1100px; margin:0 auto; 543 display:flex; align-items:center; gap:4rem; 544} 545.amedeo-text { flex:1; } 546.amedeo-eyebrow { 547 font-size:0.7rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; 548 color:#FF6B2B; margin-bottom:1rem; 549} 550.amedeo-headline { 551 font-family:'Cormorant Garamond',serif; 552 font-size:clamp(2rem,3.5vw,3rem); 553 font-weight:600; color:#fff; line-height:1; margin-bottom:0.8rem; 554} 555.amedeo-headline em { font-style:italic; color:#FF6B2B; } 556.amedeo-sub { font-size:0.88rem; color:rgba(255,255,255,0.5); line-height:1.7; max-width:480px; margin-bottom:1.5rem; } 557.amedeo-cta { 558 display:inline-flex; align-items:center; gap:8px; 559 background:#FF6B2B; color:#fff; 560 text-decoration:none; padding:12px 24px; border-radius:5px; 561 font-size:0.88rem; font-weight:600; 562 transition:background 0.18s; 563} 564.amedeo-cta:hover { background:#e55a1f; } 565.amedeo-stats { 566 display:flex; flex-direction:column; gap:1.5rem; 567 border-left:1px solid rgba(255,255,255,0.1); 568 padding-left:4rem; flex-shrink:0; 569} 570.amedeo-stat-num { 571 font-family:'Cormorant Garamond',serif; 572 font-size:2.8rem; font-weight:700; color:#FF6B2B; line-height:1; 573} 574.amedeo-stat-label { font-size:0.75rem; color:rgba(255,255,255,0.35); margin-top:2px; } 575 576/* ââââââââââ ACKNOWLEDGEMENTS ââââââââââ */ 577.ack-section { background:#060f1a; color:rgba(255,255,255,0.5); } 578.ack-inner { max-width:1100px; margin:0 auto; padding:4rem 4rem; } 579.ack-inner h2 { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:#fff; margin-bottom:1.5rem; } 580.ack-inner h2 em { font-style:italic; color:#E8C448; } 581.ack-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.4rem 2rem; margin-bottom:2rem; } 582.ack-item { font-size:0.8rem; line-height:1.9; } 583.ack-item a { color:rgba(255,255,255,0.55); text-decoration:none; } 584.ack-item a:hover { color:#E8C448; } 585.ack-special { list-style:none; font-size:0.8rem; line-height:1.9; margin-bottom:1.5rem; } 586.ack-special a { color:rgba(255,255,255,0.55); text-decoration:none; } 587.ack-special a:hover { color:#E8C448; } 588 589/* ââââââââââ FOOTER ââââââââââ */ 590footer { 591 background:#060f1a; color:rgba(255,255,255,0.28); 592 text-align:center; padding:1.5rem; 593 font-size:0.77rem; line-height:2.2; 594 border-top:1px solid rgba(255,255,255,0.05); 595} 596footer a { color:rgba(255,255,255,0.38); text-decoration:none; } 597footer a:hover { color:#E8C448; } 598.sep { margin:0 0.5rem; } 599 600/* ââââââââââ LESSONS ââââââââââ */ 601.lessons-section { 602 background:#fff; 603 padding:5rem 4rem; 604 border-top:1px solid #e8e5dd; 605} 606.lessons-inner { max-width:1100px; margin:0 auto; } 607.lessons-headline { 608 font-family:'Cormorant Garamond',serif; 609 font-size:clamp(2rem,4vw,3.2rem); 610 font-weight:600; color:#0B2240; margin-bottom:0.6rem; 611} 612.lessons-sub { 613 font-size:0.9rem; color:#888; line-height:1.7; max-width:520px; margin-bottom:3rem; 614} 615.lessons-grid { 616 display:grid; 617 grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); 618 gap:1.5rem; 619} 620.lesson-card { 621 background:#fff; 622 border:1.5px solid #e0ddd5; 623 border-radius:10px; 624 padding:1.8rem; 625 text-decoration:none; 626 color:inherit; 627 display:flex; 628 flex-direction:column; 629 gap:0.8rem;
630 transition:box-shadow 0.22s, transform 0.18s; 631} 632.lesson-card:hover { 633 box-shadow:0 8px 32px rgba(0,0,0,0.09); 634 transform:translateY(-2px); 635} 636.lesson-num { 637 font-size:0.65rem; font-weight:600; letter-spacing:0.12em; 638 text-transform:uppercase; color:#bbb; 639} 640.lesson-title { 641 font-family:'Cormorant Garamond',serif; 642 font-size:1.4rem; font-weight:600; color:#0B2240; line-height:1.15; 643} 644.lesson-title em { 645 font-style:italic; color:#E8C448; 646} 647.lesson-subtitle { 648 font-size:0.85rem; color:#999; font-weight:500; 649} 650.lesson-desc { 651 font-size:0.8rem; color:#777; line-height:1.6; flex:1; 652} 653.lesson-listen { 654 font-size:0.75rem; font-weight:600; 655 color:#0B2240; 656 text-transform:uppercase; 657 letter-spacing:0.1em; 658 margin-top:0.5rem; 659 transition:color 0.18s; 660} 661.lesson-card:hover .lesson-listen { 662 color:#E8C448; 663} 664 665/* ââââââââââ RESPONSIVE ââââââââââ */ 666@media (max-width:900px) { 667 .hero { padding:5rem 1.5rem 3rem; } 668 .how { padding:3.5rem 1.5rem; } 669 .steps { grid-template-columns:1fr; border-radius:10px; } 670 .step { border-right:none; border-bottom:1.5px solid #e0ddd5; } 671 .step:last-child { border-bottom:none; } 672 .numbers-inner { grid-template-columns:1fr 1fr; } 673 .sardinia { grid-template-columns:1fr; padding:3.5rem 1.5rem; gap:2rem; } 674 .sardinia-svg { display:none; } 675 .projects-section { padding:3.5rem 1.5rem; } 676 .featured-grid { grid-template-columns:1fr; } 677 .amedeo { padding:3rem 1.5rem; } 678 .amedeo-inner { flex-direction:column; gap:2rem; } 679 .amedeo-stats { flex-direction:row; border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,0.1); padding-top:1.5rem; } 680 .ack-inner { padding:3rem 1.5rem; } 681 .picker { width:100%; } 682 .picker-group { min-width:0; flex:1; } 683} 684@media (max-width:600px) { 685 .numbers-inner { grid-template-columns:1fr 1fr; } 686 .picker { flex-direction:column; } 687 .picker-group { border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); } 688 .picker-go { padding:1rem; } 689 .featured-header { height:120px; } 690 .featured-name { font-size:1.5rem; } 691} 692 693/* ââ Modal Picker ââ */ 694.picker-button { 695 background: transparent; border: none; color: #fff; 696 padding: 0; font-size: 1rem; font-weight: 600; 697 cursor: pointer; display: flex; align-items: center; 698 gap: 0.5rem; font-family: 'Outfit', sans-serif; width: 100%; 699} 700.picker-button:hover { color: rgba(255,255,255,0.85); } 701.picker-button svg { margin-left: auto; flex-shrink: 0; } 702 703.modal-overlay { 704 display: none; position: fixed; inset: 0; 705 background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); z-index: 2000; 706} 707.modal-overlay.open { display: block; } 708 709.language-modal { 710 display: none; position: fixed; 711 top: 50%; left: 50%; transform: translate(-50%, -50%); 712 background: #fff; border-radius: 12px; 713 box-shadow: 0 20px 60px rgba(0,0,0,0.3); 714 z-index: 2001; width: 90vw; max-width: 640px; max-height: 85vh; 715} 716.language-modal.open { 717 display: block; 718 animation: modalIn 0.25s cubic-bezier(0.4,0,0.2,1); 719} 720@keyframes modalIn { 721 from { opacity: 0; transform: translate(-50%, -44%); } 722 to { opacity: 1; transform: translate(-50%, -50%); } 723} 724.modal-header { 725 display: flex; justify-content: space-between; align-items: center; 726 padding: 1.25rem 1.5rem; border-bottom: 1px solid #eee; 727} 728.modal-header h3 { 729 font-family: 'Cormorant Garamond', serif; 730 font-size: 1.15rem; font-weight: 600; color: #0B2240; margin: 0; 731} 732.modal-close { 733 background: none; border: none; font-size: 1.8rem; line-height: 1; 734 color: #aaa; cursor: pointer; padding: 0; transition: color 0.2s; 735} 736.modal-close:hover { color: #0B2240; } 737.modal-body { overflow-y: auto; max-height: calc(85vh - 70px); padding: 1.25rem; } 738.modal-grid { 739 display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; 740} 741.modal-option { 742 background: #f7f7f7; border: 1.5px solid #e5e5e5; border-radius: 8px; 743 padding: 0.75rem 0.5rem; font-size: 0.88rem; font-weight: 500; color: #0B2240; 744 cursor: pointer; font-family: 'Outfit', sans-serif; text-align: center; 745 transition: all 0.18s; 746} 747.modal-option:hover { 748 background: #fff; border-color: #0B2240; 749 box-shadow: 0 3px 10px rgba(11,34,64,0.1); transform: translateY(-1px); 750} 751.modal-option.selected { background: #E8C448; border-color: #E8C448; } 752 753/* ââ Ecosystem line (hero) ââ */ 754.hero-ecosystem { font-size:0.78rem; color:rgba(255,255,255,0.38); margin:0.4rem 0 1.8rem; letter-spacing:0.02em; } 755.hero-ecosystem a { color:rgba(255,255,255,0.5); text-decoration:none; transition:color 0.15s; } 756.hero-ecosystem a:hover { color:#E8C448; } 757 758/* ââ Nav projects link ââ */ 759.nav-projects { color:rgba(255,255,255,0.55); text-decoration:none; font-size:0.82rem; font-weight:500; margin-right:1.2rem; transition:color 0.15s; letter-spacing:0.02em; } 760.nav-projects:hover { color:#E8C448; } 761</style> 762</head> 763<body> 764 765<!-- Matomo -->
766<script> 767 var _paq = window._paq = window._paq || []; 768 _paq.push(['disableCookies']); _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); 769 (function() { 770 var u="https://aiopop.com/matnogo/"; 771 _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '3']); 772 var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; 773 g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); 774 })(); 775</script>
775 776 777<!-- ââ NAV ââ --> 778<nav class="nav"> 779 <a class="nav-logo" href="/"><span>aio</span>Pop</a> 780 <div class="nav-spacer"></div> 781 <a class="nav-projects" href="#projects">Projects</a> 782 <div class="aio-lang-wrap"> 783 <button class="aio-lang-btn" id="aio-lang-btn" aria-haspopup="listbox">EN</button> 784 <div class="aio-lang-panel" id="aio-lang-panel" role="listbox"> 785 <div class="aio-lang-list" id="aio-lang-list"></div> 786 </div> 787 </div> 788</nav> 789 790<!-- ââ HERO ââ --> 791<header class="hero"> 792 <div class="hero-ghost">Powerplay</div> 793 794 <svg class="hero-sardinia" viewBox="395 0 575 1075" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> 795 <g fill="none"> 796 <path d="M 775 32 L 742 38 L 750 72 L 733 85 L 699 89 L 670 126 L 649 136 L 651 146 L 627 176 L 589 182 L 549 218 L 514 224 L 501 214 L 469 213 L 441 189 L 431 157 L 446 150 L 442 131 L 451 119 L 475 116 L 468 88 L 450 97 L 454 109 L 432 128 L 417 172 L 432 198 L 402 262 L 426 284 L 404 314 L 413 338 L 424 314 L 425 335 L 455 324 L 469 363 L 483 370 L 492 400 L 485 433 L 507 440 L 518 457 L 509 512 L 520 535 L 511 552 L 481 561 L 494 571 L 489 621 L 503 639 L 512 622 L 527 620 L 543 641 L 524 701 L 510 679 L 503 683 L 511 752 L 485 801 L 493 821 L 479 843 L 499 875 L 475 907 L 490 922 L 495 951 L 502 946 L 513 959 L 510 974 L 540 982 L 538 1003 L 556 1022 L 552 1047 L 563 1049 L 564 1062 L 571 1043 L 590 1031 L 615 1052 L 638 1055 L 689 1011 L 698 978 L 686 950 L 715 914 L 739 928 L 755 907 L 786 913 L 832 952 L 853 946 L 868 970 L 862 957 L 881 942 L 885 885 L 906 864 L 893 839 L 909 797 L 903 774 L 925 631 L 920 612 L 931 602 L 920 584 L 936 536 L 914 517 L 898 476 L 918 430 L 947 404 L 966 345 L 941 316 L 939 281 L 912 235 L 930 212 L 900 197 L 901 178 L 886 186 L 875 180 L 892 145 L 902 153 L 910 147 L 892 135 L 876 142 L 876 129 L 861 138 L 879 92 L 862 77 L 845 84 L 841 97 L 833 66 L 812 56 L 790 62 L 793 50 Z"/> 797 <path d="M 470 951 L 468 953 L 469 961 L 466 966 L 466 974 L 471 991 L 473 993 L 473 997 L 477 1001 L 477 1003 L 483 1014 L 484 1020 L 486 1022 L 491 1019 L 496 1021 L 498 1012 L 502 1008 L 502 1005 L 500 1002 L 501 993 L 504 984 L 508 980 L 509 976 L 505 972 L 505 970 L 502 967 L 501 962 L 499 960 L 493 957 L 485 955 L 476 957 L 475 952 Z"/> 798 <path d="M 828 33 L 827 34 L 828 39 L 826 41 L 821 40 L 820 42 L 821 45 L 819 49 L 820 52 L 819 55 L 823 58 L 832 57 L 836 60 L 839 57 L 840 58 L 839 62 L 840 64 L 845 65 L 844 69 L 845 70 L 850 69 L 851 68 L 850 65 L 851 57 L 853 55 L 853 51 L 850 46 L 850 42 L 848 40 L 846 41 L 846 44 L 842 50 L 843 53 L 841 55 L 839 53 L 840 41 L 838 39 L 838 35 L 836 33 L 833 34 Z"/> 799 </g> 800 </svg> 801 802<div class="hero-inner"> 803 <p class="hero-eyebrow" id="aio-eyebrow">aiopop.com â A European language project since 2022</p> 804 805 <h1 class="hero-headline"> 806 <span id="aio-line1">Sounds too good</span><br><span id="aio-line2">to be true.</span><br><em id="aio-line3">It isn't.</em> 807 </h1> 808 809 <p class="hero-languages" id="aio-languages"> 810 English · Spanish · French · Italian · Portuguese · Chinese 811 </p> 812 813<p style="margin: 1.5rem 0; font-size: 1rem; color: rgba(255,255,255,0.8); font-style: italic;"> 814 Free forever. No registration. No cookies. 815</p> 816 817 818<p class="hero-ecosystem">Also on aioPop: <a href="https://sardinian.aiopop.com" target="_blank">GigaSardinian</a> · <a href="https://amedeochinese.com" target="_blank">Amedeo Chinese</a> · <a href="https://4elisa.aiopop.com" target="_blank">Italian with Elisa</a> · <a href="https://gigafrench.aiopop.com" target="_blank">GigaFrench</a></p> 819 820 <div class="picker" id="picker"> 821 <div class="picker-group"> 822 <span class="picker-group-label" id="aio-picker-learn-label">I want to learn</span> 823 <button class="picker-button" id="learnButton" onclick="openModal('learnModal')"> 824 <span id="learnButtonText">English</span>
825 <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg> 826 </button> 827 </div> 828 <div class="picker-group"> 829 <span class="picker-group-label" id="aio-picker-read-label">I read along in</span> 830 <button class="picker-button" id="readButton" onclick="openModal('readModal')"> 831 <span id="readButtonText">Spanish</span> 832 <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg> 833 </button> 834 </div> 835 <a class="picker-go" id="pickerGo" href="#" target="_blank" onclick="sessionStorage.setItem('aiopop-from-homepage','1')"> 836 <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg> 837 <span id="aio-picker-start-btn">Start now</span> 838 </a> 839 </div> 840 841 <!-- Modal Overlay --> 842 <div class="modal-overlay" id="modalOverlay" onclick="closeAllModals()"></div> 843 844 <!-- Learn Modal --> 845 <div class="language-modal" id="learnModal"> 846 <div class="modal-header"> 847 <h3>Choose a language to learn</h3> 848 <button class="modal-close" onclick="closeAllModals()">×</button> 849 </div> 850 <div class="modal-body"> 851 <div class="modal-grid"> 852 <button class="modal-option" onclick="selectLearn('cn','Chinese')">ð¨ð³ Chinese</button> 853 <button class="modal-option" onclick="selectLearn('en','English')">ð¬ð§ English</button> 854 <button class="modal-option" onclick="selectLearn('fr','French')">ð«ð· French</button> 855 <button class="modal-option" onclick="selectLearn('it','Italian')">ð®ð¹ Italian</button> 856 <button class="modal-option" onclick="selectLearn('pt','Portuguese')">ðµð¹ Portuguese</button> 857 <button class="modal-option" onclick="selectLearn('es','Spanish')">ðªð¸ Spanish</button> 858 </div> 859 </div> 860 </div> 861 862 <!-- Read Modal --> 863 <div class="language-modal" id="readModal"> 864 <div class="modal-header"> 865 <h3>Choose a language to read along in</h3> 866 <button class="modal-close" onclick="closeAllModals()">×</button> 867 </div> 868 <div class="modal-body"> 869 <div class="modal-grid"> 870 <button class="modal-option" onclick="selectRead('ar','Arabic')">ð¸ð¦ Arabic</button> 871 <button class="modal-option" onclick="selectRead('bn','Bengali')">ð§ð© Bengali</button> 872 <button class="modal-option" onclick="selectRead('zh','Chinese')">ð¨ð³ Chinese</button> 873 <button class="modal-option" onclick="selectRead('hr','Croatian')">ðð· Croatian</button> 874 <button class="modal-option" onclick="selectRead('cs','Czech')">ð¨ð¿ Czech</button> 875 <button class="modal-option" onclick="selectRead('da','Danish')">ð©ð° Danish</button> 876 <button class="modal-option" onclick="selectRead('nl','Dutch')">ð³ð± Dutch</button> 877 <button class="modal-option" onclick="selectRead('en','English')">ð¬ð§ English</button> 878 <button class="modal-option" onclick="selectRead('fi','Finnish')">ð«ð® Finnish</button> 879 <button class="modal-option" onclick="selectRead('fr','French')">ð«ð· French</button> 880 <button class="modal-option" onclick="selectRead('de','German')">ð©ðª German</button> 881 <button class="modal-option" onclick="selectRead('el','Greek')">ð¬ð· Greek</button> 882 <button class="modal-option" onclick="selectRead('he','Hebrew')">ð®ð± Hebrew</button> 883 <button class="modal-option" onclick="selectRead('hi','Hindi')">ð®ð³ Hindi</button> 884 <button class="modal-option" onclick="selectRead('hu','Hungarian')">ððº Hungarian</button> 885 <button class="modal-option" onclick="selectRead('id','Indonesian')">ð®ð© Indonesian</button> 886 <button class="modal-option" onclick="selectRead('it','Italian')">ð®ð¹ Italian</button> 887 <button class="modal-option" onclick="selectRead('ja','Japanese')">ð¯ðµ Japanese</button> 888 <button class="modal-option" onclick="selectRead('ko','Korean')">ð°ð· Korean</button> 889 <button class="modal-option" onclick="selectRead('nb','Norweg
889ian')">ð³ð´ Norwegian</button> 890 <button class="modal-option" onclick="selectRead('fa','Persian')">ð®ð· Persian</button> 891 <button class="modal-option" onclick="selectRead('pl','Polish')">ðµð± Polish</button> 892 <button class="modal-option" onclick="selectRead('pt','Portuguese')">ðµð¹ Portuguese</button> 893 <button class="modal-option" onclick="selectRead('ro','Romanian')">ð·ð´ Romanian</button> 894 <button class="modal-option" onclick="selectRead('ru','Russian')">ð·ðº Russian</button> 895 <button class="modal-option" onclick="selectRead('sr','Serbian')">ð·ð¸ Serbian</button> 896 <button class="modal-option" onclick="selectRead('sk','Slovak')">ð¸ð° Slovak</button> 897 <button class="modal-option" onclick="selectRead('es','Spanish')">ðªð¸ Spanish</button> 898 <button class="modal-option" onclick="selectRead('sv','Swedish')">ð¸ðª Swedish</button> 899 <button class="modal-option" onclick="selectRead('th','Thai')">ð¹ð Thai</button> 900 <button class="modal-option" onclick="selectRead('tr','Turkish')">ð¹ð· Turkish</button> 901 <button class="modal-option" onclick="selectRead('uk','Ukrainian')">ðºð¦ Ukrainian</button> 902 <button class="modal-option" onclick="selectRead('vi','Vietnamese')">ð»ð³ Vietnamese</button> 903 </div> 904 </div> 905 </div> 906 <p class="hero-since">By Patricia Bourcillier and Bernd Sebastian Kamps · 200+ contributors worldwide</p> 907 </div> 908</header> 909 910<!-- ââ HOW IT WORKS ââ --> 911<section class="how" id="how"> 912 <div class="how-inner"> 913 <p class="section-eyebrow" id="aio-how-eyebrow">The Powerplay method</p> 914 <h2 class="how-headline" id="aio-how-headline">Three steps. No grammar drills. No tests.</h2> 915 <p class="how-sub" id="aio-how-sub">The whole method fits in a sentence: listen, repeat aloud, listen again. Your brain does the rest â automatically, at your own pace.</p> 916 917 <div class="steps"> 918 <div class="step"> 919 <div class="step-num">1</div> 920 <div class="step-title" id="aio-how-step1-title">Audio plays</div> 921 <div class="step-desc" id="aio-how-step1-desc">A sentence plays in the language you want to learn. You read along in your own language. <em>No rushing.</em></div> 922 </div> 923 <div class="step"> 924 <div class="step-num">2</div> 925 <div class="step-title" id="aio-how-step2-title">Silence. Your turn.</div> 926 <div class="step-desc" id="aio-how-step2-desc">The audio pauses. You repeat the sentence aloud. As many times as you want. <em>No one is listening. No one is judging.</em></div> 927 </div> 928 <div class="step"> 929 <div class="step-num">3</div> 930 <div class="step-title" id="aio-how-step3-title">Audio plays again</div> 931 <div class="step-desc" id="aio-how-step3-desc">The sentence plays once more. You compare what you said to what you hear. <em>That gap is where language enters your brain.</em></div> 932 </div> 933 </div> 934 935 <p class="how-note" id="aio-how-quote"> 936 "The Powerplay method is brutally simple: the audio plays, waits â you repeat the sentence aloud â then it plays again. Automatically. At your speed. As many times as it takes." 937 </p> 938 </div> 939</section> 940 941<!-- ââ NUMBERS ââ --> 942<div class="numbers"> 943 <div class="numbers-inner"> 944 <div class="number-item"> 945 <div class="number-big">6</div> 946 <div class="number-label" id="aio-num1-label">Languages to learn</div> 947 <div class="number-since" id="aio-num1-sub">English · Spanish · French · Italian · Portuguese · Chinese</div> 948 </div> 949 <div class="number-item"> 950 <div class="number-big">20</div> 951 <div class="number-label" id="aio-num2-label">Episodes per language</div> 952 <div class="number-since" id="aio-num2-sub">All set in Sardinia</div> 953 </div> 954 <div class="number-item"> 955 <div class="number-big">30</div> 956 <div class="number-label" id="aio-num3-label">Translation languages</div> 957 <div class="number-since" id="aio-num3-sub">Read along in your own language</div> 958 </div> 959 <div class="number-item"> 960 <div class="number-big">30+</div> 961 <div class="number-label" id="aio-num4-label">Free PDFs</div> 962 <div class="number-since" id="aio-num4-sub">No email · No registration</div> 963 </div> 964 <div class="number-item"> 965 <div class="number-big">â</div> 966 <div class="number-label" id="aio-num5-label">Always free</div> 967 <div class="number-since" id="aio-num5-sub">No account · No ads · Since 2022</div> 968 </div> 969 </div> 970</div> 971 972<!-- ââ LESSONS ââ --> 973<section class="lessons-section" id="lessons"> 974 <div class="lessons-inner"> 975 <h2 class="lessons-headline" id="aio-lessons-headline">Twenty episodes.</h2> 976 <p class="lessons-sub" id="aio-lessons-sub">One coherent story. Real characters. Real conversations. This is what you'll experience in aioPop.</p>
977 <div class="lessons-grid" id="lessonsGrid"></div> 978 </div> 979</section> 980 981<!-- ââ SARDINIA STORY ââ --> 982<section> 983 <div class="sardinia"> 984 <div class="sardinia-text"> 985 <p class="section-eyebrow" id="aio-sardinia-eyebrow">The setting</p> 986 <h2 class="sardinia-headline" id="aio-sardinia-headline">One island.<br><em>Six languages.</em></h2> 987 <p class="sardinia-body" id="aio-sardinia-body1"> 988 aioPop takes place in Sardinia. Leonardo wakes up in Cagliari, where his grandfather points out a quarantined boat off the port carrying an Ebola patient. Then his phone rings â it's his girlfriend, and things between them are complicated. 989 </p> 990 <p class="sardinia-body" id="aio-sardinia-body2"> 991 Twenty episodes, a coherent story, a defined cast of characters who reappear throughout. The same story â the same characters, the same world â told in six languages. 992 </p> 993 </div> 994 <svg class="sardinia-svg" viewBox="395 0 575 1075" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width:100%; max-width:320px; margin:0 auto; display:block;"> 995 <g fill="none"> 996 <path d="M 775 32 L 742 38 L 750 72 L 733 85 L 699 89 L 670 126 L 649 136 L 651 146 L 627 176 L 589 182 L 549 218 L 514 224 L 501 214 L 469 213 L 441 189 L 431 157 L 446 150 L 442 131 L 451 119 L 475 116 L 468 88 L 450 97 L 454 109 L 432 128 L 417 172 L 432 198 L 402 262 L 426 284 L 404 314 L 413 338 L 424 314 L 425 335 L 455 324 L 469 363 L 483 370 L 492 400 L 485 433 L 507 440 L 518 457 L 509 512 L 520 535 L 511 552 L 481 561 L 494 571 L 489 621 L 503 639 L 512 622 L 527 620 L 543 641 L 524 701 L 510 679 L 503 683 L 511 752 L 485 801 L 493 821 L 479 843 L 499 875 L 475 907 L 490 922 L 495 951 L 502 946 L 513 959 L 510 974 L 540 982 L 538 1003 L 556 1022 L 552 1047 L 563 1049 L 564 1062 L 571 1043 L 590 1031 L 615 1052 L 638 1055 L 689 1011 L 698 978 L 686 950 L 715 914 L 739 928 L 755 907 L 786 913 L 832 952 L 853 946 L 868 970 L 862 957 L 881 942 L 885 885 L 906 864 L 893 839 L 909 797 L 903 774 L 925 631 L 920 612 L 931 602 L 920 584 L 936 536 L 914 517 L 898 476 L 918 430 L 947 404 L 966 345 L 941 316 L 939 281 L 912 235 L 930 212 L 900 197 L 901 178 L 886 186 L 875 180 L 892 145 L 902 153 L 910 147 L 892 135 L 876 142 L 876 129 L 861 138 L 879 92 L 862 77 L 845 84 L 841 97 L 833 66 L 812 56 L 790 62 L 793 50 Z"/> 997 </g> 998 </svg> 999 </div> 1000</section> 1001 1002<!-- ââ SPECIAL PROJECTS ââ --> 1003<section class="projects-section" id="projects"> 1004 <div class="projects-inner"> 1005 <p class="section-eyebrow" id="aio-projects-eyebrow">Special projects</p> 1006 <h2 class="how-headline" id="aio-projects-headline">Our other courses</h2> 1007 1008 <!-- Featured Projects --> 1009 <div class="projects-featured"> 1010 <h3 class="projects-featured-title" id="aio-projects-featured">Featured editions</h3> 1011 <div class="featured-grid" id="featuredGrid"></div> 1012 </div> 1013 1014 <!-- Living Voices --> 1015 <div class="projects-archive"> 1016 <h4 class="projects-archive-title" id="aio-projects-voices">Living Voices</h4> 1017 <p style="font-size:0.95rem; color:#555; margin-bottom:1.5rem; max-width:700px; line-height:1.7;" id="aio-projects-voices-desc"> 1018 Sardinian and Martinique Creole are magnificent languagesârich with history, culture, and beauty. 1019 They deserve to be heard, learned, and celebrated. Here's where you can discover them. 1020 </p> 1021 <div class="archive-grid" id="voicesGrid"></div> 1022 </div> 1023 1024 <!-- Archive --> 1025 <div class="projects-archive" style="margin-top:4rem; padding-top:3rem; border-top:1px solid #e8e5dd;"> 1026 <h4 class="projects-archive-title" id="aio-projects-archive">From the archive</h4> 1027 <p style="font-size:0.88rem; color:#999; margin-bottom:1.5rem; max-width:700px; line-height:1.6;" id="aio-projects-archive-desc"> 1028 A legendary course that shaped language learning. Preserved and offered freely online. 1029 </p> 1030 <div class="archive-grid" id="archiveGrid" style="max-width:320px;"></div> 1031 </div> 1032 </div> 1033</section> 1034 1035<!-- ââ AMEDEO CHINESE ââ --> 1036<section class="amedeo" id="amedeo"> 1037 <div class="amedeo-inner"> 1038 <div class="amedeo-text"> 1039 <p class="amedeo-eyebrow" id="aio-amedeo-eyebrow">Full learning platform · HSK 1</p> 1040 <h2 class="amedeo-headline" id="aio-amedeo-headline">Amedeo <em>Chinese</em></h2> 1041 <p class="amedeo-sub" id="aio-amedeo-sub">Powerplay plus: vocabulary games, grammar notes, exercises, spaced repetition, and a Megaloop drill â for anyone who wants a rigorous, complete introduction to Mandarin. Available in 21 languages.</p> 1042 <a class="amedeo-cta" href="https://amedeochinese.com" target="_blank" id="aio-amedeo-cta"> 1043 <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg> 1044 Open Amedeo Chinese 1045 </a> 1046 </div> 1047 <div class="amedeo-stats"> 1048 <div> 1049 <div class="amedeo-stat-num">21</div> 1050 <div class="amedeo-stat-label" id="aio-amedeo-stat1">interface languages</div> 1051 </div> 1052 <div> 1053 <div class="amedeo-stat-num">7</div> 1054 <div class="amedeo-stat-label" id="aio-amedeo-stat2">study modes</div> 1055 </div> 1056 <div> 1057 <div class="amedeo-stat-num">â</div> 1058 <div class="amedeo-stat-label" id="aio-amedeo-stat3">always free</div> 1059 </div> 1060 </div> 1061 </div> 1062</section> 1063 1064<!-- ââ ACKNOWLEDGEMENTS ââ --> 1065<div class="ack-section"> 1066 <div class="ack-inner"> 1067 <h2 id="aio-ack-title">Acknowledgements â <em>200+ contributors</em></h2> 1068 <p style="font-size:0.82rem;margin-bottom:1.5rem;color:rgba(255,255,255,0.38)" id="aio-ack-sub">Among the more than 200 people who collaborated in this project, we are particularly indebted to:</p> 1069 <ul class="ack-special"> 1070 <li class="ack-item">STK â App programming</li> 1071 <li class="ack-item"><a href="http://baghino.com/" target="_blank">Attilio Baghino</a> â Designer</li> 1072 <li class="ack-item"><a href="https://www.linkedin.com/in/rob-camp-1a444817/" target="_blank">Rob Camp</a> â Associate Editor</li> 1073 <li class="ack-item"><a href="https://www.jeandidieraissy.com/en/" target="_blank">Jean-Didier Aïssy</a> â Project Manager Multilangue</li> 1074 <li class="ack-item"><a href="https://www.logosound.it/en-gb/home" target="_blank">Logosound</a> â Sound Consulting</li> 1075 </ul> 1076 <div class="ack-grid"> 1077 <div class="ack-item"><a href="https://www.bodalgo.com/it/speaker/andrea-melis" target="_blank">Andrea Melis</a> â UkrainianâItalian Edition</div> 1078 <div class="ack-item">Betti Batalla â Spanish Edition</div> 1079 <div class="ack-item">Daniel Francis-Berenson â English Edition</div> 1080 <div class="ack-item">Dermot Arrigan â English Edition</div> 1081 <div class="ack-item">Elisa Cadinu â Italian Edition</div> 1082 <div class="ack-item">Faye Hadley Espero â English Edition</div> 1083 <div class="ack-item">Françoise Bourcillier â French Edition</div> 1084 <div class="ack-item">Gerolamo Cuomo â Italian Edition</div> 1085 <div class="ack-item">Giulia Deiana â Italian Edition</div> 1086 <div class="ack-item">Inês Morais â Portuguese Edition</div> 1087 <div class="ack-item">Jasper Kamradt â German Edition</div> 1088 <div class="ack-item">Julie Nash â English Edition</div> 1089 <div class="ack-item">Maxie Sinner â German Edition</div> 1090 <div class="ack-item">Siegfried März â Web Security</div> 1091 <div class="ack-item">ççç / Shanshan Wang â Chinese Edition</div> 1092 </div> 1093 </div> 1094</div> 1095 1096<footer> 1097 <p>© 2022â<span id="yr"></span> aioPop / aioLingua â
1098 <a href="http://aiopop.com">aiopop.com</a> · 1099 <a href="https://aiolingua.com">aiolingua.com</a></p> 1100 <p id="aio-footer-credits">By Patricia Bourcillier and Bernd Sebastian Kamps</p> 1101 <p> 1102 <a href="/learn-english-free/">Learn English free</a> 1103 <span class="sep">·</span> 1104<a href="/zh/learn-english-free/" lang="zh-CN">䏿ï¼å è´¹å¨çº¿å¦è±è¯</a> 1105 <span class="sep">·</span> 1106 <a href="/learn-spanish-free/">Learn Spanish free</a> 1107 <span class="sep">·</span> 1108 <a href="/learn-french-free/">Learn French free</a> 1109 <span class="sep">·</span> 1110 <a href="/learn-italian-free/">Learn Italian free</a> 1111 <span class="sep">·</span> 1112 <a href="/learn-portuguese-free/">Learn Portuguese free</a> 1113 <span class="sep">·</span> 1114 <a href="/learn-chinese-free/">Learn Chinese free</a> 1115 </p> 1116 <p> 1117 <a href="https://amedeo.com/privacy.html" id="aio-footer-privacy">Privacy</a> 1118 <span class="sep">|</span> 1119 <a href="https://amedeo.com/impressum.html" id="aio-footer-imprint">Imprint</a> 1120 </p> 1121</footer> 1122 1123<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1124<!-- âââââââ INVISIBLE SEO: Schema Markup Only âââââââ --> 1125<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1126 1127<!-- Organization Schema (for Knowledge Graph) -->
1128<script type="application/ld+json"> 1129{ 1130 "@context": "https://schema.org", 1131 "@type": "Organization", 1132 "name": "aioPop", 1133 "url": "https://aiopop.com", 1134 "logo": "https://aiopop.com/img/aiopop-logo.png", 1135 "description": "Free language learning platform. Learn 6 languages through one coherent story set in Sardinia. No app, no account, no payment.", 1136 "sameAs": [ 1137 "https://www.facebook.com/aiopop", 1138 "https://twitter.com/aiopop", 1139 "https://www.linkedin.com/company/aiopop" 1140 ], 1141 "founder": [ 1142 { "@type": "Person", "name": "Patricia Bourcillier" }, 1143 { "@type": "Person", "name": "Bernd Sebastian Kamps" } 1144 ], 1145 "contactPoint": { 1146 "@type": "ContactPoint", 1147 "contactType": "Customer Support", 1148 "url": "https://aiopop.com" 1149 } 1150} 1151</script>
1151 1152 1153<!-- FAQ Schema (Rich Snippets in Search Results) -->
1154<script type="application/ld+json"> 1155{ 1156 "@context": "https://schema.org", 1157 "@type": "FAQPage", 1158 "mainEntity": [ 1159 { 1160 "@type": "Question", 1161 "name": "Is aioPop really completely free?", 1162 "acceptedAnswer": { 1163 "@type": "Answer", 1164 "text": "Yes, aioPop is 100% free forever. No app required, no account needed, no payment ever. All lessons, PDFs, and translations are completely free." 1165 } 1166 }, 1167 { 1168 "@type": "Question", 1169 "name": "What languages can I learn on aioPop?", 1170 "acceptedAnswer": { 1171 "@type": "Answer", 1172 "text": "You can learn English, Spanish, French, Italian, Portuguese, or Chinese. Each language has 20 episodes of the same story set in Sardinia." 1173 } 1174 }, 1175 { 1176 "@type": "Question", 1177 "name": "How many languages can I read along in?", 1178 "acceptedAnswer": { 1179 "@type": "Answer", 1180 "text": "You can read along in 30+ languages including English, Spanish, French, Italian, Portuguese, German, Russian, Japanese, Arabic, Chinese, and many more." 1181 } 1182 }, 1183 { 1184 "@type": "Question", 1185 "name": "Do I need an app to use aioPop?", 1186 "acceptedAnswer": { 1187 "@type": "Answer", 1188 "text": "No, aioPop works in your web browser on any phone, tablet, or computer. No app download needed." 1189 } 1190 }, 1191 { 1192 "@type": "Question", 1193 "name": "What is the Powerplay method?", 1194 "acceptedAnswer": { 1195 "@type": "Answer", 1196 "text": "Powerplay is simple: Audio plays â you repeat aloud â audio plays again. That's it. No grammar drills, no tests, just natural language learning." 1197 } 1198 } 1199 ] 1200} 1201</script>
1201 1202
1203<script> 1204// Year 1205document.getElementById('yr').textContent = new Date().getFullYear(); 1206 1207// Modal language picker 1208var _learn = 'en', _read = 'es'; 1209 1210// ââ Code mapping: homepage modal â player URL params ââââââââââââââââââââââ 1211// Some codes differ (zhâCN, nbâNO). Codes not in the homepage read modal 1212// (BG, ET, LV, LT, SL, BR, PY) fall back to the current _read value. 1213function toPlayerLang(code) { 1214 var map = { zh: 'CN', nb: 'NO' }; 1215 return (map[code] || code).toUpperCase(); 1216} 1217var PLAYER_TO_READ = { 1218 CN: 'zh', NO: 'nb', 1219 PY: null, BG: null, ET: null, LV: null, LT: null, SL: null, BR: null 1220}; 1221var READ_LABELS = { 1222 ar:'Arabic', bn:'Bengali', zh:'Chinese', cs:'Czech', da:'Danish', 1223 nl:'Dutch', en:'English', fi:'Finnish', fr:'French', de:'German', 1224 el:'Greek', he:'Hebrew', hi:'Hindi', hr:'Croatian', hu:'Hungarian', 1225 id:'Indonesian', it:'Italian', ja:'Japanese', ko:'Korean', nb:'Norwegian', 1226 fa:'Persian', pl:'Polish', pt:'Portuguese', ro:'Romanian', ru:'Russian', 1227 sr:'Serbian', sk:'Slovak', es:'Spanish', sv:'Swedish', th:'Thai', 1228 tr:'Turkish', uk:'Ukrainian', vi:'Vietnamese' 1229}; 1230var LEARN_LABELS = { 1231 cn:'Chinese', en:'English', fr:'French', 1232 it:'Italian', pt:'Portuguese', es:'Spanish' 1233}; 1234 1235// ââ Core picker URL ââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1236function updatePickerUrl() { 1237 document.getElementById('pickerGo').href = 1238 'https://aiopop.com/player/?source=' + _learn.toUpperCase() + 1239 '&lang=' + toPlayerLang(_read) + '&lesson=1'; 1240} 1241 1242// ââ Lesson card links â kept in sync with picker at all times âââââââââââââ 1243function updateLessonCardLinks() { 1244 var links = document.querySelectorAll('a.lesson-listen'); 1245 for (var i = 0; i < links.length; i++) { 1246 var m = (links[i].getAttribute('href') || '').match(/lesson=(\d+)/); 1247 var n = m ? m[1] : String(i + 1); 1248 links[i].href = 1249 'https://aiopop.com/player/?source=' + _learn.toUpperCase() + 1250 '&lang=' + toPlayerLang(_read) + '&lesson=' + n; 1251 // Tell the player this was a deliberate click, suppress tap-to-start overlay 1252 links[i].setAttribute('onclick', 'sessionStorage.setItem("aiopop-from-homepage","1")'); 1253 } 1254} 1255 1256// ââ Modal controls ââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1257function openModal(id) { 1258 document.getElementById('modalOverlay').classList.add('open'); 1259 document.getElementById(id).classList.add('open'); 1260} 1261 1262function closeAllModals() { 1263 document.getElementById('modalOverlay').classList.remove('open'); 1264 document.getElementById('learnModal').classList.remove('open'); 1265 document.getElementById('readModal').classList.remove('open'); 1266} 1267 1268function selectLearn(code, label) { 1269 _learn = code; 1270 document.getElementById('learnButtonText').textContent = label; 1271 closeAllModals(); 1272 updatePickerUrl(); 1273 updateLessonCardLinks(); 1274} 1275 1276function selectRead(code, label) { 1277 _read = code; 1278 document.getElementById('readButtonText').textContent = label; 1279 closeAllModals(); 1280 updatePickerUrl(); 1281 updateLessonCardLinks(); 1282} 1283 1284// ââ Restore player's last-used languages from localStorage ââââââââââââââââ 1285(function() { 1286 var savedSource = localStorage.getItem('ap-source-lang'); 1287 var savedLang = localStorage.getItem('ap-translation-lang'); 1288 1289 if (savedSource) { 1290 var lc = savedSource.toLowerCase(); 1291 if (LEARN_LABELS[lc]) { 1292 _learn = lc; 1293 document.getElementById('learnButtonText').textContent = LEARN_LABELS[lc]; 1294 } 1295 } 1296 1297 if (savedLang) { 1298 var upper = savedLang.toUpperCase(); 1299 var readCode; 1300 if (Object.prototype.hasOwnProperty.call(PLAYER_TO_READ, upper)) { 1301 readCode = PLAYER_TO_READ[upper]; // null = unsupported in homepage, keep default 1302 } else { 1303 readCode = savedLang.toLowerCase(); 1304 } 1305 if (readCode && READ_LABELS[readCode]) { 1306 _read = readCode; 1307 document.getElementById('readButtonText').textContent = READ_LABELS[readCode]; 1308 } 1309 } 1310 1311 updatePickerUrl(); 1312})(); 1313 1314// All course and lesson data is now in aiopop-i18n.js and rendered by applang.js 1315 1316</script>
vendor: 1 bytes, line 1316
1316
1317<script src="aiopop-i18n.js"></script>
vendor: 1 bytes, line 1317
1317
1318<script src="aiopop-applang.js"></script>
vendor: 1 bytes, line 1318
1318
1319<script> 1320document.addEventListener('DOMContentLoaded', function() { 1321 // Runs AFTER applang's DOMContentLoaded (registered first), so grid is fully populated 1322 var grid = document.getElementById('lessonsGrid'); 1323 if (!grid) return; 1324 1325 // Inject GigaSardinian discovery card after lesson 4 1326 var card = document.createElement('div'); 1327 card.style.cssText = [ 1328 'background:linear-gradient(135deg,#0B2240 0%,#163660 100%)', 1329 'border:1.5px solid rgba(232,196,72,0.25)', 1330 'border-radius:10px', 1331 'padding:1.8rem', 1332 'display:flex', 1333 'flex-direction:column', 1334 'gap:0.8rem' 1335 ].join(';'); 1336 card.innerHTML = 1337 '<div style="font-size:0.65rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(232,196,72,0.65);">Also on aioPop</div>' + 1338 '<div style="font-family:\'Cormorant Garamond\',serif;font-size:1.4rem;font-weight:600;color:#fff;line-height:1.15;">GigaSardinian</div>' + 1339 '<div style="font-size:0.8rem;color:rgba(255,255,255,0.55);line-height:1.6;flex:1;">14 lessons in authentic Sardinian â one of Europe\'s most beautiful minority languages. Read along in 40 languages. Free, as always.</div>' + 1340 '<a href="https://sardinian.aiopop.com" target="_blank" style="font-size:0.75rem;font-weight:600;color:#E8C448;text-transform:uppercase;letter-spacing:0.1em;text-decoration:none;margin-top:0.5rem;">Discover GigaSardinian â</a>'; 1341 var children = grid.children; 1342 if (children.length >= 4) { 1343 grid.insertBefore(card, children[4]); 1344 } else { 1345 grid.appendChild(card); 1346 } 1347 1348 // Now all 20 lesson cards exist â rewrite their links with correct language/translation 1349 if (typeof updateLessonCardLinks === 'function') updateLessonCardLinks(); 1350 1351 // Watch for future rebuilds (e.g. system language change calls renderLessons()) 1352 // and immediately reapply correct source/lang to all card links 1353 var observer = new MutationObserver(function() { 1354 if (typeof updateLessonCardLinks === 'function') updateLessonCardLinks(); 1355 }); 1356 observer.observe(grid, { childList: true }); 1357}); 1358</script>
1358 1359</body> 1360</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.