├── .gitignore
├── wrangler.jsonc
├── icon.svg
├── manifest.json
├── style.css
├── script.js
├── tr
    └── index.html
├── es
    └── index.html
├── it
    └── index.html
├── pt
    └── index.html
├── fr
    └── index.html
├── de
    └── index.html
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | .env
5 | 


--------------------------------------------------------------------------------
/wrangler.jsonc:
--------------------------------------------------------------------------------
1 | {
2 |     "name": "convertcase",
3 |     "compatibility_date": "2025-11-29",
4 |     "assets": {
5 |         "directory": "." // <-- This tells Wrangler to use the root folder
6 |     }
7 | }


--------------------------------------------------------------------------------
/icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2 |   <rect width="512" height="512" rx="100" fill="#2563eb"/>
3 |   <text x="50%" y="50%" font-family="sans-serif" font-size="256" font-weight="bold" fill="white" text-anchor="middle" dy=".35em">Aa</text>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Convert Case",
 3 |   "short_name": "ConvertCase",
 4 |   "start_url": "./index.html",
 5 |   "display": "standalone",
 6 |   "background_color": "#ffffff",
 7 |   "theme_color": "#2563eb",
 8 |   "icons": [
 9 |     {
10 |       "src": "icon.svg",
11 |       "sizes": "512x512",
12 |       "type": "image/svg+xml"
13 |     }
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --bg-color: #f8fafc;
  3 |     --text-color: #1e293b;
  4 |     --primary-color: #2563eb;
  5 |     --primary-hover: #1d4ed8;
  6 |     --secondary-bg: #ffffff;
  7 |     --border-color: #e2e8f0;
  8 |     --accent-color: #64748b;
  9 |     --danger-color: #dc2626;
 10 |     --danger-hover: #b91c1c;
 11 |     --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 12 |     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 13 |     --radius: 0.75rem;
 14 |     --font-family: 'Inter', sans-serif;
 15 | }
 16 | 
 17 | * {
 18 |     box-sizing: border-box;
 19 |     margin: 0;
 20 |     padding: 0;
 21 | }
 22 | 
 23 | body {
 24 |     font-family: var(--font-family);
 25 |     background-color: var(--bg-color);
 26 |     color: var(--text-color);
 27 |     line-height: 1.5;
 28 |     min-height: 100vh;
 29 |     display: flex;
 30 |     flex-direction: column;
 31 |     align-items: center;
 32 |     padding: 2rem;
 33 | }
 34 | 
 35 | .app-container {
 36 |     width: 100%;
 37 |     max-width: 1000px;
 38 |     margin: 0 auto;
 39 | }
 40 | 
 41 | .app-header {
 42 |     text-align: center;
 43 |     margin-bottom: 2rem;
 44 | }
 45 | 
 46 | .app-header h1 {
 47 |     font-size: 2.5rem;
 48 |     font-weight: 700;
 49 |     color: var(--text-color);
 50 |     margin-bottom: 0.5rem;
 51 |     letter-spacing: -0.025em;
 52 | }
 53 | 
 54 | .app-header p {
 55 |     color: var(--accent-color);
 56 |     font-size: 1.1rem;
 57 | }
 58 | 
 59 | .converter-wrapper {
 60 |     background-color: var(--secondary-bg);
 61 |     border-radius: var(--radius);
 62 |     box-shadow: var(--shadow-md);
 63 |     padding: 1.5rem;
 64 |     border: 1px solid var(--border-color);
 65 |     margin-bottom: 3rem;
 66 | }
 67 | 
 68 | .toolbar {
 69 |     display: flex;
 70 |     flex-wrap: nowrap;
 71 |     gap: 0.5rem;
 72 |     margin-bottom: 1.5rem;
 73 |     justify-content: center;
 74 |     overflow-x: auto;
 75 |     padding-bottom: 0.5rem;
 76 |     /* Space for scrollbar if needed */
 77 |     -webkit-overflow-scrolling: touch;
 78 | }
 79 | 
 80 | .btn {
 81 |     padding: 0.5rem 0.75rem;
 82 |     border-radius: 0.5rem;
 83 |     font-weight: 500;
 84 |     font-size: 0.85rem;
 85 |     cursor: pointer;
 86 |     transition: all 0.2s ease;
 87 |     border: 1px solid transparent;
 88 |     font-family: var(--font-family);
 89 |     white-space: nowrap;
 90 |     flex-shrink: 0;
 91 |     /* Prevent buttons from squishing */
 92 | }
 93 | 
 94 | .btn-primary {
 95 |     background-color: var(--primary-color);
 96 |     color: white;
 97 | }
 98 | 
 99 | .btn-primary:hover {
100 |     background-color: var(--primary-hover);
101 |     transform: translateY(-1px);
102 |     box-shadow: var(--shadow-sm);
103 | }
104 | 
105 | .btn-secondary {
106 |     background-color: white;
107 |     color: var(--text-color);
108 |     border-color: var(--border-color);
109 | }
110 | 
111 | .btn-secondary:hover {
112 |     background-color: var(--bg-color);
113 |     border-color: var(--accent-color);
114 | }
115 | 
116 | .btn-danger {
117 |     background-color: white;
118 |     color: var(--danger-color);
119 |     border-color: var(--border-color);
120 | }
121 | 
122 | .btn-danger:hover {
123 |     background-color: #fef2f2;
124 |     border-color: var(--danger-color);
125 | }
126 | 
127 | .input-area {
128 |     margin-bottom: 1.5rem;
129 | }
130 | 
131 | textarea {
132 |     width: 100%;
133 |     height: 400px;
134 |     padding: 1.25rem;
135 |     border: 1px solid var(--border-color);
136 |     border-radius: var(--radius);
137 |     font-family: var(--font-family);
138 |     font-size: 1rem;
139 |     resize: vertical;
140 |     outline: none;
141 |     transition: border-color 0.2s;
142 |     background-color: #fafafa;
143 | }
144 | 
145 | textarea:focus {
146 |     border-color: var(--primary-color);
147 |     background-color: white;
148 |     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
149 | }
150 | 
151 | .action-bar {
152 |     display: flex;
153 |     justify-content: space-between;
154 |     align-items: center;
155 |     flex-wrap: wrap;
156 |     gap: 1.5rem;
157 |     padding-top: 1rem;
158 |     border-top: 1px solid var(--border-color);
159 | }
160 | 
161 | .stats {
162 |     display: flex;
163 |     align-items: center;
164 |     gap: 0.75rem;
165 |     color: var(--accent-color);
166 |     font-size: 0.9rem;
167 |     font-weight: 500;
168 | }
169 | 
170 | .stats span.separator {
171 |     color: var(--border-color);
172 | }
173 | 
174 | .actions {
175 |     display: flex;
176 |     gap: 0.75rem;
177 | }
178 | 
179 | /* SEO Content Section */
180 | .content-section {
181 |     margin-top: 3rem;
182 |     color: var(--text-color);
183 | }
184 | 
185 | .content-section article {
186 |     margin-bottom: 2rem;
187 | }
188 | 
189 | .content-section h2 {
190 |     font-size: 1.5rem;
191 |     font-weight: 600;
192 |     margin-bottom: 0.75rem;
193 |     color: var(--text-color);
194 | }
195 | 
196 | .content-section p {
197 |     color: var(--accent-color);
198 |     line-height: 1.7;
199 |     margin-bottom: 1rem;
200 | }
201 | 
202 | .app-footer {
203 |     text-align: center;
204 |     margin-top: 3rem;
205 |     color: var(--accent-color);
206 |     font-size: 0.875rem;
207 |     padding-bottom: 2rem;
208 |     display: flex;
209 |     flex-direction: column;
210 |     align-items: center;
211 |     gap: 1rem;
212 | }
213 | 
214 | .language-switcher select {
215 |     appearance: none;
216 |     -webkit-appearance: none;
217 |     -moz-appearance: none;
218 |     padding: 0.5rem 2.5rem 0.5rem 1rem;
219 |     border-radius: 0.5rem;
220 |     border: 1px solid var(--border-color);
221 |     background-color: white;
222 |     color: var(--text-color);
223 |     font-family: var(--font-family);
224 |     font-size: 0.9rem;
225 |     cursor: pointer;
226 |     outline: none;
227 |     transition: border-color 0.2s;
228 |     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
229 |     background-repeat: no-repeat;
230 |     background-position: right 0.7rem center;
231 |     background-size: 1em;
232 | }
233 | 
234 | .language-switcher select:hover {
235 |     border-color: var(--accent-color);
236 | }
237 | 
238 | .language-switcher select:focus {
239 |     border-color: var(--primary-color);
240 | }
241 | 
242 | @media (max-width: 768px) {
243 |     body {
244 |         padding: 1rem;
245 |     }
246 | 
247 |     .action-bar {
248 |         flex-direction: column;
249 |         align-items: stretch;
250 |     }
251 | 
252 |     .stats {
253 |         justify-content: center;
254 |         flex-wrap: wrap;
255 |     }
256 | 
257 |     .actions {
258 |         justify-content: center;
259 |     }
260 | 
261 |     .toolbar {
262 |         justify-content: flex-start;
263 |     }
264 | }


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | document.addEventListener('DOMContentLoaded', () => {
  2 |     const textInput = document.getElementById('text-input');
  3 |     const charCount = document.getElementById('char-count');
  4 |     const wordCount = document.getElementById('word-count');
  5 |     const sentenceCount = document.getElementById('sentence-count');
  6 |     const lineCount = document.getElementById('line-count');
  7 |     const lang = document.documentElement.lang || 'en';
  8 | 
  9 |     // Stats Update
 10 |     function updateStats() {
 11 |         const text = textInput.value;
 12 | 
 13 |         // Character Count
 14 |         charCount.textContent = text.length;
 15 | 
 16 |         // Word Count
 17 |         const words = text.trim() === '' ? 0 : text.trim().split(/\s+/).length;
 18 |         wordCount.textContent = words;
 19 | 
 20 |         // Sentence Count
 21 |         // Matches . ! ? followed by space or end of string
 22 |         const sentences = text.trim() === '' ? 0 : text.split(/[.!?]+(\s|$)/).filter(s => s.trim().length > 0).length;
 23 |         sentenceCount.textContent = sentences;
 24 | 
 25 |         // Line Count
 26 |         const lines = text === '' ? 0 : text.split(/\n/).length;
 27 |         lineCount.textContent = lines;
 28 |     }
 29 | 
 30 |     textInput.addEventListener('input', updateStats);
 31 | 
 32 |     // Conversion Functions
 33 |     function setContent(newText) {
 34 |         textInput.value = newText;
 35 |         updateStats();
 36 |     }
 37 | 
 38 |     document.getElementById('sentence').addEventListener('click', () => {
 39 |         const text = textInput.value.toLocaleLowerCase(lang);
 40 |         const newText = text.replace(/(^\s*\w|[.!?]\s*\w)/g, c => c.toLocaleUpperCase(lang));
 41 |         setContent(newText);
 42 |     });
 43 | 
 44 |     document.getElementById('lower').addEventListener('click', () => {
 45 |         setContent(textInput.value.toLocaleLowerCase(lang));
 46 |     });
 47 | 
 48 |     document.getElementById('upper').addEventListener('click', () => {
 49 |         setContent(textInput.value.toLocaleUpperCase(lang));
 50 |     });
 51 | 
 52 |     document.getElementById('capitalized').addEventListener('click', () => {
 53 |         const text = textInput.value.toLocaleLowerCase(lang);
 54 |         const newText = text.replace(/\b\w/g, c => c.toLocaleUpperCase(lang));
 55 |         setContent(newText);
 56 |     });
 57 | 
 58 |     document.getElementById('alternating').addEventListener('click', () => {
 59 |         const text = textInput.value;
 60 |         let newText = '';
 61 |         for (let i = 0; i < text.length; i++) {
 62 |             if (i % 2 === 0) {
 63 |                 newText += text[i].toLocaleLowerCase(lang);
 64 |             } else {
 65 |                 newText += text[i].toLocaleUpperCase(lang);
 66 |             }
 67 |         }
 68 |         setContent(newText);
 69 |     });
 70 | 
 71 |     document.getElementById('title').addEventListener('click', () => {
 72 |         const text = textInput.value.toLocaleLowerCase(lang);
 73 | 
 74 |         // Small words for different languages
 75 |         const smallWordsMap = {
 76 |             'en': /^(a|an|and|as|at|but|by|en|for|if|in|nor|of|on|or|per|the|to|v\.?|vs\.?|via)$/i,
 77 |             'es': /^(a|ante|bajo|cabe|con|contra|de|desde|durante|en|entre|hacia|hasta|mediante|para|por|según|sin|so|sobre|tras|versus|via|el|la|los|las|un|una|unos|unas|y|o|pero|si|e|u)$/i,
 78 |             'pt': /^(a|ao|aos|as|à|às|ante|após|até|com|contra|de|da|do|das|dos|desde|em|entre|para|per|perante|por|sem|sob|sobre|trás|o|os|um|uma|uns|umas|e|ou|mas|se|na|no|nas|nos|pelo|pela|pelos|pelas|num|numa|nuns|numas)$/i,
 79 |             'fr': /^(à|au|aux|avec|ce|ces|dans|de|des|du|elle|en|et|eux|il|je|la|le|les|leur|lui|ma|mais|me|mes|moi|mon|ne|nos|notre|nous|on|ou|où|par|pas|pour|qu|que|qui|sa|se|ses|son|sur|ta|te|tes|toi|ton|tu|un|une|vos|votre|vous|c|d|j|l|m|n|s|t|y)$/i,
 80 |             'de': /^(aber|als|am|an|auch|auf|aus|bei|bin|bis|bist|da|dad|darum|das|daß|dass|dein|deine|dem|den|der|des|dessen|dich|die|dies|diese|diesem|diesen|dieser|dieses|doch|dort|du|durch|ein|eine|einem|einen|einer|eines|er|es|euer|eure|für|hatte|hatten|hattest|hattet|hier|hinter|ich|ihr|ihre|im|in|ist|ja|jede|jedem|jeden|jeder|jedes|jener|jenes|jetzt|kann|kannst|können|könnt|machen|mein|meine|mit|muss|musst|musßt|müssen|müsst|nach|nachdem|nein|nicht|nun|oder|seid|sein|seine|sich|sie|sind|soll|sollen|sollst|sollt|sonst|soweit|sowie|und|unser|unsere|unter|vom|von|vor|wann|warum|was|weiter|weitere|wenn|wer|werde|werden|werdet|weshalb|wie|wieder|wieso|wir|wird|wirst|wo|woher|wohin|zu|zum|zur|über)$/i,
 81 |             'tr': /^(ve|ile|de|da|ki|mi|mı|mu|mü|ama|fakat|lakin|veya|ya|yahut|ise|için|gibi|kadar|göre|diye|doğru|karşı|üzere|sanki|oysa|madem|belki|çünkü|zira|yoksa|ancak|yalnız|tek|bir|bu|şu|o)$/i,
 82 |             'it': /^(a|agli|ai|al|all|alla|alle|allo|con|da|dagli|dai|dal|dall|dalla|dalle|dallo|di|degli|dei|del|dell|della|delle|dello|e|ed|i|il|in|la|le|lo|ma|nei|nel|nell|nella|nelle|nello|o|od|per|se|su|sugli|sui|sul|sull|sulla|sulle|sullo|tra|fra|un|una|uno)$/i
 83 |         };
 84 | 
 85 |         const smallWords = smallWordsMap[lang] || smallWordsMap['en'];
 86 | 
 87 |         const newText = text.replace(/[A-Za-z0-9\u00C0-\u00FF]+[^\s-]*/g, function (match, index, title) {
 88 |             if (index > 0 && index + match.length !== title.length &&
 89 |                 match.search(smallWords) > -1 && title.charAt(index - 2) !== ":" &&
 90 |                 (title.charAt(index + match.length) !== '-' || title.charAt(index - 1) === '-') &&
 91 |                 title.charAt(index - 1).search(/[^\s-]/) < 0) {
 92 |                 return match.toLocaleLowerCase(lang);
 93 |             }
 94 |             if (match.substr(1).search(/[A-Z]|\../) > -1) {
 95 |                 return match;
 96 |             }
 97 |             return match.charAt(0).toLocaleUpperCase(lang) + match.substr(1);
 98 |         });
 99 |         setContent(newText);
100 |     });
101 | 
102 |     document.getElementById('inverse').addEventListener('click', () => {
103 |         const text = textInput.value;
104 |         let newText = '';
105 |         for (let i = 0; i < text.length; i++) {
106 |             const char = text[i];
107 |             if (char === char.toLocaleUpperCase(lang)) {
108 |                 newText += char.toLocaleLowerCase(lang);
109 |             } else {
110 |                 newText += char.toLocaleUpperCase(lang);
111 |             }
112 |         }
113 |         setContent(newText);
114 |     });
115 | 
116 |     // Actions
117 |     document.getElementById('download').addEventListener('click', () => {
118 |         const text = textInput.value;
119 |         if (!text) return;
120 | 
121 |         const blob = new Blob([text], { type: 'text/plain' });
122 |         const url = window.URL.createObjectURL(blob);
123 |         const a = document.createElement('a');
124 |         a.href = url;
125 |         a.download = 'convertcase-text.txt';
126 |         document.body.appendChild(a);
127 |         a.click();
128 |         document.body.removeChild(a);
129 |         window.URL.revokeObjectURL(url);
130 |     });
131 | 
132 |     document.getElementById('copy').addEventListener('click', () => {
133 |         const text = textInput.value;
134 |         if (!text) return;
135 | 
136 |         navigator.clipboard.writeText(text).then(() => {
137 |             const btn = document.getElementById('copy');
138 |             const originalText = btn.textContent;
139 |             btn.textContent = 'Copied!';
140 |             setTimeout(() => {
141 |                 btn.textContent = originalText;
142 |             }, 2000);
143 |         });
144 |     });
145 | 
146 |     document.getElementById('clear').addEventListener('click', () => {
147 |         setContent('');
148 |     });
149 | });
150 | 


--------------------------------------------------------------------------------
/tr/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="tr">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Büyük Küçük Harf Çevirici | Premium Metin Aracı</title>
  8 |     <meta name="description"
  9 |         content="Metni kolayca Büyük Harf, Küçük Harf, Cümle Düzeni, Başlık Düzeni ve daha fazlasına dönüştürün. Gerçek zamanlı istatistiklere sahip basit, ücretsiz ve premium bir metin aracı.">
 10 |     <link rel="alternate" hreflang="en" href="https://ilhan-mstf.github.io/convertcase/" />
 11 |     <link rel="alternate" hreflang="es" href="https://ilhan-mstf.github.io/convertcase/es/" />
 12 |     <link rel="alternate" hreflang="pt" href="https://ilhan-mstf.github.io/convertcase/pt/" />
 13 |     <link rel="alternate" hreflang="fr" href="https://ilhan-mstf.github.io/convertcase/fr/" />
 14 |     <link rel="alternate" hreflang="de" href="https://ilhan-mstf.github.io/convertcase/de/" />
 15 |     <link rel="alternate" hreflang="tr" href="https://ilhan-mstf.github.io/convertcase/tr/" />
 16 |     <link rel="alternate" hreflang="it" href="https://ilhan-mstf.github.io/convertcase/it/" />
 17 |     <link rel="alternate" hreflang="x-default" href="https://ilhan-mstf.github.io/convertcase/" />
 18 | 
 19 |     <meta name="keywords"
 20 |         content="harf çevirici, metin dönüştürücü, büyük harf, küçük harf, başlık düzeni, cümle düzeni, metin aracı, kelime sayacı, karakter sayacı">
 21 |     <meta name="author" content="Convert Case App">
 22 |     <meta name="robots" content="index, follow">
 23 |     <link rel="canonical" href="https://ilhan-mstf.github.io/convertcase/tr/">
 24 |     <link rel="manifest" href="../manifest.json">
 25 |     <meta name="theme-color" content="#2563eb">
 26 |     <link rel="icon" type="image/svg+xml" href="../icon.svg">
 27 | 
 28 |     <meta property="og:type" content="website">
 29 |     <meta property="og:url" content="https://ilhan-mstf.github.io/convertcase/tr/">
 30 |     <meta property="og:title" content="Büyük Küçük Harf Çevirici | Premium Metin Aracı">
 31 |     <meta property="og:description"
 32 |         content="Metni büyük harf, küçük harf, cümle düzeni, başlık düzeni ve daha fazlası arasında kolayca dönüştürün.">
 33 |     <meta property="og:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 34 |     <meta property="twitter:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 35 | 
 36 |     <style>
 37 |         :root {
 38 |             --bg-color: #f8fafc;
 39 |             --text-color: #1e293b;
 40 |             --primary-color: #2563eb;
 41 |             --primary-hover: #1d4ed8;
 42 |             --secondary-bg: #ffffff;
 43 |             --border-color: #e2e8f0;
 44 |             --accent-color: #64748b;
 45 |             --danger-color: #dc2626;
 46 |             --danger-hover: #b91c1c;
 47 |             --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 48 |             --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 49 |             --radius: 0.75rem;
 50 |             --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 51 |         }
 52 | 
 53 |         * {
 54 |             box-sizing: border-box;
 55 |             margin: 0;
 56 |             padding: 0;
 57 |         }
 58 | 
 59 |         body {
 60 |             font-family: var(--font-family);
 61 |             background-color: var(--bg-color);
 62 |             color: var(--text-color);
 63 |             line-height: 1.5;
 64 |             min-height: 100vh;
 65 |             display: flex;
 66 |             flex-direction: column;
 67 |             align-items: center;
 68 |             padding: 2rem;
 69 |         }
 70 | 
 71 |         .app-container {
 72 |             width: 100%;
 73 |             max-width: 1000px;
 74 |             margin: 0 auto;
 75 |         }
 76 | 
 77 |         .app-header {
 78 |             text-align: center;
 79 |             margin-bottom: 2rem;
 80 |         }
 81 | 
 82 |         .app-header h1 {
 83 |             font-size: 2.5rem;
 84 |             font-weight: 700;
 85 |             color: var(--text-color);
 86 |             margin-bottom: 0.5rem;
 87 |             letter-spacing: -0.025em;
 88 |         }
 89 | 
 90 |         .app-header p {
 91 |             color: var(--accent-color);
 92 |             font-size: 1.1rem;
 93 |         }
 94 | 
 95 |         .converter-wrapper {
 96 |             background-color: var(--secondary-bg);
 97 |             border-radius: var(--radius);
 98 |             box-shadow: var(--shadow-md);
 99 |             padding: 1.5rem;
100 |             border: 1px solid var(--border-color);
101 |             margin-bottom: 3rem;
102 |         }
103 | 
104 |         .toolbar {
105 |             display: flex;
106 |             flex-wrap: nowrap;
107 |             gap: 0.5rem;
108 |             margin-bottom: 1.5rem;
109 |             justify-content: center;
110 |             overflow-x: auto;
111 |             padding-bottom: 0.5rem;
112 |             /* Space for scrollbar if needed */
113 |             -webkit-overflow-scrolling: touch;
114 |         }
115 | 
116 |         .btn {
117 |             padding: 0.5rem 0.75rem;
118 |             border-radius: 0.5rem;
119 |             font-weight: 500;
120 |             font-size: 0.85rem;
121 |             cursor: pointer;
122 |             transition: all 0.2s ease;
123 |             border: 1px solid transparent;
124 |             font-family: var(--font-family);
125 |             white-space: nowrap;
126 |             flex-shrink: 0;
127 |             /* Prevent buttons from squishing */
128 |         }
129 | 
130 |         .btn-primary {
131 |             background-color: var(--primary-color);
132 |             color: white;
133 |         }
134 | 
135 |         .btn-primary:hover {
136 |             background-color: var(--primary-hover);
137 |             transform: translateY(-1px);
138 |             box-shadow: var(--shadow-sm);
139 |         }
140 | 
141 |         .btn-secondary {
142 |             background-color: white;
143 |             color: var(--text-color);
144 |             border-color: var(--border-color);
145 |         }
146 | 
147 |         .btn-secondary:hover {
148 |             background-color: var(--bg-color);
149 |             border-color: var(--accent-color);
150 |         }
151 | 
152 |         .btn-danger {
153 |             background-color: white;
154 |             color: var(--danger-color);
155 |             border-color: var(--border-color);
156 |         }
157 | 
158 |         .btn-danger:hover {
159 |             background-color: #fef2f2;
160 |             border-color: var(--danger-color);
161 |         }
162 | 
163 |         .input-area {
164 |             margin-bottom: 1.5rem;
165 |         }
166 | 
167 |         textarea {
168 |             width: 100%;
169 |             height: 400px;
170 |             padding: 1.25rem;
171 |             border: 1px solid var(--border-color);
172 |             border-radius: var(--radius);
173 |             font-family: var(--font-family);
174 |             font-size: 1rem;
175 |             resize: vertical;
176 |             outline: none;
177 |             transition: border-color 0.2s;
178 |             background-color: #fafafa;
179 |         }
180 | 
181 |         textarea:focus {
182 |             border-color: var(--primary-color);
183 |             background-color: white;
184 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
185 |         }
186 | 
187 |         .action-bar {
188 |             display: flex;
189 |             justify-content: space-between;
190 |             align-items: center;
191 |             flex-wrap: wrap;
192 |             gap: 1.5rem;
193 |             padding-top: 1rem;
194 |             border-top: 1px solid var(--border-color);
195 |         }
196 | 
197 |         .stats {
198 |             display: flex;
199 |             align-items: center;
200 |             gap: 0.75rem;
201 |             color: var(--accent-color);
202 |             font-size: 0.9rem;
203 |             font-weight: 500;
204 |         }
205 | 
206 |         .stats span.separator {
207 |             color: var(--border-color);
208 |         }
209 | 
210 |         .actions {
211 |             display: flex;
212 |             gap: 0.75rem;
213 |         }
214 | 
215 |         /* SEO Content Section */
216 |         .content-section {
217 |             margin-top: 3rem;
218 |             color: var(--text-color);
219 |         }
220 | 
221 |         .content-section article {
222 |             margin-bottom: 2rem;
223 |         }
224 | 
225 |         .content-section h2 {
226 |             font-size: 1.5rem;
227 |             font-weight: 600;
228 |             margin-bottom: 0.75rem;
229 |             color: var(--text-color);
230 |         }
231 | 
232 |         .content-section p {
233 |             color: var(--accent-color);
234 |             line-height: 1.7;
235 |             margin-bottom: 1rem;
236 |         }
237 | 
238 |         .app-footer {
239 |             text-align: center;
240 |             margin-top: 3rem;
241 |             color: var(--accent-color);
242 |             font-size: 0.875rem;
243 |             padding-bottom: 2rem;
244 |             display: flex;
245 |             flex-direction: column;
246 |             align-items: center;
247 |             gap: 1rem;
248 |         }
249 | 
250 |         .language-switcher select {
251 |             appearance: none;
252 |             -webkit-appearance: none;
253 |             -moz-appearance: none;
254 |             padding: 0.5rem 2.5rem 0.5rem 1rem;
255 |             border-radius: 0.5rem;
256 |             border: 1px solid var(--border-color);
257 |             background-color: white;
258 |             color: var(--text-color);
259 |             font-family: var(--font-family);
260 |             font-size: 0.9rem;
261 |             cursor: pointer;
262 |             outline: none;
263 |             transition: border-color 0.2s;
264 |             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
265 |             background-repeat: no-repeat;
266 |             background-position: right 0.7rem center;
267 |             background-size: 1em;
268 |         }
269 | 
270 |         .language-switcher select:hover {
271 |             border-color: var(--accent-color);
272 |         }
273 | 
274 |         .language-switcher select:focus {
275 |             border-color: var(--primary-color);
276 |         }
277 | 
278 |         .privacy-notice {
279 |             font-size: 0.9rem;
280 |             color: var(--primary-color);
281 |             margin-top: 0.5rem;
282 |             font-weight: 500;
283 |             display: flex;
284 |             align-items: center;
285 |             justify-content: center;
286 |             gap: 0.5rem;
287 |         }
288 | 
289 |         @media (max-width: 768px) {
290 |             body {
291 |                 padding: 1rem;
292 |             }
293 | 
294 |             .action-bar {
295 |                 flex-direction: column;
296 |                 align-items: stretch;
297 |             }
298 | 
299 |             .stats {
300 |                 justify-content: center;
301 |                 flex-wrap: wrap;
302 |             }
303 | 
304 |             .actions {
305 |                 justify-content: center;
306 |                 flex-wrap: wrap;
307 |             }
308 | 
309 |             .toolbar {
310 |                 justify-content: flex-start;
311 |             }
312 |         }
313 |     </style>
314 |     <script src="../script.js" defer></script>
315 | </head>
316 | 
317 | <body>
318 |     <div class="app-container">
319 |         <header class="app-header">
320 |             <h1>Harf Çevirici</h1>
321 |             <p>Tüm metin dönüştürme ihtiyaçlarınız için premium araç.</p>
322 |             <p class="privacy-notice">
323 |                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
324 |                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
325 |                     <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
326 |                     <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
327 |                 </svg>
328 |                 Gizlilik odaklı - tüm dönüşümler cihazınızda yerel olarak gerçekleşir.
329 |             </p>
330 |         </header>
331 | 
332 |         <main class="converter-wrapper">
333 |             <div class="toolbar">
334 |                 <button id="sentence" class="btn btn-primary" title="Cümle düzenine çevir">Cümle düzeni</button>
335 |                 <button id="lower" class="btn btn-primary" title="küçük harfe çevir">küçük harf</button>
336 |                 <button id="upper" class="btn btn-primary" title="BÜYÜK HARFE ÇEVİR">BÜYÜK HARF</button>
337 |                 <button id="capitalized" class="btn btn-primary" title="Baş Harfleri Büyük Yap">Baş Harfleri
338 |                     Büyük</button>
339 |                 <button id="alternating" class="btn btn-primary" title="aLtErNaTiF dÜzEnE çEvİr">aLtErNaTiF
340 |                     dÜzEn</button>
341 |                 <button id="title" class="btn btn-primary" title="Başlık Düzenine Çevir">Başlık Düzeni</button>
342 |                 <button id="inverse" class="btn btn-primary" title="tERSine çEVİR">tERSine çEVİR</button>
343 |             </div>
344 | 
345 |             <div class="input-area">
346 |                 <textarea id="text-input" placeholder="İçeriğinizi buraya yazın veya yapıştırın..."></textarea>
347 |             </div>
348 | 
349 |             <div class="action-bar">
350 |                 <div class="stats">
351 |                     <span id="char-count">0</span> Karakter
352 |                     <span class="separator">|</span>
353 |                     <span id="word-count">0</span> Kelime
354 |                     <span class="separator">|</span>
355 |                     <span id="sentence-count">0</span> Cümle
356 |                     <span class="separator">|</span>
357 |                     <span id="line-count">0</span> Satır
358 |                 </div>
359 |                 <div class="actions">
360 |                     <button id="download" class="btn btn-secondary" title="Metni İndir">İndir</button>
361 |                     <button id="copy" class="btn btn-secondary" title="Panoya Kopyala">Kopyala</button>
362 |                     <button id="clear" class="btn btn-danger" title="Metni Temizle">Temizle</button>
363 |                 </div>
364 |             </div>
365 |         </main>
366 | 
367 |         <section class="content-section">
368 |             <article>
369 |                 <h2>Cümle Düzeni</h2>
370 |                 <p>Cümle düzeni dönüştürücü, herhangi bir metni yapıştırmanıza izin verir ve onu otomatik olarak tam
371 |                     yapılandırılmış bir cümleye dönüştürür. Her cümlenin ilk harfini büyüterek çalışır.</p>
372 |             </article>
373 | 
374 |             <article>
375 |                 <h2>Küçük Harf</h2>
376 |                 <p>Metni nasıl küçülteceğinizi merak ediyorsanız, küçük harf metin dönüştürücü tam olarak bunu yapmanıza
377 |                     izin verir - metninizdeki tüm harfleri küçük harflere dönüştürür.</p>
378 |             </article>
379 | 
380 |             <article>
381 |                 <h2>Büyük Harf</h2>
382 |                 <p>Büyük harf dönüştürücü, sahip olduğunuz herhangi bir metni alacak ve tüm harfleri büyük harfe
383 |                     çevirecektir.</p>
384 |             </article>
385 | 
386 |             <article>
387 |                 <h2>Baş Harfleri Büyük</h2>
388 |                 <p>Baş harfleri büyük dönüştürücü, her kelimenin başlangıç harfini otomatik olarak büyük harfe
389 |                     dönüştürecek ve kalan harfleri küçük bırakacaktır.</p>
390 |             </article>
391 | 
392 |             <article>
393 |                 <h2>Alternatif Düzen</h2>
394 |                 <p>Alternatif düzen dönüştürücü, metnizi küçük ve büyük harfler arasında değişen bir metne
395 |                     dönüştürmenize izin verecektir.</p>
396 |             </article>
397 | 
398 |             <article>
399 |                 <h2>Başlık Düzeni</h2>
400 |                 <p>Başlık düzeni dönüştürücü, bir makale başlığı için doğru harflerin büyük olmasını sağlamak için
401 |                     mükemmeldir.</p>
402 |             </article>
403 | 
404 |             <article>
405 |                 <h2>Ters Düzen</h2>
406 |                 <p>Ters düzen dönüştürücü, metninizin harf durumunu tersine çevirmenize izin verir.</p>
407 |             </article>
408 |         </section>
409 | 
410 |         <footer class="app-footer">
411 |             <div class="language-switcher">
412 |                 <select id="lang-selector" onchange="switchLanguage(this.value)" aria-label="Dil seçin">
413 |                     <option value="en">English</option>
414 |                     <option value="es">Español</option>
415 |                     <option value="pt">Português</option>
416 |                     <option value="fr">Français</option>
417 |                     <option value="de">Deutsch</option>
418 |                     <option value="tr" selected>Türkçe</option>
419 |                     <option value="it">Italiano</option>
420 |                 </select>
421 |             </div>
422 |             <p>&copy; 2025 Convert Case App. Basit. Net. Güçlü.</p>
423 |         </footer>
424 |     </div>
425 |     <script>
426 |         function switchLanguage(lang) {
427 |             localStorage.setItem('manual_lang_switch', 'true');
428 |             if (lang === 'en') {
429 |                 window.location.href = '../index.html';
430 |             } else {
431 |                 window.location.href = '../' + lang + '/index.html';
432 |             }
433 |         }
434 |     </script>
435 | 
436 | </body>
437 | 
438 | </html>


--------------------------------------------------------------------------------
/es/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Convertir Mayúsculas y Minúsculas | Herramienta de Texto Premium</title>
  8 |     <meta name="description"
  9 |         content="Convierta fácilmente texto entre mayúsculas, minúsculas, tipo oración, tipo título y más. Una herramienta de texto simple, gratuita y premium con estadísticas en tiempo real.">
 10 |     <link rel="alternate" hreflang="en" href="https://ilhan-mstf.github.io/convertcase/" />
 11 |     <link rel="alternate" hreflang="es" href="https://ilhan-mstf.github.io/convertcase/es/" />
 12 |     <link rel="alternate" hreflang="pt" href="https://ilhan-mstf.github.io/convertcase/pt/" />
 13 |     <link rel="alternate" hreflang="fr" href="https://ilhan-mstf.github.io/convertcase/fr/" />
 14 |     <link rel="alternate" hreflang="de" href="https://ilhan-mstf.github.io/convertcase/de/" />
 15 |     <link rel="alternate" hreflang="tr" href="https://ilhan-mstf.github.io/convertcase/tr/" />
 16 |     <link rel="alternate" hreflang="it" href="https://ilhan-mstf.github.io/convertcase/it/" />
 17 |     <link rel="alternate" hreflang="x-default" href="https://ilhan-mstf.github.io/convertcase/" />
 18 | 
 19 |     <meta name="keywords"
 20 |         content="convertir mayúsculas, convertidor de texto, mayúsculas, minúsculas, tipo título, tipo oración, herramienta de texto, contador de palabras, contador de caracteres">
 21 |     <meta name="author" content="Convert Case App">
 22 |     <meta name="robots" content="index, follow">
 23 |     <link rel="canonical" href="https://ilhan-mstf.github.io/convertcase/es/">
 24 |     <link rel="manifest" href="../manifest.json">
 25 |     <meta name="theme-color" content="#2563eb">
 26 |     <link rel="icon" type="image/svg+xml" href="../icon.svg">
 27 | 
 28 |     <meta property="og:type" content="website">
 29 |     <meta property="og:url" content="https://ilhan-mstf.github.io/convertcase/es/">
 30 |     <meta property="og:title" content="Convertir Mayúsculas y Minúsculas | Herramienta de Texto Premium">
 31 |     <meta property="og:description"
 32 |         content="Convierta fácilmente texto entre mayúsculas, minúsculas, tipo oración, tipo título y más.">
 33 |     <meta property="og:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 34 |     <meta property="twitter:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 35 | 
 36 |     <style>
 37 |         :root {
 38 |             --bg-color: #f8fafc;
 39 |             --text-color: #1e293b;
 40 |             --primary-color: #2563eb;
 41 |             --primary-hover: #1d4ed8;
 42 |             --secondary-bg: #ffffff;
 43 |             --border-color: #e2e8f0;
 44 |             --accent-color: #64748b;
 45 |             --danger-color: #dc2626;
 46 |             --danger-hover: #b91c1c;
 47 |             --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 48 |             --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 49 |             --radius: 0.75rem;
 50 |             --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 51 |         }
 52 | 
 53 |         * {
 54 |             box-sizing: border-box;
 55 |             margin: 0;
 56 |             padding: 0;
 57 |         }
 58 | 
 59 |         body {
 60 |             font-family: var(--font-family);
 61 |             background-color: var(--bg-color);
 62 |             color: var(--text-color);
 63 |             line-height: 1.5;
 64 |             min-height: 100vh;
 65 |             display: flex;
 66 |             flex-direction: column;
 67 |             align-items: center;
 68 |             padding: 2rem;
 69 |         }
 70 | 
 71 |         .app-container {
 72 |             width: 100%;
 73 |             max-width: 1000px;
 74 |             margin: 0 auto;
 75 |         }
 76 | 
 77 |         .app-header {
 78 |             text-align: center;
 79 |             margin-bottom: 2rem;
 80 |         }
 81 | 
 82 |         .app-header h1 {
 83 |             font-size: 2.5rem;
 84 |             font-weight: 700;
 85 |             color: var(--text-color);
 86 |             margin-bottom: 0.5rem;
 87 |             letter-spacing: -0.025em;
 88 |         }
 89 | 
 90 |         .app-header p {
 91 |             color: var(--accent-color);
 92 |             font-size: 1.1rem;
 93 |         }
 94 | 
 95 |         .converter-wrapper {
 96 |             background-color: var(--secondary-bg);
 97 |             border-radius: var(--radius);
 98 |             box-shadow: var(--shadow-md);
 99 |             padding: 1.5rem;
100 |             border: 1px solid var(--border-color);
101 |             margin-bottom: 3rem;
102 |         }
103 | 
104 |         .toolbar {
105 |             display: flex;
106 |             flex-wrap: nowrap;
107 |             gap: 0.5rem;
108 |             margin-bottom: 1.5rem;
109 |             justify-content: center;
110 |             overflow-x: auto;
111 |             padding-bottom: 0.5rem;
112 |             /* Space for scrollbar if needed */
113 |             -webkit-overflow-scrolling: touch;
114 |         }
115 | 
116 |         .btn {
117 |             padding: 0.5rem 0.75rem;
118 |             border-radius: 0.5rem;
119 |             font-weight: 500;
120 |             font-size: 0.85rem;
121 |             cursor: pointer;
122 |             transition: all 0.2s ease;
123 |             border: 1px solid transparent;
124 |             font-family: var(--font-family);
125 |             white-space: nowrap;
126 |             flex-shrink: 0;
127 |             /* Prevent buttons from squishing */
128 |         }
129 | 
130 |         .btn-primary {
131 |             background-color: var(--primary-color);
132 |             color: white;
133 |         }
134 | 
135 |         .btn-primary:hover {
136 |             background-color: var(--primary-hover);
137 |             transform: translateY(-1px);
138 |             box-shadow: var(--shadow-sm);
139 |         }
140 | 
141 |         .btn-secondary {
142 |             background-color: white;
143 |             color: var(--text-color);
144 |             border-color: var(--border-color);
145 |         }
146 | 
147 |         .btn-secondary:hover {
148 |             background-color: var(--bg-color);
149 |             border-color: var(--accent-color);
150 |         }
151 | 
152 |         .btn-danger {
153 |             background-color: white;
154 |             color: var(--danger-color);
155 |             border-color: var(--border-color);
156 |         }
157 | 
158 |         .btn-danger:hover {
159 |             background-color: #fef2f2;
160 |             border-color: var(--danger-color);
161 |         }
162 | 
163 |         .input-area {
164 |             margin-bottom: 1.5rem;
165 |         }
166 | 
167 |         textarea {
168 |             width: 100%;
169 |             height: 400px;
170 |             padding: 1.25rem;
171 |             border: 1px solid var(--border-color);
172 |             border-radius: var(--radius);
173 |             font-family: var(--font-family);
174 |             font-size: 1rem;
175 |             resize: vertical;
176 |             outline: none;
177 |             transition: border-color 0.2s;
178 |             background-color: #fafafa;
179 |         }
180 | 
181 |         textarea:focus {
182 |             border-color: var(--primary-color);
183 |             background-color: white;
184 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
185 |         }
186 | 
187 |         .action-bar {
188 |             display: flex;
189 |             justify-content: space-between;
190 |             align-items: center;
191 |             flex-wrap: wrap;
192 |             gap: 1.5rem;
193 |             padding-top: 1rem;
194 |             border-top: 1px solid var(--border-color);
195 |         }
196 | 
197 |         .stats {
198 |             display: flex;
199 |             align-items: center;
200 |             gap: 0.75rem;
201 |             color: var(--accent-color);
202 |             font-size: 0.9rem;
203 |             font-weight: 500;
204 |         }
205 | 
206 |         .stats span.separator {
207 |             color: var(--border-color);
208 |         }
209 | 
210 |         .actions {
211 |             display: flex;
212 |             gap: 0.75rem;
213 |         }
214 | 
215 |         /* SEO Content Section */
216 |         .content-section {
217 |             margin-top: 3rem;
218 |             color: var(--text-color);
219 |         }
220 | 
221 |         .content-section article {
222 |             margin-bottom: 2rem;
223 |         }
224 | 
225 |         .content-section h2 {
226 |             font-size: 1.5rem;
227 |             font-weight: 600;
228 |             margin-bottom: 0.75rem;
229 |             color: var(--text-color);
230 |         }
231 | 
232 |         .content-section p {
233 |             color: var(--accent-color);
234 |             line-height: 1.7;
235 |             margin-bottom: 1rem;
236 |         }
237 | 
238 |         .app-footer {
239 |             text-align: center;
240 |             margin-top: 3rem;
241 |             color: var(--accent-color);
242 |             font-size: 0.875rem;
243 |             padding-bottom: 2rem;
244 |             display: flex;
245 |             flex-direction: column;
246 |             align-items: center;
247 |             gap: 1rem;
248 |         }
249 | 
250 |         .language-switcher select {
251 |             appearance: none;
252 |             -webkit-appearance: none;
253 |             -moz-appearance: none;
254 |             padding: 0.5rem 2.5rem 0.5rem 1rem;
255 |             border-radius: 0.5rem;
256 |             border: 1px solid var(--border-color);
257 |             background-color: white;
258 |             color: var(--text-color);
259 |             font-family: var(--font-family);
260 |             font-size: 0.9rem;
261 |             cursor: pointer;
262 |             outline: none;
263 |             transition: border-color 0.2s;
264 |             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
265 |             background-repeat: no-repeat;
266 |             background-position: right 0.7rem center;
267 |             background-size: 1em;
268 |         }
269 | 
270 |         .language-switcher select:hover {
271 |             border-color: var(--accent-color);
272 |         }
273 | 
274 |         .language-switcher select:focus {
275 |             border-color: var(--primary-color);
276 |         }
277 | 
278 |         .privacy-notice {
279 |             font-size: 0.9rem;
280 |             color: var(--primary-color);
281 |             margin-top: 0.5rem;
282 |             font-weight: 500;
283 |             display: flex;
284 |             align-items: center;
285 |             justify-content: center;
286 |             gap: 0.5rem;
287 |         }
288 | 
289 |         @media (max-width: 768px) {
290 |             body {
291 |                 padding: 1rem;
292 |             }
293 | 
294 |             .action-bar {
295 |                 flex-direction: column;
296 |                 align-items: stretch;
297 |             }
298 | 
299 |             .stats {
300 |                 justify-content: center;
301 |                 flex-wrap: wrap;
302 |             }
303 | 
304 |             .actions {
305 |                 justify-content: center;
306 |                 flex-wrap: wrap;
307 |             }
308 | 
309 |             .toolbar {
310 |                 justify-content: flex-start;
311 |             }
312 |         }
313 |     </style>
314 |     <script src="../script.js" defer></script>
315 | </head>
316 | 
317 | <body>
318 |     <div class="app-container">
319 |         <header class="app-header">
320 |             <h1>Convertir Texto</h1>
321 |             <p>La herramienta premium para todas sus necesidades de conversión de texto.</p>
322 |             <p class="privacy-notice">
323 |                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
324 |                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
325 |                     <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
326 |                     <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
327 |                 </svg>
328 |                 Centrado en la privacidad: todas las conversiones ocurren localmente en su dispositivo.
329 |             </p>
330 |         </header>
331 | 
332 |         <main class="converter-wrapper">
333 |             <div class="toolbar">
334 |                 <button id="sentence" class="btn btn-primary" title="Convertir a tipo oración">Tipo oración</button>
335 |                 <button id="lower" class="btn btn-primary" title="Convertir a minúsculas">minúsculas</button>
336 |                 <button id="upper" class="btn btn-primary" title="Convertir a MAYÚSCULAS">MAYÚSCULAS</button>
337 |                 <button id="capitalized" class="btn btn-primary" title="Convertir a Mayúsculas Iniciales">Mayúsculas
338 |                     Iniciales</button>
339 |                 <button id="alternating" class="btn btn-primary" title="Convertir a aLtErNaDo">aLtErNaDo</button>
340 |                 <button id="title" class="btn btn-primary" title="Convertir a Tipo Título">Tipo Título</button>
341 |                 <button id="inverse" class="btn btn-primary" title="Convertir a InVeRsO">InVeRsO</button>
342 |             </div>
343 | 
344 |             <div class="input-area">
345 |                 <textarea id="text-input" placeholder="Escriba o pegue su contenido aquí..."></textarea>
346 |             </div>
347 | 
348 |             <div class="action-bar">
349 |                 <div class="stats">
350 |                     <span id="char-count">0</span> Caracteres
351 |                     <span class="separator">|</span>
352 |                     <span id="word-count">0</span> Palabras
353 |                     <span class="separator">|</span>
354 |                     <span id="sentence-count">0</span> Oraciones
355 |                     <span class="separator">|</span>
356 |                     <span id="line-count">0</span> Líneas
357 |                 </div>
358 |                 <div class="actions">
359 |                     <button id="download" class="btn btn-secondary" title="Descargar Texto">Descargar</button>
360 |                     <button id="copy" class="btn btn-secondary" title="Copiar al Portapapeles">Copiar</button>
361 |                     <button id="clear" class="btn btn-danger" title="Borrar Texto">Borrar</button>
362 |                 </div>
363 |             </div>
364 |         </main>
365 | 
366 |         <section class="content-section">
367 |             <article>
368 |                 <h2>Tipo Oración</h2>
369 |                 <p>El convertidor a tipo oración le permitirá pegar cualquier texto y lo transformará automáticamente en
370 |                     una oración estructurada. Funciona capitalizando la primera letra de cada oración.</p>
371 |             </article>
372 | 
373 |             <article>
374 |                 <h2>Minúsculas</h2>
375 |                 <p>Si se pregunta cómo descapitalizar texto, esto es exactamente lo que hace el convertidor a
376 |                     minúsculas: transforma todas las letras de su texto en minúsculas.</p>
377 |             </article>
378 | 
379 |             <article>
380 |                 <h2>Mayúsculas</h2>
381 |                 <p>El transformador a mayúsculas tomará cualquier texto que tenga y generará todas las letras en
382 |                     mayúsculas.</p>
383 |             </article>
384 | 
385 |             <article>
386 |                 <h2>Mayúsculas Iniciales</h2>
387 |                 <p>El convertidor a mayúsculas iniciales convertirá automáticamente la letra inicial de cada palabra en
388 |                     mayúscula.</p>
389 |             </article>
390 | 
391 |             <article>
392 |                 <h2>Caso Alternado</h2>
393 |                 <p>El convertidor de caso alternado le permitirá transformar su texto en texto que alterna entre
394 |                     minúsculas y mayúsculas.</p>
395 |             </article>
396 | 
397 |             <article>
398 |                 <h2>Tipo Título</h2>
399 |                 <p>El convertidor a tipo título es perfecto para asegurar que las letras correctas estén en mayúsculas
400 |                     dentro del contexto de un título.</p>
401 |             </article>
402 | 
403 |             <article>
404 |                 <h2>Caso Inverso</h2>
405 |                 <p>El convertidor de caso inverso le permitirá invertir el caso de su texto.</p>
406 |             </article>
407 |         </section>
408 | 
409 |         <footer class="app-footer">
410 |             <div class="language-switcher">
411 |                 <select id="lang-selector" onchange="switchLanguage(this.value)" aria-label="Seleccionar idioma">
412 |                     <option value="en">English</option>
413 |                     <option value="es" selected>Español</option>
414 |                     <option value="pt">Português</option>
415 |                     <option value="fr">Français</option>
416 |                     <option value="de">Deutsch</option>
417 |                     <option value="tr">Türkçe</option>
418 |                     <option value="it">Italiano</option>
419 |                 </select>
420 |             </div>
421 |             <p>&copy; 2025 Convert Case App. Simple. Claro. Potente.</p>
422 |         </footer>
423 |     </div>
424 |     <script>
425 |         function switchLanguage(lang) {
426 |             localStorage.setItem('manual_lang_switch', 'true');
427 |             if (lang === 'en') {
428 |                 window.location.href = '../index.html';
429 |             } else {
430 |                 window.location.href = '../' + lang + '/index.html';
431 |             }
432 |         }
433 |     </script>
434 | 
435 | </body>
436 | 
437 | </html>


--------------------------------------------------------------------------------
/it/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="it">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Converti Maiuscole e Minuscole | Strumento di Testo Premium</title>
  8 |     <meta name="description"
  9 |         content="Converti facilmente il testo tra maiuscole, minuscole, caso frase, caso titolo e altro ancora. Uno strumento di testo semplice, gratuito e premium con statistiche in tempo reale.">
 10 |     <link rel="alternate" hreflang="en" href="https://ilhan-mstf.github.io/convertcase/" />
 11 |     <link rel="alternate" hreflang="es" href="https://ilhan-mstf.github.io/convertcase/es/" />
 12 |     <link rel="alternate" hreflang="pt" href="https://ilhan-mstf.github.io/convertcase/pt/" />
 13 |     <link rel="alternate" hreflang="fr" href="https://ilhan-mstf.github.io/convertcase/fr/" />
 14 |     <link rel="alternate" hreflang="de" href="https://ilhan-mstf.github.io/convertcase/de/" />
 15 |     <link rel="alternate" hreflang="tr" href="https://ilhan-mstf.github.io/convertcase/tr/" />
 16 |     <link rel="alternate" hreflang="it" href="https://ilhan-mstf.github.io/convertcase/it/" />
 17 |     <link rel="alternate" hreflang="x-default" href="https://ilhan-mstf.github.io/convertcase/" />
 18 | 
 19 |     <meta name="keywords"
 20 |         content="converti maiuscole, convertitore di testo, maiuscole, minuscole, caso titolo, caso frase, strumento di testo, conta parole, conta caratteri">
 21 |     <meta name="author" content="Convert Case App">
 22 |     <meta name="robots" content="index, follow">
 23 |     <link rel="canonical" href="https://ilhan-mstf.github.io/convertcase/it/">
 24 |     <link rel="manifest" href="../manifest.json">
 25 |     <meta name="theme-color" content="#2563eb">
 26 |     <link rel="icon" type="image/svg+xml" href="../icon.svg">
 27 | 
 28 |     <meta property="og:type" content="website">
 29 |     <meta property="og:url" content="https://ilhan-mstf.github.io/convertcase/it/">
 30 |     <meta property="og:title" content="Converti Maiuscole e Minuscole | Strumento di Testo Premium">
 31 |     <meta property="og:description"
 32 |         content="Converti facilmente il testo tra maiuscole, minuscole, caso frase, caso titolo e altro ancora.">
 33 |     <meta property="og:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 34 |     <meta property="twitter:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 35 | 
 36 |     <style>
 37 |         :root {
 38 |             --bg-color: #f8fafc;
 39 |             --text-color: #1e293b;
 40 |             --primary-color: #2563eb;
 41 |             --primary-hover: #1d4ed8;
 42 |             --secondary-bg: #ffffff;
 43 |             --border-color: #e2e8f0;
 44 |             --accent-color: #64748b;
 45 |             --danger-color: #dc2626;
 46 |             --danger-hover: #b91c1c;
 47 |             --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 48 |             --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 49 |             --radius: 0.75rem;
 50 |             --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 51 |         }
 52 | 
 53 |         * {
 54 |             box-sizing: border-box;
 55 |             margin: 0;
 56 |             padding: 0;
 57 |         }
 58 | 
 59 |         body {
 60 |             font-family: var(--font-family);
 61 |             background-color: var(--bg-color);
 62 |             color: var(--text-color);
 63 |             line-height: 1.5;
 64 |             min-height: 100vh;
 65 |             display: flex;
 66 |             flex-direction: column;
 67 |             align-items: center;
 68 |             padding: 2rem;
 69 |         }
 70 | 
 71 |         .app-container {
 72 |             width: 100%;
 73 |             max-width: 1000px;
 74 |             margin: 0 auto;
 75 |         }
 76 | 
 77 |         .app-header {
 78 |             text-align: center;
 79 |             margin-bottom: 2rem;
 80 |         }
 81 | 
 82 |         .app-header h1 {
 83 |             font-size: 2.5rem;
 84 |             font-weight: 700;
 85 |             color: var(--text-color);
 86 |             margin-bottom: 0.5rem;
 87 |             letter-spacing: -0.025em;
 88 |         }
 89 | 
 90 |         .app-header p {
 91 |             color: var(--accent-color);
 92 |             font-size: 1.1rem;
 93 |         }
 94 | 
 95 |         .converter-wrapper {
 96 |             background-color: var(--secondary-bg);
 97 |             border-radius: var(--radius);
 98 |             box-shadow: var(--shadow-md);
 99 |             padding: 1.5rem;
100 |             border: 1px solid var(--border-color);
101 |             margin-bottom: 3rem;
102 |         }
103 | 
104 |         .toolbar {
105 |             display: flex;
106 |             flex-wrap: nowrap;
107 |             gap: 0.5rem;
108 |             margin-bottom: 1.5rem;
109 |             justify-content: center;
110 |             overflow-x: auto;
111 |             padding-bottom: 0.5rem;
112 |             /* Space for scrollbar if needed */
113 |             -webkit-overflow-scrolling: touch;
114 |         }
115 | 
116 |         .btn {
117 |             padding: 0.5rem 0.75rem;
118 |             border-radius: 0.5rem;
119 |             font-weight: 500;
120 |             font-size: 0.85rem;
121 |             cursor: pointer;
122 |             transition: all 0.2s ease;
123 |             border: 1px solid transparent;
124 |             font-family: var(--font-family);
125 |             white-space: nowrap;
126 |             flex-shrink: 0;
127 |             /* Prevent buttons from squishing */
128 |         }
129 | 
130 |         .btn-primary {
131 |             background-color: var(--primary-color);
132 |             color: white;
133 |         }
134 | 
135 |         .btn-primary:hover {
136 |             background-color: var(--primary-hover);
137 |             transform: translateY(-1px);
138 |             box-shadow: var(--shadow-sm);
139 |         }
140 | 
141 |         .btn-secondary {
142 |             background-color: white;
143 |             color: var(--text-color);
144 |             border-color: var(--border-color);
145 |         }
146 | 
147 |         .btn-secondary:hover {
148 |             background-color: var(--bg-color);
149 |             border-color: var(--accent-color);
150 |         }
151 | 
152 |         .btn-danger {
153 |             background-color: white;
154 |             color: var(--danger-color);
155 |             border-color: var(--border-color);
156 |         }
157 | 
158 |         .btn-danger:hover {
159 |             background-color: #fef2f2;
160 |             border-color: var(--danger-color);
161 |         }
162 | 
163 |         .input-area {
164 |             margin-bottom: 1.5rem;
165 |         }
166 | 
167 |         textarea {
168 |             width: 100%;
169 |             height: 400px;
170 |             padding: 1.25rem;
171 |             border: 1px solid var(--border-color);
172 |             border-radius: var(--radius);
173 |             font-family: var(--font-family);
174 |             font-size: 1rem;
175 |             resize: vertical;
176 |             outline: none;
177 |             transition: border-color 0.2s;
178 |             background-color: #fafafa;
179 |         }
180 | 
181 |         textarea:focus {
182 |             border-color: var(--primary-color);
183 |             background-color: white;
184 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
185 |         }
186 | 
187 |         .action-bar {
188 |             display: flex;
189 |             justify-content: space-between;
190 |             align-items: center;
191 |             flex-wrap: wrap;
192 |             gap: 1.5rem;
193 |             padding-top: 1rem;
194 |             border-top: 1px solid var(--border-color);
195 |         }
196 | 
197 |         .stats {
198 |             display: flex;
199 |             align-items: center;
200 |             gap: 0.75rem;
201 |             color: var(--accent-color);
202 |             font-size: 0.9rem;
203 |             font-weight: 500;
204 |         }
205 | 
206 |         .stats span.separator {
207 |             color: var(--border-color);
208 |         }
209 | 
210 |         .actions {
211 |             display: flex;
212 |             gap: 0.75rem;
213 |         }
214 | 
215 |         /* SEO Content Section */
216 |         .content-section {
217 |             margin-top: 3rem;
218 |             color: var(--text-color);
219 |         }
220 | 
221 |         .content-section article {
222 |             margin-bottom: 2rem;
223 |         }
224 | 
225 |         .content-section h2 {
226 |             font-size: 1.5rem;
227 |             font-weight: 600;
228 |             margin-bottom: 0.75rem;
229 |             color: var(--text-color);
230 |         }
231 | 
232 |         .content-section p {
233 |             color: var(--accent-color);
234 |             line-height: 1.7;
235 |             margin-bottom: 1rem;
236 |         }
237 | 
238 |         .app-footer {
239 |             text-align: center;
240 |             margin-top: 3rem;
241 |             color: var(--accent-color);
242 |             font-size: 0.875rem;
243 |             padding-bottom: 2rem;
244 |             display: flex;
245 |             flex-direction: column;
246 |             align-items: center;
247 |             gap: 1rem;
248 |         }
249 | 
250 |         .language-switcher select {
251 |             appearance: none;
252 |             -webkit-appearance: none;
253 |             -moz-appearance: none;
254 |             padding: 0.5rem 2.5rem 0.5rem 1rem;
255 |             border-radius: 0.5rem;
256 |             border: 1px solid var(--border-color);
257 |             background-color: white;
258 |             color: var(--text-color);
259 |             font-family: var(--font-family);
260 |             font-size: 0.9rem;
261 |             cursor: pointer;
262 |             outline: none;
263 |             transition: border-color 0.2s;
264 |             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
265 |             background-repeat: no-repeat;
266 |             background-position: right 0.7rem center;
267 |             background-size: 1em;
268 |         }
269 | 
270 |         .language-switcher select:hover {
271 |             border-color: var(--accent-color);
272 |         }
273 | 
274 |         .language-switcher select:focus {
275 |             border-color: var(--primary-color);
276 |         }
277 | 
278 |         .privacy-notice {
279 |             font-size: 0.9rem;
280 |             color: var(--primary-color);
281 |             margin-top: 0.5rem;
282 |             font-weight: 500;
283 |             display: flex;
284 |             align-items: center;
285 |             justify-content: center;
286 |             gap: 0.5rem;
287 |         }
288 | 
289 |         @media (max-width: 768px) {
290 |             body {
291 |                 padding: 1rem;
292 |             }
293 | 
294 |             .action-bar {
295 |                 flex-direction: column;
296 |                 align-items: stretch;
297 |             }
298 | 
299 |             .stats {
300 |                 justify-content: center;
301 |                 flex-wrap: wrap;
302 |             }
303 | 
304 |             .actions {
305 |                 justify-content: center;
306 |                 flex-wrap: wrap;
307 |             }
308 | 
309 |             .toolbar {
310 |                 justify-content: flex-start;
311 |             }
312 |         }
313 |     </style>
314 |     <script src="../script.js" defer></script>
315 | </head>
316 | 
317 | <body>
318 |     <div class="app-container">
319 |         <header class="app-header">
320 |             <h1>Converti Testo</h1>
321 |             <p>Lo strumento premium per tutte le tue esigenze di conversione del testo.</p>
322 |             <p class="privacy-notice">
323 |                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
324 |                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
325 |                     <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
326 |                     <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
327 |                 </svg>
328 |                 Attento alla privacy: tutte le conversioni avvengono localmente sul tuo dispositivo.
329 |             </p>
330 |         </header>
331 | 
332 |         <main class="converter-wrapper">
333 |             <div class="toolbar">
334 |                 <button id="sentence" class="btn btn-primary" title="Converti in caso frase">Caso frase</button>
335 |                 <button id="lower" class="btn btn-primary" title="Converti in minuscole">minuscole</button>
336 |                 <button id="upper" class="btn btn-primary" title="Converti in MAIUSCOLE">MAIUSCOLE</button>
337 |                 <button id="capitalized" class="btn btn-primary" title="Converti in Iniziali Maiuscole">Iniziali
338 |                     Maiuscole</button>
339 |                 <button id="alternating" class="btn btn-primary" title="Converti in aLtErNaTo">aLtErNaTo</button>
340 |                 <button id="title" class="btn btn-primary" title="Converti in Caso Titolo">Caso Titolo</button>
341 |                 <button id="inverse" class="btn btn-primary" title="Converti in InVeRsO">InVeRsO</button>
342 |             </div>
343 | 
344 |             <div class="input-area">
345 |                 <textarea id="text-input" placeholder="Digita o incolla il tuo contenuto qui..."></textarea>
346 |             </div>
347 | 
348 |             <div class="action-bar">
349 |                 <div class="stats">
350 |                     <span id="char-count">0</span> Caratteri
351 |                     <span class="separator">|</span>
352 |                     <span id="word-count">0</span> Parole
353 |                     <span class="separator">|</span>
354 |                     <span id="sentence-count">0</span> Frasi
355 |                     <span class="separator">|</span>
356 |                     <span id="line-count">0</span> Righe
357 |                 </div>
358 |                 <div class="actions">
359 |                     <button id="download" class="btn btn-secondary" title="Scarica Testo">Scarica</button>
360 |                     <button id="copy" class="btn btn-secondary" title="Copia negli Appunti">Copia</button>
361 |                     <button id="clear" class="btn btn-danger" title="Cancella Testo">Cancella</button>
362 |                 </div>
363 |             </div>
364 |         </main>
365 | 
366 |         <section class="content-section">
367 |             <article>
368 |                 <h2>Caso Frase</h2>
369 |                 <p>Il convertitore di caso frase ti permetterà di incollare qualsiasi testo e lo trasformerà
370 |                     automaticamente in una frase strutturata. Funziona capitalizzando la prima lettera di ogni frase.
371 |                 </p>
372 |             </article>
373 | 
374 |             <article>
375 |                 <h2>Minuscole</h2>
376 |                 <p>Se ti stai chiedendo come rendere minuscolo un testo, questo è esattamente ciò che il convertitore di
377 |                     minuscole ti permette di fare: trasforma tutte le lettere del tuo testo in minuscole.</p>
378 |             </article>
379 | 
380 |             <article>
381 |                 <h2>Maiuscole</h2>
382 |                 <p>Il trasformatore di maiuscole prenderà qualsiasi testo tu abbia e genererà tutte le lettere in
383 |                     maiuscolo.</p>
384 |             </article>
385 | 
386 |             <article>
387 |                 <h2>Iniziali Maiuscole</h2>
388 |                 <p>Il convertitore di iniziali maiuscole convertirà automaticamente la lettera iniziale di ogni parola
389 |                     in maiuscolo e lascerà le lettere rimanenti in minuscolo.</p>
390 |             </article>
391 | 
392 |             <article>
393 |                 <h2>Caso Alternato</h2>
394 |                 <p>Il convertitore di caso alternato ti permetterà di trasformare il tuo testo in testo che alterna tra
395 |                     minuscole e maiuscole.</p>
396 |             </article>
397 | 
398 |             <article>
399 |                 <h2>Caso Titolo</h2>
400 |                 <p>Il convertitore di caso titolo è perfetto per assicurarsi che le lettere corrette siano maiuscole nel
401 |                     contesto di un titolo.</p>
402 |             </article>
403 | 
404 |             <article>
405 |                 <h2>Caso Inverso</h2>
406 |                 <p>Il convertitore di caso inverso ti permetterà di invertire il caso del tuo testo.</p>
407 |             </article>
408 |         </section>
409 | 
410 |         <footer class="app-footer">
411 |             <div class="language-switcher">
412 |                 <select id="lang-selector" onchange="switchLanguage(this.value)" aria-label="Seleziona lingua">
413 |                     <option value="en">English</option>
414 |                     <option value="es">Español</option>
415 |                     <option value="pt">Português</option>
416 |                     <option value="fr">Français</option>
417 |                     <option value="de">Deutsch</option>
418 |                     <option value="tr">Türkçe</option>
419 |                     <option value="it" selected>Italiano</option>
420 |                 </select>
421 |             </div>
422 |             <p>&copy; 2025 Convert Case App. Semplice. Chiaro. Potente.</p>
423 |         </footer>
424 |     </div>
425 |     <script>
426 |         function switchLanguage(lang) {
427 |             localStorage.setItem('manual_lang_switch', 'true');
428 |             if (lang === 'en') {
429 |                 window.location.href = '../index.html';
430 |             } else {
431 |                 window.location.href = '../' + lang + '/index.html';
432 |             }
433 |         }
434 |     </script>
435 | 
436 | </body>
437 | 
438 | </html>


--------------------------------------------------------------------------------
/pt/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Converter Maiúsculas e Minúsculas | Ferramenta de Texto Premium</title>
  8 |     <meta name="description"
  9 |         content="Converta facilmente texto entre maiúsculas, minúsculas, tipo frase, tipo título e muito mais. Uma ferramenta de texto simples, gratuita e premium com estatísticas em tempo real.">
 10 |     <link rel="alternate" hreflang="en" href="https://ilhan-mstf.github.io/convertcase/" />
 11 |     <link rel="alternate" hreflang="es" href="https://ilhan-mstf.github.io/convertcase/es/" />
 12 |     <link rel="alternate" hreflang="pt" href="https://ilhan-mstf.github.io/convertcase/pt/" />
 13 |     <link rel="alternate" hreflang="fr" href="https://ilhan-mstf.github.io/convertcase/fr/" />
 14 |     <link rel="alternate" hreflang="de" href="https://ilhan-mstf.github.io/convertcase/de/" />
 15 |     <link rel="alternate" hreflang="tr" href="https://ilhan-mstf.github.io/convertcase/tr/" />
 16 |     <link rel="alternate" hreflang="it" href="https://ilhan-mstf.github.io/convertcase/it/" />
 17 |     <link rel="alternate" hreflang="x-default" href="https://ilhan-mstf.github.io/convertcase/" />
 18 | 
 19 |     <meta name="keywords"
 20 |         content="converter maiúsculas, conversor de texto, maiúsculas, minúsculas, tipo título, tipo frase, ferramenta de texto, contador de palavras, contador de caracteres">
 21 |     <meta name="author" content="Convert Case App">
 22 |     <meta name="robots" content="index, follow">
 23 |     <link rel="canonical" href="https://ilhan-mstf.github.io/convertcase/pt/">
 24 |     <link rel="manifest" href="../manifest.json">
 25 |     <meta name="theme-color" content="#2563eb">
 26 |     <link rel="icon" type="image/svg+xml" href="../icon.svg">
 27 | 
 28 |     <meta property="og:type" content="website">
 29 |     <meta property="og:url" content="https://ilhan-mstf.github.io/convertcase/pt/">
 30 |     <meta property="og:title" content="Converter Maiúsculas e Minúsculas | Ferramenta de Texto Premium">
 31 |     <meta property="og:description"
 32 |         content="Converta facilmente texto entre maiúsculas, minúsculas, tipo frase, tipo título e muito mais.">
 33 |     <meta property="og:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 34 |     <meta property="twitter:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 35 | 
 36 |     <style>
 37 |         :root {
 38 |             --bg-color: #f8fafc;
 39 |             --text-color: #1e293b;
 40 |             --primary-color: #2563eb;
 41 |             --primary-hover: #1d4ed8;
 42 |             --secondary-bg: #ffffff;
 43 |             --border-color: #e2e8f0;
 44 |             --accent-color: #64748b;
 45 |             --danger-color: #dc2626;
 46 |             --danger-hover: #b91c1c;
 47 |             --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 48 |             --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 49 |             --radius: 0.75rem;
 50 |             --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 51 |         }
 52 | 
 53 |         * {
 54 |             box-sizing: border-box;
 55 |             margin: 0;
 56 |             padding: 0;
 57 |         }
 58 | 
 59 |         body {
 60 |             font-family: var(--font-family);
 61 |             background-color: var(--bg-color);
 62 |             color: var(--text-color);
 63 |             line-height: 1.5;
 64 |             min-height: 100vh;
 65 |             display: flex;
 66 |             flex-direction: column;
 67 |             align-items: center;
 68 |             padding: 2rem;
 69 |         }
 70 | 
 71 |         .app-container {
 72 |             width: 100%;
 73 |             max-width: 1000px;
 74 |             margin: 0 auto;
 75 |         }
 76 | 
 77 |         .app-header {
 78 |             text-align: center;
 79 |             margin-bottom: 2rem;
 80 |         }
 81 | 
 82 |         .app-header h1 {
 83 |             font-size: 2.5rem;
 84 |             font-weight: 700;
 85 |             color: var(--text-color);
 86 |             margin-bottom: 0.5rem;
 87 |             letter-spacing: -0.025em;
 88 |         }
 89 | 
 90 |         .app-header p {
 91 |             color: var(--accent-color);
 92 |             font-size: 1.1rem;
 93 |         }
 94 | 
 95 |         .converter-wrapper {
 96 |             background-color: var(--secondary-bg);
 97 |             border-radius: var(--radius);
 98 |             box-shadow: var(--shadow-md);
 99 |             padding: 1.5rem;
100 |             border: 1px solid var(--border-color);
101 |             margin-bottom: 3rem;
102 |         }
103 | 
104 |         .toolbar {
105 |             display: flex;
106 |             flex-wrap: nowrap;
107 |             gap: 0.5rem;
108 |             margin-bottom: 1.5rem;
109 |             justify-content: center;
110 |             overflow-x: auto;
111 |             padding-bottom: 0.5rem;
112 |             /* Space for scrollbar if needed */
113 |             -webkit-overflow-scrolling: touch;
114 |         }
115 | 
116 |         .btn {
117 |             padding: 0.5rem 0.75rem;
118 |             border-radius: 0.5rem;
119 |             font-weight: 500;
120 |             font-size: 0.85rem;
121 |             cursor: pointer;
122 |             transition: all 0.2s ease;
123 |             border: 1px solid transparent;
124 |             font-family: var(--font-family);
125 |             white-space: nowrap;
126 |             flex-shrink: 0;
127 |             /* Prevent buttons from squishing */
128 |         }
129 | 
130 |         .btn-primary {
131 |             background-color: var(--primary-color);
132 |             color: white;
133 |         }
134 | 
135 |         .btn-primary:hover {
136 |             background-color: var(--primary-hover);
137 |             transform: translateY(-1px);
138 |             box-shadow: var(--shadow-sm);
139 |         }
140 | 
141 |         .btn-secondary {
142 |             background-color: white;
143 |             color: var(--text-color);
144 |             border-color: var(--border-color);
145 |         }
146 | 
147 |         .btn-secondary:hover {
148 |             background-color: var(--bg-color);
149 |             border-color: var(--accent-color);
150 |         }
151 | 
152 |         .btn-danger {
153 |             background-color: white;
154 |             color: var(--danger-color);
155 |             border-color: var(--border-color);
156 |         }
157 | 
158 |         .btn-danger:hover {
159 |             background-color: #fef2f2;
160 |             border-color: var(--danger-color);
161 |         }
162 | 
163 |         .input-area {
164 |             margin-bottom: 1.5rem;
165 |         }
166 | 
167 |         textarea {
168 |             width: 100%;
169 |             height: 400px;
170 |             padding: 1.25rem;
171 |             border: 1px solid var(--border-color);
172 |             border-radius: var(--radius);
173 |             font-family: var(--font-family);
174 |             font-size: 1rem;
175 |             resize: vertical;
176 |             outline: none;
177 |             transition: border-color 0.2s;
178 |             background-color: #fafafa;
179 |         }
180 | 
181 |         textarea:focus {
182 |             border-color: var(--primary-color);
183 |             background-color: white;
184 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
185 |         }
186 | 
187 |         .action-bar {
188 |             display: flex;
189 |             justify-content: space-between;
190 |             align-items: center;
191 |             flex-wrap: wrap;
192 |             gap: 1.5rem;
193 |             padding-top: 1rem;
194 |             border-top: 1px solid var(--border-color);
195 |         }
196 | 
197 |         .stats {
198 |             display: flex;
199 |             align-items: center;
200 |             gap: 0.75rem;
201 |             color: var(--accent-color);
202 |             font-size: 0.9rem;
203 |             font-weight: 500;
204 |         }
205 | 
206 |         .stats span.separator {
207 |             color: var(--border-color);
208 |         }
209 | 
210 |         .actions {
211 |             display: flex;
212 |             gap: 0.75rem;
213 |         }
214 | 
215 |         /* SEO Content Section */
216 |         .content-section {
217 |             margin-top: 3rem;
218 |             color: var(--text-color);
219 |         }
220 | 
221 |         .content-section article {
222 |             margin-bottom: 2rem;
223 |         }
224 | 
225 |         .content-section h2 {
226 |             font-size: 1.5rem;
227 |             font-weight: 600;
228 |             margin-bottom: 0.75rem;
229 |             color: var(--text-color);
230 |         }
231 | 
232 |         .content-section p {
233 |             color: var(--accent-color);
234 |             line-height: 1.7;
235 |             margin-bottom: 1rem;
236 |         }
237 | 
238 |         .app-footer {
239 |             text-align: center;
240 |             margin-top: 3rem;
241 |             color: var(--accent-color);
242 |             font-size: 0.875rem;
243 |             padding-bottom: 2rem;
244 |             display: flex;
245 |             flex-direction: column;
246 |             align-items: center;
247 |             gap: 1rem;
248 |         }
249 | 
250 |         .language-switcher select {
251 |             appearance: none;
252 |             -webkit-appearance: none;
253 |             -moz-appearance: none;
254 |             padding: 0.5rem 2.5rem 0.5rem 1rem;
255 |             border-radius: 0.5rem;
256 |             border: 1px solid var(--border-color);
257 |             background-color: white;
258 |             color: var(--text-color);
259 |             font-family: var(--font-family);
260 |             font-size: 0.9rem;
261 |             cursor: pointer;
262 |             outline: none;
263 |             transition: border-color 0.2s;
264 |             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
265 |             background-repeat: no-repeat;
266 |             background-position: right 0.7rem center;
267 |             background-size: 1em;
268 |         }
269 | 
270 |         .language-switcher select:hover {
271 |             border-color: var(--accent-color);
272 |         }
273 | 
274 |         .language-switcher select:focus {
275 |             border-color: var(--primary-color);
276 |         }
277 | 
278 |         .privacy-notice {
279 |             font-size: 0.9rem;
280 |             color: var(--primary-color);
281 |             margin-top: 0.5rem;
282 |             font-weight: 500;
283 |             display: flex;
284 |             align-items: center;
285 |             justify-content: center;
286 |             gap: 0.5rem;
287 |         }
288 | 
289 |         @media (max-width: 768px) {
290 |             body {
291 |                 padding: 1rem;
292 |             }
293 | 
294 |             .action-bar {
295 |                 flex-direction: column;
296 |                 align-items: stretch;
297 |             }
298 | 
299 |             .stats {
300 |                 justify-content: center;
301 |                 flex-wrap: wrap;
302 |             }
303 | 
304 |             .actions {
305 |                 justify-content: center;
306 |                 flex-wrap: wrap;
307 |             }
308 | 
309 |             .toolbar {
310 |                 justify-content: flex-start;
311 |             }
312 |         }
313 |     </style>
314 |     <script src="../script.js" defer></script>
315 | </head>
316 | 
317 | <body>
318 |     <div class="app-container">
319 |         <header class="app-header">
320 |             <h1>Converter Texto</h1>
321 |             <p>A ferramenta premium para todas as suas necessidades de conversão de texto.</p>
322 |             <p class="privacy-notice">
323 |                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
324 |                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
325 |                     <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
326 |                     <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
327 |                 </svg>
328 |                 Focado na privacidade - todas as conversões acontecem localmente no seu dispositivo.
329 |             </p>
330 |         </header>
331 | 
332 |         <main class="converter-wrapper">
333 |             <div class="toolbar">
334 |                 <button id="sentence" class="btn btn-primary" title="Converter para tipo frase">Tipo frase</button>
335 |                 <button id="lower" class="btn btn-primary" title="Converter para minúsculas">minúsculas</button>
336 |                 <button id="upper" class="btn btn-primary" title="Converter para MAIÚSCULAS">MAIÚSCULAS</button>
337 |                 <button id="capitalized" class="btn btn-primary" title="Converter para Iniciais Maiúsculas">Iniciais
338 |                     Maiúsculas</button>
339 |                 <button id="alternating" class="btn btn-primary" title="Converter para aLtErNaDo">aLtErNaDo</button>
340 |                 <button id="title" class="btn btn-primary" title="Converter para Tipo Título">Tipo Título</button>
341 |                 <button id="inverse" class="btn btn-primary" title="Converter para InVeRsO">InVeRsO</button>
342 |             </div>
343 | 
344 |             <div class="input-area">
345 |                 <textarea id="text-input" placeholder="Digite ou cole seu conteúdo aqui..."></textarea>
346 |             </div>
347 | 
348 |             <div class="action-bar">
349 |                 <div class="stats">
350 |                     <span id="char-count">0</span> Caracteres
351 |                     <span class="separator">|</span>
352 |                     <span id="word-count">0</span> Palavras
353 |                     <span class="separator">|</span>
354 |                     <span id="sentence-count">0</span> Frases
355 |                     <span class="separator">|</span>
356 |                     <span id="line-count">0</span> Linhas
357 |                 </div>
358 |                 <div class="actions">
359 |                     <button id="download" class="btn btn-secondary" title="Baixar Texto">Baixar</button>
360 |                     <button id="copy" class="btn btn-secondary"
361 |                         title="Copiar para Área de Transferência">Copiar</button>
362 |                     <button id="clear" class="btn btn-danger" title="Limpar Texto">Limpar</button>
363 |                 </div>
364 |             </div>
365 |         </main>
366 | 
367 |         <section class="content-section">
368 |             <article>
369 |                 <h2>Tipo Frase</h2>
370 |                 <p>O conversor de tipo frase permitirá que você cole qualquer texto e o transformará automaticamente em
371 |                     uma frase estruturada. Funciona capitalizando a primeira letra de cada frase.</p>
372 |             </article>
373 | 
374 |             <article>
375 |                 <h2>Minúsculas</h2>
376 |                 <p>Se você está se perguntando como descapitalizar texto, é exatamente isso que o conversor de
377 |                     minúsculas permite fazer - transforma todas as letras do seu texto em minúsculas.</p>
378 |             </article>
379 | 
380 |             <article>
381 |                 <h2>Maiúsculas</h2>
382 |                 <p>O transformador de maiúsculas pegará qualquer texto que você tenha e gerará todas as letras em
383 |                     maiúsculas.</p>
384 |             </article>
385 | 
386 |             <article>
387 |                 <h2>Iniciais Maiúsculas</h2>
388 |                 <p>O conversor de iniciais maiúsculas converterá automaticamente a letra inicial de cada palavra em
389 |                     maiúscula e deixará as letras restantes em minúsculas.</p>
390 |             </article>
391 | 
392 |             <article>
393 |                 <h2>Caso Alternado</h2>
394 |                 <p>O conversor de caso alternado permitirá que você transforme seu texto em texto que alterna entre
395 |                     minúsculas e maiúsculas.</p>
396 |             </article>
397 | 
398 |             <article>
399 |                 <h2>Tipo Título</h2>
400 |                 <p>O conversor de tipo título é perfeito para garantir que as letras corretas estejam em maiúsculas
401 |                     dentro do contexto de um título.</p>
402 |             </article>
403 | 
404 |             <article>
405 |                 <h2>Caso Inverso</h2>
406 |                 <p>O conversor de caso inverso permitirá que você inverta o caso do seu texto.</p>
407 |             </article>
408 |         </section>
409 | 
410 |         <footer class="app-footer">
411 |             <div class="language-switcher">
412 |                 <select id="lang-selector" onchange="switchLanguage(this.value)" aria-label="Selecionar idioma">
413 |                     <option value="en">English</option>
414 |                     <option value="es">Español</option>
415 |                     <option value="pt" selected>Português</option>
416 |                     <option value="fr">Français</option>
417 |                     <option value="de">Deutsch</option>
418 |                     <option value="tr">Türkçe</option>
419 |                     <option value="it">Italiano</option>
420 |                 </select>
421 |             </div>
422 |             <p>&copy; 2025 Convert Case App. Simples. Claro. Poderoso.</p>
423 |         </footer>
424 |     </div>
425 |     <script>
426 |         function switchLanguage(lang) {
427 |             localStorage.setItem('manual_lang_switch', 'true');
428 |             if (lang === 'en') {
429 |                 window.location.href = '../index.html';
430 |             } else {
431 |                 window.location.href = '../' + lang + '/index.html';
432 |             }
433 |         }
434 |     </script>
435 | 
436 | </body>
437 | 
438 | </html>


--------------------------------------------------------------------------------
/fr/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="fr">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Convertir Majuscules et Minuscules | Outil de Texte Premium</title>
  8 |     <meta name="description"
  9 |         content="Convertissez facilement du texte entre majuscules, minuscules, type phrase, type titre et plus encore. Un outil de texte simple, gratuit et premium avec des statistiques en temps réel.">
 10 |     <link rel="alternate" hreflang="en" href="https://ilhan-mstf.github.io/convertcase/" />
 11 |     <link rel="alternate" hreflang="es" href="https://ilhan-mstf.github.io/convertcase/es/" />
 12 |     <link rel="alternate" hreflang="pt" href="https://ilhan-mstf.github.io/convertcase/pt/" />
 13 |     <link rel="alternate" hreflang="fr" href="https://ilhan-mstf.github.io/convertcase/fr/" />
 14 |     <link rel="alternate" hreflang="de" href="https://ilhan-mstf.github.io/convertcase/de/" />
 15 |     <link rel="alternate" hreflang="tr" href="https://ilhan-mstf.github.io/convertcase/tr/" />
 16 |     <link rel="alternate" hreflang="it" href="https://ilhan-mstf.github.io/convertcase/it/" />
 17 |     <link rel="alternate" hreflang="x-default" href="https://ilhan-mstf.github.io/convertcase/" />
 18 | 
 19 |     <meta name="keywords"
 20 |         content="convertir majuscules, convertisseur de texte, majuscules, minuscules, type titre, type phrase, outil de texte, compteur de mots, compteur de caractères">
 21 |     <meta name="author" content="Convert Case App">
 22 |     <meta name="robots" content="index, follow">
 23 |     <link rel="canonical" href="https://ilhan-mstf.github.io/convertcase/fr/">
 24 |     <link rel="manifest" href="../manifest.json">
 25 |     <meta name="theme-color" content="#2563eb">
 26 |     <link rel="icon" type="image/svg+xml" href="../icon.svg">
 27 | 
 28 |     <meta property="og:type" content="website">
 29 |     <meta property="og:url" content="https://ilhan-mstf.github.io/convertcase/fr/">
 30 |     <meta property="og:title" content="Convertir Majuscules et Minuscules | Outil de Texte Premium">
 31 |     <meta property="og:description"
 32 |         content="Convertissez facilement du texte entre majuscules, minuscules, type phrase, type titre et plus encore.">
 33 |     <meta property="og:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 34 |     <meta property="twitter:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 35 | 
 36 |     <style>
 37 |         :root {
 38 |             --bg-color: #f8fafc;
 39 |             --text-color: #1e293b;
 40 |             --primary-color: #2563eb;
 41 |             --primary-hover: #1d4ed8;
 42 |             --secondary-bg: #ffffff;
 43 |             --border-color: #e2e8f0;
 44 |             --accent-color: #64748b;
 45 |             --danger-color: #dc2626;
 46 |             --danger-hover: #b91c1c;
 47 |             --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 48 |             --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 49 |             --radius: 0.75rem;
 50 |             --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 51 |         }
 52 | 
 53 |         * {
 54 |             box-sizing: border-box;
 55 |             margin: 0;
 56 |             padding: 0;
 57 |         }
 58 | 
 59 |         body {
 60 |             font-family: var(--font-family);
 61 |             background-color: var(--bg-color);
 62 |             color: var(--text-color);
 63 |             line-height: 1.5;
 64 |             min-height: 100vh;
 65 |             display: flex;
 66 |             flex-direction: column;
 67 |             align-items: center;
 68 |             padding: 2rem;
 69 |         }
 70 | 
 71 |         .app-container {
 72 |             width: 100%;
 73 |             max-width: 1000px;
 74 |             margin: 0 auto;
 75 |         }
 76 | 
 77 |         .app-header {
 78 |             text-align: center;
 79 |             margin-bottom: 2rem;
 80 |         }
 81 | 
 82 |         .app-header h1 {
 83 |             font-size: 2.5rem;
 84 |             font-weight: 700;
 85 |             color: var(--text-color);
 86 |             margin-bottom: 0.5rem;
 87 |             letter-spacing: -0.025em;
 88 |         }
 89 | 
 90 |         .app-header p {
 91 |             color: var(--accent-color);
 92 |             font-size: 1.1rem;
 93 |         }
 94 | 
 95 |         .converter-wrapper {
 96 |             background-color: var(--secondary-bg);
 97 |             border-radius: var(--radius);
 98 |             box-shadow: var(--shadow-md);
 99 |             padding: 1.5rem;
100 |             border: 1px solid var(--border-color);
101 |             margin-bottom: 3rem;
102 |         }
103 | 
104 |         .toolbar {
105 |             display: flex;
106 |             flex-wrap: nowrap;
107 |             gap: 0.5rem;
108 |             margin-bottom: 1.5rem;
109 |             justify-content: center;
110 |             overflow-x: auto;
111 |             padding-bottom: 0.5rem;
112 |             /* Space for scrollbar if needed */
113 |             -webkit-overflow-scrolling: touch;
114 |         }
115 | 
116 |         .btn {
117 |             padding: 0.5rem 0.75rem;
118 |             border-radius: 0.5rem;
119 |             font-weight: 500;
120 |             font-size: 0.85rem;
121 |             cursor: pointer;
122 |             transition: all 0.2s ease;
123 |             border: 1px solid transparent;
124 |             font-family: var(--font-family);
125 |             white-space: nowrap;
126 |             flex-shrink: 0;
127 |             /* Prevent buttons from squishing */
128 |         }
129 | 
130 |         .btn-primary {
131 |             background-color: var(--primary-color);
132 |             color: white;
133 |         }
134 | 
135 |         .btn-primary:hover {
136 |             background-color: var(--primary-hover);
137 |             transform: translateY(-1px);
138 |             box-shadow: var(--shadow-sm);
139 |         }
140 | 
141 |         .btn-secondary {
142 |             background-color: white;
143 |             color: var(--text-color);
144 |             border-color: var(--border-color);
145 |         }
146 | 
147 |         .btn-secondary:hover {
148 |             background-color: var(--bg-color);
149 |             border-color: var(--accent-color);
150 |         }
151 | 
152 |         .btn-danger {
153 |             background-color: white;
154 |             color: var(--danger-color);
155 |             border-color: var(--border-color);
156 |         }
157 | 
158 |         .btn-danger:hover {
159 |             background-color: #fef2f2;
160 |             border-color: var(--danger-color);
161 |         }
162 | 
163 |         .input-area {
164 |             margin-bottom: 1.5rem;
165 |         }
166 | 
167 |         textarea {
168 |             width: 100%;
169 |             height: 400px;
170 |             padding: 1.25rem;
171 |             border: 1px solid var(--border-color);
172 |             border-radius: var(--radius);
173 |             font-family: var(--font-family);
174 |             font-size: 1rem;
175 |             resize: vertical;
176 |             outline: none;
177 |             transition: border-color 0.2s;
178 |             background-color: #fafafa;
179 |         }
180 | 
181 |         textarea:focus {
182 |             border-color: var(--primary-color);
183 |             background-color: white;
184 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
185 |         }
186 | 
187 |         .action-bar {
188 |             display: flex;
189 |             justify-content: space-between;
190 |             align-items: center;
191 |             flex-wrap: wrap;
192 |             gap: 1.5rem;
193 |             padding-top: 1rem;
194 |             border-top: 1px solid var(--border-color);
195 |         }
196 | 
197 |         .stats {
198 |             display: flex;
199 |             align-items: center;
200 |             gap: 0.75rem;
201 |             color: var(--accent-color);
202 |             font-size: 0.9rem;
203 |             font-weight: 500;
204 |         }
205 | 
206 |         .stats span.separator {
207 |             color: var(--border-color);
208 |         }
209 | 
210 |         .actions {
211 |             display: flex;
212 |             gap: 0.75rem;
213 |         }
214 | 
215 |         /* SEO Content Section */
216 |         .content-section {
217 |             margin-top: 3rem;
218 |             color: var(--text-color);
219 |         }
220 | 
221 |         .content-section article {
222 |             margin-bottom: 2rem;
223 |         }
224 | 
225 |         .content-section h2 {
226 |             font-size: 1.5rem;
227 |             font-weight: 600;
228 |             margin-bottom: 0.75rem;
229 |             color: var(--text-color);
230 |         }
231 | 
232 |         .content-section p {
233 |             color: var(--accent-color);
234 |             line-height: 1.7;
235 |             margin-bottom: 1rem;
236 |         }
237 | 
238 |         .app-footer {
239 |             text-align: center;
240 |             margin-top: 3rem;
241 |             color: var(--accent-color);
242 |             font-size: 0.875rem;
243 |             padding-bottom: 2rem;
244 |             display: flex;
245 |             flex-direction: column;
246 |             align-items: center;
247 |             gap: 1rem;
248 |         }
249 | 
250 |         .language-switcher select {
251 |             appearance: none;
252 |             -webkit-appearance: none;
253 |             -moz-appearance: none;
254 |             padding: 0.5rem 2.5rem 0.5rem 1rem;
255 |             border-radius: 0.5rem;
256 |             border: 1px solid var(--border-color);
257 |             background-color: white;
258 |             color: var(--text-color);
259 |             font-family: var(--font-family);
260 |             font-size: 0.9rem;
261 |             cursor: pointer;
262 |             outline: none;
263 |             transition: border-color 0.2s;
264 |             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
265 |             background-repeat: no-repeat;
266 |             background-position: right 0.7rem center;
267 |             background-size: 1em;
268 |         }
269 | 
270 |         .language-switcher select:hover {
271 |             border-color: var(--accent-color);
272 |         }
273 | 
274 |         .language-switcher select:focus {
275 |             border-color: var(--primary-color);
276 |         }
277 | 
278 |         .privacy-notice {
279 |             font-size: 0.9rem;
280 |             color: var(--primary-color);
281 |             margin-top: 0.5rem;
282 |             font-weight: 500;
283 |             display: flex;
284 |             align-items: center;
285 |             justify-content: center;
286 |             gap: 0.5rem;
287 |         }
288 | 
289 |         @media (max-width: 768px) {
290 |             body {
291 |                 padding: 1rem;
292 |             }
293 | 
294 |             .action-bar {
295 |                 flex-direction: column;
296 |                 align-items: stretch;
297 |             }
298 | 
299 |             .stats {
300 |                 justify-content: center;
301 |                 flex-wrap: wrap;
302 |             }
303 | 
304 |             .actions {
305 |                 justify-content: center;
306 |                 flex-wrap: wrap;
307 |             }
308 | 
309 |             .toolbar {
310 |                 justify-content: flex-start;
311 |             }
312 |         }
313 |     </style>
314 |     <script src="../script.js" defer></script>
315 | </head>
316 | 
317 | <body>
318 |     <div class="app-container">
319 |         <header class="app-header">
320 |             <h1>Convertir Texte</h1>
321 |             <p>L'outil premium pour tous vos besoins de conversion de texte.</p>
322 |             <p class="privacy-notice">
323 |                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
324 |                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
325 |                     <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
326 |                     <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
327 |                 </svg>
328 |                 Respectueux de la vie privée - toutes les conversions se font localement sur votre appareil.
329 |             </p>
330 |         </header>
331 | 
332 |         <main class="converter-wrapper">
333 |             <div class="toolbar">
334 |                 <button id="sentence" class="btn btn-primary" title="Convertir en type phrase">Type phrase</button>
335 |                 <button id="lower" class="btn btn-primary" title="Convertir en minuscules">minuscules</button>
336 |                 <button id="upper" class="btn btn-primary" title="Convertir en MAJUSCULES">MAJUSCULES</button>
337 |                 <button id="capitalized" class="btn btn-primary" title="Convertir en Majuscules Initiales">Majuscules
338 |                     Initiales</button>
339 |                 <button id="alternating" class="btn btn-primary" title="Convertir en aLtErNé">aLtErNé</button>
340 |                 <button id="title" class="btn btn-primary" title="Convertir en Type Titre">Type Titre</button>
341 |                 <button id="inverse" class="btn btn-primary" title="Convertir en InVeRsÉ">InVeRsÉ</button>
342 |             </div>
343 | 
344 |             <div class="input-area">
345 |                 <textarea id="text-input" placeholder="Tapez ou collez votre contenu ici..."></textarea>
346 |             </div>
347 | 
348 |             <div class="action-bar">
349 |                 <div class="stats">
350 |                     <span id="char-count">0</span> Caractères
351 |                     <span class="separator">|</span>
352 |                     <span id="word-count">0</span> Mots
353 |                     <span class="separator">|</span>
354 |                     <span id="sentence-count">0</span> Phrases
355 |                     <span class="separator">|</span>
356 |                     <span id="line-count">0</span> Lignes
357 |                 </div>
358 |                 <div class="actions">
359 |                     <button id="download" class="btn btn-secondary" title="Télécharger le texte">Télécharger</button>
360 |                     <button id="copy" class="btn btn-secondary" title="Copier dans le presse-papiers">Copier</button>
361 |                     <button id="clear" class="btn btn-danger" title="Effacer le texte">Effacer</button>
362 |                 </div>
363 |             </div>
364 |         </main>
365 | 
366 |         <section class="content-section">
367 |             <article>
368 |                 <h2>Type Phrase</h2>
369 |                 <p>Le convertisseur de type phrase vous permettra de coller n'importe quel texte et le transformera
370 |                     automatiquement en une phrase structurée. Il fonctionne en mettant une majuscule à la première
371 |                     lettre de chaque phrase.</p>
372 |             </article>
373 | 
374 |             <article>
375 |                 <h2>Minuscules</h2>
376 |                 <p>Si vous vous demandez comment mettre un texte en minuscules, c'est exactement ce que permet de faire
377 |                     le convertisseur de minuscules - il transforme toutes les lettres de votre texte en minuscules.</p>
378 |             </article>
379 | 
380 |             <article>
381 |                 <h2>Majuscules</h2>
382 |                 <p>Le transformateur de majuscules prendra n'importe quel texte que vous avez et générera toutes les
383 |                     lettres en majuscules.</p>
384 |             </article>
385 | 
386 |             <article>
387 |                 <h2>Majuscules Initiales</h2>
388 |                 <p>Le convertisseur de majuscules initiales convertira automatiquement la lettre initiale de chaque mot
389 |                     en majuscule et laissera les lettres restantes en minuscules.</p>
390 |             </article>
391 | 
392 |             <article>
393 |                 <h2>Cas Alterné</h2>
394 |                 <p>Le convertisseur de cas alterné vous permettra de transformer votre texte en texte qui alterne entre
395 |                     minuscules et majuscules.</p>
396 |             </article>
397 | 
398 |             <article>
399 |                 <h2>Type Titre</h2>
400 |                 <p>Le convertisseur de type titre est parfait pour s'assurer que les bonnes lettres sont en majuscules
401 |                     dans le contexte d'un titre.</p>
402 |             </article>
403 | 
404 |             <article>
405 |                 <h2>Cas Inversé</h2>
406 |                 <p>Le convertisseur de cas inversé vous permettra d'inverser la casse de votre texte.</p>
407 |             </article>
408 |         </section>
409 | 
410 |         <footer class="app-footer">
411 |             <div class="language-switcher">
412 |                 <select id="lang-selector" onchange="switchLanguage(this.value)" aria-label="Choisir la langue">
413 |                     <option value="en">English</option>
414 |                     <option value="es">Español</option>
415 |                     <option value="pt">Português</option>
416 |                     <option value="fr" selected>Français</option>
417 |                     <option value="de">Deutsch</option>
418 |                     <option value="tr">Türkçe</option>
419 |                     <option value="it">Italiano</option>
420 |                 </select>
421 |             </div>
422 |             <p>&copy; 2025 Convert Case App. Simple. Clair. Puissant.</p>
423 |         </footer>
424 |     </div>
425 |     <script>
426 |         function switchLanguage(lang) {
427 |             localStorage.setItem('manual_lang_switch', 'true');
428 |             if (lang === 'en') {
429 |                 window.location.href = '../index.html';
430 |             } else {
431 |                 window.location.href = '../' + lang + '/index.html';
432 |             }
433 |         }
434 |     </script>
435 | 
436 | </body>
437 | 
438 | </html>


--------------------------------------------------------------------------------
/de/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="de">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Groß- und Kleinschreibung Umwandeln | Premium Text Tool</title>
  8 |     <meta name="description"
  9 |         content="Wandeln Sie Text einfach zwischen Großbuchstaben, Kleinbuchstaben, Satzschreibweise, Titelschreibweise und mehr um. Ein einfaches, kostenloses und erstklassiges Textwerkzeug mit Echtzeit-Statistiken.">
 10 |     <link rel="alternate" hreflang="en" href="https://ilhan-mstf.github.io/convertcase/" />
 11 |     <link rel="alternate" hreflang="es" href="https://ilhan-mstf.github.io/convertcase/es/" />
 12 |     <link rel="alternate" hreflang="pt" href="https://ilhan-mstf.github.io/convertcase/pt/" />
 13 |     <link rel="alternate" hreflang="fr" href="https://ilhan-mstf.github.io/convertcase/fr/" />
 14 |     <link rel="alternate" hreflang="de" href="https://ilhan-mstf.github.io/convertcase/de/" />
 15 |     <link rel="alternate" hreflang="tr" href="https://ilhan-mstf.github.io/convertcase/tr/" />
 16 |     <link rel="alternate" hreflang="it" href="https://ilhan-mstf.github.io/convertcase/it/" />
 17 |     <link rel="alternate" hreflang="x-default" href="https://ilhan-mstf.github.io/convertcase/" />
 18 | 
 19 |     <meta name="keywords"
 20 |         content="großschreibung umwandeln, textkonverter, großbuchstaben, kleinbuchstaben, titelschreibweise, satzschreibweise, textwerkzeug, wortzähler, zeichenzähler">
 21 |     <meta name="author" content="Convert Case App">
 22 |     <meta name="robots" content="index, follow">
 23 |     <link rel="canonical" href="https://ilhan-mstf.github.io/convertcase/de/">
 24 |     <link rel="manifest" href="../manifest.json">
 25 |     <meta name="theme-color" content="#2563eb">
 26 |     <link rel="icon" type="image/svg+xml" href="../icon.svg">
 27 | 
 28 |     <meta property="og:type" content="website">
 29 |     <meta property="og:url" content="https://ilhan-mstf.github.io/convertcase/de/">
 30 |     <meta property="og:title" content="Groß- und Kleinschreibung Umwandeln | Premium Text Tool">
 31 |     <meta property="og:description"
 32 |         content="Wandeln Sie Text einfach zwischen Großbuchstaben, Kleinbuchstaben, Satzschreibweise, Titelschreibweise und mehr um.">
 33 |     <meta property="og:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 34 |     <meta property="twitter:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 35 | 
 36 |     <style>
 37 |         :root {
 38 |             --bg-color: #f8fafc;
 39 |             --text-color: #1e293b;
 40 |             --primary-color: #2563eb;
 41 |             --primary-hover: #1d4ed8;
 42 |             --secondary-bg: #ffffff;
 43 |             --border-color: #e2e8f0;
 44 |             --accent-color: #64748b;
 45 |             --danger-color: #dc2626;
 46 |             --danger-hover: #b91c1c;
 47 |             --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 48 |             --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 49 |             --radius: 0.75rem;
 50 |             --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 51 |         }
 52 | 
 53 |         * {
 54 |             box-sizing: border-box;
 55 |             margin: 0;
 56 |             padding: 0;
 57 |         }
 58 | 
 59 |         body {
 60 |             font-family: var(--font-family);
 61 |             background-color: var(--bg-color);
 62 |             color: var(--text-color);
 63 |             line-height: 1.5;
 64 |             min-height: 100vh;
 65 |             display: flex;
 66 |             flex-direction: column;
 67 |             align-items: center;
 68 |             padding: 2rem;
 69 |         }
 70 | 
 71 |         .app-container {
 72 |             width: 100%;
 73 |             max-width: 1000px;
 74 |             margin: 0 auto;
 75 |         }
 76 | 
 77 |         .app-header {
 78 |             text-align: center;
 79 |             margin-bottom: 2rem;
 80 |         }
 81 | 
 82 |         .app-header h1 {
 83 |             font-size: 2.5rem;
 84 |             font-weight: 700;
 85 |             color: var(--text-color);
 86 |             margin-bottom: 0.5rem;
 87 |             letter-spacing: -0.025em;
 88 |         }
 89 | 
 90 |         .app-header p {
 91 |             color: var(--accent-color);
 92 |             font-size: 1.1rem;
 93 |         }
 94 | 
 95 |         .converter-wrapper {
 96 |             background-color: var(--secondary-bg);
 97 |             border-radius: var(--radius);
 98 |             box-shadow: var(--shadow-md);
 99 |             padding: 1.5rem;
100 |             border: 1px solid var(--border-color);
101 |             margin-bottom: 3rem;
102 |         }
103 | 
104 |         .toolbar {
105 |             display: flex;
106 |             flex-wrap: nowrap;
107 |             gap: 0.5rem;
108 |             margin-bottom: 1.5rem;
109 |             justify-content: center;
110 |             overflow-x: auto;
111 |             padding-bottom: 0.5rem;
112 |             /* Space for scrollbar if needed */
113 |             -webkit-overflow-scrolling: touch;
114 |         }
115 | 
116 |         .btn {
117 |             padding: 0.5rem 0.75rem;
118 |             border-radius: 0.5rem;
119 |             font-weight: 500;
120 |             font-size: 0.85rem;
121 |             cursor: pointer;
122 |             transition: all 0.2s ease;
123 |             border: 1px solid transparent;
124 |             font-family: var(--font-family);
125 |             white-space: nowrap;
126 |             flex-shrink: 0;
127 |             /* Prevent buttons from squishing */
128 |         }
129 | 
130 |         .btn-primary {
131 |             background-color: var(--primary-color);
132 |             color: white;
133 |         }
134 | 
135 |         .btn-primary:hover {
136 |             background-color: var(--primary-hover);
137 |             transform: translateY(-1px);
138 |             box-shadow: var(--shadow-sm);
139 |         }
140 | 
141 |         .btn-secondary {
142 |             background-color: white;
143 |             color: var(--text-color);
144 |             border-color: var(--border-color);
145 |         }
146 | 
147 |         .btn-secondary:hover {
148 |             background-color: var(--bg-color);
149 |             border-color: var(--accent-color);
150 |         }
151 | 
152 |         .btn-danger {
153 |             background-color: white;
154 |             color: var(--danger-color);
155 |             border-color: var(--border-color);
156 |         }
157 | 
158 |         .btn-danger:hover {
159 |             background-color: #fef2f2;
160 |             border-color: var(--danger-color);
161 |         }
162 | 
163 |         .input-area {
164 |             margin-bottom: 1.5rem;
165 |         }
166 | 
167 |         textarea {
168 |             width: 100%;
169 |             height: 400px;
170 |             padding: 1.25rem;
171 |             border: 1px solid var(--border-color);
172 |             border-radius: var(--radius);
173 |             font-family: var(--font-family);
174 |             font-size: 1rem;
175 |             resize: vertical;
176 |             outline: none;
177 |             transition: border-color 0.2s;
178 |             background-color: #fafafa;
179 |         }
180 | 
181 |         textarea:focus {
182 |             border-color: var(--primary-color);
183 |             background-color: white;
184 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
185 |         }
186 | 
187 |         .action-bar {
188 |             display: flex;
189 |             justify-content: space-between;
190 |             align-items: center;
191 |             flex-wrap: wrap;
192 |             gap: 1.5rem;
193 |             padding-top: 1rem;
194 |             border-top: 1px solid var(--border-color);
195 |         }
196 | 
197 |         .stats {
198 |             display: flex;
199 |             align-items: center;
200 |             gap: 0.75rem;
201 |             color: var(--accent-color);
202 |             font-size: 0.9rem;
203 |             font-weight: 500;
204 |         }
205 | 
206 |         .stats span.separator {
207 |             color: var(--border-color);
208 |         }
209 | 
210 |         .actions {
211 |             display: flex;
212 |             gap: 0.75rem;
213 |         }
214 | 
215 |         /* SEO Content Section */
216 |         .content-section {
217 |             margin-top: 3rem;
218 |             color: var(--text-color);
219 |         }
220 | 
221 |         .content-section article {
222 |             margin-bottom: 2rem;
223 |         }
224 | 
225 |         .content-section h2 {
226 |             font-size: 1.5rem;
227 |             font-weight: 600;
228 |             margin-bottom: 0.75rem;
229 |             color: var(--text-color);
230 |         }
231 | 
232 |         .content-section p {
233 |             color: var(--accent-color);
234 |             line-height: 1.7;
235 |             margin-bottom: 1rem;
236 |         }
237 | 
238 |         .app-footer {
239 |             text-align: center;
240 |             margin-top: 3rem;
241 |             color: var(--accent-color);
242 |             font-size: 0.875rem;
243 |             padding-bottom: 2rem;
244 |             display: flex;
245 |             flex-direction: column;
246 |             align-items: center;
247 |             gap: 1rem;
248 |         }
249 | 
250 |         .language-switcher select {
251 |             appearance: none;
252 |             -webkit-appearance: none;
253 |             -moz-appearance: none;
254 |             padding: 0.5rem 2.5rem 0.5rem 1rem;
255 |             border-radius: 0.5rem;
256 |             border: 1px solid var(--border-color);
257 |             background-color: white;
258 |             color: var(--text-color);
259 |             font-family: var(--font-family);
260 |             font-size: 0.9rem;
261 |             cursor: pointer;
262 |             outline: none;
263 |             transition: border-color 0.2s;
264 |             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
265 |             background-repeat: no-repeat;
266 |             background-position: right 0.7rem center;
267 |             background-size: 1em;
268 |         }
269 | 
270 |         .language-switcher select:hover {
271 |             border-color: var(--accent-color);
272 |         }
273 | 
274 |         .language-switcher select:focus {
275 |             border-color: var(--primary-color);
276 |         }
277 | 
278 |         .privacy-notice {
279 |             font-size: 0.9rem;
280 |             color: var(--primary-color);
281 |             margin-top: 0.5rem;
282 |             font-weight: 500;
283 |             display: flex;
284 |             align-items: center;
285 |             justify-content: center;
286 |             gap: 0.5rem;
287 |         }
288 | 
289 |         @media (max-width: 768px) {
290 |             body {
291 |                 padding: 1rem;
292 |             }
293 | 
294 |             .action-bar {
295 |                 flex-direction: column;
296 |                 align-items: stretch;
297 |             }
298 | 
299 |             .stats {
300 |                 justify-content: center;
301 |                 flex-wrap: wrap;
302 |             }
303 | 
304 |             .actions {
305 |                 justify-content: center;
306 |                 flex-wrap: wrap;
307 |             }
308 | 
309 |             .toolbar {
310 |                 justify-content: flex-start;
311 |             }
312 |         }
313 |     </style>
314 |     <script src="../script.js" defer></script>
315 | </head>
316 | 
317 | <body>
318 |     <div class="app-container">
319 |         <header class="app-header">
320 |             <h1>Text Umwandeln</h1>
321 |             <p>Das Premium-Tool für alle Ihre Textumwandlungsbedürfnisse.</p>
322 |             <p class="privacy-notice">
323 |                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
324 |                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
325 |                     <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
326 |                     <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
327 |                 </svg>
328 |                 Datenschutzorientiert - alle Umwandlungen finden lokal auf Ihrem Gerät statt.
329 |             </p>
330 |         </header>
331 | 
332 |         <main class="converter-wrapper">
333 |             <div class="toolbar">
334 |                 <button id="sentence" class="btn btn-primary"
335 |                     title="In Satzschreibweise umwandeln">Satzschreibweise</button>
336 |                 <button id="lower" class="btn btn-primary" title="In kleinbuchstaben umwandeln">kleinbuchstaben</button>
337 |                 <button id="upper" class="btn btn-primary" title="In GROSSBUCHSTABEN umwandeln">GROSSBUCHSTABEN</button>
338 |                 <button id="capitalized" class="btn btn-primary"
339 |                     title="In Großgeschriebene Wörter umwandeln">Großgeschriebene Wörter</button>
340 |                 <button id="alternating" class="btn btn-primary"
341 |                     title="In aBwEcHsElNdE sChReIbWeIsE umwandeln">aBwEcHsElNdE sChReIbWeIsE</button>
342 |                 <button id="title" class="btn btn-primary"
343 |                     title="In Titelschreibweise umwandeln">Titelschreibweise</button>
344 |                 <button id="inverse" class="btn btn-primary" title="In iNVERSE sCHREIBWEISE umwandeln">iNVERSE
345 |                     sCHREIBWEISE</button>
346 |             </div>
347 | 
348 |             <div class="input-area">
349 |                 <textarea id="text-input"
350 |                     placeholder="Geben Sie Ihren Inhalt hier ein oder fügen Sie ihn ein..."></textarea>
351 |             </div>
352 | 
353 |             <div class="action-bar">
354 |                 <div class="stats">
355 |                     <span id="char-count">0</span> Zeichen
356 |                     <span class="separator">|</span>
357 |                     <span id="word-count">0</span> Wörter
358 |                     <span class="separator">|</span>
359 |                     <span id="sentence-count">0</span> Sätze
360 |                     <span class="separator">|</span>
361 |                     <span id="line-count">0</span> Zeilen
362 |                 </div>
363 |                 <div class="actions">
364 |                     <button id="download" class="btn btn-secondary" title="Text herunterladen">Herunterladen</button>
365 |                     <button id="copy" class="btn btn-secondary" title="In die Zwischenablage kopieren">Kopieren</button>
366 |                     <button id="clear" class="btn btn-danger" title="Text löschen">Löschen</button>
367 |                 </div>
368 |             </div>
369 |         </main>
370 | 
371 |         <section class="content-section">
372 |             <article>
373 |                 <h2>Satzschreibweise</h2>
374 |                 <p>Der Konverter für Satzschreibweise ermöglicht es Ihnen, beliebigen Text einzufügen, und wandelt ihn
375 |                     automatisch in einen vollständig strukturierten Satz um. Er funktioniert, indem er den ersten
376 |                     Buchstaben jedes Satzes großschreibt.</p>
377 |             </article>
378 | 
379 |             <article>
380 |                 <h2>Kleinbuchstaben</h2>
381 |                 <p>Wenn Sie sich fragen, wie man Text kleinschreibt, ist dies genau das, was der
382 |                     Kleinbuchstaben-Konverter ermöglicht - er wandelt alle Buchstaben in Ihrem Text in Kleinbuchstaben
383 |                     um.</p>
384 |             </article>
385 | 
386 |             <article>
387 |                 <h2>Großbuchstaben</h2>
388 |                 <p>Der Großbuchstaben-Transformator nimmt jeden Text, den Sie haben, und generiert alle Buchstaben in
389 |                     Großbuchstaben.</p>
390 |             </article>
391 | 
392 |             <article>
393 |                 <h2>Großgeschriebene Wörter</h2>
394 |                 <p>Der Konverter für großgeschriebene Wörter wandelt automatisch den Anfangsbuchstaben jedes Wortes in
395 |                     einen Großbuchstaben um und lässt die restlichen Buchstaben klein.</p>
396 |             </article>
397 | 
398 |             <article>
399 |                 <h2>Abwechselnde Schreibweise</h2>
400 |                 <p>Der Konverter für abwechselnde Schreibweise ermöglicht es Ihnen, Ihren Text in Text umzuwandeln, der
401 |                     zwischen Klein- und Großbuchstaben wechselt.</p>
402 |             </article>
403 | 
404 |             <article>
405 |                 <h2>Titelschreibweise</h2>
406 |                 <p>Der Konverter für Titelschreibweise ist perfekt, um sicherzustellen, dass die richtigen Buchstaben im
407 |                     Kontext eines Titels großgeschrieben werden.</p>
408 |             </article>
409 | 
410 |             <article>
411 |                 <h2>Inverse Schreibweise</h2>
412 |                 <p>Der Konverter für inverse Schreibweise ermöglicht es Ihnen, die Groß-/Kleinschreibung Ihres Textes
413 |                     umzukehren.</p>
414 |             </article>
415 |         </section>
416 | 
417 |         <footer class="app-footer">
418 |             <div class="language-switcher">
419 |                 <select id="lang-selector" onchange="switchLanguage(this.value)" aria-label="Sprache wählen">
420 |                     <option value="en">English</option>
421 |                     <option value="es">Español</option>
422 |                     <option value="pt">Português</option>
423 |                     <option value="fr">Français</option>
424 |                     <option value="de" selected>Deutsch</option>
425 |                     <option value="tr">Türkçe</option>
426 |                     <option value="it">Italiano</option>
427 |                 </select>
428 |             </div>
429 |             <p>&copy; 2025 Convert Case App. Einfach. Klar. Leistungsstark.</p>
430 |         </footer>
431 |     </div>
432 |     <script>
433 |         function switchLanguage(lang) {
434 |             localStorage.setItem('manual_lang_switch', 'true');
435 |             if (lang === 'en') {
436 |                 window.location.href = '../index.html';
437 |             } else {
438 |                 window.location.href = '../' + lang + '/index.html';
439 |             }
440 |         }
441 |     </script>
442 | 
443 | </body>
444 | 
445 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Convert Case | Premium Text Converter Tool</title>
  8 |     <meta name="description"
  9 |         content="Easily convert text between Upper Case, Lower Case, Sentence Case, Title Case and more. A simple, free, and premium text tool with real-time statistics.">
 10 |     <link rel="alternate" hreflang="en" href="https://ilhan-mstf.github.io/convertcase/" />
 11 |     <link rel="alternate" hreflang="es" href="https://ilhan-mstf.github.io/convertcase/es/" />
 12 |     <link rel="alternate" hreflang="pt" href="https://ilhan-mstf.github.io/convertcase/pt/" />
 13 |     <link rel="alternate" hreflang="fr" href="https://ilhan-mstf.github.io/convertcase/fr/" />
 14 |     <link rel="alternate" hreflang="de" href="https://ilhan-mstf.github.io/convertcase/de/" />
 15 |     <link rel="alternate" hreflang="tr" href="https://ilhan-mstf.github.io/convertcase/tr/" />
 16 |     <link rel="alternate" hreflang="it" href="https://ilhan-mstf.github.io/convertcase/it/" />
 17 |     <link rel="alternate" hreflang="x-default" href="https://ilhan-mstf.github.io/convertcase/" />
 18 | 
 19 |     <script>
 20 |         // Auto-redirect logic
 21 |         (function () {
 22 |             try {
 23 |                 var supportedLangs = ['es', 'pt', 'fr', 'de', 'tr', 'it'];
 24 |                 var userLang = (navigator.language || navigator.userLanguage).split('-')[0];
 25 |                 var currentPath = window.location.pathname;
 26 | 
 27 |                 // Check if already in a localized path (simple check)
 28 |                 var isLocalized = supportedLangs.some(l => currentPath.includes('/' + l + '/'));
 29 | 
 30 |                 if (!isLocalized && supportedLangs.includes(userLang) && !localStorage.getItem('manual_lang_switch')) {
 31 |                     // Redirect to localized version
 32 |                     // For local file testing, this might need adjustment, but for prod:
 33 |                     // window.location.href = './' + userLang + '/'; 
 34 |                     // We'll use a relative path that works for both if possible, or just assume web server
 35 |                     var newUrl = window.location.href.replace(/\/index\.html$|\/$/, '') + '/' + userLang + '/index.html';
 36 |                     window.location.replace(newUrl);
 37 |                 }
 38 |             } catch (e) { console.error(e); }
 39 |         })();
 40 |     </script>
 41 |     <meta name="keywords"
 42 |         content="convert case, text converter, upper case, lower case, title case, sentence case, text tool, word count, character count, online text tool, change case">
 43 |     <meta name="author" content="Convert Case App">
 44 |     <meta name="robots" content="index, follow">
 45 |     <link rel="canonical" href="https://ilhan-mstf.github.io/convertcase/">
 46 |     <link rel="manifest" href="manifest.json">
 47 |     <meta name="theme-color" content="#2563eb">
 48 |     <link rel="icon" type="image/svg+xml" href="icon.svg">
 49 | 
 50 |     <!-- Open Graph / Facebook -->
 51 |     <meta property="og:type" content="website">
 52 |     <meta property="og:url" content="https://ilhan-mstf.github.io/convertcase/">
 53 |     <meta property="og:title" content="Convert Case | Premium Text Converter Tool">
 54 |     <meta property="og:description"
 55 |         content="Easily convert text between Upper Case, Lower Case, Sentence Case, Title Case and more. A simple, free, and premium text tool with real-time statistics.">
 56 |     <meta property="og:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 57 | 
 58 |     <!-- Twitter -->
 59 |     <meta property="twitter:card" content="summary_large_image">
 60 |     <meta property="twitter:url" content="https://ilhan-mstf.github.io/convertcase/">
 61 |     <meta property="twitter:title" content="Convert Case | Premium Text Converter Tool">
 62 |     <meta property="twitter:description"
 63 |         content="Easily convert text between Upper Case, Lower Case, Sentence Case, Title Case and more. A simple, free, and premium text tool with real-time statistics.">
 64 |     <meta property="twitter:image" content="https://ilhan-mstf.github.io/convertcase/og-image.png">
 65 | 
 66 |     <!-- Structured Data -->
 67 |     <script type="application/ld+json">
 68 |     {
 69 |       "@context": "https://schema.org",
 70 |       "@type": "SoftwareApplication",
 71 |       "name": "Convert Case",
 72 |       "applicationCategory": "UtilityApplication",
 73 |       "operatingSystem": "Any",
 74 |       "offers": {
 75 |         "@type": "Offer",
 76 |         "price": "0",
 77 |         "priceCurrency": "USD"
 78 |       },
 79 |       "description": "A free online text tool to convert text between different letter cases: lower case, UPPER CASE, Sentence case, Capitalized Case, aLtErNaTiNg cAsE, Title Case, and InVeRsE CaSe."
 80 |     }
 81 |     </script>
 82 | 
 83 |     <style>
 84 |         :root {
 85 |             --bg-color: #f8fafc;
 86 |             --text-color: #1e293b;
 87 |             --primary-color: #2563eb;
 88 |             --primary-hover: #1d4ed8;
 89 |             --secondary-bg: #ffffff;
 90 |             --border-color: #e2e8f0;
 91 |             --accent-color: #64748b;
 92 |             --danger-color: #dc2626;
 93 |             --danger-hover: #b91c1c;
 94 |             --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 95 |             --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 96 |             --radius: 0.75rem;
 97 |             --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 98 |         }
 99 | 
100 |         * {
101 |             box-sizing: border-box;
102 |             margin: 0;
103 |             padding: 0;
104 |         }
105 | 
106 |         body {
107 |             font-family: var(--font-family);
108 |             background-color: var(--bg-color);
109 |             color: var(--text-color);
110 |             line-height: 1.5;
111 |             min-height: 100vh;
112 |             display: flex;
113 |             flex-direction: column;
114 |             align-items: center;
115 |             padding: 2rem;
116 |         }
117 | 
118 |         .app-container {
119 |             width: 100%;
120 |             max-width: 1000px;
121 |             margin: 0 auto;
122 |         }
123 | 
124 |         .app-header {
125 |             text-align: center;
126 |             margin-bottom: 2rem;
127 |         }
128 | 
129 |         .app-header h1 {
130 |             font-size: 2.5rem;
131 |             font-weight: 700;
132 |             color: var(--text-color);
133 |             margin-bottom: 0.5rem;
134 |             letter-spacing: -0.025em;
135 |         }
136 | 
137 |         .app-header p {
138 |             color: var(--accent-color);
139 |             font-size: 1.1rem;
140 |         }
141 | 
142 |         .converter-wrapper {
143 |             background-color: var(--secondary-bg);
144 |             border-radius: var(--radius);
145 |             box-shadow: var(--shadow-md);
146 |             padding: 1.5rem;
147 |             border: 1px solid var(--border-color);
148 |             margin-bottom: 3rem;
149 |         }
150 | 
151 |         .toolbar {
152 |             display: flex;
153 |             flex-wrap: nowrap;
154 |             gap: 0.5rem;
155 |             margin-bottom: 1.5rem;
156 |             justify-content: center;
157 |             overflow-x: auto;
158 |             padding-bottom: 0.5rem;
159 |             /* Space for scrollbar if needed */
160 |             -webkit-overflow-scrolling: touch;
161 |         }
162 | 
163 |         .btn {
164 |             padding: 0.5rem 0.75rem;
165 |             border-radius: 0.5rem;
166 |             font-weight: 500;
167 |             font-size: 0.85rem;
168 |             cursor: pointer;
169 |             transition: all 0.2s ease;
170 |             border: 1px solid transparent;
171 |             font-family: var(--font-family);
172 |             white-space: nowrap;
173 |             flex-shrink: 0;
174 |             /* Prevent buttons from squishing */
175 |         }
176 | 
177 |         .btn-primary {
178 |             background-color: var(--primary-color);
179 |             color: white;
180 |         }
181 | 
182 |         .btn-primary:hover {
183 |             background-color: var(--primary-hover);
184 |             transform: translateY(-1px);
185 |             box-shadow: var(--shadow-sm);
186 |         }
187 | 
188 |         .btn-secondary {
189 |             background-color: white;
190 |             color: var(--text-color);
191 |             border-color: var(--border-color);
192 |         }
193 | 
194 |         .btn-secondary:hover {
195 |             background-color: var(--bg-color);
196 |             border-color: var(--accent-color);
197 |         }
198 | 
199 |         .btn-danger {
200 |             background-color: white;
201 |             color: var(--danger-color);
202 |             border-color: var(--border-color);
203 |         }
204 | 
205 |         .btn-danger:hover {
206 |             background-color: #fef2f2;
207 |             border-color: var(--danger-color);
208 |         }
209 | 
210 |         .input-area {
211 |             margin-bottom: 1.5rem;
212 |         }
213 | 
214 |         textarea {
215 |             width: 100%;
216 |             height: 400px;
217 |             padding: 1.25rem;
218 |             border: 1px solid var(--border-color);
219 |             border-radius: var(--radius);
220 |             font-family: var(--font-family);
221 |             font-size: 1rem;
222 |             resize: vertical;
223 |             outline: none;
224 |             transition: border-color 0.2s;
225 |             background-color: #fafafa;
226 |         }
227 | 
228 |         textarea:focus {
229 |             border-color: var(--primary-color);
230 |             background-color: white;
231 |             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
232 |         }
233 | 
234 |         .action-bar {
235 |             display: flex;
236 |             justify-content: space-between;
237 |             align-items: center;
238 |             flex-wrap: wrap;
239 |             gap: 1.5rem;
240 |             padding-top: 1rem;
241 |             border-top: 1px solid var(--border-color);
242 |         }
243 | 
244 |         .stats {
245 |             display: flex;
246 |             align-items: center;
247 |             gap: 0.75rem;
248 |             color: var(--accent-color);
249 |             font-size: 0.9rem;
250 |             font-weight: 500;
251 |         }
252 | 
253 |         .stats span.separator {
254 |             color: var(--border-color);
255 |         }
256 | 
257 |         .actions {
258 |             display: flex;
259 |             gap: 0.75rem;
260 |         }
261 | 
262 |         /* SEO Content Section */
263 |         .content-section {
264 |             margin-top: 3rem;
265 |             color: var(--text-color);
266 |         }
267 | 
268 |         .content-section article {
269 |             margin-bottom: 2rem;
270 |         }
271 | 
272 |         .content-section h2 {
273 |             font-size: 1.5rem;
274 |             font-weight: 600;
275 |             margin-bottom: 0.75rem;
276 |             color: var(--text-color);
277 |         }
278 | 
279 |         .content-section p {
280 |             color: var(--accent-color);
281 |             line-height: 1.7;
282 |             margin-bottom: 1rem;
283 |         }
284 | 
285 |         .app-footer {
286 |             text-align: center;
287 |             margin-top: 3rem;
288 |             color: var(--accent-color);
289 |             font-size: 0.875rem;
290 |             padding-bottom: 2rem;
291 |             display: flex;
292 |             flex-direction: column;
293 |             align-items: center;
294 |             gap: 1rem;
295 |         }
296 | 
297 |         .language-switcher select {
298 |             appearance: none;
299 |             -webkit-appearance: none;
300 |             -moz-appearance: none;
301 |             padding: 0.5rem 2.5rem 0.5rem 1rem;
302 |             border-radius: 0.5rem;
303 |             border: 1px solid var(--border-color);
304 |             background-color: white;
305 |             color: var(--text-color);
306 |             font-family: var(--font-family);
307 |             font-size: 0.9rem;
308 |             cursor: pointer;
309 |             outline: none;
310 |             transition: border-color 0.2s;
311 |             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
312 |             background-repeat: no-repeat;
313 |             background-position: right 0.7rem center;
314 |             background-size: 1em;
315 |         }
316 | 
317 |         .language-switcher select:hover {
318 |             border-color: var(--accent-color);
319 |         }
320 | 
321 |         .language-switcher select:focus {
322 |             border-color: var(--primary-color);
323 |         }
324 | 
325 |         .privacy-notice {
326 |             font-size: 0.9rem;
327 |             color: var(--primary-color);
328 |             margin-top: 0.5rem;
329 |             font-weight: 500;
330 |             display: flex;
331 |             align-items: center;
332 |             justify-content: center;
333 |             gap: 0.5rem;
334 |         }
335 | 
336 |         @media (max-width: 768px) {
337 |             body {
338 |                 padding: 1rem;
339 |             }
340 | 
341 |             .action-bar {
342 |                 flex-direction: column;
343 |                 align-items: stretch;
344 |             }
345 | 
346 |             .stats {
347 |                 justify-content: center;
348 |                 flex-wrap: wrap;
349 |             }
350 | 
351 |             .actions {
352 |                 justify-content: center;
353 |                 flex-wrap: wrap;
354 |             }
355 | 
356 |             .toolbar {
357 |                 justify-content: flex-start;
358 |             }
359 |         }
360 |     </style>
361 |     <script src="script.js" defer></script>
362 | </head>
363 | 
364 | <body>
365 |     <div class="app-container">
366 |         <header class="app-header">
367 |             <h1>Convert Case</h1>
368 |             <p>The premium tool for all your text conversion needs.</p>
369 |             <p class="privacy-notice">
370 |                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
371 |                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
372 |                     <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
373 |                     <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
374 |                 </svg>
375 |                 Privacy focused - all conversions happen locally on your device.
376 |             </p>
377 |         </header>
378 | 
379 |         <main class="converter-wrapper">
380 |             <div class="toolbar">
381 |                 <button id="sentence" class="btn btn-primary" title="Convert to Sentence case">Sentence case</button>
382 |                 <button id="lower" class="btn btn-primary" title="Convert to lower case">lower case</button>
383 |                 <button id="upper" class="btn btn-primary" title="Convert to UPPER CASE">UPPER CASE</button>
384 |                 <button id="capitalized" class="btn btn-primary" title="Convert to Capitalized Case">Capitalized
385 |                     Case</button>
386 |                 <button id="alternating" class="btn btn-primary" title="Convert to aLtErNaTiNg cAsE">aLtErNaTiNg
387 |                     cAsE</button>
388 |                 <button id="title" class="btn btn-primary" title="Convert to Title Case">Title Case</button>
389 |                 <button id="inverse" class="btn btn-primary" title="Convert to InVeRsE CaSe">InVeRsE CaSe</button>
390 |             </div>
391 | 
392 |             <div class="input-area">
393 |                 <textarea id="text-input" placeholder="Type or paste your content here..."></textarea>
394 |             </div>
395 | 
396 |             <div class="action-bar">
397 |                 <div class="stats">
398 |                     <span id="char-count">0</span> Characters
399 |                     <span class="separator">|</span>
400 |                     <span id="word-count">0</span> Words
401 |                     <span class="separator">|</span>
402 |                     <span id="sentence-count">0</span> Sentences
403 |                     <span class="separator">|</span>
404 |                     <span id="line-count">0</span> Lines
405 |                 </div>
406 |                 <div class="actions">
407 |                     <button id="download" class="btn btn-secondary" title="Download Text">Download Text</button>
408 |                     <button id="copy" class="btn btn-secondary" title="Copy to Clipboard">Copy to Clipboard</button>
409 |                     <button id="clear" class="btn btn-danger" title="Clear Text">Clear</button>
410 |                 </div>
411 |             </div>
412 |         </main>
413 | 
414 |         <section class="content-section">
415 |             <article>
416 |                 <h2>Sentence Case</h2>
417 |                 <p>The sentence case converter will allow you to paste any text you’d like, and it will automatically
418 |                     transform it to a fully formed structured sentence. It works by capitalizing the very first letter
419 |                     in each sentence, and will then transform the rest of the text into lowercase as well as converting
420 |                     i’s into I’s. Every letter after a full stop will get converted into an upper case letter.</p>
421 |             </article>
422 | 
423 |             <article>
424 |                 <h2>Lower Case</h2>
425 |                 <p>If you are wondering how to uncapitalize text, this is exactly what the lower case text converter
426 |                     will allow you to do - it transforms all the letters in your text into lowercase letters. Simply
427 |                     copy the text that you need generating into lower case and paste the text into the box above and
428 |                     select the ‘lower case’ tab.</p>
429 |             </article>
430 | 
431 |             <article>
432 |                 <h2>Upper Case</h2>
433 |                 <p>The upper case transformer will take any text that you have and will generate all the letters into
434 |                     upper case ones. It will essentially make all lower case letters into CAPITALS (as well as keep
435 |                     upper case letters as upper case letters).</p>
436 |             </article>
437 | 
438 |             <article>
439 |                 <h2>Capitalized Case</h2>
440 |                 <p>The capitalized case converter will automatically convert the starting letter of every word into an
441 |                     upper case and will leave the remaining letters as lower case ones.</p>
442 |             </article>
443 | 
444 |             <article>
445 |                 <h2>Alternating Case</h2>
446 |                 <p>The alternating case converter will allow you to transform your text (no matter the current format)
447 |                     into text that alternates between lower case and upper case. It will generate a capital letter and
448 |                     then a lower case letter within the same word.</p>
449 |             </article>
450 | 
451 |             <article>
452 |                 <h2>Title Case</h2>
453 |                 <p>The title case converter is perfect for those who are a bit unsure on how to title an upcoming essay.
454 |                     It essentially ensures the correct letters are capitalized within the context of a title. Words such
455 |                     as “an” will be left all in lower case and words that are important will be converted such as
456 |                     “Title”.</p>
457 |             </article>
458 | 
459 |             <article>
460 |                 <h2>Inverse Case</h2>
461 |                 <p>The inverse case converter will allow you to inverse the case of your text. For example, if you have
462 |                     “Hello World”, it will convert it to “hELLO wORLD”.</p>
463 |             </article>
464 |         </section>
465 | 
466 |         <footer class="app-footer">
467 |             <div class="language-switcher">
468 |                 <select id="lang-selector" onchange="switchLanguage(this.value)" aria-label="Select Language">
469 |                     <option value="en" selected>English</option>
470 |                     <option value="es">Español</option>
471 |                     <option value="pt">Português</option>
472 |                     <option value="fr">Français</option>
473 |                     <option value="de">Deutsch</option>
474 |                     <option value="tr">Türkçe</option>
475 |                     <option value="it">Italiano</option>
476 |                 </select>
477 |             </div>
478 |             <p>&copy; 2025 Convert Case App. Simple. Clear. Powerful.</p>
479 |         </footer>
480 |     </div>
481 |     <script>
482 |         function switchLanguage(lang) {
483 |             localStorage.setItem('manual_lang_switch', 'true');
484 |             if (lang === 'en') {
485 |                 window.location.href = '../index.html';
486 |             } else {
487 |                 // Handle switching from root
488 |                 var basePath = window.location.href.includes('/index.html') ? window.location.href.replace('/index.html', '') : window.location.href.replace(/\/$/, '');
489 |                 // If we are at root, we go into subdir. If we are in subdir, we go to sibling or parent.
490 |                 // This logic is tricky with file:// vs http://
491 |                 // Let's assume standard structure: root/index.html and root/es/index.html
492 | 
493 |                 if (window.location.pathname.endsWith('/uppercase/index.html') || window.location.pathname.endsWith('/uppercase/')) {
494 |                     window.location.href = './' + lang + '/index.html';
495 |                 } else {
496 |                     // We are likely in a subdirectory already? No, this is the English page (root)
497 |                     window.location.href = './' + lang + '/index.html';
498 |                 }
499 |             }
500 |         }
501 |     </script>
502 | 
503 | </body>
504 | 
505 | </html>


--------------------------------------------------------------------------------