| <!DOCTYPE html>
|
| <html lang="id">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>g0tcha</title>
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| body {
|
| background-color: #000000; /* Background hitam */
|
| color: #ffffff; /* Teks putih untuk kontras */
|
| font-family: 'Courier New', monospace;
|
| height: 100vh;
|
| display: flex;
|
| flex-direction: column;
|
| justify-content: center;
|
| align-items: center;
|
| text-align: center;
|
| overflow: hidden;
|
| position: relative;
|
| }
|
|
|
| /* Efek partikel background */
|
| #particles {
|
| position: absolute;
|
| width: 100%;
|
| height: 100%;
|
| top: 0;
|
| left: 0;
|
| z-index: -1;
|
| }
|
|
|
| .container {
|
| padding: 20px;
|
| max-width: 800px;
|
| z-index: 1;
|
| }
|
|
|
| .title {
|
| font-size: 4rem;
|
| font-weight: bold;
|
| margin-bottom: 20px;
|
| text-transform: uppercase;
|
| letter-spacing: 5px;
|
| color: #ff0000; /* Warna merah untuk judul */
|
| text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
|
| animation: glow 2s ease-in-out infinite alternate;
|
| }
|
|
|
| @keyframes glow {
|
| from {
|
| text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
|
| }
|
| to {
|
| text-shadow: 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000;
|
| }
|
| }
|
|
|
| .description {
|
| font-size: 1.5rem;
|
| margin-bottom: 40px;
|
| color: #00ff00; /* Warna hijau untuk deskripsi */
|
| font-style: italic;
|
| text-shadow: 0 0 5px #00ff00;
|
| }
|
|
|
| .image-container {
|
| margin: 30px 0;
|
| position: relative;
|
| display: inline-block;
|
| }
|
|
|
| .main-image {
|
| max-width: 300px;
|
| width: 100%;
|
| height: auto;
|
| border-radius: 15px;
|
| border: 3px solid #ff00ff;
|
| box-shadow: 0 0 20px #ff00ff;
|
| transition: transform 0.3s ease;
|
| animation: float 3s ease-in-out infinite;
|
| }
|
|
|
| .main-image:hover {
|
| transform: scale(1.05);
|
| box-shadow: 0 0 30px #ff00ff;
|
| }
|
|
|
| @keyframes float {
|
| 0%, 100% {
|
| transform: translateY(0px);
|
| }
|
| 50% {
|
| transform: translateY(-10px);
|
| }
|
| }
|
|
|
| .caption {
|
| font-size: 2.5rem;
|
| margin-top: 20px;
|
| color: #ffff00; /* Warna kuning untuk caption */
|
| font-weight: bold;
|
| text-shadow: 0 0 10px #ffff00;
|
| animation: blink 1.5s infinite;
|
| }
|
|
|
| @keyframes blink {
|
| 0%, 100% { opacity: 1; }
|
| 50% { opacity: 0.7; }
|
| }
|
|
|
| .footer {
|
| margin-top: 40px;
|
| font-size: 0.9rem;
|
| color: #888;
|
| position: absolute;
|
| bottom: 20px;
|
| }
|
|
|
| /* Responsive design */
|
| @media (max-width: 768px) {
|
| .title {
|
| font-size: 2.5rem;
|
| }
|
|
|
| .description {
|
| font-size: 1.2rem;
|
| }
|
|
|
| .caption {
|
| font-size: 1.8rem;
|
| }
|
|
|
| .main-image {
|
| max-width: 250px;
|
| }
|
| }
|
|
|
| @media (max-width: 480px) {
|
| .title {
|
| font-size: 2rem;
|
| }
|
|
|
| .description {
|
| font-size: 1rem;
|
| }
|
|
|
| .caption {
|
| font-size: 1.5rem;
|
| }
|
|
|
| .main-image {
|
| max-width: 200px;
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <!-- Canvas untuk efek partikel -->
|
| <canvas id="particles"></canvas>
|
|
|
| <div class="image-container">
|
| <img src="https://i.giphy.com/cpkQpkVFOOoNi.webp"
|
| alt="g0tcha Image"
|
| class="main-image"
|
| id="mainImage">
|
| </div>
|
|
|
| <div class="container">
|
| <h1 class="title">Xai Syndicate</h1>
|
| <p class="description">root@lopyuuu:~$ LOLOLOLOLOLOLOLOLOL XD :3</p>
|
| <div class="caption" id="caption"></div>
|
| </div>
|
|
|
| <div class="footer">Indonesia Hacker Rulez</div>
|
|
|
| <script>
|
| // Script untuk efek partikel background
|
| const canvas = document.getElementById('particles');
|
| const ctx = canvas.getContext('2d');
|
|
|
| // Set ukuran canvas
|
| canvas.width = window.innerWidth;
|
| canvas.height = window.innerHeight;
|
|
|
| // Array untuk partikel
|
| let particles = [];
|
|
|
| // Warna partikel
|
| const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
|
|
|
| // Kelas Partikel
|
| class Particle {
|
| constructor() {
|
| this.x = Math.random() * canvas.width;
|
| this.y = Math.random() * canvas.height;
|
| this.size = Math.random() * 3 + 1;
|
| this.speedX = Math.random() * 2 - 1;
|
| this.speedY = Math.random() * 2 - 1;
|
| this.color = colors[Math.floor(Math.random() * colors.length)];
|
| }
|
|
|
| update() {
|
| this.x += this.speedX;
|
| this.y += this.speedY;
|
|
|
| // Jika partikel keluar dari layar, pindah ke sisi lain
|
| if (this.x > canvas.width) this.x = 0;
|
| else if (this.x < 0) this.x = canvas.width;
|
|
|
| if (this.y > canvas.height) this.y = 0;
|
| else if (this.y < 0) this.y = canvas.height;
|
| }
|
|
|
| draw() {
|
| ctx.fillStyle = this.color;
|
| ctx.beginPath();
|
| ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
| ctx.fill();
|
| }
|
| }
|
|
|
| // Fungsi untuk inisialisasi partikel
|
| function initParticles() {
|
| particles = [];
|
| const numberOfParticles = (canvas.width * canvas.height) / 9000;
|
|
|
| for (let i = 0; i < numberOfParticles; i++) {
|
| particles.push(new Particle());
|
| }
|
| }
|
|
|
| // Fungsi untuk menghubungkan partikel dengan garis
|
| function connectParticles() {
|
| const maxDistance = 100;
|
|
|
| for (let i = 0; i < particles.length; i++) {
|
| for (let j = i; j < particles.length; j++) {
|
| const dx = particles[i].x - particles[j].x;
|
| const dy = particles[i].y - particles[j].y;
|
| const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
| if (distance < maxDistance) {
|
| ctx.strokeStyle = `rgba(255, 255, 255, ${0.2 * (1 - distance/maxDistance)})`;
|
| ctx.lineWidth = 0.5;
|
| ctx.beginPath();
|
| ctx.moveTo(particles[i].x, particles[i].y);
|
| ctx.lineTo(particles[j].x, particles[j].y);
|
| ctx.stroke();
|
| }
|
| }
|
| }
|
| }
|
|
|
| // Fungsi animasi
|
| function animateParticles() {
|
| ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
| // Update dan draw semua partikel
|
| for (let particle of particles) {
|
| particle.update();
|
| particle.draw();
|
| }
|
|
|
| // Hubungkan partikel dengan garis
|
| connectParticles();
|
|
|
| requestAnimationFrame(animateParticles);
|
| }
|
|
|
| // Handle resize window
|
| window.addEventListener('resize', function() {
|
| canvas.width = window.innerWidth;
|
| canvas.height = window.innerHeight;
|
| initParticles();
|
| });
|
|
|
| // Array gambar alternatif jika ingin rotasi gambar
|
| const imageUrls = [
|
| 'https://i.giphy.com/cpkQpkVFOOoNi.webp',
|
| 'https://i.giphy.com/cpkQpkVFOOoNi.webp',
|
| 'https://i.giphy.com/cpkQpkVFOOoNi.webp',
|
| 'https://i.giphy.com/cpkQpkVFOOoNi.webp',
|
| 'https://i.giphy.com/cpkQpkVFOOoNi.webp'
|
| ];
|
|
|
| let currentImageIndex = 0;
|
| const mainImage = document.getElementById('mainImage');
|
| const caption = document.getElementById('caption');
|
|
|
| // Fungsi untuk mengganti gambar (opsional)
|
| function changeImage() {
|
| currentImageIndex = (currentImageIndex + 1) % imageUrls.length;
|
| mainImage.src = imageUrls[currentImageIndex];
|
|
|
| // Efek teks berkedip saat ganti gambar
|
| caption.style.animation = 'none';
|
| setTimeout(() => {
|
| caption.style.animation = 'blink 1.5s infinite';
|
| }, 10);
|
| }
|
|
|
| // Ganti gambar setiap 5 detik (opsional)
|
| setInterval(changeImage, 5000);
|
|
|
| // Klik gambar untuk ganti manual
|
| mainImage.addEventListener('click', changeImage);
|
|
|
| // Klik teks untuk efek
|
| caption.addEventListener('click', function() {
|
| this.style.transform = 'scale(1.2)';
|
| this.style.color = '#ff0000';
|
|
|
| setTimeout(() => {
|
| this.style.transform = 'scale(1)';
|
| this.style.color = '#ffff00';
|
| }, 300);
|
| });
|
|
|
| // Inisialisasi dan mulai animasi
|
| initParticles();
|
| animateParticles();
|
|
|
| // Efek ketik untuk deskripsi (opsional)
|
| const descriptionText = "root@lopyuuu:~$ LOLOLOLOLOLOLOLOLOL XD :3";
|
| const descriptionElement = document.querySelector('.description');
|
| let descCharIndex = 0;
|
|
|
| function typeDescription() {
|
| if (descCharIndex < descriptionText.length) {
|
| descriptionElement.textContent = descriptionText.substring(0, descCharIndex + 1);
|
| descCharIndex++;
|
| setTimeout(typeDescription, 100);
|
| }
|
| }
|
|
|
| // Mulai efek ketik setelah halaman load
|
| window.addEventListener('load', function() {
|
| descriptionElement.textContent = '';
|
| setTimeout(typeDescription, 1000);
|
| });
|
| </script>
|
| </body>
|
| </html>
|