body.html
Changed around line 1
+
+
+
+
+
+
+
+
+
+
+
+
Feito com ♥️ no Brasil
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://flipcoin.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Cara ou Coroa | Elegant Coin Flip
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # flipcoin.scroll.pub
+ Website generated by Claude from prompt: queroumsiteparajogarcaraoucoroaqueroumapaginanomodoescurodesignbonitoeminimalistaestilodaapplecomumamoedapratanomeioeumbotoescritojogar
script.js
Changed around line 1
+ 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();
+ }
+ });
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }