246 lines
11 KiB
HTML
246 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Ataşehir Kütüphanesi — Mahallenin Okuma Salonu</title>
|
||
<meta
|
||
name="description"
|
||
content="Ataşehir Kütüphanesi: iki katlı, cam cepheli halk kütüphanesi. 12 kitaplıkta 8.573 kitap, sessiz çalışma alanı, çocuk bölümü ve dijital erişim noktaları. Kütüphaneyi 3D olarak gezerken keşfedin."
|
||
/>
|
||
<meta name="theme-color" content="#1d2a24" />
|
||
<link
|
||
rel="icon"
|
||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%231d2a24'/%3E%3Cpath d='M7 8h5v16H7zM14 6h5v18h-5zM21 10h5v14h-5z' fill='%23d9a441'/%3E%3C/svg%3E"
|
||
/>
|
||
<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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
</head>
|
||
<body>
|
||
<!-- ============ ÜST GEZİNME ============ -->
|
||
<header class="site-nav" id="nav">
|
||
<a class="brand" href="#top">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
||
<path d="M3 4.5h5v15H3zM10 4.5h4v15h-4z" />
|
||
<path d="M16.2 5.2l4.3 1.1-3.6 13.4-4.3-1.1z" />
|
||
</svg>
|
||
<span>Ataşehir <b>Kütüphanesi</b></span>
|
||
</a>
|
||
<nav class="nav-links" aria-label="Ana menü">
|
||
<a href="#hakkimizda">Hakkımızda</a>
|
||
<a href="#koleksiyonlar">Koleksiyonlar</a>
|
||
<a href="#hizmetler">Hizmetler</a>
|
||
<a href="#ziyaret">Ziyaret</a>
|
||
</nav>
|
||
<a class="nav-cta" href="https://dene.numexai.com.tr/kutuphane-3d/" target="_blank" rel="noopener">3D Gezintiye Başla</a>
|
||
<button class="nav-toggle" id="navToggle" aria-label="Menüyü aç" aria-expanded="false">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</header>
|
||
|
||
<!-- ============ HERO ============ -->
|
||
<main id="top">
|
||
<section class="hero">
|
||
<div class="hero-media">
|
||
<!-- Gece vitrini: içerideki tüm ışıklar yanar, camdan sıcak ışık taşar. -->
|
||
<img
|
||
src="/gallery/gece-cephe.png"
|
||
alt="Gece Ataşehir Kütüphanesi: karanlıkta cam cepheli bina, içerideki raf ve okuma salonu ışıkları dışarı vuruyor"
|
||
fetchpriority="high"
|
||
/>
|
||
<div class="hero-shade"></div>
|
||
</div>
|
||
<div class="hero-content">
|
||
<p class="eyebrow">Ataşehir · İstanbul</p>
|
||
<h1>Mahallenin<br />okuma salonu</h1>
|
||
<p class="hero-lead">
|
||
İki katlı, cam cepheli bir halk kütüphanesi. On iki kitaplıkta sekiz binden
|
||
fazla kitap, pencere boyunca uzanan okuma masaları ve gün ışığını içeri alan
|
||
bir atrium.
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a class="btn btn-primary" href="https://dene.numexai.com.tr/kutuphane-3d/" target="_blank" rel="noopener">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
||
<path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z" />
|
||
<path d="M12 12l8-4.5M12 12v9M12 12L4 7.5" />
|
||
</svg>
|
||
3D Gezintiyi Aç
|
||
</a>
|
||
<a class="btn btn-ghost" href="#hakkimizda">Kütüphaneyi Tanı</a>
|
||
</div>
|
||
<dl class="hero-stats">
|
||
<div><dt>Kitaplık</dt><dd data-count="12">12</dd></div>
|
||
<div><dt>Kitap</dt><dd data-count="8573">8.573</dd></div>
|
||
<div><dt>Okuma yeri</dt><dd data-count="78">78</dd></div>
|
||
<div><dt>Kat</dt><dd data-count="2">2</dd></div>
|
||
</dl>
|
||
</div>
|
||
<div class="hero-scroll" aria-hidden="true">
|
||
<span></span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ HAKKIMIZDA ============ -->
|
||
<section class="section about" id="hakkimizda">
|
||
<div class="wrap about-grid">
|
||
<div class="about-text">
|
||
<p class="eyebrow">Hakkımızda</p>
|
||
<h2>Işığı içeri alan bir bina,<br />sessizliği koruyan bir salon</h2>
|
||
<p>
|
||
Kütüphane, 32 × 22 metrelik bir taban üzerine iki kat olarak kuruldu.
|
||
Güney cephesi boydan boya cam: gün ışığı salonun ortasındaki atriyuma kadar
|
||
giriyor, ikinci kat balkonu bu boşluğun etrafında dönüyor.
|
||
</p>
|
||
<p>
|
||
Zemin katta danışma bankosu, okuma masaları ve çocuk bölümü; üst katta
|
||
bilgisayar istasyonları, etkinlik alanı ve sessiz çalışma köşesi var.
|
||
Raflar Dewey düzenine göre ayrıldı, her kitaplığın sırtında kategori rengi
|
||
taşıyan bir etiket bulunuyor.
|
||
</p>
|
||
<p class="muted">
|
||
Bu sayfa kütüphanenin dijital vitrinidir. Binayı 3D olarak gezebilir,
|
||
rafların arasında dolaşabilir, bir kitaplığa tıklayıp hangi koleksiyona
|
||
ait olduğunu okuyabilirsiniz.
|
||
</p>
|
||
</div>
|
||
<figure class="about-figure">
|
||
<img
|
||
src="/gallery/salon-raflar.png"
|
||
alt="Kütüphanenin iç salonu: ahşap kitaplıklar, renkli kitap sırtları ve tavan armatürleri"
|
||
loading="lazy"
|
||
/>
|
||
<figcaption>Zemin kat — salonun ortasından raflara bakış</figcaption>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ KOLEKSİYONLAR ============ -->
|
||
<section class="section collections" id="koleksiyonlar">
|
||
<div class="wrap">
|
||
<div class="section-head">
|
||
<p class="eyebrow">Koleksiyonlar</p>
|
||
<h2>On iki kitaplık,<br />on bir ayrı dünya</h2>
|
||
<p class="section-lead">
|
||
Her raf Dewey sınıflandırmasına göre düzenlendi. 3D gezintide bir kitaplığa
|
||
tıkladığınızda kategoriyi, raf kodunu ve kitap sayısını görebilirsiniz.
|
||
</p>
|
||
</div>
|
||
<ul class="col-grid" id="colGrid"></ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 3D VİTRİN ============ -->
|
||
<section class="showcase">
|
||
<div class="showcase-media">
|
||
<img
|
||
src="/gallery/ust-kat-balkon.png"
|
||
alt="Üst kat: balkon korkuluğu, iç merdiven ve okuma masaları"
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
<div class="showcase-body">
|
||
<p class="eyebrow eyebrow-light">Dijital vitrin</p>
|
||
<h2>Binayı tarayıcıda gezin</h2>
|
||
<p>
|
||
Kurulum yok, eklenti yok. Kütüphane tarayıcınızda gerçek zamanlı olarak
|
||
çiziliyor: dışarıdan 360° döndürün, içine girin, <kbd>W</kbd>
|
||
<kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> ile yürüyün.
|
||
</p>
|
||
<ul class="showcase-list">
|
||
<li><b>İki kat, iç merdiven</b> — katlar arasında yürüyerek geçin</li>
|
||
<li><b>Tıklanabilir kitaplıklar</b> — kategori, Dewey aralığı, kitap sayısı</li>
|
||
<li><b>Gün / gece</b> — saati değiştirin, iç mekân aydınlatması uyum sağlar</li>
|
||
<li><b>Çatıyı gizle</b> — kuşbakışı yerleşimi inceleyin</li>
|
||
</ul>
|
||
<a class="btn btn-light" href="https://dene.numexai.com.tr/kutuphane-3d/" target="_blank" rel="noopener">
|
||
3D Gezintiyi Başlat
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<path d="M5 12h14M13 6l6 6-6 6" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ HİZMETLER ============ -->
|
||
<section class="section services" id="hizmetler">
|
||
<div class="wrap">
|
||
<div class="section-head">
|
||
<p class="eyebrow">Hizmetler</p>
|
||
<h2>Salonda neler var</h2>
|
||
</div>
|
||
<div class="svc-grid" id="svcGrid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ ZİYARET ============ -->
|
||
<section class="section visit" id="ziyaret">
|
||
<div class="wrap visit-grid">
|
||
<div>
|
||
<p class="eyebrow">Ziyaret</p>
|
||
<h2>Ne zaman gelebilirsiniz</h2>
|
||
<table class="hours">
|
||
<caption class="sr-only">Kütüphane çalışma saatleri</caption>
|
||
<tbody>
|
||
<tr><th scope="row">Pazartesi – Cuma</th><td>09.00 – 21.00</td></tr>
|
||
<tr><th scope="row">Cumartesi</th><td>10.00 – 18.00</td></tr>
|
||
<tr><th scope="row">Pazar</th><td class="closed">Kapalı</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="muted small">
|
||
Saatler ve adres bu tanıtım için temsilîdir. Güncel bilgi için
|
||
kütüphanenin resmî kanallarını kontrol edin.
|
||
</p>
|
||
</div>
|
||
<div class="visit-card">
|
||
<h3>Adres</h3>
|
||
<p>Ataşehir Merkez<br />Kütüphane Caddesi No: 1<br />34746 İstanbul</p>
|
||
<h3>İletişim</h3>
|
||
<p>
|
||
<a href="tel:+902160000000">0216 000 00 00</a><br />
|
||
<a href="mailto:iletisim@atasehirkutuphanesi.example">iletisim@atasehirkutuphanesi.example</a>
|
||
</p>
|
||
<h3>Etkinlikler</h3>
|
||
<ul class="events">
|
||
<li><b>Yazar buluşması</b> — her ayın 2. cumartesi, üst kat</li>
|
||
<li><b>Çocuk okuma saati</b> — her çarşamba 16.00</li>
|
||
<li><b>Yazı atölyesi</b> — iki haftada bir perşembe</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ============ ALT BİLGİ ============ -->
|
||
<footer class="site-footer">
|
||
<div class="wrap footer-grid">
|
||
<div class="footer-brand">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
||
<path d="M3 4.5h5v15H3zM10 4.5h4v15h-4z" />
|
||
<path d="M16.2 5.2l4.3 1.1-3.6 13.4-4.3-1.1z" />
|
||
</svg>
|
||
<div>
|
||
<strong>Ataşehir Kütüphanesi</strong>
|
||
<p>Mahallenin okuma salonu.</p>
|
||
</div>
|
||
</div>
|
||
<nav aria-label="Alt menü">
|
||
<a href="https://dene.numexai.com.tr/kutuphane-3d/" target="_blank" rel="noopener">3D Gezinti</a>
|
||
<a href="#koleksiyonlar">Koleksiyonlar</a>
|
||
<a href="#hizmetler">Hizmetler</a>
|
||
<a href="#ziyaret">Ziyaret</a>
|
||
</nav>
|
||
<p class="footer-note">
|
||
3D sahne ve bu tanıtım sitesi <b>Numex AI</b> tarafından üretildi.
|
||
Görseller gerçek zamanlı 3D sahneden alınmıştır.
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="module" src="/src/site/main.ts"></script>
|
||
</body>
|
||
</html>
|