Bölümler paneli

 <!DOCTYPE html>

<html lang="tr">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bölümler Listesi</title>

  <style>

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;400&display=swap');

    body {

      background: #15171c;

      color: #fff;

      font-family: 'Montserrat', sans-serif;

      margin: 0;

      min-height: 100vh;

    }

    .container {

      max-width: 900px;

      margin: 35px auto 0 auto;

      padding: 0 15px 80px 15px;

    }

    .header {

      display: flex;

      justify-content: space-between;

      align-items: center;

      margin-bottom: 28px;

    }

    .header h1 {

      font-size: 2.4rem;

      font-weight: 700;

      letter-spacing: -1px;

      margin: 0;

    }

    .header .status {

      font-size: 1.25rem;

      font-weight: 700;

      color: #bdbdbd;

    }

    .search-bar-container {

      margin-bottom: 22px;

      display: flex;

      justify-content: center;

    }

    .search-bar {

      width: 100%;

      max-width: 340px;

      padding: 13px 18px;

      font-size: 1.1rem;

      border-radius: 8px;

      border: none;

      background: #23252b;

      color: #fff;

      box-shadow: 0 1px 8px #0002;

      outline: none;

      transition: background 0.2s, box-shadow 0.2s;

      font-family: inherit;

      letter-spacing: 0.2px;

    }

    .search-bar:focus {

      background: #282b31;

      box-shadow: 0 2px 12px #b10d0d60;

    }

    .special-row {

      display: flex;

      gap: 20px;

      margin-bottom: 26px;

    }

    .special-btn {

      flex: 1;

      border: none;

      color: #fff;

      background: #b10d0d;

      border-radius: 10px;

      padding: 28px 0;

      font-size: 1.2rem;

      font-weight: 400;

      cursor: pointer;

      text-align: center;

      transition: background 0.2s;

      box-shadow: 0 2px 12px #0002;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      user-select: none;

      text-decoration: none;

    }

    .special-btn span {

      font-size: 1.1rem;

      opacity: 0.85;

    }

    .special-btn strong {

      font-size: 1.5rem;

      font-weight: 700;

      margin-top: 3px;

      letter-spacing: 0.5px;

    }

    .special-btn:hover {

      background: #d41a1a;

    }

    .bolum-list {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 15px;

    }

    .bolum-card {

      background: #181a1f;

      border: 1px solid #292b31;

      border-radius: 9px;

      padding: 23px 18px;

      font-size: 1.08rem;

      font-weight: 500;

      color: #e8eaf1;

      transition: border 0.2s, box-shadow 0.2s;

      text-decoration: none;

      display: flex;

      align-items: center;

      cursor: pointer;

    }

    .bolum-card:hover, .bolum-card:focus {

      border-color: #a52626;

      box-shadow: 0 2px 10px #a5262640;

      color: #fff;

    }

    .not-found {

      grid-column: span 2;

      text-align: center;

      color: #ff7b7b;

      font-size: 1.2rem;

      margin-top: 18px;

      font-weight: 600;

      letter-spacing: 0.1px;

    }

    .bottom-bar {

      position: fixed;

      left: 0;

      right: 0;

      bottom: 0;

      background: linear-gradient(90deg, #ff3c41 0%, #ff7b7b 100%);

      color: #fff;

      padding: 22px 10px 18px 10px;

      font-size: 1.13rem;

      text-align: center;

      font-weight: 600;

      box-shadow: 0 -2px 16px #0003;

      z-index: 99;

      letter-spacing: 0.15px;

      border-radius: 16px 16px 0 0;

      user-select: none;

    }

    @media (max-width: 700px) {

      .container {padding: 0 2vw 80px 2vw;}

      .special-row {flex-direction: column; gap: 12px;}

      .bolum-list {grid-template-columns: 1fr;}

      .not-found {grid-column: span 1;}

    }

    @media (max-width: 400px) {

      .header h1 {font-size: 1.3rem;}

      .header .status {font-size: 1rem;}

      .special-btn {font-size: 1.05rem;}

      .bolum-card {font-size: 1rem; padding: 15px 9px;}

    }

  </style>

</head>

<body>

  <div class="container">

    <div class="header">

      <h1>Bölümler</h1>

      <div class="status">Güncel</div>

    </div>

    <div class="search-bar-container">

      <input type="text" id="searchInput" class="search-bar" placeholder="Bölüm numarası ile ara... (örn: 42)">

    </div>

    <div class="special-row">

      <a class="special-btn" href="https://mechode.com" target="_blank" rel="noopener">

        <span>İlk Bölüm</span>

        <strong>Bölüm 1</strong>

      </a>

      <a class="special-btn" id="last-episode-btn">

        <span>Son Bölüm</span>

        <strong id="son-bolum-no"></strong>

      </a>

    </div>

    <div class="bolum-list" id="bolumListesi"></div>

  </div>

  <div class="bottom-bar">

    Bize destek olmak için arada bir <b>reklamlara tıklamayı</b> unutmayın, <span style="color:#ffe700;">kahraman dostlar!</span> 🚀

  </div>

  <script>

    const toplamBolum = 12;

    const bolumListesi = document.getElementById('bolumListesi');

    const sonBolumNo = document.getElementById('son-bolum-no');

    const lastBtn = document.getElementById('last-episode-btn');

    const searchInput = document.getElementById('searchInput');


    sonBolumNo.textContent = `Bölüm ${toplamBolum}`;

    lastBtn.href = `/bolum/${toplamBolum}`;


    // Bölümler dizisi, ilk iki bölüme özel linkler ekleniyor

    let bolumler = [

      { no: 12, href: "http://bc.vc/j82mQLa", external: true },

      { no: 11, href: "http://bc.vc/GLZDpsg", external: true },

      { no: 10, href: "http://bc.vc/hQaSwI6", external: true },

      { no: 9, href: "http://bc.vc/vSyLCSm", external: true },

      { no: 8, href: "http://bc.vc/P1UVL1t", external: true },

      { no: 7, href: "http://bc.vc/8w6BmwH", external: true },

      { no: 6, href: "http://bc.vc/WrGgLrE", external: true },

      { no: 5, href: "http://bc.vc/ahX5xhC", external: true },

      { no: 4, href: "http://bc.vc/zcwFYct", external: true },

      { no: 3, href: "http://bc.vc/rgYcNfp", external: true },

      { no: 2, href: "http://bc.vc/RWmSHk7", external: true },

      { no: 1, href: "http://bc.vc/0NgAd58", external: true }

    ];

    // 13-13 arası bölümler ekleniyor

    for(let i = toplamBolum - 1; i >= 13; i--) {

      bolumler.push({ no: i, href: `/bolum/${i}`, external: false });

    }


    // Filtrelemede sıralama küçükten büyüğe olsun diye

    bolumler.sort((a, b) => b.no - a.no);


    function bolumleriGoster(liste) {

      bolumListesi.innerHTML = '';

      if(liste.length === 0){

        const notFound = document.createElement('div');

        notFound.className = 'not-found';

        notFound.textContent = 'Böyle bir bölüm bulunamadı.';

        bolumListesi.appendChild(notFound);

        return;

      }

      liste.forEach(bolum => {

        const a = document.createElement('a');

        a.className = 'bolum-card';

        a.textContent = `Bölüm ${bolum.no}`;

        a.href = bolum.href;

        if(bolum.external) {

          a.target = "_blank";

          a.rel = "noopener";

        }

        bolumListesi.appendChild(a);

      });

    }

    bolumleriGoster(bolumler);


    // Arama işlevi

    searchInput.addEventListener('input', function() {

      let q = this.value.trim().toLowerCase();

      if(!q) {

        bolumleriGoster(bolumler);

        return;

      }

      q = q.replace("bölüm", "").replace("bolum", "").trim();

      if(q && !isNaN(q)){

        let numara = parseInt(q, 10);

        let filtre = bolumler.filter(bolum => bolum.no === numara);

        bolumleriGoster(filtre);

      } else {

        let filtre = bolumler.filter(bolum => (`${bolum.no}`).includes(q));

        bolumleriGoster(filtre);

      }

    });

  </script>

</body>

</html>


Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

aa 9 143

Bölüm 3: Dövüş Turnuvası Başım zonkluyordu. Eskiden sarhoş olamazdım ama 'Zehir Nötralizasyonu'nu baskılayarak bu sorunu çözmüştüm. Bana bunu Luminas öğretmişti ve o günden beri bu tekniği bir hazine gibi saklıyordum. Dün Raphael-san'ın haberi olmadan bu yöntemi kullanmış, zaten hafif sarhoşken birkaç kadeh daha ince şarap içmiştim. Sonuç olarak baş ağrım katlanarak artmıştı. Bu duruma bir çare bulamaz mısın? «…Ne yazık ki, 'Acı Nötralizasyonu' etkisi de baskılanmış durumda. Bir süre bu ağrıyı hissedeceksin.» Hadi canım, sen kasıtlı yapıyorsun… Geçen sefer de kızmıştın, şimdi daha da— «Cevap. Bahsedilen gerçek tespit edilemedi.» Yok yok, o bir gerçek! Çünkü içki içmenin 'Acı Nötralizasyonu'nu bozmasıyla hiçbir alakası yok—bu tamamen saçmalık! Ama karşı çıkışım Raphael-san’a etki etmedi. Apaçık görmezden gelinmiştim, baş ağrımla tek başıma savaşmak zorundaydım. "Bir dahakine dikkat edip kendimi frenlemeliyim," diye her seferinde kendime söy...
Devamı

aa 1 15 9

Prolog Parıldayan Kahraman O—Honjou Masayuki—bir Seçilmiş Kahraman'dır. Masayuki kendisini hiçbir zaman bir Kahraman olarak tanımlamamış olsa da, nedense karşılaştığı insanlar ona böyle hitap etmeye başlamıştı. Bu dünyada aniden belirmesinin üzerinden bir yıl bile geçmemişti, ama Masayuki adı artık Batı Ulusları'nda ün salmıştı. Herkesin tanıdığı bir ünlü olmuştu. Bu nasıl olmuştu? Yüreğinin derinliklerinde şaşkınlığa uğramıştı. İşler nasıl bu hale gelmişti? Bunu açıklayabilmek için bir yıl öncesine dönmemiz gerekiyor. ……… …… … Masayuki, birkaç arkadaşıyla birlikte okuldan eve dönerken, birdenbire inanılması güç bir manzarayla karşılaştı: Pırıl pırıl mavi saçlı, model ya da ünlülerden bile daha beyaz tenli, İskandinav görünümlü bir genç kız. Uzaktan bile saçının canlı renkleri gözüne çarpıyordu. Masayuki, geçtiği herkesin başını çevirttiği böylesine bir güzelliği hayatında hiç görmemişti. “Hey, şu ateş topuna bakın—” Masayuki, herhangi bir lise erkeğinin doğallığıy...
Devamı

aa 12 188

Ara Perde 3 Gece Yarısı Konferansı Benimaru, Shion ve Diablo ile birlikte toplantı odasına girdim. Myourmiles çoktan endişeyle bekliyordu. Shuna misafir karşılama görevindeydi. Geldiğimizi fark edince hepimiz için içecek hazırlamaya başladı. “Gazel-sama yolda olduğunu söyledi.” Shuna’nın bu sözünün hemen ardından kapı açıldı ve Gazel içeri girdi. “Sizi beklettim mi?” “Hayır, biz de daha yeni geldik.” Selamlaşmamızın ardından herkes yerine oturdu. “Önce sonuçla başlayalım. Bu sabah merkezle iletişime geçip kalan altın paraları toplamalarını istedim. Şimdiye kadar bin beş yüz sikke toplayabildik. Çok değil ama bedelini halka ödetemeyiz. Üstelik yarın sabaha kadar hazırlamamız gerekiyor, bu bizim sınırımız.” Dolaşımdaki altın sikkelerden bahsediyorsak, yeterince toplamak o kadar zor olmazdı. Ama Gazel, Cüce Krallığı'na olumsuz etkiler yaratmadan altın sikkeleri çekmek istiyorsa, bu kadarını ancak toplayabilirdi. Gazel’in sadece benim stellarlarımızla altın sikkeleri değiştirme...
Devamı