audiomangaop.com | Top Sites

Purchase boundary

read only

Control boundary

unknown

Payment rails

None

Payment providers

None

Payment methods

None

Payment protocols

None

Payment assets

None

Payment networks

None

Capabilities

None

Verified payment surface

Crypto only

Readable docs

llms, llms-full

Products

Variants

Priced variants

Currencies

Offers

Priced offers

Priced actions

Samples

Offer samples

No stored offer samples.

Samples

Action samples

No stored action samples.

Samples

Product samples

No stored product samples.

Document

robots.txt

Not stored for this site.

Document

llms.txt

Open llms.txt

<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="AudioManga de One Piece">
  <meta name="twitter:description" content="Lee los capítulos de OnePiece con música, fanarts y más. ¡Una experiencia inmersiva de One Piece hecha por fans!">
  <meta name="twitter:image" content="https://audiomangaop.com/icon/meta_index.webp">
  <meta name="twitter:url" content="https://audiomangaop.com/">

  <meta property="og:title" content="AudioManga de One Piece" />
  <meta property="og:description" content="Lee los capítulos de OnePiece con música, fanarts y más. ¡Una experiencia inmersiva de One Piece hecha por fans!" />
  <meta property="og:image" content="https://audiomangaop.com/icon/meta_index.webp" />
  <meta property="og:url" content="https://audiomangaop.com/" />
  <meta property="og:type" content="website" />

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AudioManga</title>
<link rel="stylesheet" href="/styles.css"/>
<link rel="icon" type="image/webp" href="/icon/logo_window.webp">

<script>
  (function prepareIndexFirstPaint() {
    document.documentElement.classList.add('i18n-pending');
    const totalBackgrounds = 77;
    const randomIndex = Math.floor(Math.random() * totalBackgrounds) + 1;
    const formattedIndex = String(randomIndex).padStart(2, '0');
    window.__indexRandomBg = `/backgrounds/background-${formattedIndex}.png`;
    document.documentElement.style.setProperty('--index-random-bg', `url("${window.__indexRandomBg}")`);
  })();
</script>

<style>
  #index-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--index-random-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: -1; /* más bajo que el ::before que tiene -1 */
  pointer-events: none;
  transition: background-image 0.5s ease;
  }
</style>

<style>
  body.index::before {
    display: none !important;
  }

  .i18n-pending .i18n-trans {
    visibility: hidden;
  }

  .language-selector select {
    background: rgba(0,0,0,0.5);
    color: white;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
  }

  .language-selector select:focus {
    outline: none;
    border-color: #b48aff;
  }
 body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  transition: background 0.6s ease;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 60px;
  gap: 20px;
  flex-wrap: wrap;
}

/* ===== CARDS IZQUIERDA ===== */
.cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-width: 260px;
  max-width: 600px;
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  width: 500px;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 2px solid var(--blanco);
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  filter: brightness(0.85);
  transition: filter 0.3s;
}

.card span {
  position: absolute;
  bottom: 10px;
  left: 14px;
  font-size: 48px;
  font-family: Impact, sans-serif;
  text-shadow: 0 2px 5px rgba(0,0,0,0.6);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.card:hover img {
  filter: brightness(1);
}

.card.active {
  outline: 3px solid #b48aff;
  transform: scale(1.03);
}

/* ===== CONTENIDO DERECHA ===== */
.content {
  flex: 1.2;
  max-width: 600px;
}

.content.jojos-selected {
  max-width: 750px;
}

.content h1 {
  font-size: 60px;
  line-height: 1.2;
  font-family: Impact, sans-serif;
  letter-spacing: 0.05em;
}

.content p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: #ccc;
}

.content .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
}

.content .buttons a {
  transition: background 0.3s;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1495px){
    .card {
    width: 400px;
  }
  }

@media (max-width: 1403px){
    .card {
    width: 400px;
  }
  }

  @media (max-width: 1346px){
    .card {
    width: 400px;
  }
  }

  @media (max-width: 1304px){
    .card {
    width: 350px;
  }

  }
   @media (max-width: 1290px){
    .card {
    width: 350px;
  }

  }
   @media (max-width: 1235px){
    .card {
    width: 250px;
  }
  }

  @media (max-width: 1100px){
    .card {
    width: 200px;

  }
    .cards{
      min-width: 0;
    }
  }

/* Tablets y pantallas medianas */
@media (max-width: 1024px) {
  .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
  }

  .cards {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .card {
    width: 150px;
  }

  .card span{
    font-size: 30px;
  }

  .content {
    max-width: 90%;
  }

  .content h1 {
    font-size: 30px;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  .card {
    width: 150px;
  }

  .card span {
    font-size: 30px;
  }

  .content h1 {
    font-size: 36px;
  }

  .content p {
    font-size: 16px;
  }

  .content .buttons a {
    padding: 8px 18px;
    font-size: 0.9rem;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .cards {
    align-items: center;
    padding: 0px;
  }

  .card {
    height: 100px;
    max-width: 320px;
  }

  .card span {
    font-size: 26px;
  }

  .content h1 {
    font-size: 28px;
  }

  .content p {
    font-size: 15px;
  }

  .content .buttons {
    flex-direction: column;
    align-items: center;
  }

  .content .buttons a {
    width: 80%;
    text-align: center;
  }
}

</style>
</head>
<body class="index">
  <div id="index-bg"></div>
  <header class="header">
    <div class="logo-nav">
      <div class="logo">
        <a href="/index.html" title="Ir al inicio" class="btn-inicio">
          <img src="/icon/logo.webp" alt="AudioManga Logo" class="icon icon-default"/>
        </a>
      </div>
       <div class="menu-wrapper">
        <button class="hamburger" aria-label="Menú">&#9776;</button>
        <nav class="nav-links i18n-trans" id="navDropdown">
          <a href="/proyecto.html" class="no-close icon-link">
             <img src="/icon/book.svg" alt="">
            PROYECTO
          </a>
          <a href="" target="_blank" rel="noopener noreferrer" class="no-close icon-link">
            <img src="/icon/discord.svg" alt="Discord">DISCORD
          </a>
          <a href="https://x.com/audiomangaop" class="no-close icon-link" target="_blank" rel="noopener noreferrer">
            <img src="/icon/twitter.svg" alt="Twitter">TWITTER
          </a>
          <a href="https://www.patreon.com/audiomangaop" class="no-close icon-link" target="_blank" rel="noopener noreferrer">
            <img src="/icon/patreon.svg" alt="Patreon">PATREON
          </a>
        </nav>
        </div>
    </div>
    <div class="search-box" style="margin-left: 20px;">
            <input id="chapterSearchInput" type="text" placeholder="One Piece 1150" class="search-box"/>
            <button id="chapterSearchBtn"><img src="/icon/search_icon.png" alt="" title="Haz clic para buscar" /></button>
    </div>
    <div class="language-selector" style="margin-left: 20px;" id="languageSelectorContainer">
    </div>
  </header>
<main class="main i18n-trans">

  <div class="container">
 <!-- IZQUIERDA -->
  <div class="cards">
    <div class="card onepiece" data-series="onepiece" tabindex="0"
      data-bg="linear-gradient(135deg, #20023d, #6f1aff)"
      data-bg-img="/icon/background.png"
      data-title="ONE PIECE"
      data-desc="Vive las aventuras de Luffy y su tripulación en busca del One Piece. Una experiencia inmersiva llena de música, emociones y batallas legendarias."

      data-link2="/onepiece"
      data-link3="/chapters/chapter1">
      <span>ONE PIECE</span>
    </div>

    <div class="card berserk" data-series="berserk" tabindex="0"
      data-bg="linear-gradient(135deg, #1b0f0f, #6b0000)"
      data-bg-img="/icon/background-berserk.png"
      data-title="BERSERK"
      data-desc="Adéntrate en el oscuro mundo de Guts, el Espadachín Negro. Una historia brutal y trágica acompañada de un ambiente sonoro inolvidable."

      data-link2="/berserk"
      data-link3="/berserk/chapters/chapter1">
      <span>BERSERK</span>
    </div>

    <div class="card jojos" data-series="jojos" tabindex="0"
      data-bg="linear-gradient(135deg, #2d1b4e, #9d4edd)"
      data-bg-img="/icon/background-jojos.png"
      data-title="JOJO'S BIZARRE ADVENTURE"
      data-desc="Sumérgete en la épica saga de la familia Joestar a través de generaciones. Una aventura extravagante llena de estilo, energía desbordante y combates tan únicos como inolvidables."

      data-link2="/jojos"
      data-link3="/jojos/chapters/phantom_blood/chapter1">
      <span>JOJO'S</span>
    </div>

    <!--<div class="card" tabindex="0"
      data-bg="linear-gradient(135deg, #001b25, #0080b5)"
      data-title="PRÓXIMAMENTE"
      data-desc="PRÓXIMAMENTE"
      data-link1="https://www.audiomangaop.com/proximamente/ultimo"
      data-link2="https://www.audiomangaop.com/proximamente/arcos"
      data-link3="https://www.audiomangaop.com/proximamente/inicio">
      <span>PRÓXIMAMENTE</span>
    </div>-->
  </div>

  <!-- DERECHA -->
  <div class="content i18n-trans" id="info">
    <h1>LA EXPERIENCIA DEL MANGA A OTRO NIVEL</h1>
    <p>Explora los mejores mangas con banda sonora, efectos de sonido y fanarts. Sumérgete en una lectura totalmente diferente creada por fans para fans.</p>
    <div class="buttons">
      <a href="/proyecto.html" class="btn-primary">CONOCE MÁS</a>
      <a href="https://www.patreon.com/audiomangaop" target="_blank" class="btn-tertiary">ENTÉRATE DE TODO</a>
    </div>
  </div>
</div>

<!-- Script para actualizar el contenido de los cards-->
<script>
  const cards = document.querySelectorAll('.card');
  const content = document.getElementById('info');
  const bgDiv = document.getElementById('index-bg');

  const backgroundImages = [
    '/backgrounds/background-01.png',
    '/backgrounds/background-02.png',
    '/backgrounds/background-03.png',
    '/backgrounds/background-04.png',
    '/backgrounds/background-05.png',
    '/backgrounds/background-06.png',
    '/backgrounds/background-07.png',
    '/backgrounds/background-08.png',
    '/backgrounds/background-09.png',
    '/backgrounds/background-10.png',
    '/backgrounds/background-11.png',
    '/backgrounds/background-12.png',
    '/backgrounds/background-13.png',
    '/backgrounds/background-14.png',
    '/backgrounds/background-15.png',
    '/backgrounds/background-16.png',
    '/backgrounds/background-17.png',
    '/backgrounds/background-18.png',
    '/backgrounds/background-19.png',
    '/backgrounds/background-20.png',
    '/backgrounds/background-21.png',
    '/backgrounds/background-22.png',
    '/backgrounds/background-23.png',
    '/backgrounds/background-24.png',
    '/backgrounds/background-25.png',
    '/backgrounds/background-26.png',
    '/backgrounds/background-27.png',
    '/backgrounds/background-28.png',
    '/backgrounds/background-29.png',
    '/backgrounds/background-30.png',
    '/backgrounds/background-31.png',
    '/backgrounds/background-32.png',
    '/backgrounds/background-33.png',
    '/backgrounds/background-34.png',
    '/backgrounds/background-35.png',
    '/backgrounds/background-36.png',
    '/backgrounds/background-37.png',
    '/backgrounds/background-38.png',
    '/backgrounds/background-39.png',
    '/backgrounds/background-40.png',
    '/backgrounds/background-41.png',
    '/backgrounds/background-42.png',
    '/backgrounds/background-43.png',
    '/backgrounds/background-44.png',
    '/backgrounds/background-45.png',
    '/backgrounds/background-46.png',
    '/backgrounds/background-47.png',
    '/backgrounds/background-48.png',
    '/backgrounds/background-49.png',
    '/backgrounds/background-50.png',
    '/backgrounds/background-51.png',
    '/backgrounds/background-52.png',
    '/backgrounds/background-53.png',
    '/backgrounds/background-54.png',
    '/backgrounds/background-55.png',
    '/backgrounds/background-56.png',
    '/backgrounds/background-57.png',
    '/backgrounds/background-58.png',
    '/backgrounds/background-59.png',
    '/backgrounds/background-60.png',
    '/backgrounds/background-61.png',
    '/backgrounds/background-62.png',
    '/backgrounds/background-63.png',
    '/backgrounds/background-64.png',
    '/backgrounds/background-65.png',
    '/backgrounds/background-66.png',
    '/backgrounds/background-67.png',
    '/backgrounds/background-68.png',
    '/backgrounds/background-69.png',
    '/backgrounds/background-70.png',
    '/backgrounds/background-71.png',
    '/backgrounds/background-72.png',
    '/backgrounds/background-73.png',
    '/backgrounds/background-74.png',
    '/backgrounds/background-75.png',
    '/backgrounds/background-76.png',
    '/backgrounds/background-77.png'
  ];

  // Función para obtener un fondo random
  function getRandomBackground() {
    return backgroundImages[Math.floor(Math.random() * backgroundImages.length)];
  }

  // Aplicar fondo random al cargar la página
  bgDiv.style.backgroundImage = `url(${window.__indexRandomBg || getRandomBackground()})`;

  let lastChapters = {};
  fetch('/last.json')
    .then(res => res.json())
    .then(data => {
      lastChapters = data;
    })
    .catch(err => console.error('Error cargando last.json:', err));


  function updateCardContent(card) {
    // Quitar selección anterior
    cards.forEach(c => c.classList.remove('active'));

    // Activar la seleccionada
    card.classList.add('active');

    // Cambiar fondo de página - usar random si no hay fondo específico
    const bgImage = card.getAttribute('data-bg-img');
    if (bgImage && bgImage !== '/icon/background.png') {
      // Si es Berserk u otro con fondo específico
      bgDiv.style.backgroundImage = `url(${bgImage})`;
    } else {
      // Si es One Piece o sin fondo específico, usar random
      bgDiv.style.backgroundImage = `url(${getRandomBackground()})`;
    }

    // Cambiar contenido de la derecha
    const title = card.getAttribute('data-title');
    const series = card.getAttribute('data-series');
    let desc;

    content.classList.toggle('jojos-selected', series === 'jojos');
    
    // Obtener descripción traducida según la serie
    if (series === 'onepiece') {
      desc = t('indexOnepieceDesc');
    } else if (series === 'berserk') {
      desc = t('indexBerserkDesc');
    } else if (series === 'jojos') {
      desc = t('indexJojosDesc');
    } else {
      desc = card.getAttribute('data-desc');
    }

    const fallbackSeriesData = {
      onepiece: { last: 1, base: '/chapters/chapter' },
      berserk: { last: 1, base: '/berserk/chapters/chapter' },
      jojos: { last: 1, base: '/jojos/chapters/phantom_blood/chapter' }
    };
    const serieData = lastChapters[series] || fallbackSeriesData[series] || fallbackSeriesData.onepiece;
    const link1 = `${serieData.base}${serieData.last}`;
    //const link1 = card.getAttribute('data-link1');
    const link2 = card.getAttribute('data-link2');
    const link3 = card.getAttribute('data-link3');

    content.innerHTML = `
      <h1>${title}</h1>
      <p>${desc}</p>
      <div class="buttons">
        <a href="${link1}" class="btn-primary">${t('ultimoCapitulo')}
          <img src="/icon/play_circle.png" alt="" class="icon icon-default" />
        </a>
        <a href="${link2}" class="btn-secondary">${t('verArcos')}</a>
        <a href="${link3}" class="btn-tertiary">${t('comenzarLeer')}</a>
      </div>
    `;

    // 👇 Desplazamiento suave en móviles
    if (window.innerWidth <= 768) {
      const yOffset = -60; // margen opcional si hay header fijo
      const y = content.getBoundingClientRect().top + window.pageYOffset + yOffset;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  }

  // Soporte para clic
  cards.forEach(card => {
    card.addEventListener('click', () => updateCardContent(card));

    // Soporte para teclado
    card.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') { // enter o espacio
        e.preventDefault();
        updateCardContent(card);
      }
    });
  });
</script>


</main>

  <!-- Script de internacionalización -->
  <script src="/i18n.js"></script>

  <!-- Script de inicialización de idioma -->
  <script>
    const container = document.getElementById('languageSelectorContainer');
    const selector = createLanguageSelector();
    container.appendChild(selector);

    function updatePageLanguage() {
      document.documentElement.lang = currentLang;
      const homeBtn = document.querySelector('.btn-inicio');
      if (homeBtn) homeBtn.title = t('irAInicio');
      document.querySelector('h1').textContent = t('title');
      document.querySelector('.content p').textContent = t('description');
      document.querySelectorAll('.buttons a').forEach(btn => {
        if (btn.href.includes('proyecto')) btn.textContent = t('conoceMas');
        if (btn.href.includes('patreon')) btn.textContent = t('enteraTe');
      });
      document.querySelectorAll('#navDropdown a').forEach(a => {
        if (a.textContent.includes('PROYECTO')) a.innerHTML = `<img src="/icon/book.svg" alt=""> ${t('proyecto')}`;
      });
      // Traducir footer
      const footerDiv = document.getElementById('footerdiv');
      if (footerDiv) {
        footerDiv.textContent = t('derechos');
      }
      document.documentElement.classList.remove('i18n-pending');
    }

    // Ejecutar cuando el DOM esté completamente cargado
    document.addEventListener('DOMContentLoaded', updatePageLanguage);
    // También ejecutar inmediatamente por si ya está cargado
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', updatePageLanguage);
    } else {
      updatePageLanguage();
    }
  </script>

  <!-- Script para el menú hamburguesa en moviles -->
  <script src="/header.js"></script>

   <!-- Script para el buscador -->
  <script src="/search.js"></script>

  <!-- Script que gestiona las cookies -->
  <script src="/cookies.js"></script>

  <footer style="text-align:center;padding:18px 10px;font-size:14px;color:#aaa;">
    <div id="footerdiv" class="i18n-trans">Audiomanga © 2025. Todos los derechos reservados.</div>
  </footer>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"02600cfac25d42b6a5edf525bb720e6c","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>

</html>

Document

llms-full.txt

Open llms-full.txt

<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="AudioManga de One Piece">
  <meta name="twitter:description" content="Lee los capítulos de OnePiece con música, fanarts y más. ¡Una experiencia inmersiva de One Piece hecha por fans!">
  <meta name="twitter:image" content="https://audiomangaop.com/icon/meta_index.webp">
  <meta name="twitter:url" content="https://audiomangaop.com/">

  <meta property="og:title" content="AudioManga de One Piece" />
  <meta property="og:description" content="Lee los capítulos de OnePiece con música, fanarts y más. ¡Una experiencia inmersiva de One Piece hecha por fans!" />
  <meta property="og:image" content="https://audiomangaop.com/icon/meta_index.webp" />
  <meta property="og:url" content="https://audiomangaop.com/" />
  <meta property="og:type" content="website" />

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AudioManga</title>
<link rel="stylesheet" href="/styles.css"/>
<link rel="icon" type="image/webp" href="/icon/logo_window.webp">

<script>
  (function prepareIndexFirstPaint() {
    document.documentElement.classList.add('i18n-pending');
    const totalBackgrounds = 77;
    const randomIndex = Math.floor(Math.random() * totalBackgrounds) + 1;
    const formattedIndex = String(randomIndex).padStart(2, '0');
    window.__indexRandomBg = `/backgrounds/background-${formattedIndex}.png`;
    document.documentElement.style.setProperty('--index-random-bg', `url("${window.__indexRandomBg}")`);
  })();
</script>

<style>
  #index-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--index-random-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: -1; /* más bajo que el ::before que tiene -1 */
  pointer-events: none;
  transition: background-image 0.5s ease;
  }
</style>

<style>
  body.index::before {
    display: none !important;
  }

  .i18n-pending .i18n-trans {
    visibility: hidden;
  }

  .language-selector select {
    background: rgba(0,0,0,0.5);
    color: white;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
  }

  .language-selector select:focus {
    outline: none;
    border-color: #b48aff;
  }
 body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  transition: background 0.6s ease;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 60px;
  gap: 20px;
  flex-wrap: wrap;
}

/* ===== CARDS IZQUIERDA ===== */
.cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-width: 260px;
  max-width: 600px;
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  width: 500px;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 2px solid var(--blanco);
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  filter: brightness(0.85);
  transition: filter 0.3s;
}

.card span {
  position: absolute;
  bottom: 10px;
  left: 14px;
  font-size: 48px;
  font-family: Impact, sans-serif;
  text-shadow: 0 2px 5px rgba(0,0,0,0.6);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.card:hover img {
  filter: brightness(1);
}

.card.active {
  outline: 3px solid #b48aff;
  transform: scale(1.03);
}

/* ===== CONTENIDO DERECHA ===== */
.content {
  flex: 1.2;
  max-width: 600px;
}

.content.jojos-selected {
  max-width: 750px;
}

.content h1 {
  font-size: 60px;
  line-height: 1.2;
  font-family: Impact, sans-serif;
  letter-spacing: 0.05em;
}

.content p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.6;
  color: #ccc;
}

.content .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
}

.content .buttons a {
  transition: background 0.3s;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1495px){
    .card {
    width: 400px;
  }
  }

@media (max-width: 1403px){
    .card {
    width: 400px;
  }
  }

  @media (max-width: 1346px){
    .card {
    width: 400px;
  }
  }

  @media (max-width: 1304px){
    .card {
    width: 350px;
  }

  }
   @media (max-width: 1290px){
    .card {
    width: 350px;
  }

  }
   @media (max-width: 1235px){
    .card {
    width: 250px;
  }
  }

  @media (max-width: 1100px){
    .card {
    width: 200px;

  }
    .cards{
      min-width: 0;
    }
  }

/* Tablets y pantallas medianas */
@media (max-width: 1024px) {
  .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
  }

  .cards {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .card {
    width: 150px;
  }

  .card span{
    font-size: 30px;
  }

  .content {
    max-width: 90%;
  }

  .content h1 {
    font-size: 30px;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  .card {
    width: 150px;
  }

  .card span {
    font-size: 30px;
  }

  .content h1 {
    font-size: 36px;
  }

  .content p {
    font-size: 16px;
  }

  .content .buttons a {
    padding: 8px 18px;
    font-size: 0.9rem;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .cards {
    align-items: center;
    padding: 0px;
  }

  .card {
    height: 100px;
    max-width: 320px;
  }

  .card span {
    font-size: 26px;
  }

  .content h1 {
    font-size: 28px;
  }

  .content p {
    font-size: 15px;
  }

  .content .buttons {
    flex-direction: column;
    align-items: center;
  }

  .content .buttons a {
    width: 80%;
    text-align: center;
  }
}

</style>
</head>
<body class="index">
  <div id="index-bg"></div>
  <header class="header">
    <div class="logo-nav">
      <div class="logo">
        <a href="/index.html" title="Ir al inicio" class="btn-inicio">
          <img src="/icon/logo.webp" alt="AudioManga Logo" class="icon icon-default"/>
        </a>
      </div>
       <div class="menu-wrapper">
        <button class="hamburger" aria-label="Menú">&#9776;</button>
        <nav class="nav-links i18n-trans" id="navDropdown">
          <a href="/proyecto.html" class="no-close icon-link">
             <img src="/icon/book.svg" alt="">
            PROYECTO
          </a>
          <a href="" target="_blank" rel="noopener noreferrer" class="no-close icon-link">
            <img src="/icon/discord.svg" alt="Discord">DISCORD
          </a>
          <a href="https://x.com/audiomangaop" class="no-close icon-link" target="_blank" rel="noopener noreferrer">
            <img src="/icon/twitter.svg" alt="Twitter">TWITTER
          </a>
          <a href="https://www.patreon.com/audiomangaop" class="no-close icon-link" target="_blank" rel="noopener noreferrer">
            <img src="/icon/patreon.svg" alt="Patreon">PATREON
          </a>
        </nav>
        </div>
    </div>
    <div class="search-box" style="margin-left: 20px;">
            <input id="chapterSearchInput" type="text" placeholder="One Piece 1150" class="search-box"/>
            <button id="chapterSearchBtn"><img src="/icon/search_icon.png" alt="" title="Haz clic para buscar" /></button>
    </div>
    <div class="language-selector" style="margin-left: 20px;" id="languageSelectorContainer">
    </div>
  </header>
<main class="main i18n-trans">

  <div class="container">
 <!-- IZQUIERDA -->
  <div class="cards">
    <div class="card onepiece" data-series="onepiece" tabindex="0"
      data-bg="linear-gradient(135deg, #20023d, #6f1aff)"
      data-bg-img="/icon/background.png"
      data-title="ONE PIECE"
      data-desc="Vive las aventuras de Luffy y su tripulación en busca del One Piece. Una experiencia inmersiva llena de música, emociones y batallas legendarias."

      data-link2="/onepiece"
      data-link3="/chapters/chapter1">
      <span>ONE PIECE</span>
    </div>

    <div class="card berserk" data-series="berserk" tabindex="0"
      data-bg="linear-gradient(135deg, #1b0f0f, #6b0000)"
      data-bg-img="/icon/background-berserk.png"
      data-title="BERSERK"
      data-desc="Adéntrate en el oscuro mundo de Guts, el Espadachín Negro. Una historia brutal y trágica acompañada de un ambiente sonoro inolvidable."

      data-link2="/berserk"
      data-link3="/berserk/chapters/chapter1">
      <span>BERSERK</span>
    </div>

    <div class="card jojos" data-series="jojos" tabindex="0"
      data-bg="linear-gradient(135deg, #2d1b4e, #9d4edd)"
      data-bg-img="/icon/background-jojos.png"
      data-title="JOJO'S BIZARRE ADVENTURE"
      data-desc="Sumérgete en la épica saga de la familia Joestar a través de generaciones. Una aventura extravagante llena de estilo, energía desbordante y combates tan únicos como inolvidables."

      data-link2="/jojos"
      data-link3="/jojos/chapters/phantom_blood/chapter1">
      <span>JOJO'S</span>
    </div>

    <!--<div class="card" tabindex="0"
      data-bg="linear-gradient(135deg, #001b25, #0080b5)"
      data-title="PRÓXIMAMENTE"
      data-desc="PRÓXIMAMENTE"
      data-link1="https://www.audiomangaop.com/proximamente/ultimo"
      data-link2="https://www.audiomangaop.com/proximamente/arcos"
      data-link3="https://www.audiomangaop.com/proximamente/inicio">
      <span>PRÓXIMAMENTE</span>
    </div>-->
  </div>

  <!-- DERECHA -->
  <div class="content i18n-trans" id="info">
    <h1>LA EXPERIENCIA DEL MANGA A OTRO NIVEL</h1>
    <p>Explora los mejores mangas con banda sonora, efectos de sonido y fanarts. Sumérgete en una lectura totalmente diferente creada por fans para fans.</p>
    <div class="buttons">
      <a href="/proyecto.html" class="btn-primary">CONOCE MÁS</a>
      <a href="https://www.patreon.com/audiomangaop" target="_blank" class="btn-tertiary">ENTÉRATE DE TODO</a>
    </div>
  </div>
</div>

<!-- Script para actualizar el contenido de los cards-->
<script>
  const cards = document.querySelectorAll('.card');
  const content = document.getElementById('info');
  const bgDiv = document.getElementById('index-bg');

  const backgroundImages = [
    '/backgrounds/background-01.png',
    '/backgrounds/background-02.png',
    '/backgrounds/background-03.png',
    '/backgrounds/background-04.png',
    '/backgrounds/background-05.png',
    '/backgrounds/background-06.png',
    '/backgrounds/background-07.png',
    '/backgrounds/background-08.png',
    '/backgrounds/background-09.png',
    '/backgrounds/background-10.png',
    '/backgrounds/background-11.png',
    '/backgrounds/background-12.png',
    '/backgrounds/background-13.png',
    '/backgrounds/background-14.png',
    '/backgrounds/background-15.png',
    '/backgrounds/background-16.png',
    '/backgrounds/background-17.png',
    '/backgrounds/background-18.png',
    '/backgrounds/background-19.png',
    '/backgrounds/background-20.png',
    '/backgrounds/background-21.png',
    '/backgrounds/background-22.png',
    '/backgrounds/background-23.png',
    '/backgrounds/background-24.png',
    '/backgrounds/background-25.png',
    '/backgrounds/background-26.png',
    '/backgrounds/background-27.png',
    '/backgrounds/background-28.png',
    '/backgrounds/background-29.png',
    '/backgrounds/background-30.png',
    '/backgrounds/background-31.png',
    '/backgrounds/background-32.png',
    '/backgrounds/background-33.png',
    '/backgrounds/background-34.png',
    '/backgrounds/background-35.png',
    '/backgrounds/background-36.png',
    '/backgrounds/background-37.png',
    '/backgrounds/background-38.png',
    '/backgrounds/background-39.png',
    '/backgrounds/background-40.png',
    '/backgrounds/background-41.png',
    '/backgrounds/background-42.png',
    '/backgrounds/background-43.png',
    '/backgrounds/background-44.png',
    '/backgrounds/background-45.png',
    '/backgrounds/background-46.png',
    '/backgrounds/background-47.png',
    '/backgrounds/background-48.png',
    '/backgrounds/background-49.png',
    '/backgrounds/background-50.png',
    '/backgrounds/background-51.png',
    '/backgrounds/background-52.png',
    '/backgrounds/background-53.png',
    '/backgrounds/background-54.png',
    '/backgrounds/background-55.png',
    '/backgrounds/background-56.png',
    '/backgrounds/background-57.png',
    '/backgrounds/background-58.png',
    '/backgrounds/background-59.png',
    '/backgrounds/background-60.png',
    '/backgrounds/background-61.png',
    '/backgrounds/background-62.png',
    '/backgrounds/background-63.png',
    '/backgrounds/background-64.png',
    '/backgrounds/background-65.png',
    '/backgrounds/background-66.png',
    '/backgrounds/background-67.png',
    '/backgrounds/background-68.png',
    '/backgrounds/background-69.png',
    '/backgrounds/background-70.png',
    '/backgrounds/background-71.png',
    '/backgrounds/background-72.png',
    '/backgrounds/background-73.png',
    '/backgrounds/background-74.png',
    '/backgrounds/background-75.png',
    '/backgrounds/background-76.png',
    '/backgrounds/background-77.png'
  ];

  // Función para obtener un fondo random
  function getRandomBackground() {
    return backgroundImages[Math.floor(Math.random() * backgroundImages.length)];
  }

  // Aplicar fondo random al cargar la página
  bgDiv.style.backgroundImage = `url(${window.__indexRandomBg || getRandomBackground()})`;

  let lastChapters = {};
  fetch('/last.json')
    .then(res => res.json())
    .then(data => {
      lastChapters = data;
    })
    .catch(err => console.error('Error cargando last.json:', err));


  function updateCardContent(card) {
    // Quitar selección anterior
    cards.forEach(c => c.classList.remove('active'));

    // Activar la seleccionada
    card.classList.add('active');

    // Cambiar fondo de página - usar random si no hay fondo específico
    const bgImage = card.getAttribute('data-bg-img');
    if (bgImage && bgImage !== '/icon/background.png') {
      // Si es Berserk u otro con fondo específico
      bgDiv.style.backgroundImage = `url(${bgImage})`;
    } else {
      // Si es One Piece o sin fondo específico, usar random
      bgDiv.style.backgroundImage = `url(${getRandomBackground()})`;
    }

    // Cambiar contenido de la derecha
    const title = card.getAttribute('data-title');
    const series = card.getAttribute('data-series');
    let desc;

    content.classList.toggle('jojos-selected', series === 'jojos');
    
    // Obtener descripción traducida según la serie
    if (series === 'onepiece') {
      desc = t('indexOnepieceDesc');
    } else if (series === 'berserk') {
      desc = t('indexBerserkDesc');
    } else if (series === 'jojos') {
      desc = t('indexJojosDesc');
    } else {
      desc = card.getAttribute('data-desc');
    }

    const fallbackSeriesData = {
      onepiece: { last: 1, base: '/chapters/chapter' },
      berserk: { last: 1, base: '/berserk/chapters/chapter' },
      jojos: { last: 1, base: '/jojos/chapters/phantom_blood/chapter' }
    };
    const serieData = lastChapters[series] || fallbackSeriesData[series] || fallbackSeriesData.onepiece;
    const link1 = `${serieData.base}${serieData.last}`;
    //const link1 = card.getAttribute('data-link1');
    const link2 = card.getAttribute('data-link2');
    const link3 = card.getAttribute('data-link3');

    content.innerHTML = `
      <h1>${title}</h1>
      <p>${desc}</p>
      <div class="buttons">
        <a href="${link1}" class="btn-primary">${t('ultimoCapitulo')}
          <img src="/icon/play_circle.png" alt="" class="icon icon-default" />
        </a>
        <a href="${link2}" class="btn-secondary">${t('verArcos')}</a>
        <a href="${link3}" class="btn-tertiary">${t('comenzarLeer')}</a>
      </div>
    `;

    // 👇 Desplazamiento suave en móviles
    if (window.innerWidth <= 768) {
      const yOffset = -60; // margen opcional si hay header fijo
      const y = content.getBoundingClientRect().top + window.pageYOffset + yOffset;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  }

  // Soporte para clic
  cards.forEach(card => {
    card.addEventListener('click', () => updateCardContent(card));

    // Soporte para teclado
    card.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') { // enter o espacio
        e.preventDefault();
        updateCardContent(card);
      }
    });
  });
</script>


</main>

  <!-- Script de internacionalización -->
  <script src="/i18n.js"></script>

  <!-- Script de inicialización de idioma -->
  <script>
    const container = document.getElementById('languageSelectorContainer');
    const selector = createLanguageSelector();
    container.appendChild(selector);

    function updatePageLanguage() {
      document.documentElement.lang = currentLang;
      const homeBtn = document.querySelector('.btn-inicio');
      if (homeBtn) homeBtn.title = t('irAInicio');
      document.querySelector('h1').textContent = t('title');
      document.querySelector('.content p').textContent = t('description');
      document.querySelectorAll('.buttons a').forEach(btn => {
        if (btn.href.includes('proyecto')) btn.textContent = t('conoceMas');
        if (btn.href.includes('patreon')) btn.textContent = t('enteraTe');
      });
      document.querySelectorAll('#navDropdown a').forEach(a => {
        if (a.textContent.includes('PROYECTO')) a.innerHTML = `<img src="/icon/book.svg" alt=""> ${t('proyecto')}`;
      });
      // Traducir footer
      const footerDiv = document.getElementById('footerdiv');
      if (footerDiv) {
        footerDiv.textContent = t('derechos');
      }
      document.documentElement.classList.remove('i18n-pending');
    }

    // Ejecutar cuando el DOM esté completamente cargado
    document.addEventListener('DOMContentLoaded', updatePageLanguage);
    // También ejecutar inmediatamente por si ya está cargado
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', updatePageLanguage);
    } else {
      updatePageLanguage();
    }
  </script>

  <!-- Script para el menú hamburguesa en moviles -->
  <script src="/header.js"></script>

   <!-- Script para el buscador -->
  <script src="/search.js"></script>

  <!-- Script que gestiona las cookies -->
  <script src="/cookies.js"></script>

  <footer style="text-align:center;padding:18px 10px;font-size:14px;color:#aaa;">
    <div id="footerdiv" class="i18n-trans">Audiomanga © 2025. Todos los derechos reservados.</div>
  </footer>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"02600cfac25d42b6a5edf525bb720e6c","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>

</html>

Stored receipt and evidence

Inspect the site's MCP endpoint

Offer samples

Action samples

Product samples

robots.txt

llms.txt

llms-full.txt

Top Sites>AudioManga

Stored receipt and evidence

Inspect the site's MCP endpoint

Offer samples

Action samples

Product samples

robots.txt

llms.txt

llms-full.txt

Top SitesAudioManga