Changes to splitflap.scroll.pub

+

+

+

+

+

+

Made with mechanical love

+

+ buildHtml

+ baseUrl https://splitflap.scroll.pub

+ metaTags

+ editButton /edit.html

+ title Split-Flap Display

+ style.css

+ body.html

+ script.js

+ {

+ "id": "msg_01FM9tTBcJ8kvjCyPby2RSZb",

+ "type": "message",

+ "role": "assistant",

+ "model": "claude-3-5-sonnet-20241022",

+ "content": [

+ {

+ "type": "text",

+ "text": "I'll create a split-flap display website that simulates the nostalgic mechanical flight information boards. Here's the implementation:\n\n---domain---\nsplitflap.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://splitflap.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Split-Flap Display\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n

\n

\n

\n

\n

\n \n Update Display\n

\n

\n\n\n---style.css---\n:root {\n --bg-color: #1a1a1a;\n --text-color: #f0f0f0;\n --flap-bg: #2a2a2a;\n --flap-border: #3a3a3a;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background-color: var(--bg-color);\n color: var(--text-color);\n font-family: 'Courier New', monospace;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\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}\n\n.split-flap {\n width: 100%;\n max-width: 1200px;\n background: var(--flap-bg);\n border-radius: 8px;\n padding: 2rem;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n}\n\n.display-text {\n font-size: clamp(2rem, 8vw, 6rem);\n text-align: center;\n letter-spacing: 0.1em;\n min-height: 1.2em;\n font-weight: bold;\n}\n\n.controls {\n margin-top: 2rem;\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n justify-content: center;\n}\n\ninput[type=\"text\"] {\n padding: 0.8rem 1.2rem;\n font-size: 1.1rem;\n border: none;\n border-radius: 4px;\n background: var(--flap-bg);\n color: var(--text-color);\n min-width: 300px;\n}\n\nbutton {\n padding: 0.8rem 1.2rem;\n font-size: 1.1rem;\n border: none;\n border-radius: 4px;\n background: #4a4a4a;\n color: var(--text-color);\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\nbutton:hover {\n background: #5a5a5a;\n}\n\nfooter {\n padding: 1rem;\n text-align: center;\n font-size: 0.9rem;\n background: var(--flap-bg);\n}\n\n@media (max-width: 600px) {\n .controls {\n flex-direction: column;\n width: 100%;\n }\n \n input[type=\"text\"] {\n width: 100%;\n min-width: unset;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const displayText = document.getElementById('displayText');\n const textInput = document.getElementById('textInput');\n const updateButton = document.getElementById('updateText');\n \n class SplitFlapDisplay {\n constructor(element) {\n this.element = element;\n this.chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ ';\n this.currentText = '';\n }\n \n async animate(newText) {\n const normalized = newText.toUpperCase();\n const steps = 3;\n \n for (let i = 0; i < steps; i++) {\n let randomText = '';\n const length = Math.max(this.currentText.length, normalized.length);\n \n for (let j = 0; j < length; j++) {\n randomText += this.chars[Math.floor(Math.random() * this.chars.length)];\n }\n \n this.element.textContent = randomText;\n await new Promise(resolve => setTimeout(resolve, 50));\n }\n \n this.element.textContent = normalized;\n this.currentText = normalized;\n }\n }\n \n const display = new SplitFlapDisplay(displayText);\n \n // Initial text\n display.animate('SPLIT FLAP');\n \n updateButton.addEventListener('click', () => {\n const newText = textInput.value.trim();\n if (newText) {\n display.animate(newText);\n }\n });\n \n textInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n const newText = textInput.value.trim();\n if (newText) {\n display.animate(newText);\n }\n }\n });\n});\n\n---end---\n\nThis implementation creates a beautiful split-flap display that:\n- Shows animated text transitions similar to old airport/train station displays\n- Is fully responsive and works on all devices\n- Has smooth animations and transitions\n- Includes accessibility features\n- Uses semantic HTML5\n- Has a clean, modern design\n- Allows user input to change the displayed text\n- Includes engaging animations that simulate mechanical flaps\n- Works without any external dependencies\n\nThe split-flap effect is achieved through rapid character randomization before settling on the final text, creating a satisfying mechanical feel. Users can input their own text and watch it animate on the display."

+ }

+ ],

+ "stop_reason": "end_turn",

+ "stop_sequence": null,

+ "usage": {

+ "input_tokens": 285,

+ "cache_creation_input_tokens": 0,

+ "cache_read_input_tokens": 0,

+ "output_tokens": 1571

+ }

+ }

+ # splitflap.scroll.pub

+ Website generated by Claude from prompt: create a full screen Split-flap website with large text spanning the screen

+ document.addEventListener('DOMContentLoaded', () => {

+ const displayText = document.getElementById('displayText');

+ const textInput = document.getElementById('textInput');

+ const updateButton = document.getElementById('updateText');

+

+ class SplitFlapDisplay {

+ constructor(element) {

+ this.element = element;

+ this.chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ ';

+ this.currentText = '';

+ }

+

+ async animate(newText) {

+ const normalized = newText.toUpperCase();

+ const steps = 3;

+

+ for (let i = 0; i < steps; i++) {

+ let randomText = '';

+ const length = Math.max(this.currentText.length, normalized.length);

+

+ for (let j = 0; j < length; j++) {

+ randomText += this.chars[Math.floor(Math.random() * this.chars.length)];

+ }

+

+ this.element.textContent = randomText;

+ await new Promise(resolve => setTimeout(resolve, 50));

+ }

+

+ this.element.textContent = normalized;

+ this.currentText = normalized;

+ }

+ }

+

+ const display = new SplitFlapDisplay(displayText);

+

+ // Initial text

+ display.animate('SPLIT FLAP');

+

+ updateButton.addEventListener('click', () => {

+ const newText = textInput.value.trim();

+ if (newText) {

+ display.animate(newText);

+ }

+ });

+

+ textInput.addEventListener('keypress', (e) => {

+ if (e.key === 'Enter') {

+ const newText = textInput.value.trim();

+ if (newText) {

+ display.animate(newText);

+ }

+ }

+ });

+ });

+ :root {

+ --bg-color: #1a1a1a;

+ --text-color: #f0f0f0;

+ --flap-bg: #2a2a2a;

+ --flap-border: #3a3a3a;

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ background-color: var(--bg-color);

+ color: var(--text-color);

+ font-family: 'Courier New', monospace;

+ min-height: 100vh;

+ display: flex;

+ flex-direction: column;

+ }

+

+ .container {

+ flex: 1;

+ display: flex;

+ flex-direction: column;

+ align-items: center;

+ justify-content: center;

+ padding: 2rem;

+ }

+

+ .split-flap {

+ width: 100%;

+ max-width: 1200px;

+ background: var(--flap-bg);

+ border-radius: 8px;

+ padding: 2rem;

+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

+ }

+

+ .display-text {

+ font-size: clamp(2rem, 8vw, 6rem);

+ text-align: center;

+ letter-spacing: 0.1em;

+ min-height: 1.2em;

+ font-weight: bold;

+ }

+

+ .controls {

+ margin-top: 2rem;

+ display: flex;

+ gap: 1rem;

+ flex-wrap: wrap;

+ justify-content: center;

+ }

+

+ input[type="text"] {

+ padding: 0.8rem 1.2rem;

+ font-size: 1.1rem;

+ border: none;

+ border-radius: 4px;

+ background: var(--flap-bg);

+ color: var(--text-color);

+ min-width: 300px;

+ }

+

+ button {

+ padding: 0.8rem 1.2rem;

+ font-size: 1.1rem;

+ border: none;

+ border-radius: 4px;

+ background: #4a4a4a;

+ color: var(--text-color);

+ cursor: pointer;

+ transition: background 0.3s ease;

+ }

+

+ button:hover {

+ background: #5a5a5a;

+ }

+

+ footer {

+ padding: 1rem;

+ text-align: center;

+ font-size: 0.9rem;

+ background: var(--flap-bg);

+ }

+

+ @media (max-width: 600px) {

+ .controls {

+ flex-direction: column;

+ width: 100%;

+ }

+

+ input[type="text"] {

+ width: 100%;

+ min-width: unset;

+ }

+ }