Tabs: add v-cloak safety to prevent all sections showing before Vue mounts; fix Unicode Escape label; defensive CSS

This commit is contained in:
EP
2025-08-20 19:01:19 -07:00
parent 0840bc00e6
commit 8357ec9f31
3 changed files with 5 additions and 2 deletions
+3
View File
@@ -229,6 +229,9 @@ h1, h2, h3, h4, h5 {
padding: 20px 0;
}
/* Safety: hide all tab-content until Vue mounts and activates one */
[v-cloak] .tab-content { display: none; }
/* Input and output sections */
.input-section,
.output-section,
+1 -1
View File
@@ -12,7 +12,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div id="app" class="container">
<div id="app" class="container" v-cloak>
<header>
<div class="logo">
<h1>🐉️︎︎︎︎︎︎︎️︎︎︎️︎︎︎️︎️️ P4RS3LT0NGV3</h1>
+1 -1
View File
@@ -19,7 +19,7 @@ window.app = new Vue({
visual: ['Rainbow Text', 'Strikethrough', 'Underline', 'Reverse Text', 'Alternating Case', 'Reverse Words', 'Random Case', 'Swap Case', 'Title Case', 'Sentence Case', 'Emoji Speak'],
format: ['Pig Latin', 'Leetspeak', 'Ubbi Dubbi', 'Rövarspråket', 'NATO Phonetic', 'camelCase', 'snake_case', 'kebab-case', 'Squash Whitespace'],
unicode: ['Invisible Text', 'Upside Down', 'Full Width', 'Small Caps', 'Bubble', 'Braille', 'Greek Letters', 'Wingdings', 'Superscript', 'Subscript', 'Regional Indicator Letters', 'Fraktur', 'Cyrillic Stylized', 'Katakana', 'Hiragana', 'Roman Numerals'],
special: ['Medieval', 'Cursive', 'Monospace', 'Double-Struck', 'Elder Futhark', 'Mirror Text', 'Zalgo', 'Unicode Normalize (NFC)', 'Unicode Normalize (NFD)', 'Strip Diacritics', 'Unicode Escape (\u)'],
special: ['Medieval', 'Cursive', 'Monospace', 'Double-Struck', 'Elder Futhark', 'Mirror Text', 'Zalgo', 'Unicode Normalize (NFC)', 'Unicode Normalize (NFD)', 'Strip Diacritics', 'Unicode Escape (\\u)'],
fantasy: ['Quenya (Tolkien Elvish)', 'Tengwar Script', 'Klingon', 'Aurebesh (Star Wars)', 'Dovahzul (Dragon)'],
ancient: ['Hieroglyphics', 'Ogham (Celtic)', 'Semaphore Flags'],
technical: ['Brainfuck', 'Mathematical Notation', 'Chemical Symbols'],