Created
July 14, 2025 12:27
-
-
Save nitobuendia/34ae2e7d82e2e72a4e50b1dac628fb9a to your computer and use it in GitHub Desktop.
Desktop Naming - Single Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Desktop Naming - Single Page</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: 'Inter', sans-serif; | |
| background-color: #fff; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| padding: 1rem; | |
| box-sizing: border-box; | |
| overflow: hidden; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| max-width: 28rem; | |
| padding: 1.5rem; | |
| background-color: #f3f4f6; | |
| border-radius: 0.75rem; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| transition: opacity 0.5s ease-in-out; | |
| } | |
| .input-field { | |
| width: 100%; | |
| padding: 1rem; | |
| margin-bottom: 1.5rem; | |
| color: #1f2937; | |
| background-color: #fff; | |
| border: 1px solid #d1d5db; | |
| border-radius: 0.5rem; | |
| font-size: 1.125rem; | |
| outline: none; | |
| transition: border-color 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .input-field:focus { | |
| border-color: #6b7280; | |
| box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.5); | |
| } | |
| .submit-button { | |
| width: 100%; | |
| padding: 1rem 1.5rem; | |
| background-color: #1f2937; | |
| color: #fff; | |
| font-weight: 600; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| cursor: pointer; | |
| outline: none; | |
| transition: background-color 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .submit-button:hover { | |
| background-color: #374151; | |
| } | |
| .submit-button:focus { | |
| box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.75); | |
| } | |
| .display-text-container { | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| width: 100vw; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| padding: 1rem; | |
| box-sizing: border-box; | |
| text-align: center; | |
| opacity: 0; | |
| transition: opacity 0.5s ease-in-out; | |
| } | |
| .display-text { | |
| color: #1f2937; | |
| font-weight: 800; | |
| line-height: 1.25; | |
| word-break: break-word; | |
| overflow-wrap: break-word; | |
| max-width: 90%; | |
| } | |
| .display-text { | |
| font-size: 4rem; | |
| } | |
| @media (min-width: 640px) { | |
| .display-text { | |
| font-size: 5rem; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .display-text { | |
| font-size: 6rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .display-text { | |
| font-size: 7rem; | |
| } | |
| } | |
| @media (min-width: 1280px) { | |
| .display-text { | |
| font-size: 10rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="form-container" class="container"> | |
| <input type="text" id="text-input" class="input-field" placeholder="Type something..."> | |
| <button id="submit-button" class="submit-button">Display Text</button> | |
| </div> | |
| <div id="display-text-container" class="display-text-container"> | |
| <p id="display-text" class="display-text"></p> | |
| </div> | |
| <script> | |
| const formContainer = document.getElementById('form-container'); | |
| const textInput = document.getElementById('text-input'); | |
| const submitButton = document.getElementById('submit-button'); | |
| const displayTextContainer = document.getElementById('display-text-container'); | |
| const displayTextElement = document.getElementById('display-text'); | |
| const handleSubmit = () => { | |
| const inputText = textInput.value.trim(); | |
| if (inputText) { | |
| displayTextElement.textContent = inputText; | |
| document.title = inputText; | |
| formContainer.style.opacity = '0'; | |
| setTimeout(() => { | |
| formContainer.style.display = 'none'; | |
| displayTextContainer.style.display = 'flex'; | |
| setTimeout(() => { | |
| displayTextContainer.style.opacity = '1'; | |
| }, 50); | |
| }, 500); | |
| } | |
| textInput.value = ''; | |
| }; | |
| submitButton.addEventListener('click', handleSubmit); | |
| textInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| handleSubmit(); | |
| } | |
| }); | |
| window.onload = () => { | |
| textInput.focus(); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a single HTML page (incl. inline CSS and JavaScript), that shows a form with one single text input. Upon submit (or press enter), the text on the input is set on the page as a large text.
The use case for this is to be able to identify different Desktops on Mac, where Spaces (Desktops) cannot be renamed. By showing the large text and leaving it as the visible screen, we know what's the purpose of that Desktop.
This code was generated by AI. Use at your own risk.