commit f27a0507517d788feb5e990873d9b1233929ade7
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 17:14:48 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..b62de00
--- /dev/null
+++ b/body.html
@@ -0,0 +1,23 @@
+<main class="container">
+ <div class="coin-wrapper">
+ <div class="coin" id="coin">
+ <div class="side heads"></div>
+ <div class="side tails"></div>
+ </div>
+ </div>
+
+ <button class="flip-button" id="flipButton">
+ <span>JOGAR</span>
+ <div class="button-bg"></div>
+ </button>
+
+ <div class="result" id="result"></div>
+</main>
+
+<footer>
+ <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
+ <svg viewBox="0 0 24 24" width="24" height="24">
+ <path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/>
+ </svg>
+ </button>
+</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/prompt.json b/prompt.json
new file mode 100644
index 0000000..73e8b86
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "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<main class=\"container\">\n <div class=\"coin-wrapper\">\n <div class=\"coin\" id=\"coin\">\n <div class=\"side heads\"></div>\n <div class=\"side tails\"></div>\n </div>\n </div>\n \n <button class=\"flip-button\" id=\"flipButton\">\n <span>JOGAR</span>\n <div class=\"button-bg\"></div>\n </button>\n\n <div class=\"result\" id=\"result\"></div>\n</main>\n\n<footer>\n <button class=\"theme-toggle\" id=\"themeToggle\" aria-label=\"Toggle dark mode\">\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n <path d=\"M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z\"/>\n </svg>\n </button>\n</footer>\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
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7b04462
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# flipcoin1.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..70c31e7
--- /dev/null
+++ b/script.js
@@ -0,0 +1,47 @@
+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();
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ca2f53f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,155 @@
+: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;
+ }
+}