commit e35e27e8c11a162e84323a3bef30cd3b6ff40c5c Author: rodley82 Date: Fri Oct 24 18:04:50 2025 -0300 Primera version diff --git a/assets/001.jpg b/assets/001.jpg new file mode 100644 index 0000000..aa25e14 Binary files /dev/null and b/assets/001.jpg differ diff --git a/assets/002.jpg b/assets/002.jpg new file mode 100644 index 0000000..a64a998 Binary files /dev/null and b/assets/002.jpg differ diff --git a/assets/003.jpg b/assets/003.jpg new file mode 100644 index 0000000..02f86a4 Binary files /dev/null and b/assets/003.jpg differ diff --git a/assets/004.jpg b/assets/004.jpg new file mode 100644 index 0000000..7e17c39 Binary files /dev/null and b/assets/004.jpg differ diff --git a/assets/005.jpg b/assets/005.jpg new file mode 100644 index 0000000..bc7327a Binary files /dev/null and b/assets/005.jpg differ diff --git a/assets/006.jpg b/assets/006.jpg new file mode 100644 index 0000000..cef69f1 Binary files /dev/null and b/assets/006.jpg differ diff --git a/assets/007.jpg b/assets/007.jpg new file mode 100644 index 0000000..c8ad584 Binary files /dev/null and b/assets/007.jpg differ diff --git a/assets/data.json b/assets/data.json new file mode 100644 index 0000000..e37c9c8 --- /dev/null +++ b/assets/data.json @@ -0,0 +1,17 @@ +{ + "pageTitle": "Mi Manga", + "mangaTitle": "Mi Manga", + "mangaIntroduction": "Este es mi primer Manga sobre mi vida.", + "authorName": "McPato", + "authorIntroduction": "Soy de Argentina. Si te gusto mi trabajo seguime en Instagram.", + "mangaPages": [ + "assets/instrucciones.jpg", + "assets/001.jpg", + "assets/002.jpg", + "assets/003.jpg", + "assets/004.jpg", + "assets/005.jpg", + "assets/006.jpg", + "assets/007.jpg" + ] +} diff --git a/assets/instrucciones.jpg b/assets/instrucciones.jpg new file mode 100644 index 0000000..64f9cae Binary files /dev/null and b/assets/instrucciones.jpg differ diff --git a/assets/script.js b/assets/script.js new file mode 100644 index 0000000..d6f2b09 --- /dev/null +++ b/assets/script.js @@ -0,0 +1,74 @@ +const { createApp, ref, onMounted } = Vue; + +createApp({ + setup() { + const mangaData = ref({}); + const isLoading = ref(true); + const swiperWrapper = ref(null); + const swiperInstance = ref(null); + + // Function to load configuration from data.json + const loadData = async () => { + try { + const dataJsonPath = './assets/data.json'; + const response = await fetch(dataJsonPath, { cache: 'no-store', headers: { 'Cache-Control': 'no-cache' } }); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const data = await response.json(); + mangaData.value = data; + document.title = data.pageTitle; + isLoading.value = false; + + // Initialize swiper after data is loaded + setTimeout(initSwiper, 100); + } catch (err) { + console.error('Error loading data:', err); + isLoading.value = false; + } + }; + + // Function to initialize the swiper + const initSwiper = () => { + // Create slides for each manga page + if (mangaData.value.mangaPages && mangaData.value.mangaPages.length > 0) { + // Reverse the order as in the original script + const reversedPages = [...mangaData.value.mangaPages].reverse(); + + for (const page of reversedPages) { + const slide = document.createElement('div'); + slide.classList.add('swiper-slide'); + const img = document.createElement('img'); + img.loading = 'lazy'; + img.src = page; + slide.appendChild(img); + swiperWrapper.value.appendChild(slide); + } + + // Initialize Swiper + swiperInstance.value = new Swiper('.swiper-container', { + direction: 'horizontal', + loop: false, + initialSlide: reversedPages.length - 1, + pagination: { + el: '.swiper-pagination', + }, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + }); + } + }; + + onMounted(() => { + loadData(); + }); + + return { + mangaData, + isLoading, + swiperWrapper + }; + } +}).mount('#app'); diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..6c3dbef --- /dev/null +++ b/assets/style.css @@ -0,0 +1,45 @@ +body { + font-family: sans-serif; + margin: 0; + background-color: #f0f0f0; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + background-color: #fff; + border-radius: 5px; +} + +.swiper-container { + width: 100%; + height: 100%; +} + +.swiper-slide { + text-align: center; + font-size: 18px; + background: #fff; + + /* Center slide text vertically */ + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} + +.swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..39ec4b5 --- /dev/null +++ b/index.html @@ -0,0 +1,60 @@ + + + + + + Manga Title + + + + + + + +
+
+
+
+
+

Loading...

+
+
+
+
+
+
+
+
+

{{ mangaData.mangaTitle }}

+
+

{{ mangaData.mangaIntroduction }}

+
+

{{ mangaData.authorName }}

+
+

+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ + + + \ No newline at end of file