-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (167 loc) · 11.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Novel Sang Pemimpi</title>
<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=Readex+Pro:wght@200&family=Ruda&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/js/all.min.js" integrity="sha512-Cvxz1E4gCrYKQfz6Ne+VoDiiLrbFBvc6BPh4iyKo2/ICdIodfgc5Q9cBjRivfQNUXBCEnQWcEInSXsvlNHY/ZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="tailwind.css">
</head>
<body x-data="data" x-cloak class="overflow-x-hidden">
<div class="bg-[#a7155f]">
<section id="hero" class="relative -bottom-0.5 w-full h-screen flex justify-center items-center bg-gradient-to-b from-[#a7155f] to-[#7d1d8a]">
<div class="text-center text-white mb-20 z-10 fadeDown" x-intersect.threshold.30="show($el)">
<h1 class="font-semibold text-7xl">Sang Pemimpi</h1>
<div class="mt-4 text-lg">Andrea Hirata</div>
</div>
<div class="absolute bottom-20 text-white z-10 fadeDown" x-intersect.threshold.30="showWithDelay($el, 200)">
<a href="#tentang" class="text-center text-white">
Baca Selengkapnya
<i class="fa-solid fa-chevron-down animate-bounce block mx-auto mt-2"></i>
</a>
</div>
<img src="img/kiri-atas.png" alt="" class="absolute -top-0.5 left-0 w-56 md:w-72">
<img src="img/kanan.png" alt="" class="absolute bottom-6 right-0 w-32 md:w-48">
</section>
</div>
<div class="bg-gradient-to-b from-[#7d1d8a] to-[#6567b4] relative -bottom-px">
<section id="tentang" class="relative w-full py-24">
<img src="img/kiri.png" alt="" class="absolute left-0 top-0 md:w-40 w-32">
<div class="container mx-auto relative px-12 flex flex-wrap justify-center items-center z-10">
<h1 class="text-4xl text-center text-white font-semibold mb-8 mt-3 md:hidden fadeDown" x-intersect.threshold.30="show($el)">Tentang Novel Sang Pemimpi</h1>
<div class="md:w-[30%] w-full fadeLeft" x-intersect.threshold.30="show($el)">
<img src="img/poster.jpg" alt="" class="w-full rounded shadow-2xl">
</div>
<div class="md:w-[65%] w-full text-white md:pl-16 text-lg mt-10 md:mt-0 fadeRight" x-intersect.threshold.30="show($el)">
<h1 class="text-4xl text-center font-semibold mb-8 hidden md:block">Tentang Novel Sang Pemimpi</h1>
<p>Sang Pemimpi Baru adalah novel kedua dalam tetralogi Laskar Pelangi karya Andrea Hirata yang diterbitkan oleh Bentang Pustaka pada Juli 2006. Dalam novel ini, Andrea mengeksplorasi hubungan persahabatannya dengan dua anak yatim piatu, Arai Ichsanul Mahidin dan Jimbron, serta kekuatan mimpi yang dapat membawa Andrea dan Arai melanjutkan studi ke Sorbonne, Paris, Prancis.</p>
<p class="mt-4">Novel ini bercerita tentang kehidupannya di Belitong pada masa SMA. Tiga tokoh utama dalam karya ini adalah Ikal, Arai dan Jimbron. Ikal tidak lain adalah Andrea Hirata sendiri, sedangkan Arai Ichsanul Mahidin adalah saudara jauhnya yang menjadi yatim piatu ketika masih kecil. Arai disebut simpai keramat karena dalam keluarganya ia adalah orang terakhir yang masih hidup dan ia pun diangkat menjadi anak oleh ayah Ikal. Jimbron merupakan teman Arai dan Ikal yang sangat terobsesi dengan kuda dan gagap bila sedang antusias terhadap sesuatu atau ketika gugup. Ketiganya melewati kisah persahabatan yang terjalin dari kecil hingga mereka bersekolah di SMA Negeri Bukan Main di Belitung</p>
</div>
</div>
</section>
<section id="tokoh" class="relative w-full py-32">
<img src="img/kanan.png" alt="" class="absolute top-0 right-0 w-48">
<h1 class="relative text-4xl text-center font-semibold mb-12 mt-12 lg:mt-20 text-white z-10 fadeDown" x-intersect.threshold.30="show($el)">Tokoh</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-16 px-8 md:px-16 lg:px-32 relative z-10" x-data="tokoh">
<div class="item bg-[#d9d9d9] rounded-md p-8 h-96 lg:h-[28rem] overflow-hidden fadeDown" @mouseenter="change(true,0)" @mouseleave="change(false,0)" x-intersect.threshold.30="show($el)">
<h2 class="text-2xl text-center mb-6 font-semibold">Ikal</h2>
<img src="img/ikal.png" alt="" class="max-h-full" x-transition.duration.250ms x-show="lists.images[0]">
<p class="mt-2" x-transition.duration.250ms x-show="lists.text[0]">Ikal seorang anak kampung dari keluarga yang kurang mampu, walaupun ia menjadi anak yang bandel saat di bangku SMA. Ia berhasil membuktikan bahwa ia mampu belajar dan bekerja, serta sukses untuk mencapai cita-citanya.</p>
</div>
<div class="item bg-[#d9d9d9] rounded-md p-8 h-96 lg:h-[28rem] overflow-hidden fadeDown" @mouseenter="change(true,1)" @mouseleave="change(false,1)" x-intersect.threshold.30="showWithDelay($el, 100)">
<h2 class="text-2xl text-center mb-6 font-semibold">Arai</h2>
<img src="img/arai.png" alt="" class="max-h-full" x-transition.duration.250ms x-show="lists.images[1]">
<p class="mt-2" x-transition.duration.250ms x-show="lists.text[1]">Arai menjadi salah satu saudara angkat Ikal sejak kelas 3 SD saat ayahnya meninggal dunia. Arai dapat dikatakan sebagai seorang yang suka menghibur, jika ia atau temannya merasa sedih Arai salah satu orang yang akan menciptkanan kesedihan tersebut menjadi semangatnya.</p>
</div>
<div class="item bg-[#d9d9d9] rounded-md p-8 h-96 lg:h-[28rem] overflow-hidden fadeDown" @mouseenter="change(true,2)" @mouseleave="change(false,2)" x-intersect.threshold.30="showWithDelay($el, 200)">
<h2 class="text-2xl text-center mb-6 font-semibold">Jimbron</h2>
<img src="img/jimbron.png" alt="" class="max-h-full" x-transition.duration.250ms x-show="lists.images[2]">
<p class="mt-2" x-transition.duration.250ms x-show="lists.text[2]">Ia merupakan anak yatim piatu yang selalu mendapatkan bimbingan dari pastur Katolik. Ia sangat terobsesi dengan kuda, obsesinya itu membuatya mengetahui tentang kuda dan karakteristik kuda. Jimbron salah satu penyeimbang diantara Arai dan Ikal, ia memiliki ketulusan hati yang berasal dari simpati dan kasih sayang.</p>
</div>
</div>
</section>
</div>
<section id="ringkasan" class="bg-[url('img/bg-ringkasan.png')] bg-cover bg-no-repeat w-full h-screen p-12 text-center" x-data="ringkasan" x-cloak>
<h1 class="text-4xl text-center font-semibold mb-8 text-white fadeDown" x-intersect.margin.16px="show($el)">Ringkasan</h1>
<h2 class="text-2xl text-center mb-4 text-white fadeDown" :class="(!open) && 'invisible'" x-transition x-transition.duration.200ms x-text="`Bab ${chapter} : ${chapters[chapter-1]}`" x-intersect.threshold.30="showWithDelay($el, 150)"></h2>
<a href="" class="text-center text-white previous relative fadeDown" :class="(chapter==1) && 'invisible'" @click.prevent="changeChapter(chapter-1)" x-transition x-cloak x-intersect.threshold.30="showWithDelay($el, 300)"><i class="fa-solid fa-chevron-up animate-bounce font-semibold text-base md:text-2xl"></i></a>
<div class="relative lg:w-[60%] h-[70%] mx-auto mb-3 fadeDown" x-intersect.threshold.30="showWithDelay($el, 300)">
<div class="absolute w-[240px] top-2 md:top-0 md:right-[101%] ml-2 md:ml-0 z-10 flex justify-start md:justify-end max-h-full" :class="expanded && 'shadow-xl'" x-data="{expanded: false}">
<div class="bg-gray-300 md:shadow-md rounded-md overflow-y-auto" id="daftar-isi" @scroll="scrollDaftarIsi" @click.outside="expanded = false">
<div class="sticky top-0 flex justify-between bg-gray-300 p-3" x-ref="header-list">
<h3 class="text-xl font-semibold" x-show="expanded">Daftar Isi</h3>
<button class="text-right inline outline-none" @click="expanded = !expanded"><i class="fas fa-bars"></i></button>
</div>
<ul class="text-left px-3 pb-3" x-show="expanded" x-collapse>
<template x-for="(chaptername, i) in chapters">
<li class="group py-2 border-gray-700 border-opacity-60 cursor-pointer" @click="changeChapter(i+1)" :class="(i+1 < chapters.length) && 'border-b'">
<span class="inline-block group-hover:translate-x-2 transition duration-150" x-text="chaptername" :class="chapter == i+1 && 'font-semibold'"></span>
</li>
</template>
</ul>
</div>
</div>
<div class="my-4 bg-white bg-opacity-60 shadow-md rounded-md mx-auto h-full overflow-y-auto px-8 md:px-12 py-14 pt-6 text-left md:text-justify scroll-smooth transition duration-150 ringkasan" x-ref="ringkasan" id="isi-ringkasan">
<div>
<template x-for="(isi, i) in ringkasan[chapter-1]['isi']">
<p class="text-xl pt-8" x-text="isi" x-show="open" x-ref="isi" id="isi" x-transition x-transition.duration.200ms></p>
</template>
</div>
</div>
</div>
<a href="" class="text-center text-white next fadeDown" x-show="chapter < chapters.length" @click.prevent="changeChapter(chapter+1)" x-transition x-intersect.threshold.30="showWithDelay($el, 300)"><i class="fa-solid fa-chevron-down animate-bounce font-semibold text-base md:text-2xl"></i></a>
</section>
<script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js" defer></script>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
<script>
const delay = (duration = 300) => new Promise(resolve => setTimeout(resolve, duration))
document.addEventListener('alpine:init', function () {
Alpine.data('data', () => ({
show(el) {
el.classList.add('active')
},
async showWithDelay(el, duration) {
await delay(duration)
el.classList.add('active')
}
}))
Alpine.data('ringkasan', () => ({
chapter: 1,
chapters: [],
open: false,
paragraph: 1,
offset: [0],
chapterTitle: true,
ringkasan: [{isi: ''}],
async changeChapter(chapter) {
this.open = false
await delay()
this.chapter = chapter
this.open = true
},
async init() {
try {
const res = await fetch('ringkasan.json')
this.ringkasan = (await res.json()).ringkasan
this.open = true
this.chapters = await this.ringkasan.map(value => value.chapter_title)
} catch(e) {
console.log(e);
}
}
}))
Alpine.data('tokoh', () => ({
lists: {
images: [true, true, true],
text: [false, false, false]
},
currentlyMoving: false,
async change(val, i) {
console.log(i, val)
if (!this.currentlyMoving) {
if (val) {
this.lists.images[i] = false
await delay(200)
this.lists.text[i] = true
} else {
this.lists.text[i] = false
await delay(200)
this.lists.images[i] = true
}
this.currentlyMoving = false
}
if (this.lists.images[i] == this.lists.text[i]) {
this.lists.images[i] = !val
this.lists.text[i] = val
}
}
}))
})
</script>
</body>
</html>