Skip to content

Commit a5bc2e0

Browse files
DikreyDikrey
authored
Add files via upload
0 parents  commit a5bc2e0

File tree

7 files changed

+832
-0
lines changed

7 files changed

+832
-0
lines changed

‎css/bootstrap.min.css‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎images/iconweb.jpg‎

1.18 MB
Loading

‎index.html‎

Lines changed: 322 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,322 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="description" content="PAYMENT">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="icon" type="image/x-icon" href="images/iconweb.jpg">
9+
<title>PAYMENT RAIHAN OFFICIAL</title>
10+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
11+
<link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
12+
<script src="js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
13+
<script src="https://common.olemiss.edu/_js/sweet-alert/sweet-alert.min.js"></script>
14+
<link rel="stylesheet" type="text/css" href="https://common.olemiss.edu/_js/sweet-alert/sweet-alert.css">
15+
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
16+
<style>
17+
:root {
18+
font-size: 62.5%;
19+
}
20+
21+
* {
22+
box-sizing: border-box;
23+
margin: 0;
24+
padding: 0;
25+
}
26+
27+
body {
28+
background: linear-gradient(to right, #1a73e8, #00c6ff);
29+
width: 100%;
30+
height: 100vh;
31+
32+
}
33+
34+
.rain {
35+
position: absolute;
36+
top: 0;
37+
left: 0;
38+
width: 100%;
39+
height: 100%;
40+
pointer-events: none;
41+
}
42+
43+
main {
44+
height: 100vh;
45+
display: flex;
46+
align-items: center;
47+
justify-content: center;
48+
flex-direction: column;
49+
position: relative;
50+
z-index: 2;
51+
}
52+
53+
.container {
54+
width: 28rem;
55+
padding: 1rem 2rem;
56+
background: rgba(255, 255, 255, 0.15);
57+
border-radius: 2rem;
58+
border: 0.1rem solid rgba(255, 255, 255, 0.3);
59+
box-shadow: 0 0 1.5rem 0.2rem rgba(0, 0, 0, 0.3);
60+
backdrop-filter: blur(1rem);
61+
text-align: center;
62+
margin-bottom: -5rem;
63+
}
64+
65+
.image {
66+
width: 40%;
67+
height: auto;
68+
border-radius: 5rem;
69+
margin: 1rem auto;
70+
}
71+
72+
h1 {
73+
font-family: 'Muli', sans-serif;
74+
font-weight: 700;
75+
font-size: 2.4rem;
76+
color: #fff;
77+
margin-bottom: 1rem;
78+
margin-left: -1rem;
79+
}
80+
81+
.animated-text {
82+
font-size: 1.6rem;
83+
color: #fff;
84+
font-family: 'Space Mono', monospace;
85+
margin-bottom: 1rem;
86+
animation: textSlide 4s infinite;
87+
}
88+
89+
@keyframes textSlide {
90+
0% {
91+
opacity: 0;
92+
transform: translateY(100%);
93+
}
94+
10%, 40% {
95+
opacity: 1;
96+
transform: translateY(0);
97+
}
98+
60% {
99+
opacity: 1;
100+
transform: translateY(0);
101+
}
102+
80%, 100% {
103+
opacity: 0;
104+
transform: translateY(-100%);
105+
}
106+
}
107+
108+
.link-boxes {
109+
margin: 2rem 1rem;
110+
font-family: 'Muli', sans-serif;
111+
font-weight: 700;
112+
font-size: 1.4rem;
113+
text-transform: capitalize;
114+
}
115+
116+
.link-boxes a {
117+
text-decoration: none;
118+
display: block;
119+
color: #fff;
120+
background: rgba(0, 0, 0, 0.2);
121+
border: 0.1rem solid #fff;
122+
margin: 0.7rem;
123+
border-radius: 0.5rem;
124+
padding: 0.6rem;
125+
transition: all 0.3s ease-in-out;
126+
animation: pulse 2s infinite alternate;
127+
}
128+
129+
.link-boxes a:nth-child(odd) {
130+
animation-delay: 0.5s;
131+
}
132+
133+
@keyframes pulse {
134+
0% {
135+
transform: scale(1);
136+
background: rgba(0, 0, 0, 0.2);
137+
}
138+
100% {
139+
transform: scale(1.05);
140+
background: #00c6ff;
141+
box-shadow: 0 0 1rem rgba(255, 255, 255, 0.5);
142+
}
143+
}
144+
145+
hr {
146+
border-color: #fff;
147+
}
148+
149+
.music-controls {
150+
display: flex;
151+
justify-content: center;
152+
margin-top: 1.5rem;
153+
flex-direction: column;
154+
align-items: center;
155+
}
156+
157+
.music-controls button {
158+
background: #fff;
159+
border: none;
160+
border-radius: 50%;
161+
padding: 1rem;
162+
font-size: 1.5rem;
163+
color: #1a73e8;
164+
cursor: pointer;
165+
transition: transform 0.2s ease-in-out;
166+
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
167+
margin-bottom: 1rem;
168+
}
169+
170+
.music-controls button:hover {
171+
transform: scale(1.1);
172+
background: #00c6ff;
173+
color: #fff;
174+
}
175+
176+
.status {
177+
font-family: 'Muli', sans-serif;
178+
font-size: 1.4rem;
179+
color: #fff;
180+
}
181+
182+
@media only screen and (min-width:992px) {
183+
.image {
184+
width: 40%;
185+
}
186+
187+
h1 {
188+
font-size: 2.6rem;
189+
}
190+
.container {
191+
width: 90%;
192+
padding: 1rem;
193+
margin-bottom: -25rem;
194+
195+
}
196+
}
197+
</style>
198+
</head>
199+
<body>
200+
<div class="rain"></div>
201+
<audio id="background-music" src="media/sound.mp3" loop></audio>
202+
203+
<main>
204+
<div class="container">
205+
<img class="image" src="images/iconweb.jpg" alt="siputzx Picture" loading="lazy">
206+
<h1>RAIHAN_OFFICIAL0307</h1>
207+
<p class="animated-text">Mau Bertransaksi? Yuk Klik Tombol di Bawah!</p>
208+
209+
<hr>
210+
<div class="link-boxes">
211+
<a title="Send a message to Raihan" href="https://wa.me/6285763416693" target="_blank">
212+
<i class="fab fa-whatsapp"></i> WhatsApp 1
213+
</a>
214+
<a title="Info tentang store" href="https://chat.whatsapp.com/CmVA36LVqd1JmbCqsH1A2Q" target="_blank">
215+
<i class="fab fa-whatsapp"></i> INFO TENTANG STORE
216+
</a>
217+
<a title="Send a message to Telegram" href="https://t.me/raihan_official0307/" target="_blank">
218+
<i class="fa-solid fa-paper-plane"></i> Telegram
219+
</a>
220+
<a title="DANA" href="https://i.ibb.co.com/fHHx3Gf/Dana-085763416693.png" target="_blank">
221+
<i class="fab fa-dana"></i> DANA
222+
</a>
223+
<a title="QRISS ALL PAY" href="https://i.ibb.co.com/sKf83Qc/Dana-085763416693-1.png" target="_blank">
224+
<i class="fa fa-qriz"></i> QRIZZ AL PAY
225+
</a>
226+
<a title="Subscribe to Raihan on YouTube" href="https://www.youtube.com/@Raihan_official-ju9go" target="_blank">
227+
<i class="fab fa-dana"></i> Youtube
228+
</a>
229+
<a title="Follow to Raihan on instagram" href="https://www.instagram.com/muhammad_raihan0307" target="_blank">
230+
<i class="fab fa-dana"></i> Instagram
231+
</a>
232+
<a title="Follow to Raihan on Tiktok" href="https://www.tiktok.com/@raihannstore" target="_blank">
233+
<i class="fab fa-dana"></i> Tiktok
234+
</a>
235+
236+
</div>
237+
<p class="animated-text">&copy; Raihan_official0307 </p>
238+
<hr>
239+
<div class="music-controls">
240+
<button id="play-pause-btn"><i class="fa fa-play"></i></button>
241+
<div class="status" id="music-status">Music is stopped</div>
242+
</div>
243+
</div>
244+
</main>
245+
246+
<script>
247+
alert('Hai! Mau punya website sederhana yang bisa kamu sesuaikan sesuai keinginan? Saya menyediakan jasa pembuatan semua jenis website, dari yang sederhana hingga yang kompleks! Klik tombol di bawah ini ya! Jika ada pertanyaan atau butuh info lebih lanjut, langsung aja ke WA developer. Yuk, wujudkan website impianmu sekarang!');
248+
// Mencegah pintasan keyboard untuk membuka alat pengembang
249+
document.addEventListener('keydown', function (e) {
250+
// Menyaring pintasan yang umum digunakan untuk membuka alat pengembang
251+
if ((e.ctrlKey || e.metaKey) && (e.key === 'I' || e.key === 'J' || e.key === 'U') ||
252+
e.keyCode === 123 || // F12 key
253+
(e.ctrlKey && e.shiftKey && e.keyCode === 73) // Ctrl+Shift+I
254+
) {
255+
e.preventDefault();
256+
Swal.fire('ANDA MAU NGAPAIN?', 'Tidak Mengizinkan Klik Kanan', 'error');
257+
}
258+
});
259+
// Menonaktifkan klik kanan
260+
document.addEventListener('contextmenu', function (event) {
261+
event.preventDefault();
262+
Swal.fire('ANDA MAU NGAPAIN?', 'Tidak Mengizinkan Klik Kanan!', 'error');
263+
});
264+
document.addEventListener('keydown', function (event) {
265+
if (event.ctrlKey && event.key === 'u') {
266+
event.preventDefault();
267+
Swal.fire('Memblokir Ctrl+U', 'RaihanProduction', 'error');
268+
}
269+
});
270+
271+
const playPauseBtn = document.getElementById('play-pause-btn');
272+
const musicStatus = document.getElementById('music-status');
273+
const backgroundMusic = document.getElementById('background-music');
274+
275+
playPauseBtn.addEventListener('click', () => {
276+
if (backgroundMusic.paused) {
277+
backgroundMusic.play();
278+
playPauseBtn.innerHTML = '<i class="fa fa-pause"></i>';
279+
musicStatus.textContent = 'Music is playing';
280+
} else {
281+
backgroundMusic.pause();
282+
playPauseBtn.innerHTML = '<i class="fa fa-play"></i>';
283+
musicStatus.textContent = 'Music is paused';
284+
}
285+
});
286+
287+
// Rain Animation
288+
const rainContainer = document.querySelector('.rain');
289+
for (let i = 0; i < 100; i++) {
290+
const drop = document.createElement('div');
291+
drop.className = 'drop';
292+
drop.style.left = Math.random() * 100 + 'vw';
293+
drop.style.animationDelay = Math.random() * 2 + 's';
294+
rainContainer.appendChild(drop);
295+
}
296+
</script>
297+
<style>
298+
.drop {
299+
position: absolute;
300+
bottom: 100%;
301+
width: 2px;
302+
height: 50px;
303+
background: rgba(255, 255, 255, 0.5);
304+
animation: fall 2s linear infinite;
305+
}
306+
307+
@keyframes fall {
308+
0% {
309+
opacity: 0;
310+
transform: translateY(-50px);
311+
}
312+
10% {
313+
opacity: 1;
314+
}
315+
100% {
316+
transform: translateY(110vh);
317+
opacity: 0;
318+
}
319+
}
320+
</style>
321+
</body>
322+
</html>

0 commit comments

Comments
 (0)