\n
\n \n \n\n \n\n \n \n
\n 
body.html
Changed around line 1
+
+
+
+
+
+
+
+
+
+ JOGAR
+
+
+
+
+
+
+
+
+
+
+
+
+
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
prompt.json
Changed around line 1
+ {
+ "id": "msg_01TnttB6MXe1Qy6G8CxJZYjp",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Based on the Portuguese request for a heads or tails coin flip game with dark mode, Apple-style minimalist design, I suggest:\n\n---domain---\nflipcoin.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://flipcoin.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Cara ou Coroa | Elegant Coin Flip\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n\n\n\n---style.css---\n:root {\n --bg: #ffffff;\n --text: #000000;\n --coin: #c0c0c0;\n --coin-edge: #a0a0a0;\n --button: #000000;\n --button-hover: #333333;\n}\n\n[data-theme=\"dark\"] {\n --bg: #000000;\n --text: #ffffff;\n --coin: #d0d0d0;\n --coin-edge: #b0b0b0;\n --button: #ffffff;\n --button-hover: #cccccc;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n transition: background-color 0.3s ease;\n}\n\n.container {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n gap: 3rem;\n}\n\n.coin-wrapper {\n perspective: 1000px;\n}\n\n.coin {\n width: 200px;\n height: 200px;\n position: relative;\n transform-style: preserve-3d;\n transition: transform 1s ease-in;\n}\n\n.side {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n backface-visibility: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2rem;\n background: var(--coin);\n border: 8px solid var(--coin-edge);\n}\n\n.heads {\n transform: rotateY(0deg);\n}\n\n.tails {\n transform: rotateY(180deg);\n}\n\n.flip-button {\n position: relative;\n padding: 1rem 3rem;\n font-size: 1.2rem;\n font-weight: 600;\n border: none;\n border-radius: 30px;\n background: none;\n color: var(--bg);\n cursor: pointer;\n overflow: hidden;\n transition: transform 0.2s ease;\n}\n\n.button-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--button);\n z-index: -1;\n transition: background-color 0.3s ease;\n}\n\n.flip-button:hover .button-bg {\n background: var(--button-hover);\n}\n\n.flip-button:active {\n transform: scale(0.98);\n}\n\n.result {\n font-size: 1.5rem;\n font-weight: 500;\n height: 2rem;\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.3s ease;\n}\n\n.result.show {\n opacity: 1;\n transform: translateY(0);\n}\n\n.theme-toggle {\n position: fixed;\n bottom: 2rem;\n right: 2rem;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n\n.theme-toggle svg {\n fill: var(--text);\n transition: transform 0.3s ease;\n}\n\n.theme-toggle:hover svg {\n transform: rotate(45deg);\n}\n\n@media (max-width: 768px) {\n .coin {\n width: 150px;\n height: 150px;\n }\n \n .flip-button {\n padding: 0.8rem 2.5rem;\n font-size: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const coin = document.getElementById('coin');\n const flipButton = document.getElementById('flipButton');\n const result = document.getElementById('result');\n const themeToggle = document.getElementById('themeToggle');\n \n let isAnimating = false;\n \n const flipCoin = () => {\n if (isAnimating) return;\n \n isAnimating = true;\n result.classList.remove('show');\n \n const random = Math.random();\n const rotations = 5 * 360; // 5 full rotations\n const extraRotation = random > 0.5 ? 180 : 0;\n \n coin.style.transform = `rotateY(${rotations + extraRotation}deg)`;\n \n setTimeout(() => {\n result.textContent = random > 0.5 ? 'COROA' : 'CARA';\n result.classList.add('show');\n isAnimating = false;\n }, 1000);\n };\n \n const toggleTheme = () => {\n const currentTheme = document.documentElement.getAttribute('data-theme');\n const newTheme = currentTheme === 'dark' ? 'light' : 'dark';\n document.documentElement.setAttribute('data-theme', newTheme);\n localStorage.setItem('theme', newTheme);\n };\n \n // Initialize theme\n const savedTheme = localStorage.getItem('theme') || 'light';\n document.documentElement.setAttribute('data-theme', savedTheme);\n \n // Event listeners\n flipButton.addEventListener('click', flipCoin);\n themeToggle.addEventListener('click', toggleTheme);\n \n // Enable keyboard control\n document.addEventListener('keypress', (e) => {\n if (e.code === 'Space') flipCoin();\n });\n});\n\n---end---\n\nThis implementation creates a beautiful, minimalist coin flip game with:\n- Dark/light mode toggle with persistence\n- Smooth 3D coin flip animation\n- Responsive design\n- Keyboard controls (spacebar)\n- Elegant typography and animations\n- Accessible controls\n- Clean, semantic HTML\n- Modern CSS with custom properties\n- Smooth transitions and interactions\n- Professional polish and attention to detail\n\nThe design follows Apple's minimalist aesthetic while maintaining functionality and user experience. The coin appears silver/metallic and the animations are smooth and satisfying."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 326,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2027
+ }
+ }
readme.scroll
Changed around line 1
+ # flipcoin1.scroll.pub
+ Website generated by Claude from prompt: queroumsiteparajogarcaraoucoroaqueroumapaginanomodoescurodesignbonitoeminimalistaestilodaapplecomumamoedapratanomeioeumbotoescritojogar
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const coin = document.getElementById('coin');
+ const flipButton = document.getElementById('flipButton');
+ const result = document.getElementById('result');
+ const themeToggle = document.getElementById('themeToggle');
+
+ let isAnimating = false;
+
+ const flipCoin = () => {
+ if (isAnimating) return;
+
+ isAnimating = true;
+ result.classList.remove('show');
+
+ const random = Math.random();
+ const rotations = 5 * 360; // 5 full rotations
+ const extraRotation = random > 0.5 ? 180 : 0;
+
+ coin.style.transform = `rotateY(${rotations + extraRotation}deg)`;
+
+ setTimeout(() => {
+ result.textContent = random > 0.5 ? 'COROA' : 'CARA';
+ result.classList.add('show');
+ isAnimating = false;
+ }, 1000);
+ };
+
+ const toggleTheme = () => {
+ const currentTheme = document.documentElement.getAttribute('data-theme');
+ const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+ document.documentElement.setAttribute('data-theme', newTheme);
+ localStorage.setItem('theme', newTheme);
+ };
+
+ // Initialize theme
+ const savedTheme = localStorage.getItem('theme') || 'light';
+ document.documentElement.setAttribute('data-theme', savedTheme);
+
+ // Event listeners
+ flipButton.addEventListener('click', flipCoin);
+ themeToggle.addEventListener('click', toggleTheme);
+
+ // Enable keyboard control
+ document.addEventListener('keypress', (e) => {
+ if (e.code === 'Space') flipCoin();
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --bg: #ffffff;
+ --text: #000000;
+ --coin: #c0c0c0;
+ --coin-edge: #a0a0a0;
+ --button: #000000;
+ --button-hover: #333333;
+ }
+
+ [data-theme="dark"] {
+ --bg: #000000;
+ --text: #ffffff;
+ --coin: #d0d0d0;
+ --coin-edge: #b0b0b0;
+ --button: #ffffff;
+ --button-hover: #cccccc;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ transition: background-color 0.3s ease;
+ }
+
+ .container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+ gap: 3rem;
+ }
+
+ .coin-wrapper {
+ perspective: 1000px;
+ }
+
+ .coin {
+ width: 200px;
+ height: 200px;
+ position: relative;
+ transform-style: preserve-3d;
+ transition: transform 1s ease-in;
+ }
+
+ .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: var(--coin);
+ border: 8px solid var(--coin-edge);
+ }
+
+ .heads {
+ transform: rotateY(0deg);
+ }
+
+ .tails {
+ transform: rotateY(180deg);
+ }
+
+ .flip-button {
+ position: relative;
+ padding: 1rem 3rem;
+ font-size: 1.2rem;
+ font-weight: 600;
+ border: none;
+ border-radius: 30px;
+ background: none;
+ color: var(--bg);
+ cursor: pointer;
+ overflow: hidden;
+ transition: transform 0.2s ease;
+ }
+
+ .button-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--button);
+ z-index: -1;
+ transition: background-color 0.3s ease;
+ }
+
+ .flip-button:hover .button-bg {
+ background: var(--button-hover);
+ }
+
+ .flip-button:active {
+ transform: scale(0.98);
+ }
+
+ .result {
+ font-size: 1.5rem;
+ font-weight: 500;
+ height: 2rem;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.3s ease;
+ }
+
+ .result.show {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .theme-toggle {
+ position: fixed;
+ bottom: 2rem;
+ right: 2rem;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0.5rem;
+ }
+
+ .theme-toggle svg {
+ fill: var(--text);
+ transition: transform 0.3s ease;
+ }
+
+ .theme-toggle:hover svg {
+ transform: rotate(45deg);
+ }
+
+ @media (max-width: 768px) {
+ .coin {
+ width: 150px;
+ height: 150px;
+ }
+
+ .flip-button {
+ padding: 0.8rem 2.5rem;
+ font-size: 1rem;
+ }
+ }