body.html
Changed around line 1
+
+
+
+
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://caraoucoroa.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Cara ou Coroa - Jogue Agora!
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # 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
script.js
Changed around line 1
+ 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);
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }