mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-18 17:16:46 +03:00
e199cd92f3
* Fix Neo Mirai agenda timeline alignment * Fix Neo Mirai manifesto action icon --------- Co-authored-by: Abdul Wahab <abdulwahab@Abduls-MacBook-Pro-2.local>
344 lines
17 KiB
HTML
344 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="description" content="NEO MIRAI AI Design Conference, Tokyo 2042. A retro-futurist conference experience for illustration, interfaces, machines, and optimism.">
|
||
<title>NEO MIRAI AI Design Conference</title>
|
||
<link rel="icon" href="../favicon.svg" type="image/svg+xml">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600;700&family=Chakra+Petch:wght@300;400;500;600&family=Zen+Old+Mincho:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="./styles.css">
|
||
</head>
|
||
<body>
|
||
<a class="skip-link" href="#main">Skip to content</a>
|
||
|
||
<header class="site-header" data-reveal>
|
||
<a class="brand-lockup" href="#" aria-label="NEO MIRAI home">
|
||
<span class="brand-mark" aria-hidden="true">
|
||
<span></span>
|
||
</span>
|
||
<span class="brand-word">
|
||
<span>NEO</span>
|
||
<span>MIRAI</span>
|
||
</span>
|
||
</a>
|
||
|
||
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">
|
||
<span>Menu</span>
|
||
<i aria-hidden="true"></i>
|
||
</button>
|
||
|
||
<nav class="site-nav" id="site-nav" aria-label="Primary navigation">
|
||
<a href="#home" aria-current="page">Home</a>
|
||
<a href="#agenda">Agenda</a>
|
||
<a href="#speakers">Speakers</a>
|
||
<a href="#installations">Installations</a>
|
||
<a href="#experience">Experience</a>
|
||
<a href="#tickets">Practicals</a>
|
||
</nav>
|
||
|
||
<a class="ticket-pill" href="#tickets">
|
||
<span>Get tickets</span>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M5 12h12m-5-5 5 5-5 5"/>
|
||
</svg>
|
||
</a>
|
||
</header>
|
||
|
||
<main id="main">
|
||
<section class="hero" id="home" aria-labelledby="hero-title">
|
||
<div class="vertical-poem" aria-hidden="true">
|
||
<span>未来を描き、共に創る。</span>
|
||
<i></i>
|
||
<img src="./assets/stamp-seal.svg" alt="">
|
||
</div>
|
||
|
||
<div class="hero-copy" data-reveal>
|
||
<h1 id="hero-title">
|
||
<span>NEO MIRAI</span>
|
||
<span>AI DESIGN</span>
|
||
<span>CONFERENCE</span>
|
||
</h1>
|
||
<p class="hero-place">Tokyo 2042</p>
|
||
<p class="hero-summary">Illustration, interfaces, machines, optimism</p>
|
||
<div class="hero-meta" aria-label="Conference date and venue">
|
||
<span>May 20–22, 2042</span>
|
||
<span>Tokyo International Forum</span>
|
||
</div>
|
||
</div>
|
||
|
||
<figure class="hero-art" data-reveal>
|
||
<img src="./assets/hero-city.webp" alt="An illustrated golden future Tokyo skyline with towers, terraces, and visitors walking toward the conference venue.">
|
||
<figcaption>Systems with warmth. Machines with a human horizon.</figcaption>
|
||
</figure>
|
||
</section>
|
||
|
||
<section class="agenda-block" id="agenda" aria-labelledby="agenda-title">
|
||
<div class="agenda-panel" data-reveal>
|
||
<p class="section-label">Agenda</p>
|
||
<h2 id="agenda-title">Three days of ideas and inspiration</h2>
|
||
|
||
<ol class="agenda-days" aria-label="Conference agenda highlights">
|
||
<li>
|
||
<time datetime="2042-05-20">Day 01 <span>05.20</span></time>
|
||
<div>
|
||
<h3>New Frontiers</h3>
|
||
<p>Keynotes, visions, and emerging paradigms.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<time datetime="2042-05-21">Day 02 <span>05.21</span></time>
|
||
<div>
|
||
<h3>Design x Intelligence</h3>
|
||
<p>Crafting experiences with AI.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<time datetime="2042-05-22">Day 03 <span>05.22</span></time>
|
||
<div>
|
||
<h3>Society & Imagination</h3>
|
||
<p>Systems, ethics, and collective futures.</p>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
|
||
<a class="text-action" href="#tickets">View full agenda <span class="text-action-icon" aria-hidden="true"><span class="text-action-arrow">→</span></span></a>
|
||
</div>
|
||
|
||
<figure class="agenda-art" data-reveal>
|
||
<img src="./assets/agenda-architecture.webp" alt="A quiet illustrated architectural platform with amber circles, slim towers, and a lone visitor.">
|
||
<figcaption>創造は、未来をつくる最初の一歩。</figcaption>
|
||
</figure>
|
||
</section>
|
||
|
||
<section class="speakers" id="speakers" aria-labelledby="speakers-title">
|
||
<div class="section-intro" data-reveal>
|
||
<p class="section-label">Speakers</p>
|
||
<h2 id="speakers-title">Pioneers shaping tomorrow</h2>
|
||
<a class="text-action" href="#tickets">View full speakers <span class="text-action-icon" aria-hidden="true"><span class="text-action-arrow">→</span></span></a>
|
||
</div>
|
||
|
||
<div class="speaker-carousel" data-reveal aria-roledescription="carousel" aria-label="Featured speaker carousel">
|
||
<div class="speaker-track" id="speaker-track">
|
||
<article class="speaker-slide is-active" aria-label="Featured speakers set 1">
|
||
<ul class="speaker-grid" aria-label="Featured speakers, set 1">
|
||
<li class="speaker-person" style="--speaker-focus-x: 68%; --speaker-focus-y: 48%;" data-kanji="中村由美">
|
||
<img src="./assets/speaker-yumi-nakamura.webp" alt="Yumi Nakamura illustrated in profile before a golden sun and distant future city.">
|
||
<div class="speaker-meta">
|
||
<span>Yumi Nakamura</span>
|
||
<small>AI Ethicist & Researcher</small>
|
||
</div>
|
||
</li>
|
||
<li class="speaker-person" style="--speaker-focus-x: 52%; --speaker-focus-y: 47%;" data-kanji="田中啓介">
|
||
<img src="./assets/speaker-keisuke-tanaka.webp" alt="Keisuke Tanaka illustrated before an amber sun and speculative city towers.">
|
||
<div class="speaker-meta">
|
||
<span>Keisuke Tanaka</span>
|
||
<small>Interaction Designer & Creative Director</small>
|
||
</div>
|
||
</li>
|
||
<li class="speaker-person" style="--speaker-focus-x: 42%; --speaker-focus-y: 48%;" data-kanji="李ソフィア">
|
||
<img src="./assets/speaker-sophia-lee.webp" alt="Sophia Lee illustrated in profile near circular geometry and a temple skyline.">
|
||
<div class="speaker-meta">
|
||
<span>Sophia Lee</span>
|
||
<small>Machine Learning Artist</small>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<article class="speaker-slide" aria-label="Featured speakers set 2" aria-hidden="true">
|
||
<ul class="speaker-grid" aria-label="Featured speakers, set 2">
|
||
<li class="speaker-person" style="--speaker-focus-x: 44%; --speaker-focus-y: 48%;" data-kanji="渡辺藍子">
|
||
<img src="./assets/speaker-aiko-watanabe.webp" alt="Aiko Watanabe illustrated in profile against a burnt-orange sun and pine silhouette.">
|
||
<div class="speaker-meta">
|
||
<span>Aiko Watanabe</span>
|
||
<small>Synthetic Media Director</small>
|
||
</div>
|
||
</li>
|
||
<li class="speaker-person" style="--speaker-focus-x: 52%; --speaker-focus-y: 48%;" data-kanji="佐藤蓮">
|
||
<img src="./assets/speaker-ren-sato.webp" alt="Ren Sato illustrated before Mount Fuji and flowing translucent forms.">
|
||
<div class="speaker-meta">
|
||
<span>Ren Sato</span>
|
||
<small>Robotics Experience Lead</small>
|
||
</div>
|
||
</li>
|
||
<li class="speaker-person" style="--speaker-focus-x: 46%; --speaker-focus-y: 48%;" data-kanji="黒田美奈">
|
||
<img src="./assets/speaker-mina-kuroda.webp" alt="Mina Kuroda illustrated before a red sun and vertical future towers.">
|
||
<div class="speaker-meta">
|
||
<span>Mina Kuroda</span>
|
||
<small>Computational Typographer</small>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<article class="speaker-slide" aria-label="Featured speakers set 3" aria-hidden="true">
|
||
<ul class="speaker-grid" aria-label="Featured speakers, set 3">
|
||
<li class="speaker-person" style="--speaker-focus-x: 43%; --speaker-focus-y: 48%;" data-kanji="森花">
|
||
<img src="./assets/speaker-hana-mori.webp" alt="Hana Mori illustrated against a black eclipse circle and delicate future skyline.">
|
||
<div class="speaker-meta">
|
||
<span>Hana Mori</span>
|
||
<small>Speculative Systems Artist</small>
|
||
</div>
|
||
</li>
|
||
<li class="speaker-person" style="--speaker-focus-x: 52%; --speaker-focus-y: 47%;" data-kanji="伊藤大地">
|
||
<img src="./assets/speaker-daichi-ito.webp" alt="Daichi Ito illustrated before a red sun and dense machine city.">
|
||
<div class="speaker-meta">
|
||
<span>Daichi Ito</span>
|
||
<small>Neural Interface Researcher</small>
|
||
</div>
|
||
</li>
|
||
<li class="speaker-person" style="--speaker-focus-x: 42%; --speaker-focus-y: 48%;" data-kanji="小林恵美">
|
||
<img src="./assets/speaker-emi-kobayashi.webp" alt="Emi Kobayashi illustrated near a gold disk and Tokyo tower forms.">
|
||
<div class="speaker-meta">
|
||
<span>Emi Kobayashi</span>
|
||
<small>Civic AI Designer</small>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<article class="speaker-slide" aria-label="Featured speakers set 4" aria-hidden="true">
|
||
<ul class="speaker-grid" aria-label="Featured speakers, set 4">
|
||
<li class="speaker-person" style="--speaker-focus-x: 70%; --speaker-focus-y: 48%;" data-kanji="荒田健司">
|
||
<img src="./assets/speaker-kenji-arata.webp" alt="Kenji Arata illustrated before a red sun and distant speculative towers.">
|
||
<div class="speaker-meta">
|
||
<span>Kenji Arata</span>
|
||
<small>Machine Imagination Lab</small>
|
||
</div>
|
||
</li>
|
||
<li class="speaker-person" style="--speaker-focus-x: 52%; --speaker-focus-y: 48%;" data-kanji="古賀直美">
|
||
<img src="./assets/speaker-naomi-koga.webp" alt="Naomi Koga illustrated below layered amber circles and a small temple skyline.">
|
||
<div class="speaker-meta">
|
||
<span>Naomi Koga</span>
|
||
<small>Data Rituals Curator</small>
|
||
</div>
|
||
</li>
|
||
<li class="speaker-person" style="--speaker-focus-x: 58%; --speaker-focus-y: 48%;" data-kanji="藤本亮">
|
||
<img src="./assets/speaker-ryo-fujimoto.webp" alt="Ryo Fujimoto illustrated near dark circular geometry and warm technical markings.">
|
||
<div class="speaker-meta">
|
||
<span>Ryo Fujimoto</span>
|
||
<small>Embodied Intelligence Architect</small>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="speaker-controls" aria-label="Speaker carousel controls">
|
||
<button class="speaker-dot is-active" type="button" data-slide="0" aria-label="Show speaker set 1" aria-current="true"></button>
|
||
<button class="speaker-dot" type="button" data-slide="1" aria-label="Show speaker set 2"></button>
|
||
<button class="speaker-dot" type="button" data-slide="2" aria-label="Show speaker set 3"></button>
|
||
<button class="speaker-dot" type="button" data-slide="3" aria-label="Show speaker set 4"></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="installations" id="installations" aria-labelledby="installations-title">
|
||
<div class="section-intro" data-reveal>
|
||
<p class="section-label">Installations</p>
|
||
<h2 id="installations-title">Experiences beyond the screen</h2>
|
||
<a class="text-action" href="#tickets">Explore installations <span class="text-action-icon" aria-hidden="true"><span class="text-action-arrow">→</span></span></a>
|
||
</div>
|
||
|
||
<div class="installation-rhythm" data-reveal>
|
||
<article class="installation-item item-flux">
|
||
<img src="./assets/install-flux.webp" alt="A tiny visitor standing before a glowing orange spherical installation.">
|
||
<h3>Harmonic Flux</h3>
|
||
<p>Immersive environment</p>
|
||
</article>
|
||
<article class="installation-item item-dream">
|
||
<img src="./assets/install-dream.webp" alt="An illustrated generative ribbon floating through an amber exhibition space.">
|
||
<h3>Dream Compiler</h3>
|
||
<p>Generative sculpture</p>
|
||
</article>
|
||
<article class="installation-item item-echoes">
|
||
<img src="./assets/install-echoes.webp" alt="A lone visitor in a circular sound installation with a dark center.">
|
||
<h3>Echoes of Tomorrow</h3>
|
||
<p>AI soundscape</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="manifesto" id="experience" aria-labelledby="manifesto-title">
|
||
<div class="manifesto-copy" data-reveal>
|
||
<p class="section-label">Manifesto</p>
|
||
<h2 id="manifesto-title">We believe the future is something we design together.</h2>
|
||
<a class="text-action text-action-light" href="#tickets">The NEO MIRAI manifesto <span class="text-action-icon" aria-hidden="true"><span class="text-action-arrow">→</span></span></a>
|
||
</div>
|
||
<figure class="manifesto-art" data-reveal>
|
||
<img src="./assets/manifesto-fuji-regenerated.webp" alt="Mount Fuji and a golden future city beneath a red sun.">
|
||
</figure>
|
||
</section>
|
||
|
||
<section class="tickets" id="tickets" aria-labelledby="tickets-title">
|
||
<img class="ticket-pine" src="./assets/pine-ticket.png" alt="" aria-hidden="true">
|
||
<div class="tickets-heading" data-reveal>
|
||
<p class="section-label">Tickets</p>
|
||
<h2 id="tickets-title">Choose your experience</h2>
|
||
</div>
|
||
|
||
<div class="ticket-options" data-reveal>
|
||
<article>
|
||
<h3>Attendee</h3>
|
||
<p>Full access to all talks and installations.</p>
|
||
<strong>¥ 49,000</strong>
|
||
<a href="mailto:tickets@neomirai.example">Select</a>
|
||
</article>
|
||
<article>
|
||
<h3>Student</h3>
|
||
<p>Access for students and educators.</p>
|
||
<strong>¥ 19,000</strong>
|
||
<a href="mailto:tickets@neomirai.example">Select</a>
|
||
</article>
|
||
<article>
|
||
<h3>Supporter</h3>
|
||
<p>Support the community and get benefits.</p>
|
||
<strong>¥ 99,000</strong>
|
||
<a href="mailto:tickets@neomirai.example">Select</a>
|
||
</article>
|
||
<article>
|
||
<h3>Group</h3>
|
||
<p>For teams of five or more.</p>
|
||
<strong>Contact us</strong>
|
||
<a href="mailto:tickets@neomirai.example">Inquire</a>
|
||
</article>
|
||
</div>
|
||
|
||
<aside class="ticket-seal" data-reveal>
|
||
<span class="ticket-seal-label">
|
||
<span>Get</span>
|
||
<span>Your</span>
|
||
<span>Ticket</span>
|
||
</span>
|
||
<a href="mailto:tickets@neomirai.example" aria-label="Email ticket office">→</a>
|
||
</aside>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<a class="brand-lockup brand-lockup-small" href="#" aria-label="NEO MIRAI home">
|
||
<span class="brand-mark" aria-hidden="true"><span></span></span>
|
||
<span class="brand-word"><span>NEO</span><span>MIRAI</span></span>
|
||
</a>
|
||
<p>未来を描き、共に創る。</p>
|
||
<nav aria-label="Footer navigation">
|
||
<a href="#agenda">About</a>
|
||
<a href="#speakers">Partners</a>
|
||
<a href="#installations">News</a>
|
||
<a href="#tickets">FAQ</a>
|
||
<a href="mailto:hello@neomirai.example">Contact</a>
|
||
</nav>
|
||
<div class="language-switch" aria-label="Language options">
|
||
<a href="#" aria-current="true">EN</a>
|
||
<span>/</span>
|
||
<a href="#">日本語</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="./script.js"></script>
|
||
</body>
|
||
</html>
|