Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
9c44aa0
·
verified ·
1 Parent(s): f22fb6c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +69 -134
index.html CHANGED
@@ -1,142 +1,77 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Futuristic Falling Ball Game</title>
7
- <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
- <div class="game-container">
11
- <div id="ball" class="ball"></div>
12
- <div id="platform" class="platform"></div>
13
- <div id="score">Score: 0</div>
14
- <div id="level">Level: 1</div>
15
- <div id="lives">
16
- <span class="life">♥️</span>
17
- <span class="life">♥️</span>
18
- <span class="life">♥️</span>
19
- </div>
 
 
 
 
 
 
 
 
20
  </div>
21
-
22
- <script>
23
- let ball = document.getElementById("ball");
24
- let platform = document.getElementById("platform");
25
- let score = document.getElementById("score");
26
- let levelDisplay = document.getElementById("level");
27
- let livesDisplay = document.getElementById("lives");
28
-
29
- let currentScore = 0;
30
- let level = 1;
31
- let platformX = window.innerWidth / 2 - 50;
32
- platform.style.left = platformX + "px";
33
-
34
- let remainingLives = 3;
35
- let ballY = -30;
36
- let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
37
- let ballSpeed = 3; // Increased speed
38
- let isTouching = false;
39
-
40
- // Kontrol menggunakan Mouse
41
- document.addEventListener("mousemove", (e) => {
42
- platformX = e.clientX - platform.offsetWidth / 2;
43
- if (platformX < 0) platformX = 0;
44
- if (platformX > window.innerWidth - platform.offsetWidth) {
45
- platformX = window.innerWidth - platform.offsetWidth;
46
- }
47
- platform.style.left = platformX + "px";
48
- });
49
-
50
- // Kontrol menggunakan Sentuhan
51
- document.addEventListener("touchmove", (e) => {
52
- if (isTouching) {
53
- let touchX = e.touches[0].clientX;
54
- platformX = touchX - platform.offsetWidth / 2;
55
- if (platformX < 0) platformX = 0;
56
- if (platformX > window.innerWidth - platform.offsetWidth) {
57
- platformX = window.innerWidth - platform.offsetWidth;
58
- }
59
- platform.style.left = platformX + "px";
60
- }
61
- }, { passive: false });
62
-
63
- document.addEventListener("touchstart", (e) => {
64
- isTouching = true;
65
- });
66
-
67
- document.addEventListener("touchend", (e) => {
68
- isTouching = false;
69
- });
70
-
71
- let updateLives = () => {
72
- let hearts = '';
73
- for (let i = 0; i < remainingLives; i++) {
74
- hearts += '♥️';
75
- }
76
- livesDisplay.innerHTML = hearts;
77
- };
78
-
79
- let updateBallPosition = () => {
80
- ballY += ballSpeed;
81
-
82
- // Update ball position directly with JavaScript
83
- ball.style.top = ballY + "px";
84
- ball.style.left = ballX + "px";
85
-
86
- let ballRect = ball.getBoundingClientRect();
87
- let platformRect = platform.getBoundingClientRect();
88
-
89
- if (ballY + 30 >= platformRect.top && ballY + 30 <= platformRect.bottom) {
90
- if (ballX + 30 >= platformRect.left && ballX <= platformRect.right) {
91
- // Ball hits the platform
92
- currentScore++;
93
- if (currentScore % 10 === 0) {
94
- level++;
95
- levelDisplay.innerHTML = "Level: " + level;
96
- ballSpeed += 0.2; // Increase ball speed every 10 points
97
- }
98
- score.innerHTML = "Score: " + currentScore;
99
- resetBall();
100
- }
101
- } else if (ballY >= window.innerHeight) {
102
- // Ball missed the platform
103
- if (remainingLives > 0) {
104
- remainingLives--;
105
- updateLives();
106
- resetBall();
107
- }
108
-
109
- if (remainingLives <= 0) {
110
- alert("Game Over! Your score is: " + currentScore);
111
- resetGame();
112
- }
113
- }
114
- };
115
-
116
- let resetBall = () => {
117
- ballY = -30; // Reset ball to start position
118
- ballX = Math.floor(Math.random() * (window.innerWidth - 30)); // New random X position
119
- ball.style.top = ballY + "px";
120
- ball.style.left = ballX + "px";
121
- };
122
-
123
- let resetGame = () => {
124
- remainingLives = 3;
125
- currentScore = 0;
126
- level = 1;
127
- ballSpeed = 3; // Start with a faster speed
128
- score.innerHTML = "Score: " + currentScore;
129
- levelDisplay.innerHTML = "Level: " + level;
130
- updateLives();
131
- resetBall();
132
- };
133
-
134
- let gameLoop = () => {
135
- updateBallPosition();
136
- requestAnimationFrame(gameLoop); // Loop the game
137
- };
138
-
139
- gameLoop(); // Start the game loop
140
- </script>
141
  </body>
142
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Portfolio Interaktif</title>
7
+ <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
+ <header>
11
+ <h1>Selamat Datang di Portfolio Saya</h1>
12
+ <nav>
13
+ <ul>
14
+ <li><a href="#home">Home</a></li>
15
+ <li><a href="#skills">Skills</a></li>
16
+ <li><a href="#projects">Projects</a></li>
17
+ <li><a href="#contact">Contact</a></li>
18
+ </ul>
19
+ </nav>
20
+ </header>
21
+
22
+ <section id="home">
23
+ <h2>Hi, Saya [Nama Kamu]</h2>
24
+ <p>Seorang developer AI dan Blockchain yang selalu belajar.</p>
25
+ <button id="chatButton">Tanya Saya</button>
26
+ <div id="chatbox" class="hidden">
27
+ <p id="chatMessage">Halo! Saya adalah chatbot mini. Tanyakan apa saja tentang saya!</p>
28
  </div>
29
+ </section>
30
+
31
+ <section id="skills">
32
+ <h2>Skills</h2>
33
+ <ul>
34
+ <li>Generative AI</li>
35
+ <li>Blockchain</li>
36
+ <li>Software Engineering</li>
37
+ </ul>
38
+ </section>
39
+
40
+ <section id="projects">
41
+ <h2>Projects</h2>
42
+ <div class="project">
43
+ <h3>Sentiment Analysis</h3>
44
+ <p>Web app untuk analisis sentimen dalam Bahasa Indonesia.</p>
45
+ </div>
46
+ <div class="project">
47
+ <h3>Visualisasi Squad Sepak Bola</h3>
48
+ <p>Tools untuk membuat formasi tim sepak bola dengan statistik pemain.</p>
49
+ </div>
50
+ </section>
51
+
52
+ <section id="contact">
53
+ <h2>Contact</h2>
54
+ <form>
55
+ <input type="text" placeholder="Nama" required>
56
+ <input type="email" placeholder="Email" required>
57
+ <textarea placeholder="Pesan"></textarea>
58
+ <button type="submit">Kirim</button>
59
+ </form>
60
+ </section>
61
+
62
+ <footer>
63
+ <p>&copy; 2025 [Nama Kamu]</p>
64
+ </footer>
65
+
66
+ <!-- JavaScript -->
67
+ <script>
68
+ document.getElementById("chatButton").addEventListener("click", function () {
69
+ const chatbox = document.getElementById("chatbox");
70
+ const message = document.getElementById("chatMessage");
71
+
72
+ chatbox.style.display = "block";
73
+ message.textContent = "Halo! Tanyakan tentang skill atau project saya.";
74
+ });
75
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  </body>
77
  </html>