-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsurat.html
176 lines (154 loc) · 7.25 KB
/
surat.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
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surat Aisyah</title>
<style>
/* Global Styles */
body {
margin: 0;
font-family: 'Georgia', serif;
background: linear-gradient(to bottom, #87CEEB, #B0E0E6);
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
/* Cloud Animation */
.clouds {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.cloud {
position: absolute;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
border-radius: 50%;
}
.cloud-1 {
width: 200px;
height: 100px;
top: 50px;
left: 10%;
animation: float 12s infinite ease-in-out;
}
.cloud-2 {
width: 150px;
height: 75px;
top: 150px;
left: 70%;
animation: float 10s infinite ease-in-out;
}
@keyframes float {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(30px);
}
}
/* Card Styles */
/* Card Styles */
.card {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
padding: 30px 20px;
max-width: 600px;
width: 100%;
text-align: center;
position: relative;
z-index: 10;
max-height: 80vh; /* Set the maximum height to 80% of the viewport */
overflow-y: auto; /* Enable vertical scrolling */
}
.card h1 {
font-size: 2.5rem;
color: #1A237E;
margin-bottom: 10px;
}
.card p {
font-size: 1.2rem;
line-height: 1.6;
color: #424242;
white-space: pre-wrap;
}
/* Navigation Buttons */
.navigation {
margin-top: 20px;
display: flex;
justify-content: space-between;
gap: 10px;
}
.nav-button {
background: linear-gradient(to right, #1A237E, #3949AB);
color: white;
border: none;
border-radius: 10px;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
.nav-button:hover {
background: linear-gradient(to right, #3949AB, #1A237E);
}
</style>
</head>
<body>
<!-- Background Clouds -->
<div class="clouds">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
</div>
<!-- Main Card -->
<div class="card" id="card">
<p id="content">
Assalamualaikum Warahmatullahi Wabarakatuh. <br><br>
To: Ibu Rini Oktari <br>
From: Aisyah <br><br>
Halo, Bu Rini! Semoga Ibu selalu sehat dan dalam lindungan Allah SWT.
Saya ingin mengucapkan terima kasih atas segala bantuan Ibu selama ini.
</p>
<div class="navigation">
<button class="nav-button" onclick="prevContent()">❮ Sebelumnya</button>
<button class="nav-button" onclick="nextContent()">Selanjutnya ❯</button>
</div>
</div>
<script>
// Array of content for the card
const contents = [
`Assalamualaikum Warahmatullahi Wabarakatuh.<br>
To: Ibu Rini Oktari
From: Aisyah<br>
Halo, Bu Rini! Semoga Ibu selalu sehat dan dalam lindungan Allah SWT. Saya ingin mengucapkan terima kasih atas segala bantuan Ibu selama ini.`,
`Sejujurnya saya tidak tahu mau mengatakan apa di surat ini, jadi saya hanya akan mengatakan alasan saya memutuskan untuk kuliah.<br>
Saya sedari masih sekolah sangat tertarik dengan komputer, saya cukup pandai jika berkaitan dengan komputer. Saya juga sangat menyukai matematika. Oleh karena itu saya tertarik untuk belajar pemrograman sedari sekolah. Namun saya sering berhenti saat saya mempelajarinya sendiri, dikarenakan saya lebih memilih untuk maraton anime Naruto sebanyak 700 eps, karena hal itu saya sempat berhenti dan malas untuk melanjutkannya lagi, lalu pada tahun kemarin, saya mencoba mengulanginya dari awal, namun gagal lagi karena saya maraton anime One piece 1000 eps.`,
`Karena hal itu saya berfikir bagaimana cara saya agar saya bisa konsisten dan fokus untuk belajar. Sebenarnya saya tidak terlalu ingin kuliah, bahkan saya tidak terlalu berfikir untuk melanjutkan studi saya. Namun dikarenakan saya sangat ingin belajar pemrograman dengan konsisten, ditambah Sebenarnya saya malas bekerja. saya lulus 2 tahun lalu tapi memutuskan untuk bekerja, tetapi karena malas dan mengetahui ada program KIP kuliah dimana, saya bisa belajar sekaligus bisa mendapatkan bantuan dari pemerintah setiap semester, jadi saya memutuskan untuk kuliah. Menurut saya itu kesempatan untuk mendapatkan uang sekaligus mendapatkan ilmu yang saya inginkan tanpa bersusah payah.`,
`Lalu tibalah saya mengikuti ujian UTBK karena tahun ini adalah kesempatan terakhir untuk mendapatkan KIP kuliah dan mengikuti UTBK. Alhamdulillah saya lolos ujan UTBK dan di terima di UNIMED prodi Ilmu Komputer, tetapi sayangnya saya tidak lolos KIP, karena itu saya memutuskan untuk mengundurkan diri, dan mendaftar di Potensi Utama sebagai peserta KIP juga, dan Alhamdulillah saya di terima di sini. Sejujurnya saya tidak menyesal melepaskan UNIMED dikarenakan saya melihat teman-teman saya yang sekarat karena tugas yang sangat banyak wkwkwkw. Tapi saya agak sedikit menyesal memilih sistem informasi, karena saya sangat menyukai pemrograman, jadi saya ingin lebih banyak menkoding di bandingkan SI yang juga terdapat campuran Bisnis. Saya dulu SMK jurusan Akuntansi, jadi agak muak harus belajar bisnis lagi wkwkwk, tapi tak masalah saya bersyukur, karena ini pilihan Allah SWT. Saya yakin pilihan Tuhan saya adalah yang terbaik.`,
`Terimakasih bu, karena meluangkan waktu untuk membaca surat yang aneh ini. Saya tidak ada masalah apapun selama kuliah, jadi ya begitulah.`
];
let currentIndex = 0;
// Function to update content
function updateContent() {
const contentElement = document.getElementById('content');
contentElement.innerHTML = contents[currentIndex];
}
// Next content
function nextContent() {
currentIndex = (currentIndex + 1) % contents.length;
updateContent();
}
// Previous content
function prevContent() {
currentIndex = (currentIndex - 1 + contents.length) % contents.length;
updateContent();
}
</script>
</body>
</html>