{ "id": "mod_madrid_metro", "type": "module", "version": "1.0", "context": { "title": "Madrid Metro", "icon": "πŸš‡", "layout": "phone" }, "state": { "selectedLine": "1", "dayType": "Weekday", "timeBand": "Day 10:00–21:00", "lines": [ { "id": "1", "name": "Line 1", "color": "#67B437", "corridor": "North ↔ South-east", "places": "ChamartΓ­n axis, Sol area, Atocha corridor, Vallecas side", "tier": "core", "note": "Busy central spine with frequent trains." }, { "id": "2", "name": "Line 2", "color": "#D62828", "corridor": "West ↔ East", "places": "ArgΓΌelles side, Gran VΓ­a / Sol area, Salamanca, Las Rosas side", "tier": "core", "note": "Good choice for central east-west trips." }, { "id": "3", "name": "Line 3", "color": "#F4C430", "corridor": "North-west ↔ South", "places": "Moncloa, Sol area, Embajadores side, Villaverde corridor", "tier": "core", "note": "Strong commuter line into the center." }, { "id": "4", "name": "Line 4", "color": "#8B4BB3", "corridor": "West ↔ North-east", "places": "ArgΓΌelles, Goya side, Serrano / ChamartΓ­n corridor", "tier": "connector", "note": "Useful connector through residential north-east districts." }, { "id": "5", "name": "Line 5", "color": "#7BC043", "corridor": "South-west ↔ North-east", "places": "Casa de Campo, Latina, Gran VΓ­a area, Canillejas / Alameda side", "tier": "core", "note": "Fast cross-city route with strong central coverage." }, { "id": "6", "name": "Line 6", "color": "#9E9E9E", "corridor": "Inner ring", "places": "Circular line linking major interchanges around the center", "tier": "orbital", "note": "Best for transfers; trains are usually very frequent." }, { "id": "7", "name": "Line 7", "color": "#F28C28", "corridor": "East ↔ North-west", "places": "Henares corridor side, Avenida de AmΓ©rica area, north-west end", "tier": "connector", "note": "Long line; check branches and destination screens in station." }, { "id": "8", "name": "Line 8", "color": "#F7A6C7", "corridor": "Center ↔ Airport", "places": "Nuevos Ministerios, IFEMA, Airport terminals", "tier": "connector", "note": "Airport line; practical for IFEMA and Barajas." }, { "id": "9", "name": "Line 9", "color": "#7A1F5C", "corridor": "North ↔ South-east", "places": "North suburbs, PrΓ­ncipe de Vergara side, south-east corridor", "tier": "connector", "note": "Long corridor; some outer sections feel less frequent." }, { "id": "10", "name": "Line 10", "color": "#1F4DB3", "corridor": "North ↔ South-west", "places": "North suburbs, Plaza de EspaΓ±a area, Casa de Campo / south-west side", "tier": "core", "note": "Major long-distance line with heavy interchange use." }, { "id": "11", "name": "Line 11", "color": "#0B8F6A", "corridor": "South connector", "places": "Plaza ElΓ­ptica side and southern districts", "tier": "local", "note": "Shorter line; intervals are usually wider than the core network." }, { "id": "12", "name": "Line 12", "color": "#A3D65C", "corridor": "MetroSur orbital", "places": "Southern municipalities loop and connectors", "tier": "orbital", "note": "Outer-south network; allow more time between trains." } ] }, "dependencies": [ { "service": { "audio": { "id": "metro_audio" } } } ], "children": [ { "id": "metro_root_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "scroll": { "dismissesKeyboard": "interactively" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#0E1624", "#14213D", "#1B263B" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "metro_content_stack", "type": "vstack", "context": { "_spacing": 18, "_alignment": "leading" }, "style": { "layout": { "padding": { "top": 18, "bottom": 28, "leading": 16, "trailing": 16 }, "maxWidth": "infinity" } }, "children": [ { "id": "metro_intro_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": { "color": "#111827", "opacity": 0.92 } }, "cornerRadius": 22, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.2 }, "radius": 12, "y": 6 } }, "children": [ { "id": "metro_intro_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "metro_intro_icon", "type": "image", "context": { "_source": "sf://tram.fill" }, "style": { "layout": { "width": 22, "height": 22 }, "common": { "foreground": "#93C5FD" } } }, { "id": "metro_intro_text", "type": "text", "context": { "_text": "Tap a line in the schematic map to see its service window and a typical frequency guide." }, "style": { "common": { "font": "body", "foreground": "white" }, "text": { "multilineTextAlignment": "leading" } } } ] }, { "id": "metro_assumption_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "metro_assumption_icon", "type": "image", "context": { "_source": "sf://info.circle.fill" }, "style": { "layout": { "width": 16, "height": 16 }, "common": { "foreground": "#FCD34D" } } }, { "id": "metro_assumption_text", "type": "text", "context": { "_text": "This is a simplified phone map: it shows line overview plus standard operating hours and typical intervals, not live station departure boards." }, "style": { "common": { "font": "caption", "foreground": { "color": "white", "opacity": 0.75 } }, "text": { "multilineTextAlignment": "leading" } } } ] } ] }, { "id": "metro_map_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": { "color": "#0F172A", "opacity": 0.94 } }, "cornerRadius": 24, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.22 }, "radius": 14, "y": 7 } }, "children": [ { "id": "metro_map_header", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "metro_map_header_icon", "type": "image", "context": { "_source": "sf://map.fill" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "#A7F3D0" } } }, { "id": "metro_map_header_text", "type": "text", "context": { "_text": "Schematic line map" }, "style": { "common": { "font": "headline", "foreground": "white" } } } ] }, { "id": "metro_map_hint", "type": "text", "context": { "_text": "Each row is a line. The highlighted row is your current selection." }, "style": { "common": { "font": "caption", "foreground": { "color": "white", "opacity": 0.68 } } } }, { "id": "metro_lines_dynamic", "type": "dynamic", "context": { "_data": "${lines}" }, "prototype": { "id": "metro_line_button", "type": "button", "context": { "_label": "" }, "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 52 }, "common": { "background": "{{ ${selectedLine} == @{item.id} ? { 'color': '#1E293B', 'opacity': 1.0 } : { 'color': '#0B1220', 'opacity': 0.55 } }}", "cornerRadius": 18 } } } }, "children": [ { "id": "metro_line_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 10, "bottom": 10, "leading": 12, "trailing": 12 } } }, "children": [ { "id": "metro_line_badge", "type": "circle", "style": { "layout": { "width": 30, "height": 30 }, "shape": { "fill": "@{item.color}" } } }, { "id": "metro_line_badge_text", "type": "text", "context": { "_text": "@{item.id}" }, "style": { "common": { "font": { "kind": "headline", "weight": "bold" }, "foreground": "white" }, "layout": { "offset": { "x": -28, "y": 0 } } } }, { "id": "metro_line_bar_group", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "metro_line_bar_header", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "metro_line_name_text", "type": "text", "context": { "_text": "@{item.name}" }, "style": { "common": { "font": { "kind": "subheadline", "weight": "semibold" }, "foreground": "white" } } }, { "id": "metro_line_selected_dot", "type": "conditional", "context": { "_condition": "{{ ${selectedLine} == @{item.id} }}", "_trueComponent": { "id": "metro_line_selected_chip", "type": "text", "context": { "_text": "Selected" }, "style": { "common": { "font": "caption", "foreground": "#0F172A", "background": "#E2E8F0", "cornerRadius": 999 }, "layout": { "padding": { "top": 3, "bottom": 3, "leading": 8, "trailing": 8 } } } }, "_falseComponent": { "id": "metro_line_selected_none", "type": "empty" } } }, { "id": "metro_line_name_spacer", "type": "spacer" } ] }, { "id": "metro_line_bar", "type": "capsule", "style": { "layout": { "height": 8, "maxWidth": "infinity" }, "shape": { "fill": "@{item.color}" } } }, { "id": "metro_line_corridor_text", "type": "text", "context": { "_text": "@{item.corridor}" }, "style": { "common": { "font": "caption", "foreground": { "color": "white", "opacity": 0.72 } } } } ] } ] } ], "events": { "onTap": [ { "state": { "id": "metro_select_line", "input": { "selectedLine": "@{item.id}" } } }, { "service": { "id": "metro_select_haptic", "input": { "serviceId": "metro_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] }, { "id": "metro_controls_card", "type": "vstack", "context": { "_spacing": 14, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": { "color": "#111827", "opacity": 0.92 } }, "cornerRadius": 22, "glass": "regular" }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 12, "y": 6 } }, "children": [ { "id": "metro_controls_header", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "metro_controls_icon", "type": "image", "context": { "_source": "sf://clock.fill" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "#FCA5A5" } } }, { "id": "metro_controls_text", "type": "text", "context": { "_text": "Schedule view" }, "style": { "common": { "font": "headline", "foreground": "white" } } } ] }, { "id": "metro_day_picker", "type": "picker", "context": { "_label": "Day", "_selection": "${dayType}", "_options": [ "Weekday", "Saturday", "Sunday / holiday" ] }, "style": { "picker": "segmented", "layout": { "maxWidth": "infinity" } } }, { "id": "metro_time_picker", "type": "picker", "context": { "_label": "Time band", "_selection": "${timeBand}", "_options": [ "Early 06:05–07:00", "Rush 07:00–10:00", "Day 10:00–21:00", "Late 21:00–01:30" ] }, "style": { "picker": "menu", "layout": { "maxWidth": "infinity" } } } ] }, { "id": "metro_schedule_card", "type": "vstack", "context": { "_spacing": 14, "_alignment": "leading", "selectedData": "{{ first(${lines[id == ${selectedLine}]}) }}", "serviceWindow": "06:05–01:30 daily", "headway": "{{ switch(@{selectedData.tier} == 'core' && ${dayType} == 'Weekday' && ${timeBand} == 'Rush 07:00–10:00', 'about 2–4 min', @{selectedData.tier} == 'core' && ${dayType} == 'Weekday' && ${timeBand} == 'Early 06:05–07:00', 'about 4–6 min', @{selectedData.tier} == 'core' && ${dayType} == 'Weekday' && ${timeBand} == 'Day 10:00–21:00', 'about 4–6 min', @{selectedData.tier} == 'core' && ${dayType} == 'Weekday' && ${timeBand} == 'Late 21:00–01:30', 'about 6–9 min', @{selectedData.tier} == 'core' && ${dayType} != 'Weekday' && ${timeBand} == 'Rush 07:00–10:00', 'about 4–6 min', @{selectedData.tier} == 'core' && ${dayType} != 'Weekday' && ${timeBand} == 'Early 06:05–07:00', 'about 5–7 min', @{selectedData.tier} == 'core' && ${dayType} != 'Weekday' && ${timeBand} == 'Day 10:00–21:00', 'about 5–7 min', @{selectedData.tier} == 'core' && ${dayType} != 'Weekday' && ${timeBand} == 'Late 21:00–01:30', 'about 7–10 min', @{selectedData.tier} == 'connector' && ${dayType} == 'Weekday' && ${timeBand} == 'Rush 07:00–10:00', 'about 3–5 min', @{selectedData.tier} == 'connector' && ${dayType} == 'Weekday' && ${timeBand} == 'Early 06:05–07:00', 'about 5–7 min', @{selectedData.tier} == 'connector' && ${dayType} == 'Weekday' && ${timeBand} == 'Day 10:00–21:00', 'about 5–7 min', @{selectedData.tier} == 'connector' && ${dayType} == 'Weekday' && ${timeBand} == 'Late 21:00–01:30', 'about 7–10 min', @{selectedData.tier} == 'connector' && ${dayType} != 'Weekday' && ${timeBand} == 'Rush 07:00–10:00', 'about 5–7 min', @{selectedData.tier} == 'connector' && ${dayType} != 'Weekday' && ${timeBand} == 'Early 06:05–07:00', 'about 6–8 min', @{selectedData.tier} == 'connector' && ${dayType} != 'Weekday' && ${timeBand} == 'Day 10:00–21:00', 'about 6–8 min', @{selectedData.tier} == 'connector' && ${dayType} != 'Weekday' && ${timeBand} == 'Late 21:00–01:30', 'about 8–11 min', @{selectedData.tier} == 'orbital' && ${dayType} == 'Weekday' && ${timeBand} == 'Rush 07:00–10:00', 'about 3–5 min', @{selectedData.tier} == 'orbital' && ${dayType} == 'Weekday' && ${timeBand} == 'Early 06:05–07:00', 'about 5–7 min', @{selectedData.tier} == 'orbital' && ${dayType} == 'Weekday' && ${timeBand} == 'Day 10:00–21:00', 'about 5–7 min', @{selectedData.tier} == 'orbital' && ${dayType} == 'Weekday' && ${timeBand} == 'Late 21:00–01:30', 'about 7–10 min', @{selectedData.tier} == 'orbital' && ${dayType} != 'Weekday' && ${timeBand} == 'Rush 07:00–10:00', 'about 5–7 min', @{selectedData.tier} == 'orbital' && ${dayType} != 'Weekday' && ${timeBand} == 'Early 06:05–07:00', 'about 6–8 min', @{selectedData.tier} == 'orbital' && ${dayType} != 'Weekday' && ${timeBand} == 'Day 10:00–21:00', 'about 6–8 min', @{selectedData.tier} == 'orbital' && ${dayType} != 'Weekday' && ${timeBand} == 'Late 21:00–01:30', 'about 8–11 min', ${dayType} == 'Weekday' && ${timeBand} == 'Rush 07:00–10:00', 'about 6–8 min', ${dayType} == 'Weekday' && ${timeBand} == 'Early 06:05–07:00', 'about 7–9 min', ${dayType} == 'Weekday' && ${timeBand} == 'Day 10:00–21:00', 'about 7–9 min', ${dayType} == 'Weekday' && ${timeBand} == 'Late 21:00–01:30', 'about 9–12 min', ${dayType} != 'Weekday' && ${timeBand} == 'Rush 07:00–10:00', 'about 7–9 min', ${dayType} != 'Weekday' && ${timeBand} == 'Early 06:05–07:00', 'about 8–10 min', ${dayType} != 'Weekday' && ${timeBand} == 'Day 10:00–21:00', 'about 8–10 min', 'about 10–12 min') }}", "lineMood": "{{ switch(@{selectedData.tier} == 'core', 'Frequent central service', @{selectedData.tier} == 'connector', 'Connector service', @{selectedData.tier} == 'orbital', 'Orbital / transfer-heavy service', 'Lower-frequency local service') }}" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "color": { "color": "#0F172A", "opacity": 0.96 } }, "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.22 }, "radius": 14, "y": 7 }, "animation": { "kind": "spring", "value": "${selectedLine}", "duration": 0.35, "bounce": 0.3 } }, "children": [ { "id": "metro_schedule_top", "type": "hstack", "context": { "_spacing": 12, "_alignment": "center" }, "children": [ { "id": "metro_selected_badge", "type": "circle", "style": { "layout": { "width": 44, "height": 44 }, "shape": { "fill": "@{selectedData.color}" } } }, { "id": "metro_selected_badge_text", "type": "text", "context": { "_text": "@{selectedData.id}" }, "style": { "common": { "font": { "kind": "title3", "weight": "bold" }, "foreground": "white" }, "layout": { "offset": { "x": -39, "y": 0 } } } }, { "id": "metro_schedule_title_group", "type": "vstack", "context": { "_spacing": 3, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "offset": { "x": -22, "y": 0 } } }, "children": [ { "id": "metro_selected_name", "type": "text", "context": { "_text": "@{selectedData.name}" }, "style": { "common": { "font": { "kind": "title3", "weight": "bold" }, "foreground": "white" } } }, { "id": "metro_selected_mood", "type": "text", "context": { "_text": "@{lineMood}" }, "style": { "common": { "font": "caption", "foreground": { "color": "white", "opacity": 0.72 } } } } ] } ] }, { "id": "metro_schedule_route_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "color": { "color": "#111827", "opacity": 0.85 } }, "cornerRadius": 18 } }, "children": [ { "id": "metro_route_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "metro_route_icon", "type": "image", "context": { "_source": "sf://point.topleft.down.curvedto.point.bottomright.up.fill" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": "@{selectedData.color}" } } }, { "id": "metro_route_text", "type": "text", "context": { "_text": "@{selectedData.corridor}" }, "style": { "common": { "font": "headline", "foreground": "white" } } } ] }, { "id": "metro_places_text", "type": "text", "context": { "_text": "@{selectedData.places}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "white", "opacity": 0.82 } }, "text": { "multilineTextAlignment": "leading" } } }, { "id": "metro_note_text", "type": "text", "context": { "_text": "@{selectedData.note}" }, "style": { "common": { "font": "caption", "foreground": { "color": "white", "opacity": 0.66 } }, "text": { "multilineTextAlignment": "leading" } } } ] }, { "id": "metro_schedule_stats_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "metro_service_window_box", "type": "vstack", "context": { "_spacing": 6, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "color": { "color": "#111827", "opacity": 0.85 } }, "cornerRadius": 18 } }, "children": [ { "id": "metro_service_window_label", "type": "text", "context": { "_text": "Service window" }, "style": { "common": { "font": "caption", "foreground": { "color": "white", "opacity": 0.64 } } } }, { "id": "metro_service_window_value", "type": "text", "context": { "_text": "@{serviceWindow}" }, "style": { "common": { "font": { "kind": "headline", "weight": "semibold" }, "foreground": "white" } } } ] }, { "id": "metro_headway_box", "type": "vstack", "context": { "_spacing": 6, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 16 }, "common": { "background": { "gradient": { "linear": { "colors": [ "@{selectedData.color}", "#1E293B" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "cornerRadius": 18, "foreground": "white" } }, "children": [ { "id": "metro_headway_label", "type": "text", "context": { "_text": "Typical interval" }, "style": { "common": { "font": "caption", "foreground": { "color": "white", "opacity": 0.78 } } } }, { "id": "metro_headway_value", "type": "text", "context": { "_text": "@{headway}" }, "style": { "common": { "font": { "kind": "headline", "weight": "bold" }, "foreground": "white" } } } ] } ] }, { "id": "metro_schedule_footer", "type": "text", "context": { "_text": "Intervals are a planning guide for the selected line and time band. Exact first, last, and next trains depend on station and direction." }, "style": { "common": { "font": "caption", "foreground": { "color": "white", "opacity": 0.68 } }, "text": { "multilineTextAlignment": "leading" } } } ] } ] } ] } ] }