Skip to content

Commit 33dc9df

Browse files
feat: add styles
1 parent 824a124 commit 33dc9df

File tree

9 files changed

+93
-91
lines changed

9 files changed

+93
-91
lines changed

www/index.html

+16-26
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,26 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
66
<title>Cookie</title>
77
<link rel="shortcut icon" href="https://raw.githubusercontent.com/sebastianjnuwu/app/refs/heads/android/android/app/src/main/res/drawable/splash_screen.png" type="image/x-icon">
8-
<link rel="stylesheet" href="./res/styles/css/ui.css">
8+
<link rel="stylesheet" href="./src/styles/css/ui.css">
9+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
910
<script type="module" src="./main.ts"></script>
1011
</head>
1112

1213
<body class="ui-cookie">
13-
<splash-screen>
14-
<div class="d-flex flex-column justify-content-center align-items-center vh-100">
15-
<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">
16-
</div>
17-
</splash-screen>
18-
19-
<div class="d-flex flex-column justify-content-center align-items-center">
20-
<button id="show_banner" class="btn btn-custom">
21-
<i class="fas fa-image"></i> Mostrar Banner
22-
</button>
23-
24-
<button id="hide_banner" class="btn btn-custom">
25-
<i class="fas fa-eye-slash"></i> Esconder Banner
26-
</button>
27-
28-
<button id="show_video" class="btn btn-custom">
29-
<i class="fas fa-video"></i> Mostrar Video
30-
</button>
31-
32-
<button id="award" class="btn btn-custom">
33-
<i class="fas fa-trophy"></i> Mostrar Premio
34-
</button>
35-
</div>
14+
15+
<audio id="splash" preload="auto">
16+
<source src="./src/audio/start.mp3" type="audio/mp3"></audio>
17+
18+
<splash-screen>
19+
<div class="d-flex flex-column justify-content-center align-items-center vh-100">
20+
<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">
21+
<h1>Click...</h1>
22+
</div>
23+
</splash-screen>
3624

37-
<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>
38-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
25+
<script src="./src/js/main.js" defer></script>
26+
<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>
27+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
28+
3929
</body>
4030
</html>

www/main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import "./res/styles/scss/ui.scss";
22
import "./res/plugins/admob.ts";
3-
import "./res/plugins/push-notifications.ts";
3+
import "./res/plugins/push-notifications.ts";

www/res/styles/css/ui.css

-64
This file was deleted.

www/src/audio/start.mp3

2.32 MB
Binary file not shown.

www/src/js/main.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
$(() => {
2+
3+
$("splash-screen img").on("click", () => {
4+
$('#splash')[0].play();
5+
$("splash-screen h1").slideUp()
6+
$("splash-screen").slideUp(5000)
7+
});
8+
9+
});
File renamed without changes.
File renamed without changes.

www/src/styles/css/ui.css

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
2+
3+
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
4+
5+
@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css");
6+
7+
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
8+
9+
:root {
10+
--layout: #fffbde;
11+
--text-color: #333;
12+
}
13+
14+
.ui-cookie {
15+
padding: 0;
16+
margin: 0;
17+
font-family: Arial, sans-serif;
18+
font-size: 14px;
19+
color: var(--text-color);
20+
background-color: var(--layout);
21+
}
22+
23+
.ui-cookie splash-screen .icon {
24+
width: 15rem;
25+
animation: splash-screen 2s infinite ease-in-out;
26+
}
27+
28+
.ui-cookie splash-screen h1 {
29+
font-family: "Press Start 2P", cursive;
30+
font-size: 1.5rem;
31+
color: #fdd388;
32+
font-weight: bold;
33+
text-shadow: 1px 1px #7c3d18;
34+
cursor: pointer;
35+
animation: reveal forwards ease-out;
36+
}
37+
38+
@keyframes reveal {
39+
0% {
40+
opacity: 0;
41+
transform: translateY(-20px);
42+
}
43+
100% {
44+
opacity: 1;
45+
transform: translateY(0);
46+
}
47+
}
48+
49+
@keyframes splash-screen {
50+
0%,
51+
100% {
52+
transform: translateY(0);
53+
opacity: 1;
54+
}
55+
25% {
56+
transform: translateY(-8px);
57+
opacity: 0.8;
58+
}
59+
50% {
60+
transform: translateY(-15px);
61+
opacity: 1;
62+
}
63+
75% {
64+
transform: translateY(-8px);
65+
opacity: 0.8;
66+
}
67+
}
File renamed without changes.

0 commit comments

Comments
 (0)