Skip to content

Commit 33c5cb5

Browse files
sebastianjnuwusebastianjnuwu
committed
update
1 parent 706d204 commit 33c5cb5

File tree

4 files changed

+161
-5
lines changed

4 files changed

+161
-5
lines changed

‎www/index.html

+34-2
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,45 @@
1515
<audio id="splash" preload="auto">
1616
<source src="./src/audio/start.mp3" type="audio/mp3">
1717
</audio>
18-
18+
<!---
1919
<splash-screen class="d-flex flex-column justify-content-center align-items-center vh-100">
2020
<img src="https://raw.githubusercontent.com/sebastianjnuwu/app/refs/heads/android/android/app/src/main/res/drawable/splash_screen.png" alt="splash-screen" class="icon mb-5">
2121
<h1>Click...</h1>
22-
</splash-screen>
22+
</splash-screen> --->
23+
24+
<ui style="display: none;" class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
25+
26+
<div class="stats-container">
27+
<table class="stats-table">
28+
<tbody>
29+
<tr>
30+
<th><i class="fas fa-mouse-pointer"></i> Clicks</th>
31+
<td id="clicks" class="value">0</td>
32+
</tr>
33+
<tr>
34+
<th><i class="fas fa-stopwatch"></i> Seconds</th>
35+
<td id="seconds" class="value">0</td>
36+
</tr>
37+
<tr>
38+
<th><i class="fas fa-cookie-bite"></i> Cookies</th>
39+
<td id="cookies" class="value">0</td>
40+
</tr>
41+
</tbody>
42+
</table>
43+
</div>
44+
45+
46+
<cookie class="cookie position-relative">
47+
<img src="https://cdn.discordapp.com/attachments/1320553436646866994/1322299238599753818/7_Sem_Titulo_20241227172134.png?ex=67705ea1&is=676f0d21&hm=898542885adabfffe794a3e214beb8cd93b865cb4da0aee5280ed894e2481dfe&"
48+
alt="cookie"
49+
class="icon mb-4">
50+
</cookie>
51+
</ui>
52+
53+
2354

2455
<script src="./src/js/main.js" defer></script>
56+
<script src="./src/js/cookie/game.js" defer></script>
2557
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
2658
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
2759

‎www/src/js/cookie/game.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
$('.cookie').on('click', function (e) {
2+
3+
const a = 1;
4+
5+
const $effect = $(`<div class="click-effect">+${a}</div>`);
6+
7+
const offset = $(this).offset();
8+
const X = e.pageX - offset.left;
9+
const Y = e.pageY - offset.top;
10+
11+
$effect.css({
12+
left: X + 'px',
13+
top: Y + 'px',
14+
position: 'absolute',
15+
});
16+
17+
$(this).append($effect);
18+
19+
$effect
20+
.animate(
21+
{
22+
top: '-=2.5rem',
23+
opacity: 1,
24+
fontSize: '1.5rem',
25+
},
26+
300
27+
)
28+
.animate(
29+
{
30+
opacity: 0,
31+
},
32+
200,
33+
function () {
34+
$(this).remove();
35+
}
36+
);
37+
});

‎www/src/js/main.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
$(() => {
2-
// Splash screen animation
32
$("splash-screen").on("click", () => {
43
$("#splash")[0].play();
5-
64
setTimeout(() => {
75
$("splash-screen").remove();
6+
$("ui").show();
87
}, 1000);
98
});
10-
});
9+
});

‎www/src/styles/css/ui.css

+88
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,91 @@ body {
6868
opacity: 0.8;
6969
}
7070
}
71+
72+
.cookie img {
73+
width: 15rem;
74+
transition: transform 0.02s ease-in-out;
75+
will-change: transform;
76+
position: relative;
77+
}
78+
79+
.cookie img:active {
80+
transform: scale(0.8);
81+
}
82+
83+
.click-effect {
84+
position: absolute;
85+
color: white;
86+
font-size: 2rem;
87+
font-weight: bold;
88+
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
89+
pointer-events: none;
90+
}
91+
92+
/* Font Awesome for icons */
93+
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
94+
95+
/* Estilos para a tabela */
96+
.stats-container {
97+
display: flex;
98+
justify-content: center;
99+
margin-top: 20px;
100+
padding: 0 10px;
101+
}
102+
103+
.stats-table {
104+
width: 100%;
105+
max-width: 400px;
106+
border-collapse: collapse;
107+
text-align: left;
108+
font-family: "Press Start 2P", cursive;
109+
color: var(--text-color);
110+
background-color: var(--table-row-bg);
111+
border: 2px solid var(--table-border);
112+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
113+
}
114+
115+
.stats-table th, .stats-table td {
116+
border: 2px solid var(--table-border);
117+
padding: 10px;
118+
text-align: center;
119+
}
120+
121+
.stats-table th {
122+
background-color: var(--table-header-bg);
123+
font-size: 1em;
124+
}
125+
126+
.stats-table td {
127+
background-color: var(--table-row-bg);
128+
position: relative;
129+
font-size: 1.2em;
130+
}
131+
132+
.stats-table td .label {
133+
font-weight: bold;
134+
}
135+
136+
.stats-table td .value {
137+
display: block;
138+
margin-top: 5px;
139+
}
140+
141+
.stats-table td .animated-number {
142+
position: absolute;
143+
top: 50%;
144+
left: 50%;
145+
transform: translate(-50%, -50%);
146+
animation: rise 1s ease-out;
147+
}
148+
149+
@keyframes rise {
150+
0% {
151+
opacity: 0;
152+
transform: translate(-50%, 50%);
153+
}
154+
100% {
155+
opacity: 1;
156+
transform: translate(-50%, -50%);
157+
}
158+
}

0 commit comments

Comments
 (0)