Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Google Antigravity</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; /* Biar layar nggak bisa di-scroll */ | |
| background-color: #ffffff; | |
| touch-action: none; /* Mencegah zoom/scroll pas layar disentuh */ | |
| } | |
| canvas { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // Setup engine Matter.js | |
| let Engine = Matter.Engine, | |
| Render = Matter.Render, | |
| Runner = Matter.Runner, | |
| Bodies = Matter.Bodies, | |
| Composite = Matter.Composite, | |
| Mouse = Matter.Mouse, | |
| MouseConstraint = Matter.MouseConstraint; | |
| let engine = Engine.create(); | |
| // Bikin canvas seukuran layar HP | |
| let render = Render.create({ | |
| element: document.body, | |
| engine: engine, | |
| options: { | |
| width: window.innerWidth, | |
| height: window.innerHeight, | |
| wireframes: false, | |
| background: '#ffffff' | |
| } | |
| }); | |
| // Bikin batas lantai biar objeknya nggak jatuh ke jurang | |
| let ground = Bodies.rectangle(window.innerWidth / 2, window.innerHeight + 25, window.innerWidth, 50, { | |
| isStatic: true, | |
| render: { fillStyle: '#ffffff' } | |
| }); | |
| // Bikin balok logo dan kolom pencarian (sebagai simulasi) | |
| let googleLogo = Bodies.rectangle(window.innerWidth / 2, 100, 250, 80, { | |
| render: { | |
| fillStyle: '#4285F4', // Warna biru Google | |
| sprite: { texture: '' } // Nanti bisa kamu ganti URL gambar logo Google di sini | |
| } | |
| }); | |
| let searchBar = Bodies.rectangle(window.innerWidth / 2, 220, 300, 40, { | |
| render: { fillStyle: '#e0e0e0' } | |
| }); | |
| // Masukin semuanya ke "dunia" fisika | |
| Composite.add(engine.world, [ground, googleLogo, searchBar]); | |
| // Aktifin fitur touch/drag biar bisa dilempar-lempar pakai jari di HP | |
| let mouse = Mouse.create(render.canvas); | |
| let mouseConstraint = MouseConstraint.create(engine, { | |
| mouse: mouse, | |
| constraint: { | |
| stiffness: 0.2, | |
| render: { visible: false } | |
| } | |
| }); | |
| Composite.add(engine.world, mouseConstraint); | |
| // Biar ukurannya tetep pas kalau HP di-rotate (landscape/portrait) | |
| window.addEventListener('resize', () => { | |
| render.canvas.width = window.innerWidth; | |
| render.canvas.height = window.innerHeight; | |
| Matter.Body.setPosition(ground, { x: window.innerWidth / 2, y: window.innerHeight + 25 }); | |
| }); | |
| // Jalankan simulasi! | |
| Render.run(render); | |
| Runner.run(Runner.create(), engine); | |
| </script> | |
| </body> | |
| </html> | |