commit 50e28ef53db376be4a20f2b1b079b31cd5499ba7
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 14:51:21 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..2df262f
--- /dev/null
+++ b/body.html
@@ -0,0 +1,7 @@
+<main class="container">
+ <div class="coin" id="coin">
+ <div class="front"></div>
+ <div class="back"></div>
+ </div>
+ <button class="play-button" id="playButton">JOGAR</button>
+</main>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..f3c53e0
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://caraoucoroa.scroll.pub
+metaTags
+editButton /edit.html
+title Cara ou Coroa - Jogue Agora!
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..03b8a44
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# caraoucoroa.scroll.pub
+Website generated by DeepSeek from prompt: faça um site pra mim de cara ou coroa, com uma moeda no centro, um site no modo escuro, e um botão escrito JOGAR
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..848c9ef
--- /dev/null
+++ b/script.js
@@ -0,0 +1,14 @@
+const coin = document.getElementById('coin');
+const playButton = document.getElementById('playButton');
+
+playButton.addEventListener('click', () => {
+ const random = Math.random();
+ const result = random < 0.5 ? 'cara' : 'coroa';
+
+ coin.classList.add('flip');
+
+ setTimeout(() => {
+ coin.classList.remove('flip');
+ alert(`Resultado: ${result.toUpperCase()}!`);
+ }, 3000);
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..de37c5e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,91 @@
+:root {
+ --primary: #ffd700;
+ --background: #1a1a1a;
+ --text: #ffffff;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: var(--background);
+ color: var(--text);
+ font-family: 'Segoe UI', sans-serif;
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.container {
+ text-align: center;
+}
+
+.coin {
+ width: 150px;
+ height: 150px;
+ position: relative;
+ margin: 0 auto 2rem;
+ transform-style: preserve-3d;
+ transition: transform 1s ease-out;
+}
+
+.front, .back {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ position: absolute;
+ backface-visibility: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 2rem;
+ font-weight: bold;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+.front {
+ background-color: var(--primary);
+ transform: rotateY(0deg);
+}
+
+.back {
+ background-color: var(--primary);
+ transform: rotateY(180deg);
+}
+
+.play-button {
+ background-color: var(--primary);
+ color: var(--background);
+ border: none;
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ font-weight: bold;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.play-button:hover {
+ background-color: #ffc800;
+}
+
+@keyframes flip {
+ 0% { transform: rotateY(0deg); }
+ 50% { transform: rotateY(1800deg); }
+ 100% { transform: rotateY(3600deg); }
+}
+
+.flip {
+ animation: flip 3s ease-out;
+}
+
+@media (max-width: 480px) {
+ .coin {
+ width: 120px;
+ height: 120px;
+ }
+}
\ No newline at end of file