commit 5c2304ecfa1f09eaefefd75dc6655b18270d4cbd
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 14:56:42 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..24325a9
--- /dev/null
+++ b/body.html
@@ -0,0 +1,13 @@
+<main class="container">
+ <div class="coin" id="coin">
+ <div class="coin-inner">
+ <div class="side heads"></div>
+ <div class="side tails"></div>
+ </div>
+ </div>
+ <button class="flip-button" id="flipButton">JOGAR</button>
+ <p class="result" id="result"></p>
+</main>
+<footer>
+ <p>Feito com ♥️ no Brasil</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..10edefd
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://flipcoin.scroll.pub
+metaTags
+editButton /edit.html
+title Cara ou Coroa | Elegant Coin Flip
+style.css
+body.html
+script.js
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..e968e9f
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# flipcoin.scroll.pub
+Website generated by Claude from prompt: queroumsiteparajogarcaraoucoroaqueroumapaginanomodoescurodesignbonitoeminimalistaestilodaapplecomumamoedapratanomeioeumbotoescritojogar
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a6c8c0d
--- /dev/null
+++ b/script.js
@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const coin = document.getElementById('coin');
+ const button = document.getElementById('flipButton');
+ const result = document.getElementById('result');
+ let flipping = false;
+
+ const flipCoin = () => {
+ if (flipping) return;
+
+ flipping = true;
+ result.style.opacity = '0';
+
+ const sides = ['cara', 'coroa'];
+ const randomSide = sides[Math.floor(Math.random() * sides.length)];
+ const rotations = 5 + Math.floor(Math.random() * 5);
+ const degrees = rotations * 360 + (randomSide === 'coroa' ? 180 : 0);
+
+ coin.style.transform = `rotateY(${degrees}deg)`;
+
+ setTimeout(() => {
+ result.textContent = randomSide.toUpperCase();
+ result.style.opacity = '1';
+ flipping = false;
+ }, 1000);
+ };
+
+ button.addEventListener('click', flipCoin);
+
+ // Enable keyboard accessibility
+ button.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ flipCoin();
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b025d35
--- /dev/null
+++ b/style.css
@@ -0,0 +1,110 @@
+:root {
+ --bg-color: #1a1a1a;
+ --text-color: #ffffff;
+ --coin-size: min(300px, 80vw);
+ --accent-color: #c0c0c0;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+ gap: 2rem;
+}
+
+.coin {
+ width: var(--coin-size);
+ height: var(--coin-size);
+ position: relative;
+ transform-style: preserve-3d;
+ transition: transform 1s ease-in-out;
+}
+
+.coin-inner {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ transform-style: preserve-3d;
+}
+
+.side {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ backface-visibility: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 2rem;
+ background: linear-gradient(145deg, var(--accent-color), #808080);
+ box-shadow: 0 0 30px rgba(192, 192, 192, 0.3);
+}
+
+.heads {
+ transform: rotateY(0deg);
+}
+
+.tails {
+ transform: rotateY(180deg);
+}
+
+.flip-button {
+ background: transparent;
+ border: 2px solid var(--accent-color);
+ color: var(--accent-color);
+ padding: 1rem 3rem;
+ font-size: 1.2rem;
+ border-radius: 50px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+}
+
+.flip-button:hover {
+ background: var(--accent-color);
+ color: var(--bg-color);
+}
+
+.result {
+ font-size: 1.5rem;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+footer {
+ padding: 1rem;
+ text-align: center;
+ font-size: 0.9rem;
+ opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+ .flip-button {
+ padding: 0.8rem 2rem;
+ font-size: 1rem;
+ }
+
+ .result {
+ font-size: 1.2rem;
+ }
+}