mmm - Text Transform

<!DOCTYPE html>

<head>

<title>Text Transform | Change Your Text Styles</title>

/* --- VARIABLES --- */

:root {

--font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

/* Accessibility: High Contrast Colors */

--color-bg: #ffffff;

--color-bg-alt: #f8fafc; /* Slate 50 */

--color-text-main: #020617; /* Slate 950 - Absolute readability */

--color-text-muted: #334155; /* Slate 700 - Darker than standard gray */

--color-primary: #2563eb; /* Blue 600 */

--color-primary-hover: #1d4ed8; /* Blue 700 */

--color-border: #cbd5e1; /* Slate 300 */

--container-width: 1100px;

--header-height: 70px;

--gap: 2rem;

}

/* --- RESET & BASE --- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {

font-family: var(--font-body);

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

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

line-height: 1.6;

font-size: 18px; /* Larger base font for readability */

}

a { text-decoration: none; color: var(--color-primary); transition: color 0.2s; }

a:hover { color: var(--color-primary-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* --- LAYOUT --- */

.container {

max-width: var(--container-width);

margin: 0 auto;

padding: 0 1.5rem;

}

/* Skip Link for Accessibility */

.skip-link {

position: absolute; top: -100px; left: 0; background: var(--color-primary); color: white; padding: 10px; z-index: 100;

}

.skip-link:focus { top: 0; }

/* --- HEADER --- */

.site-header {

background: var(--color-bg);

border-bottom: 1px solid var(--color-border);

height: var(--header-height);

display: flex;

align-items: center;

position: sticky;

top: 0;

z-index: 50;

}

.header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }

.header-title a {

font-size: 1.5rem;

font-weight: 800;

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

text-decoration: none;

}

/* --- MAIN GRID --- */

.main-wrapper {

padding: 3rem 0;

display: grid;

grid-template-columns: 1fr;

gap: 3rem;

}

@media (min-width: 768px) {

.main-wrapper {

grid-template-columns: 2fr 1fr; /* Blog 2/3, Sidebar 1/3 */

}

/* --- TEXT TRANSFORM TOOL (Enhanced Design) --- */

.tool-section {

background: var(--color-bg);

border: 1px solid var(--color-border);

border-radius: 12px; /* Softer corners */

padding: 2.5rem;

margin-bottom: 3rem;

grid-column: 1 / -1;

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); /* Elegant shadow */

}

@media (min-width: 768px) {

.tool-section { grid-column: 1 / 2; }

}

.tool-header {

margin-bottom: 1.5rem;

font-size: 1.8rem;

font-weight: 800;

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

text-align: center;

letter-spacing: -0.025em;

}

.tool-textarea {

width: 100%;

height: 250px; /* Taller for better usability */

padding: 1.25rem;

border: 2px solid var(--color-border);

border-radius: 8px;

font-family: var(--font-body);

font-size: 1.125rem;

margin-bottom: 1.5rem;

resize: vertical;

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

background: #ffffff;

transition: all 0.2s ease;

line-height: 1.6;

}

.tool-textarea:focus {

outline: none;

border-color: var(--color-primary);

box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); /* Nice focus ring */

}

/* Button Grid for Transforms */

.tool-controls-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

gap: 0.75rem;

margin-bottom: 1.5rem;

}

.btn-tool {

background: #ffffff;

border: 1px solid var(--color-border);

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

padding: 0.8rem 1rem;

border-radius: 8px;

cursor: pointer;

font-weight: 600;

font-size: 0.95rem;

transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

.btn-tool:hover {

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

border-color: var(--color-text-muted);

transform: translateY(-2px); /* Lift effect */

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

}

.btn-tool:active { transform: translateY(0); }

/* Primary Action Bar (Copy/Clear) */

.tool-actions-bar {

display: flex;

gap: 1rem;

border-top: 1px solid var(--color-border);

padding-top: 1.5rem;

margin-top: 0.5rem;

}

.btn-tool.primary {

background: var(--color-primary);

color: white;

border-color: var(--color-primary);

flex: 3; /* Larger Copy Button */

font-size: 1.1rem;

padding: 1rem;

}

.btn-tool.primary:hover {

background: var(--color-primary-hover);

box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); /* Glow effect */

}

.btn-tool.clear {

color: #ef4444;

border-color: #fecaca;

background: #fff;

flex: 1; /* Smaller Clear Button */

}

.btn-tool.clear:hover { background: #fef2f2; border-color: #ef4444; }

/* Stats Dashboard */

.tool-stats {

margin-top: 1.5rem;

display: flex;

gap: 1rem;

justify-content: space-around;

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

padding: 1rem;

border-radius: 8px;

flex-wrap: wrap;

}

.stat-item {

display: flex;

flex-direction: column;

align-items: center;

min-width: 80px;

}

.stat-value {

font-size: 1.25rem;

font-weight: 800;

color: var(--color-primary);

line-height: 1;

margin-bottom: 0.25rem;

}

.stat-label {

font-size: 0.75rem;

text-transform: uppercase;

letter-spacing: 0.05em;

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

font-weight: 600;

}

/* --- POST CARD (Grid for Index) --- */

.blog-posts {

display: grid;

gap: 2.5rem;

}

.post-card {

background: var(--color-bg);

border: 1px solid var(--color-border);

border-radius: 8px;

overflow: hidden;

display: flex;

flex-direction: column;

}

/* FIX 3: CLS - Aspect Ratio Wrapper

Forces browser to reserve 16:9 space immediately */

.post-image-wrap {

position: relative;

width: 100%;

aspect-ratio: 16 / 9;

background-color: #e2e8f0; /* Placeholder color while loading */

overflow: hidden;

}

.post-image-wrap img {

width: 100%;

height: 100%;

object-fit: cover;

}

.post-content { padding: 1.5rem; }

.post-title {

font-size: 1.5rem;

margin-bottom: 0.75rem;

font-weight: 700;

line-height: 1.3;

}

.post-title a { color: var(--color-text-main); text-decoration: none; }

.post-title a:hover { color: var(--color-primary); }

.post-snippet {

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

font-size: 1rem;

margin-bottom: 1.25rem;

}

.post-meta {

font-size: 0.875rem;

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

font-weight: 500;

}

/* --- SINGLE POST --- */

.post-body {

background: var(--color-bg);

padding: 2rem;

border-radius: 8px;

border: 1px solid var(--color-border);

}

.post-body h1, .post-body h2, .post-body h3 { margin: 1.5rem 0 1rem; color: var(--color-text-main); }

.post-body p { margin-bottom: 1.25rem; font-size: 1.125rem; }

/* --- FOOTER --- */

.site-footer {

background: var(--color-text-main);

color: white;

padding: 3rem 0;

margin-top: 4rem;

text-align: center;

}

.site-footer a { color: #93c5fd; }

/* --- UTILITIES --- */

.btn {

display: inline-block;

background: var(--color-primary);

color: white;

padding: 0.6rem 1.2rem;

border-radius: 6px;

font-weight: 600;

text-decoration: none;

}

.btn:hover { background: var(--color-primary-hover); text-decoration: none; color: white; }

--></style>

</head>

<body>

<a class='skip-link' href='#main-content'>Skip to content</a>

<h1>

<a href='https://text-transform.blogspot.com/'>Text Transform | Change Your Text Styles</a>

</h1>

</div></div>

</div>

</div>

</header>

<h2 class='tool-header'>Text Transform Tool</h2>

<button class='btn-tool' onclick='transformText("upper")' title='Convert to Uppercase'>UPPER CASE</button>

<button class='btn-tool' onclick='transformText("lower")' title='Convert to Lowercase'>lower case</button>

<button class='btn-tool' onclick='transformText("title")' title='Capitalize First Letter of Each Word'>Title Case</button>

<button class='btn-tool' onclick='transformText("sentence")' title='Capitalize first letter of sentences'>Sentence case</button>

<button class='btn-tool' onclick='transformText("alternating")' title='AlTeRnAtInG cAsE'>aLtErNaTiNg</button>

<button class='btn-tool' onclick='transformText("reverse")' title='Reverse the text'>esreveR</button>

</div>

<span class='stat-label'>Characters</span>

</div>

<span class='stat-label'>Words</span>

</div>

<span class='stat-label'>Lines</span>

</div>

<button class='btn-tool clear' onclick='clearText()' title='Clear all text'>Clear Text</button>

</div>

</section>

</div>

</div>

</div></div>

</main>

</aside>

</div>

</div>

</footer>

//<![CDATA[

document.getElementById('current-year').textContent = new Date().getFullYear();

// --- TEXT TOOL LOGIC ---

function transformText(type) {

const textarea = document.getElementById('inputText');

if (!textarea) return;

let text = textarea.value;

switch(type) {

case 'upper':

text = text.toUpperCase();

break;

case 'lower':

text = text.toLowerCase();

break;

case 'title':

text = text.toLowerCase().split(' ').map(function(word) {

return word.charAt(0).toUpperCase() + word.slice(1);

}).join(' ');

break;

case 'sentence':

// Uppercase start of string and letters after . ! ?

text = text.toLowerCase().replace(/(^\s*\w|[\.\!\?]\s*\w)/g, function(c) {

return c.toUpperCase();

});

break;

case 'alternating':

let altText = '';

for (let i = 0; i < text.length; i++) {

altText += i % 2 === 0 ? text[i].toLowerCase() : text[i].toUpperCase();

}

text = altText;

break;

case 'reverse':

text = text.split('').reverse().join('');

break;

}

textarea.value = text;

updateStats();

}

function copyText() {

const textarea = document.getElementById('inputText');

if (!textarea) return;

textarea.select();

document.execCommand('copy');

const btn = event.target;

const originalText = btn.innerText;

btn.innerText = 'Copied!';

setTimeout(function() { btn.innerText = originalText; }, 2000);

}

function clearText() {

const textarea = document.getElementById('inputText');

if (textarea) {

textarea.value = '';

updateStats();

textarea.focus();

}

function updateStats() {

const textarea = document.getElementById('inputText');

if (!textarea) return;

const text = textarea.value;

// Char count

document.getElementById('charCount').innerText = text.length;

// Word count

const words = text.trim().split(/\s+/);

const wordCount = text.trim() === '' ? 0 : words.length;

document.getElementById('wordCount').innerText = wordCount;

// Line count

const lines = text.split(/\r\n|\r|\n/);

const lineCount = text === '' ? 0 : lines.length;

document.getElementById('lineCount').innerText = lineCount;

}

//]]>

</script>

window['__wavt'] = 'AOuZoY6gE0FcqVXMgz0hAEb3GCpLlX0CTA:1765420155337';_WidgetManager._Init('//draft.blogger.com/rearrange?blogID\x3d5498421570986330811','//text-transform.blogspot.com/','5498421570986330811');

_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '5498421570986330811', 'title': 'Text Transform | Change Your Text Styles', 'url': 'https://text-transform.blogspot.com/', 'canonicalUrl': 'https://text-transform.blogspot.com/', 'homepageUrl': 'https://text-transform.blogspot.com/', 'searchUrl': 'https://text-transform.blogspot.com/search', 'canonicalHomepageUrl': 'https://text-transform.blogspot.com/', 'blogspotFaviconUrl': 'https://text-transform.blogspot.com/favicon.ico', 'bloggerUrl': 'https://draft.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Text Transform | Change Your Text Styles - Atom\x22 href\x3d\x22https://text-transform.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Text Transform | Change Your Text Styles - RSS\x22 href\x3d\x22https://text-transform.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Text Transform | Change Your Text Styles - Atom\x22 href\x3d\x22https://draft.blogger.com/feeds/5498421570986330811/posts/default\x22 /\x3e\n', 'meTag': '\x3clink rel\x3d\x22me\x22 href\x3d\x22https://draft.blogger.com/profile/14039607161500889724\x22 /\x3e\n', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'isGoogleEverywhereLinkTooltipEnabled': true, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/ce4a0ba1ae8a0475', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'index', 'pageName': '', 'pageTitle': 'Text Transform | Change Your Text Styles'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Text Transform | Change Your Text Styles', 'description': '', 'url': 'https://text-transform.blogspot.com/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': true, 'isArchive': false, 'isLabelSearch': false}}, {'name': 'widgets', 'data': [{'title': 'Text Transform | Change Your Text Styles (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'main', 'id': 'Blog1', 'posts': [], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': 'at'}, {'name': 'comments', 'label': 'comments'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Labels:'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': 'at'}, {'name': 'comments', 'label': 'comments'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'Labels:'}, {'name': 'location', 'label': 'Location:'}]}]}]);

_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));

_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'navMessage': 'No posts.', 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2485970545-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));

</script>

</body>

</html>