{"id":212,"date":"2025-12-05T00:00:49","date_gmt":"2025-12-05T00:00:49","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=212"},"modified":"2025-12-14T09:33:45","modified_gmt":"2025-12-14T09:33:45","slug":"text-to-link-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/text-to-link-generator\/","title":{"rendered":"Text To Link Generator &#8211; Create Hyperlinks from Plain Text"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; theme_builder_area=&#8221;post_content&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; theme_builder_area=&#8221;post_content&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<div class=\"ttl-app-root\">\r\n    <style>\r\n        \/* \r\n         * 2025 \"CONNECTIVITY\" DESIGN SYSTEM\r\n         * Namespace: .ttl- (Text To Link)\r\n         * Aesthetic: Tech-focused, Split-Pane, Clean Forms\r\n         *\/\r\n        :root {\r\n            \/* Background: Violet to Blue *\/\r\n            --ttl-bg-gradient: linear-gradient(135deg, #8b5cf6 0%, #2563eb 100%);\r\n            \r\n            \/* Surfaces *\/\r\n            --ttl-panel-bg: rgba(255, 255, 255, 0.96);\r\n            --ttl-card-bg: #ffffff;\r\n            --ttl-input-bg: #f8fafc;\r\n            --ttl-backdrop: blur(24px);\r\n            \r\n            \/* Colors *\/\r\n            --ttl-primary: #4f46e5;\r\n            --ttl-accent: #8b5cf6;\r\n            --ttl-success: #10b981;\r\n            --ttl-text-main: #1e293b;\r\n            --ttl-text-sub: #64748b;\r\n            --ttl-border: #e2e8f0;\r\n            --ttl-border-active: #c7d2fe;\r\n            --ttl-border-focus: #a5b4fc;\r\n            \r\n            \/* Metrics (Strict 9px) *\/\r\n            --ttl-radius: 9px;\r\n            --ttl-shadow-hero: 0 40px 80px -20px rgba(37, 99, 235, 0.3);\r\n            --ttl-shadow-card: 0 4px 6px -1px rgba(0,0,0,0.05);\r\n            --ttl-shadow-hover: 0 10px 15px -3px rgba(79, 70, 229, 0.15);\r\n            --ttl-shadow-input: 0 2px 4px rgba(0,0,0,0.04);\r\n            --ttl-shadow-input-hover: 0 4px 8px rgba(0,0,0,0.06);\r\n            \r\n            --ttl-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n            --ttl-font-mono: \"Fira Code\", \"Menlo\", monospace;\r\n        }\r\n\r\n        \/* RESET *\/\r\n        .ttl-app-root {\r\n            font-family: var(--ttl-font);\r\n            background: var(--ttl-bg-gradient);\r\n            width: 100%;\r\n            padding: 40px 15px 80px 15px;\r\n            box-sizing: border-box;\r\n            color: var(--ttl-text-main);\r\n            -webkit-font-smoothing: antialiased;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n\r\n        .ttl-app-root *, .ttl-app-root *::before, .ttl-app-root *::after {\r\n            box-sizing: inherit;\r\n        }\r\n\r\n        .ttl-container {\r\n            width: 100%;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        @media (min-width: 1200px) {\r\n            .ttl-container { max-width: 1160px; }\r\n        }\r\n\r\n        \/* HEADER *\/\r\n        .ttl-header {\r\n            text-align: center;\r\n            margin-bottom: 35px;\r\n            color: #ffffff;\r\n        }\r\n\r\n        .ttl-title {\r\n\t\t\t\t\t\tcolor: #fff;\r\n            font-size: 34px;\r\n            font-weight: 800;\r\n            margin: 0 0 10px 0;\r\n            letter-spacing: -0.5px;\r\n            text-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n        }\r\n\r\n        .ttl-desc {\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            opacity: 0.95;\r\n            background: rgba(255,255,255,0.15);\r\n            padding: 4px 16px;\r\n            border-radius: 50px;\r\n            display: inline-block;\r\n            backdrop-filter: blur(5px);\r\n        }\r\n\r\n        \/* WRAPPER (1160px) *\/\r\n        .ttl-wrapper {\r\n            background: var(--ttl-panel-bg);\r\n            backdrop-filter: var(--ttl-backdrop);\r\n            -webkit-backdrop-filter: var(--ttl-backdrop);\r\n            border-radius: var(--ttl-radius);\r\n            box-shadow: var(--ttl-shadow-hero);\r\n            border: 1px solid rgba(255,255,255,0.6);\r\n            display: flex;\r\n            flex-direction: column;\r\n            overflow: hidden;\r\n            min-height: 550px;\r\n        }\r\n\r\n        \/* DESKTOP LAYOUT *\/\r\n        @media (min-width: 900px) {\r\n            .ttl-wrapper {\r\n                flex-direction: row;\r\n            }\r\n        }\r\n\r\n        \/* LEFT PANEL: CONFIG *\/\r\n        .ttl-panel-config {\r\n            flex: 1;\r\n            padding: 30px;\r\n            background: rgba(255,255,255,0.5);\r\n            border-bottom: 1px solid var(--ttl-border);\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 20px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Add subtle gradient overlay for depth *\/\r\n        .ttl-panel-config::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, \r\n                transparent 0%, \r\n                rgba(139, 92, 246, 0.3) 50%, \r\n                transparent 100%);\r\n        }\r\n\r\n        @media (min-width: 900px) {\r\n            .ttl-panel-config {\r\n                width: 45%;\r\n                border-bottom: none;\r\n                border-right: 1px solid var(--ttl-border);\r\n            }\r\n        }\r\n\r\n        .ttl-section-title {\r\n            font-size: 12px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.05em;\r\n            color: var(--ttl-text-sub);\r\n            font-weight: 800;\r\n            margin-bottom: 10px;\r\n            display: block;\r\n            position: relative;\r\n            padding-left: 20px;\r\n        }\r\n\r\n        \/* Add icon to section title *\/\r\n        .ttl-section-title::before {\r\n            content: '\u2699';\r\n            position: absolute;\r\n            left: 0;\r\n            font-size: 14px;\r\n            color: var(--ttl-primary);\r\n        }\r\n\r\n        \/* Input Groups *\/\r\n        .ttl-group {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 8px;\r\n            position: relative;\r\n        }\r\n\r\n        .ttl-label {\r\n            font-size: 14px;\r\n            font-weight: 600;\r\n            color: var(--ttl-text-main);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n            transition: color 0.2s;\r\n        }\r\n\r\n        .ttl-label::after {\r\n            content: '';\r\n            width: 0;\r\n            height: 2px;\r\n            background: var(--ttl-primary);\r\n            transition: width 0.3s;\r\n            margin-left: 4px;\r\n        }\r\n\r\n        .ttl-group:focus-within .ttl-label {\r\n            color: var(--ttl-primary);\r\n        }\r\n\r\n        .ttl-group:focus-within .ttl-label::after {\r\n            width: 20px;\r\n        }\r\n\r\n        .ttl-input {\r\n            width: 100%;\r\n            padding: 12px 16px;\r\n            border: 2px solid var(--ttl-border);\r\n            border-radius: var(--ttl-radius);\r\n            font-size: 16px;\r\n            background: #ffffff;\r\n            color: var(--ttl-text-main);\r\n            box-shadow: var(--ttl-shadow-input);\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            outline: none;\r\n            position: relative;\r\n        }\r\n\r\n        .ttl-input:hover {\r\n            border-color: var(--ttl-border-active);\r\n            box-shadow: var(--ttl-shadow-input-hover);\r\n            transform: translateY(-1px);\r\n        }\r\n\r\n        .ttl-input:focus {\r\n            border-color: var(--ttl-primary);\r\n            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1), var(--ttl-shadow-input);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        \/* Add subtle animation for input values *\/\r\n        .ttl-input:not(:placeholder-shown) {\r\n            background: linear-gradient(to right, #ffffff 0%, #f8fafc 100%);\r\n        }\r\n\r\n        \/* Toggles Grid *\/\r\n        .ttl-toggles {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 15px;\r\n            margin-top: 10px;\r\n        }\r\n\r\n        .ttl-checkbox-card {\r\n            background: #ffffff;\r\n            padding: 12px;\r\n            border-radius: var(--ttl-radius);\r\n            border: 2px solid var(--ttl-border);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            cursor: pointer;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Add ripple effect *\/\r\n        .ttl-checkbox-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: rgba(79, 70, 229, 0.1);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.4s, height 0.4s;\r\n        }\r\n\r\n        .ttl-checkbox-card:active::before {\r\n            width: 100px;\r\n            height: 100px;\r\n        }\r\n\r\n        .ttl-checkbox-card:hover {\r\n            border-color: var(--ttl-border-active);\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n        }\r\n\r\n        .ttl-checkbox-card:has(input:checked) {\r\n            border-color: var(--ttl-primary);\r\n            background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);\r\n        }\r\n\r\n        .ttl-checkbox-card input {\r\n            accent-color: var(--ttl-primary);\r\n            width: 16px;\r\n            height: 16px;\r\n            cursor: pointer;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .ttl-cb-text {\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            color: var(--ttl-text-main);\r\n            transition: color 0.2s;\r\n        }\r\n\r\n        .ttl-checkbox-card:hover .ttl-cb-text {\r\n            color: var(--ttl-primary);\r\n        }\r\n\r\n        \/* Buttons *\/\r\n        .ttl-actions {\r\n            margin-top: auto;\r\n            display: flex;\r\n            gap: 10px;\r\n            padding-top: 10px;\r\n        }\r\n\r\n        .ttl-btn {\r\n            flex: 1;\r\n            padding: 14px;\r\n            border-radius: var(--ttl-radius);\r\n            border: none;\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Add button ripple effect *\/\r\n        .ttl-btn::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: rgba(255, 255, 255, 0.3);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.4s, height 0.4s;\r\n        }\r\n\r\n        .ttl-btn:active::before {\r\n            width: 200px;\r\n            height: 200px;\r\n        }\r\n\r\n        .ttl-btn-primary {\r\n            background: var(--ttl-primary);\r\n            color: white;\r\n            box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);\r\n        }\r\n        .ttl-btn-primary:hover { \r\n            background: #4338ca; \r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 15px rgba(79, 70, 229, 0.4);\r\n        }\r\n\r\n        .ttl-btn-ghost {\r\n            background: transparent;\r\n            color: var(--ttl-text-sub);\r\n            border: 2px solid var(--ttl-border);\r\n        }\r\n        .ttl-btn-ghost:hover { \r\n            background: #f1f5f9; \r\n            color: var(--ttl-danger);\r\n            border-color: var(--ttl-danger);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n\r\n        \/* RIGHT PANEL: OUTPUT *\/\r\n        .ttl-panel-output {\r\n            flex: 1;\r\n            padding: 30px;\r\n            background: rgba(255,255,255,0.3);\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 25px;\r\n        }\r\n\r\n        @media (min-width: 900px) {\r\n            .ttl-panel-output { width: 55%; }\r\n        }\r\n\r\n        \/* Live Preview Box *\/\r\n        .ttl-preview-box {\r\n            background: #ffffff;\r\n            border: 1px solid var(--ttl-border);\r\n            border-radius: var(--ttl-radius);\r\n            padding: 20px;\r\n            min-height: 80px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            position: relative;\r\n            background-image: radial-gradient(#e2e8f0 1px, transparent 1px);\r\n            background-size: 20px 20px;\r\n        }\r\n\r\n        .ttl-preview-label {\r\n            position: absolute;\r\n            top: 10px;\r\n            left: 10px;\r\n            font-size: 10px;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            color: var(--ttl-text-sub);\r\n            background: #fff;\r\n            padding: 2px 6px;\r\n            border-radius: 4px;\r\n        }\r\n\r\n        \/* Actual Link Style in Preview *\/\r\n        .ttl-link-preview {\r\n            font-size: 20px;\r\n            font-weight: 600;\r\n            color: var(--ttl-primary);\r\n            text-decoration: underline;\r\n            text-underline-offset: 4px;\r\n            transition: color 0.2s;\r\n        }\r\n        .ttl-link-preview:hover { color: var(--ttl-accent); }\r\n\r\n        \/* Code Block Tabs *\/\r\n        .ttl-code-section {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 10px;\r\n        }\r\n\r\n        .ttl-code-card {\r\n            background: #1e293b; \/* Dark Mode Code *\/\r\n            border-radius: var(--ttl-radius);\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .ttl-code-header {\r\n            background: #0f172a;\r\n            padding: 8px 15px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n        }\r\n\r\n        .ttl-lang-tag {\r\n            font-size: 11px;\r\n            color: #94a3b8;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        .ttl-copy-mini {\r\n            background: rgba(255,255,255,0.1);\r\n            border: none;\r\n            color: white;\r\n            font-size: 11px;\r\n            padding: 4px 10px;\r\n            border-radius: 4px;\r\n            cursor: pointer;\r\n            transition: background 0.2s;\r\n        }\r\n        .ttl-copy-mini:hover { background: var(--ttl-primary); }\r\n\r\n        .ttl-code-block {\r\n            padding: 15px;\r\n            color: #e2e8f0;\r\n            font-family: var(--ttl-font-mono);\r\n            font-size: 13px;\r\n            line-height: 1.5;\r\n            white-space: pre-wrap;\r\n            word-break: break-all;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* TOAST *\/\r\n        .ttl-toast {\r\n            position: fixed;\r\n            bottom: 30px;\r\n            left: 50%;\r\n            transform: translateX(-50%) translateY(100px);\r\n            background: #1e293b;\r\n            color: white;\r\n            padding: 12px 28px;\r\n            border-radius: 50px;\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            opacity: 0;\r\n            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;\r\n            z-index: 1000;\r\n            box-shadow: 0 10px 25px rgba(0,0,0,0.3);\r\n        }\r\n        \r\n        .ttl-toast.show {\r\n            transform: translateX(-50%) translateY(0);\r\n            opacity: 1;\r\n        }\r\n\r\n        \/* TABLET STYLES *\/\r\n        @media (min-width: 768px) and (max-width: 1024px) {\r\n            .ttl-app-root {\r\n                padding: 30px 15px 60px 15px;\r\n            }\r\n            \r\n            .ttl-header {\r\n                margin-bottom: 25px;\r\n            }\r\n            \r\n            .ttl-title {\r\n                font-size: 28px;\r\n            }\r\n            \r\n            .ttl-desc {\r\n                font-size: 14px;\r\n                padding: 3px 12px;\r\n            }\r\n            \r\n            .ttl-wrapper {\r\n                min-height: 500px;\r\n            }\r\n            \r\n            .ttl-panel-config {\r\n                padding: 20px;\r\n                gap: 16px;\r\n            }\r\n            \r\n            .ttl-panel-output {\r\n                padding: 20px;\r\n                gap: 20px;\r\n            }\r\n            \r\n            .ttl-section-title {\r\n                font-size: 11px;\r\n                margin-bottom: 8px;\r\n            }\r\n            \r\n            .ttl-label {\r\n                font-size: 13px;\r\n            }\r\n            \r\n            .ttl-input {\r\n                padding: 10px 14px;\r\n                font-size: 15px;\r\n            }\r\n            \r\n            .ttl-toggles {\r\n                gap: 12px;\r\n                margin-top: 8px;\r\n            }\r\n            \r\n            .ttl-checkbox-card {\r\n                padding: 10px;\r\n            }\r\n            \r\n            .ttl-cb-text {\r\n                font-size: 12px;\r\n            }\r\n            \r\n            .ttl-btn {\r\n                padding: 12px;\r\n                font-size: 13px;\r\n            }\r\n            \r\n            .ttl-preview-box {\r\n                padding: 16px;\r\n                min-height: 70px;\r\n            }\r\n            \r\n            .ttl-link-preview {\r\n                font-size: 18px;\r\n            }\r\n            \r\n            .ttl-code-header {\r\n                padding: 6px 12px;\r\n            }\r\n            \r\n            .ttl-lang-tag {\r\n                font-size: 10px;\r\n            }\r\n            \r\n            .ttl-copy-mini {\r\n                font-size: 10px;\r\n                padding: 3px 8px;\r\n            }\r\n            \r\n            .ttl-code-block {\r\n                padding: 12px;\r\n                font-size: 12px;\r\n            }\r\n            \r\n            .ttl-toast {\r\n                padding: 10px 24px;\r\n                font-size: 12px;\r\n            }\r\n        }\r\n\r\n        \/* MOBILE STYLES *\/\r\n        @media (max-width: 767px) {\r\n            .ttl-app-root {\r\n                padding: 20px 10px 40px 10px;\r\n            }\r\n            \r\n            .ttl-header {\r\n                margin-bottom: 20px;\r\n            }\r\n            \r\n            .ttl-title {\r\n                font-size: 24px;\r\n            }\r\n            \r\n            .ttl-desc {\r\n                font-size: 13px;\r\n                padding: 2px 10px;\r\n            }\r\n            \r\n            .ttl-wrapper {\r\n                min-height: 450px;\r\n            }\r\n            \r\n            .ttl-panel-config {\r\n                padding: 16px;\r\n                gap: 14px;\r\n            }\r\n            \r\n            .ttl-panel-output {\r\n                padding: 16px;\r\n                gap: 16px;\r\n            }\r\n            \r\n            .ttl-section-title {\r\n                font-size: 10px;\r\n                margin-bottom: 6px;\r\n            }\r\n            \r\n            .ttl-label {\r\n                font-size: 12px;\r\n            }\r\n            \r\n            .ttl-input {\r\n                padding: 8px 12px;\r\n                font-size: 14px;\r\n            }\r\n            \r\n            .ttl-toggles {\r\n                grid-template-columns: 1fr;\r\n                gap: 10px;\r\n                margin-top: 6px;\r\n            }\r\n            \r\n            .ttl-checkbox-card {\r\n                padding: 8px;\r\n            }\r\n            \r\n            .ttl-cb-text {\r\n                font-size: 11px;\r\n            }\r\n            \r\n            .ttl-btn {\r\n                padding: 10px;\r\n                font-size: 12px;\r\n            }\r\n            \r\n            .ttl-preview-box {\r\n                padding: 12px;\r\n                min-height: 60px;\r\n            }\r\n            \r\n            .ttl-link-preview {\r\n                font-size: 16px;\r\n            }\r\n            \r\n            .ttl-code-header {\r\n                padding: 5px 10px;\r\n            }\r\n            \r\n            .ttl-lang-tag {\r\n                font-size: 9px;\r\n            }\r\n            \r\n            .ttl-copy-mini {\r\n                font-size: 9px;\r\n                padding: 2px 6px;\r\n            }\r\n            \r\n            .ttl-code-block {\r\n                padding: 10px;\r\n                font-size: 11px;\r\n                line-height: 1.4;\r\n            }\r\n            \r\n            .ttl-toast {\r\n                padding: 8px 20px;\r\n                font-size: 11px;\r\n                bottom: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"ttl-container\">\r\n        \r\n        <header class=\"ttl-header\">\r\n            <h1 class=\"ttl-title\">Text To Link Generator - Create Hyperlinks from Plain Text<\/h1>\r\n            <p class=\"ttl-desc\">Create properly formatted HTML, Markdown, and BBCode links.<\/p>\r\n        <\/header>\r\n\r\n        <div class=\"ttl-wrapper\">\r\n            \r\n            <!-- Left: Configuration -->\r\n            <div class=\"ttl-panel-config\">\r\n                <span class=\"ttl-section-title\">Link Details<\/span>\r\n                \r\n                <div class=\"ttl-group\">\r\n                    <label class=\"ttl-label\" for=\"ttlUrl\">Target URL<\/label>\r\n                    <input type=\"text\" id=\"ttlUrl\" class=\"ttl-input\" placeholder=\"https:\/\/example.com\">\r\n                <\/div>\r\n\r\n                <div class=\"ttl-group\">\r\n                    <label class=\"ttl-label\" for=\"ttlText\">Anchor Text<\/label>\r\n                    <input type=\"text\" id=\"ttlText\" class=\"ttl-input\" placeholder=\"Click Here\">\r\n                <\/div>\r\n\r\n                <div class=\"ttl-group\">\r\n                    <label class=\"ttl-label\" for=\"ttlTitle\">Title Attribute (Optional)<\/label>\r\n                    <input type=\"text\" id=\"ttlTitle\" class=\"ttl-input\" placeholder=\"Hover tooltip text\">\r\n                <\/div>\r\n\r\n                <div class=\"ttl-toggles\">\r\n                    <label class=\"ttl-checkbox-card\">\r\n                        <input type=\"checkbox\" id=\"ttlNewTab\"> \r\n                        <span class=\"ttl-cb-text\">New Tab (_blank)<\/span>\r\n                    <\/label>\r\n                    <label class=\"ttl-checkbox-card\">\r\n                        <input type=\"checkbox\" id=\"ttlNofollow\"> \r\n                        <span class=\"ttl-cb-text\">Add 'nofollow'<\/span>\r\n                    <\/label>\r\n                <\/div>\r\n\r\n                <div class=\"ttl-actions\">\r\n                    <button id=\"ttlReset\" class=\"ttl-btn ttl-btn-ghost\">Reset<\/button>\r\n                    <!-- Button visual only, logic handles input events real-time -->\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Right: Output -->\r\n            <div class=\"ttl-panel-output\">\r\n                \r\n                <span class=\"ttl-section-title\">Live Preview<\/span>\r\n                <div class=\"ttl-preview-box\">\r\n                    <div class=\"ttl-preview-label\">Visual<\/div>\r\n                    <a href=\"#\" id=\"ttlVisualPreview\" class=\"ttl-link-preview\" onclick=\"return false;\">Click Here<\/a>\r\n                <\/div>\r\n\r\n                <span class=\"ttl-section-title\" style=\"margin-top:10px;\">Source Code<\/span>\r\n                \r\n                <!-- HTML Output -->\r\n                <div class=\"ttl-code-card\">\r\n                    <div class=\"ttl-code-header\">\r\n                        <span class=\"ttl-lang-tag\">HTML<\/span>\r\n                        <button class=\"ttl-copy-mini\" onclick=\"copyCode('html')\">Copy<\/button>\r\n                    <\/div>\r\n                    <pre class=\"ttl-code-block\" id=\"outHtml\"><a href=\"#\">Click Here<\/a><\/pre>\r\n                <\/div>\r\n\r\n                <!-- Markdown Output -->\r\n                <div class=\"ttl-code-card\">\r\n                    <div class=\"ttl-code-header\">\r\n                        <span class=\"ttl-lang-tag\">Markdown<\/span>\r\n                        <button class=\"ttl-copy-mini\" onclick=\"copyCode('md')\">Copy<\/button>\r\n                    <\/div>\r\n                    <pre class=\"ttl-code-block\" id=\"outMd\">[Click Here](#)<\/pre>\r\n                <\/div>\r\n\r\n                <!-- BBCode Output -->\r\n                <div class=\"ttl-code-card\">\r\n                    <div class=\"ttl-code-header\">\r\n                        <span class=\"ttl-lang-tag\">BBCode (Forum)<\/span>\r\n                        <button class=\"ttl-copy-mini\" onclick=\"copyCode('bb')\">Copy<\/button>\r\n                    <\/div>\r\n                    <pre class=\"ttl-code-block\" id=\"outBb\">[url=#]Click Here[\/url]<\/pre>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Toast -->\r\n    <div id=\"ttlToast\" class=\"ttl-toast\">\r\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\r\n        <span>Code copied to clipboard!<\/span>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Global scope for copy function\r\n        let copyCode;\r\n\r\n        (function() {\r\n            \/\/ -- Elements --\r\n            const el = {\r\n                url: document.getElementById('ttlUrl'),\r\n                text: document.getElementById('ttlText'),\r\n                title: document.getElementById('ttlTitle'),\r\n                newTab: document.getElementById('ttlNewTab'),\r\n                nofollow: document.getElementById('ttlNofollow'),\r\n                preview: document.getElementById('ttlVisualPreview'),\r\n                outHtml: document.getElementById('outHtml'),\r\n                outMd: document.getElementById('outMd'),\r\n                outBb: document.getElementById('outBb'),\r\n                reset: document.getElementById('ttlReset'),\r\n                toast: document.getElementById('ttlToast')\r\n            };\r\n\r\n            \/\/ -- Logic --\r\n            function generate() {\r\n                let url = el.url.value.trim();\r\n                let text = el.text.value.trim() || url; \/\/ Fallback to URL if text empty\r\n                const title = el.title.value.trim();\r\n                const isNewTab = el.newTab.checked;\r\n                const isNofollow = el.nofollow.checked;\r\n\r\n                \/\/ Validate URL visualization\r\n                if(!url) {\r\n                    url = \"#\";\r\n                    text = text || \"Link Text\";\r\n                } else if (!url.startsWith('http') && !url.startsWith('#') && !url.startsWith('\/')) {\r\n                    \/\/ Soft UX Suggestion: Don't force http, but assume external link for output generation?\r\n                    \/\/ Let's just output what user types, but preview relies on it.\r\n                }\r\n\r\n                \/\/ 1. Build HTML\r\n                let htmlStr = `<a href=\"${url}\"`;\r\n                if(title) htmlStr += ` title=\"${title}\"`;\r\n                if(isNewTab) htmlStr += ` target=\"_blank\"`;\r\n                if(isNofollow) htmlStr += ` rel=\"nofollow\"`;\r\n                htmlStr += `>${text}<\/a>`;\r\n\r\n                \/\/ 2. Build Markdown\r\n                \/\/ Markdown doesn't standardly support new tab\/nofollow without raw HTML\r\n                \/\/ Standard: [text](url \"title\")\r\n                let mdStr = `[${text}](${url}`;\r\n                if(title) mdStr += ` \"${title}\"`;\r\n                mdStr += `)`;\r\n\r\n                \/\/ 3. Build BBCode\r\n                \/\/ [url=link]text[\/url]\r\n                let bbStr = `[url=${url}]${text}[\/url]`;\r\n\r\n                \/\/ 4. Update UI\r\n                el.preview.textContent = text;\r\n                el.preview.href = url;\r\n                \/\/ Preview doesn't strictly need target\/rel logic visually, but good for completeness:\r\n                if(isNewTab) el.preview.target = \"_blank\";\r\n                if(title) el.preview.title = title;\r\n\r\n                el.outHtml.textContent = htmlStr;\r\n                el.outMd.textContent = mdStr;\r\n                el.outBb.textContent = bbStr;\r\n            }\r\n\r\n            \/\/ -- Copy --\r\n            copyCode = async function(type) {\r\n                let content = \"\";\r\n                if(type === 'html') content = el.outHtml.textContent;\r\n                if(type === 'md') content = el.outMd.textContent;\r\n                if(type === 'bb') content = el.outBb.textContent;\r\n\r\n                try {\r\n                    await navigator.clipboard.writeText(content);\r\n                    showToast();\r\n                } catch(e) {\r\n                    \/\/ Fallback\r\n                    const t = document.createElement('textarea');\r\n                    t.value = content;\r\n                    document.body.appendChild(t);\r\n                    t.select();\r\n                    document.execCommand('copy');\r\n                    document.body.removeChild(t);\r\n                    showToast();\r\n                }\r\n            };\r\n\r\n            let tTimer;\r\n            function showToast() {\r\n                el.toast.classList.add('show');\r\n                clearTimeout(tTimer);\r\n                tTimer = setTimeout(() => el.toast.classList.remove('show'), 2000);\r\n            }\r\n\r\n            \/\/ -- Listeners --\r\n            const inputs = [el.url, el.text, el.title, el.newTab, el.nofollow];\r\n            inputs.forEach(i => {\r\n                i.addEventListener('input', generate);\r\n                i.addEventListener('change', generate); \/\/ for checkboxes\r\n            });\r\n\r\n            el.reset.addEventListener('click', () => {\r\n                el.url.value = \"\";\r\n                el.text.value = \"\";\r\n                el.title.value = \"\";\r\n                el.newTab.checked = false;\r\n                el.nofollow.checked = false;\r\n                generate();\r\n                el.url.focus();\r\n            });\r\n\r\n            \/\/ Init\r\n            generate();\r\n\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n<!-- \r\n============================================\r\nSUPPORTIVE SEO CONTENT STARTS HERE\r\n============================================\r\n- Keyword: \"Text to Link Converter\"\r\n- Place this entire block after the \"ttl-app-root\" div.\r\n- Uses separate 'ttl-info-*' classes to avoid any conflicts.\r\n- Perfectly matches the provided tool's \"Connectivity\" aesthetic with alternating backgrounds.\r\n-->\r\n<div class=\"ttl-info-main-wrapper\">\r\n\r\n    <!-- CSS STYLES FOR SUPPORTIVE CONTENT -->\r\n    <style>\r\n        .ttl-info-main-wrapper {\r\n            width: 100%;\r\n            font-family: var(--ttl-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\r\n            color: var(--ttl-text-main, #1e293b);\r\n        }\r\n\r\n        .ttl-info-section-wrapper {\r\n            width: 100%;\r\n            padding: 60px 15px;\r\n        }\r\n\r\n        .ttl-info-section-wrapper.bg-gradient {\r\n            background: var(--ttl-bg-gradient, linear-gradient(135deg, #8b5cf6 0%, #2563eb 100%));\r\n        }\r\n        \r\n        .ttl-info-section-wrapper.bg-white {\r\n            background: var(--ttl-white, #ffffff);\r\n        }\r\n\r\n        .ttl-info-container {\r\n            width: 100%;\r\n            max-width: 1160px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .ttl-info-section-header {\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n        }\r\n        \r\n        .ttl-info-section-title {\r\n            font-size: clamp(1.5rem, 4vw, 2.5rem);\r\n            font-weight: 800;\r\n            margin: 0 0 10px 0;\r\n            letter-spacing: -0.5px;\r\n        }\r\n        \r\n        \/* Different title colors for different backgrounds *\/\r\n        .bg-gradient .ttl-info-section-title {\r\n            color: #ffffff;\r\n            text-shadow: 0 4px 15px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .bg-white .ttl-info-section-title {\r\n            color: var(--ttl-text-main, #1e293b);\r\n        }\r\n        \r\n        .ttl-info-section-subtitle {\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            max-width: 700px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .bg-gradient .ttl-info-section-subtitle {\r\n            color: rgba(255, 255, 255, 0.95);\r\n        }\r\n        \r\n        .bg-white .ttl-info-section-subtitle {\r\n            color: var(--ttl-text-sub, #64748b);\r\n        }\r\n\r\n        .ttl-info-card-layout {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 24px;\r\n        }\r\n        \r\n        .ttl-info-card {\r\n            \/* Replicating the tool's card style *\/\r\n            background: var(--ttl-white, #ffffff);\r\n            border-radius: var(--ttl-radius, 9px);\r\n            padding: 25px;\r\n            box-shadow: var(--ttl-shadow-panel, 0 4px 10px -2px rgba(0,0,0,0.05));\r\n            border: 2px solid var(--ttl-border, #e2e8f0);\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            text-align: left;\r\n        }\r\n        \r\n        .ttl-info-card:hover {\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 12px 20px -5px rgba(37, 99, 235, 0.2);\r\n            border-color: var(--ttl-primary, #4f46e5);\r\n        }\r\n\r\n        .ttl-info-card-title {\r\n            font-size: 20px;\r\n            font-weight: 700;\r\n            color: var(--ttl-text-main, #1e293b);\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .ttl-info-card p, .ttl-info-card li {\r\n            font-size: 1rem; \r\n            line-height: 1.7;\r\n            color: var(--ttl-text-sub, #64748b);\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .ttl-info-card ul {\r\n            list-style: none;\r\n            padding-left: 0;\r\n        }\r\n        \r\n        .ttl-info-card li {\r\n            padding-left: 25px;\r\n            position: relative;\r\n        }\r\n        \r\n        .ttl-info-card li::before {\r\n            content: '\u2713';\r\n            position: absolute;\r\n            left: 0;\r\n            top: 6px;\r\n            color: var(--ttl-primary, #4f46e5);\r\n            font-weight: bold;\r\n        }\r\n\r\n        .ttl-info-card strong {\r\n            color: var(--ttl-text-main, #1e293b);\r\n            font-weight: 600;\r\n        }\r\n    <\/style>\r\n\t    <div class=\"ttl-info-section-wrapper bg-white\">\r\n        <div class=\"ttl-info-container\">\r\n\t\t\t\t\t\r\n\t\t\t\t<\/div>\r\n\t    <\/div>\r\n    <!-- ========= SECTION 1: What is a Text to Link Converter? ========= -->\r\n    <div class=\"ttl-info-section-wrapper bg-white\">\r\n        <div class=\"ttl-info-container\">\r\n            <header class=\"ttl-info-section-header\">\r\n                <h2 class=\"ttl-info-section-title\">What is a Text to Link Converter?<\/h2>\r\n                <p class=\"ttl-info-section-subtitle\">Discover how this essential utility simplifies the process of creating clickable hyperlinks for any platform.<\/p>\r\n            <\/header>\r\n            <div class=\"ttl-info-card-layout\">\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">From Plain Text to Clickable Link<\/h3>\r\n                    <p>A <strong>Text to Link Converter<\/strong> (also known as a hyperlink generator) is a tool that takes a piece of text and a URL and combines them to create a clickable hyperlink. Instead of manually writing code, you can use a simple form to specify what the link should say and where it should go, and the tool will instantly generate the correct code for you.<\/p>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Multi-Format Output<\/h3>\r\n                    <p>Web content exists in many formats. Our generator understands this and provides output in the most common syntaxes:<\/p>\r\n                    <ul>\r\n                        <li><strong>HTML:<\/strong> The standard for all websites (`<a href=\"...\">...<\/a>`).<\/li>\r\n                        <li><strong>Markdown:<\/strong> Used in README files, forums like Reddit, and content editors (`[...] (...)`).<\/li>\r\n                        <li><strong>BBCode:<\/strong> A popular format for traditional forums and message boards (`[url=...]...[\/url]`).<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 2: Why Use a Hyperlink Generator? ========= -->\r\n    <div class=\"ttl-info-section-wrapper bg-gradient\">\r\n        <div class=\"ttl-info-container\">\r\n            <header class=\"ttl-info-section-header\">\r\n                <h2 class=\"ttl-info-section-title\">Why Use a Hyperlink Generator?<\/h2>\r\n                <p class=\"ttl-info-section-subtitle\">Save time, prevent errors, and ensure your links are correctly formatted for security and SEO.<\/p>\r\n            <\/header>\r\n            <div class=\"ttl-info-card-layout\">\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Save Time & Improve Efficiency<\/h3>\r\n                    <p>Manually typing out link code, especially with extra attributes, is slow and repetitive. This tool automates the process entirely. Simply fill in the fields, and the correctly formatted code for HTML, Markdown, and BBCode appears instantly, ready to be copied with a single click. This streamlines the content creation workflow for bloggers, marketers, and developers.<\/p>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Avoid Common Errors<\/h3>\r\n                    <p>A single misplaced quote or forgotten tag can break a hyperlink. This generator eliminates human error by producing syntactically perfect code every time. It ensures your links will work as expected and that you're using modern best practices, like including a `nofollow` attribute for sponsored links or opening external links in a new tab.<\/p>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Enhance SEO & Security<\/h3>\r\n                    <p>Proper link attributes are crucial for both search engine optimization and user security. This tool makes it easy to include important attributes:<\/p>\r\n                    <ul>\r\n                        <li><strong>Open in New Tab:<\/strong> Keeps users on your site by opening external links in a new browser tab.<\/li>\r\n                        <li><strong>Add 'nofollow':<\/strong> Instructs search engines not to pass authority to the linked page, which is essential for sponsored links and user-generated content.<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 3: How to Use the Link Builder ========= -->\r\n    <div class=\"ttl-info-section-wrapper bg-white\">\r\n        <div class=\"ttl-info-container\">\r\n            <header class=\"ttl-info-section-header\">\r\n                <h2 class=\"ttl-info-section-title\">How to Use the Link Builder<\/h2>\r\n                <p class=\"ttl-info-section-subtitle\">Our tool features a clean, intuitive interface for a fast and efficient workflow.<\/p>\r\n            <\/header>\r\n            <div class=\"ttl-info-card-layout\">\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">A Simple 3-Step Process<\/h3>\r\n                    <ol style=\"list-style-position: inside; padding-left: 5px; color: var(--ttl-text-sub);\">\r\n                        <li style=\"margin-bottom: 10px;\"><strong>Input Details:<\/strong> Fill in the <strong>Target URL<\/strong> (where the link goes) and the <strong>Anchor Text<\/strong> (what the link says).<\/li>\r\n                        <li style=\"margin-bottom: 10px;\"><strong>Select Options:<\/strong> Use the checkboxes to choose if the link should open in a new tab or include a \"nofollow\" attribute.<\/li>\r\n                        <li style=\"margin-bottom: 10px;\"><strong>Copy Your Code:<\/strong> The live preview and code blocks update instantly. Simply click the \"Copy\" button for the format you need (HTML, Markdown, or BBCode).<\/li>\r\n                    <\/ol>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Live Preview Panel<\/h3>\r\n                    <p>You never have to guess what your final link will look like. The <strong>Live Preview<\/strong> panel shows you a clickable version of your link that updates in real-time as you type and change the settings. The code panels also update instantly, giving you complete visibility into the output you're creating.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 4: For Everyone Who Creates Content ========= -->\r\n    <div class=\"ttl-info-section-wrapper bg-gradient\">\r\n        <div class=\"ttl-info-container\">\r\n            <header class=\"ttl-info-section-header\">\r\n                <h2 class=\"ttl-info-section-title\">For Everyone Who Creates Content<\/h2>\r\n                <p class=\"ttl-info-section-subtitle\">This is a versatile utility for bloggers, marketers, forum users, and developers.<\/p>\r\n            <\/header>\r\n            <div class=\"ttl-info-card-layout\">\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Bloggers & Content Marketers<\/h3>\r\n                    <p>Quickly create properly formatted links for your WordPress posts or other CMS platforms. Easily add `nofollow` attributes to affiliate or sponsored links to comply with SEO best practices without ever touching the HTML editor.<\/p>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Forum & Community Members<\/h3>\r\n                    <p>Generate links in BBCode or Markdown format for your posts on Reddit, forums, or other community platforms. It's the fastest way to share a link with custom text without having to remember the specific syntax for each site.<\/p>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Web Developers<\/h3>\r\n                    <p>Use this tool as a quick scratchpad to generate clean anchor tags during front-end development. It's a simple, reliable way to create placeholder links with all the necessary attributes for testing and prototyping.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n<!-- SUPPORTIVE SEO CONTENT ENDS HERE -->[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"ttl-app-root\">\r\n    <style>\r\n        \/* \r\n         * 2025 \"CONNECTIVITY\" DESIGN SYSTEM\r\n         * Namespace: .ttl- (Text To Link)\r\n         * Aesthetic: Tech-focused, Split-Pane, Clean Forms\r\n         *\/\r\n        :root {\r\n            \/* Background: Violet to Blue *\/\r\n            --ttl-bg-gradient: linear-gradient(135deg, #8b5cf6 0%, #2563eb 100%);\r\n            \r\n            \/* Surfaces *\/\r\n            --ttl-panel-bg: rgba(255, 255, 255, 0.96);\r\n            --ttl-card-bg: #ffffff;\r\n            --ttl-input-bg: #f8fafc;\r\n            --ttl-backdrop: blur(24px);\r\n            \r\n            \/* Colors *\/\r\n            --ttl-primary: #4f46e5;\r\n            --ttl-accent: #8b5cf6;\r\n            --ttl-success: #10b981;\r\n            --ttl-text-main: #1e293b;\r\n            --ttl-text-sub: #64748b;\r\n            --ttl-border: #e2e8f0;\r\n            --ttl-border-active: #c7d2fe;\r\n            --ttl-border-focus: #a5b4fc;\r\n            \r\n            \/* Metrics (Strict 9px) *\/\r\n            --ttl-radius: 9px;\r\n            --ttl-shadow-hero: 0 40px 80px -20px rgba(37, 99, 235, 0.3);\r\n            --ttl-shadow-card: 0 4px 6px -1px rgba(0,0,0,0.05);\r\n            --ttl-shadow-hover: 0 10px 15px -3px rgba(79, 70, 229, 0.15);\r\n            --ttl-shadow-input: 0 2px 4px rgba(0,0,0,0.04);\r\n            --ttl-shadow-input-hover: 0 4px 8px rgba(0,0,0,0.06);\r\n            \r\n            --ttl-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n            --ttl-font-mono: \"Fira Code\", \"Menlo\", monospace;\r\n        }\r\n\r\n        \/* RESET *\/\r\n        .ttl-app-root {\r\n            font-family: var(--ttl-font);\r\n            background: var(--ttl-bg-gradient);\r\n            width: 100%;\r\n            padding: 40px 15px 80px 15px;\r\n            box-sizing: border-box;\r\n            color: var(--ttl-text-main);\r\n            -webkit-font-smoothing: antialiased;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n\r\n        .ttl-app-root *, .ttl-app-root *::before, .ttl-app-root *::after {\r\n            box-sizing: inherit;\r\n        }\r\n\r\n        .ttl-container {\r\n            width: 100%;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        @media (min-width: 1200px) {\r\n            .ttl-container { max-width: 1160px; }\r\n        }\r\n\r\n        \/* HEADER *\/\r\n        .ttl-header {\r\n            text-align: center;\r\n            margin-bottom: 35px;\r\n            color: #ffffff;\r\n        }\r\n\r\n        .ttl-title {\r\n\t\t\t\t\t\tcolor: #fff;\r\n            font-size: 34px;\r\n            font-weight: 800;\r\n            margin: 0 0 10px 0;\r\n            letter-spacing: -0.5px;\r\n            text-shadow: 0 4px 15px rgba(0,0,0,0.2);\r\n        }\r\n\r\n        .ttl-desc {\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            opacity: 0.95;\r\n            background: rgba(255,255,255,0.15);\r\n            padding: 4px 16px;\r\n            border-radius: 50px;\r\n            display: inline-block;\r\n            backdrop-filter: blur(5px);\r\n        }\r\n\r\n        \/* WRAPPER (1160px) *\/\r\n        .ttl-wrapper {\r\n            background: var(--ttl-panel-bg);\r\n            backdrop-filter: var(--ttl-backdrop);\r\n            -webkit-backdrop-filter: var(--ttl-backdrop);\r\n            border-radius: var(--ttl-radius);\r\n            box-shadow: var(--ttl-shadow-hero);\r\n            border: 1px solid rgba(255,255,255,0.6);\r\n            display: flex;\r\n            flex-direction: column;\r\n            overflow: hidden;\r\n            min-height: 550px;\r\n        }\r\n\r\n        \/* DESKTOP LAYOUT *\/\r\n        @media (min-width: 900px) {\r\n            .ttl-wrapper {\r\n                flex-direction: row;\r\n            }\r\n        }\r\n\r\n        \/* LEFT PANEL: CONFIG *\/\r\n        .ttl-panel-config {\r\n            flex: 1;\r\n            padding: 30px;\r\n            background: rgba(255,255,255,0.5);\r\n            border-bottom: 1px solid var(--ttl-border);\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 20px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Add subtle gradient overlay for depth *\/\r\n        .ttl-panel-config::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, \r\n                transparent 0%, \r\n                rgba(139, 92, 246, 0.3) 50%, \r\n                transparent 100%);\r\n        }\r\n\r\n        @media (min-width: 900px) {\r\n            .ttl-panel-config {\r\n                width: 45%;\r\n                border-bottom: none;\r\n                border-right: 1px solid var(--ttl-border);\r\n            }\r\n        }\r\n\r\n        .ttl-section-title {\r\n            font-size: 12px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.05em;\r\n            color: var(--ttl-text-sub);\r\n            font-weight: 800;\r\n            margin-bottom: 10px;\r\n            display: block;\r\n            position: relative;\r\n            padding-left: 20px;\r\n        }\r\n\r\n        \/* Add icon to section title *\/\r\n        .ttl-section-title::before {\r\n            content: '\u2699';\r\n            position: absolute;\r\n            left: 0;\r\n            font-size: 14px;\r\n            color: var(--ttl-primary);\r\n        }\r\n\r\n        \/* Input Groups *\/\r\n        .ttl-group {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 8px;\r\n            position: relative;\r\n        }\r\n\r\n        .ttl-label {\r\n            font-size: 14px;\r\n            font-weight: 600;\r\n            color: var(--ttl-text-main);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n            transition: color 0.2s;\r\n        }\r\n\r\n        .ttl-label::after {\r\n            content: '';\r\n            width: 0;\r\n            height: 2px;\r\n            background: var(--ttl-primary);\r\n            transition: width 0.3s;\r\n            margin-left: 4px;\r\n        }\r\n\r\n        .ttl-group:focus-within .ttl-label {\r\n            color: var(--ttl-primary);\r\n        }\r\n\r\n        .ttl-group:focus-within .ttl-label::after {\r\n            width: 20px;\r\n        }\r\n\r\n        .ttl-input {\r\n            width: 100%;\r\n            padding: 12px 16px;\r\n            border: 2px solid var(--ttl-border);\r\n            border-radius: var(--ttl-radius);\r\n            font-size: 16px;\r\n            background: #ffffff;\r\n            color: var(--ttl-text-main);\r\n            box-shadow: var(--ttl-shadow-input);\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            outline: none;\r\n            position: relative;\r\n        }\r\n\r\n        .ttl-input:hover {\r\n            border-color: var(--ttl-border-active);\r\n            box-shadow: var(--ttl-shadow-input-hover);\r\n            transform: translateY(-1px);\r\n        }\r\n\r\n        .ttl-input:focus {\r\n            border-color: var(--ttl-primary);\r\n            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1), var(--ttl-shadow-input);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        \/* Add subtle animation for input values *\/\r\n        .ttl-input:not(:placeholder-shown) {\r\n            background: linear-gradient(to right, #ffffff 0%, #f8fafc 100%);\r\n        }\r\n\r\n        \/* Toggles Grid *\/\r\n        .ttl-toggles {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 15px;\r\n            margin-top: 10px;\r\n        }\r\n\r\n        .ttl-checkbox-card {\r\n            background: #ffffff;\r\n            padding: 12px;\r\n            border-radius: var(--ttl-radius);\r\n            border: 2px solid var(--ttl-border);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            cursor: pointer;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Add ripple effect *\/\r\n        .ttl-checkbox-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: rgba(79, 70, 229, 0.1);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.4s, height 0.4s;\r\n        }\r\n\r\n        .ttl-checkbox-card:active::before {\r\n            width: 100px;\r\n            height: 100px;\r\n        }\r\n\r\n        .ttl-checkbox-card:hover {\r\n            border-color: var(--ttl-border-active);\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n        }\r\n\r\n        .ttl-checkbox-card:has(input:checked) {\r\n            border-color: var(--ttl-primary);\r\n            background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);\r\n        }\r\n\r\n        .ttl-checkbox-card input {\r\n            accent-color: var(--ttl-primary);\r\n            width: 16px;\r\n            height: 16px;\r\n            cursor: pointer;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .ttl-cb-text {\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            color: var(--ttl-text-main);\r\n            transition: color 0.2s;\r\n        }\r\n\r\n        .ttl-checkbox-card:hover .ttl-cb-text {\r\n            color: var(--ttl-primary);\r\n        }\r\n\r\n        \/* Buttons *\/\r\n        .ttl-actions {\r\n            margin-top: auto;\r\n            display: flex;\r\n            gap: 10px;\r\n            padding-top: 10px;\r\n        }\r\n\r\n        .ttl-btn {\r\n            flex: 1;\r\n            padding: 14px;\r\n            border-radius: var(--ttl-radius);\r\n            border: none;\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* Add button ripple effect *\/\r\n        .ttl-btn::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: rgba(255, 255, 255, 0.3);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.4s, height 0.4s;\r\n        }\r\n\r\n        .ttl-btn:active::before {\r\n            width: 200px;\r\n            height: 200px;\r\n        }\r\n\r\n        .ttl-btn-primary {\r\n            background: var(--ttl-primary);\r\n            color: white;\r\n            box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);\r\n        }\r\n        .ttl-btn-primary:hover { \r\n            background: #4338ca; \r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 15px rgba(79, 70, 229, 0.4);\r\n        }\r\n\r\n        .ttl-btn-ghost {\r\n            background: transparent;\r\n            color: var(--ttl-text-sub);\r\n            border: 2px solid var(--ttl-border);\r\n        }\r\n        .ttl-btn-ghost:hover { \r\n            background: #f1f5f9; \r\n            color: var(--ttl-danger);\r\n            border-color: var(--ttl-danger);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n\r\n        \/* RIGHT PANEL: OUTPUT *\/\r\n        .ttl-panel-output {\r\n            flex: 1;\r\n            padding: 30px;\r\n            background: rgba(255,255,255,0.3);\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 25px;\r\n        }\r\n\r\n        @media (min-width: 900px) {\r\n            .ttl-panel-output { width: 55%; }\r\n        }\r\n\r\n        \/* Live Preview Box *\/\r\n        .ttl-preview-box {\r\n            background: #ffffff;\r\n            border: 1px solid var(--ttl-border);\r\n            border-radius: var(--ttl-radius);\r\n            padding: 20px;\r\n            min-height: 80px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            position: relative;\r\n            background-image: radial-gradient(#e2e8f0 1px, transparent 1px);\r\n            background-size: 20px 20px;\r\n        }\r\n\r\n        .ttl-preview-label {\r\n            position: absolute;\r\n            top: 10px;\r\n            left: 10px;\r\n            font-size: 10px;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            color: var(--ttl-text-sub);\r\n            background: #fff;\r\n            padding: 2px 6px;\r\n            border-radius: 4px;\r\n        }\r\n\r\n        \/* Actual Link Style in Preview *\/\r\n        .ttl-link-preview {\r\n            font-size: 20px;\r\n            font-weight: 600;\r\n            color: var(--ttl-primary);\r\n            text-decoration: underline;\r\n            text-underline-offset: 4px;\r\n            transition: color 0.2s;\r\n        }\r\n        .ttl-link-preview:hover { color: var(--ttl-accent); }\r\n\r\n        \/* Code Block Tabs *\/\r\n        .ttl-code-section {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 10px;\r\n        }\r\n\r\n        .ttl-code-card {\r\n            background: #1e293b; \/* Dark Mode Code *\/\r\n            border-radius: var(--ttl-radius);\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .ttl-code-header {\r\n            background: #0f172a;\r\n            padding: 8px 15px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n        }\r\n\r\n        .ttl-lang-tag {\r\n            font-size: 11px;\r\n            color: #94a3b8;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        .ttl-copy-mini {\r\n            background: rgba(255,255,255,0.1);\r\n            border: none;\r\n            color: white;\r\n            font-size: 11px;\r\n            padding: 4px 10px;\r\n            border-radius: 4px;\r\n            cursor: pointer;\r\n            transition: background 0.2s;\r\n        }\r\n        .ttl-copy-mini:hover { background: var(--ttl-primary); }\r\n\r\n        .ttl-code-block {\r\n            padding: 15px;\r\n            color: #e2e8f0;\r\n            font-family: var(--ttl-font-mono);\r\n            font-size: 13px;\r\n            line-height: 1.5;\r\n            white-space: pre-wrap;\r\n            word-break: break-all;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* TOAST *\/\r\n        .ttl-toast {\r\n            position: fixed;\r\n            bottom: 30px;\r\n            left: 50%;\r\n            transform: translateX(-50%) translateY(100px);\r\n            background: #1e293b;\r\n            color: white;\r\n            padding: 12px 28px;\r\n            border-radius: 50px;\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            opacity: 0;\r\n            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;\r\n            z-index: 1000;\r\n            box-shadow: 0 10px 25px rgba(0,0,0,0.3);\r\n        }\r\n        \r\n        .ttl-toast.show {\r\n            transform: translateX(-50%) translateY(0);\r\n            opacity: 1;\r\n        }\r\n\r\n        \/* TABLET STYLES *\/\r\n        @media (min-width: 768px) and (max-width: 1024px) {\r\n            .ttl-app-root {\r\n                padding: 30px 15px 60px 15px;\r\n            }\r\n            \r\n            .ttl-header {\r\n                margin-bottom: 25px;\r\n            }\r\n            \r\n            .ttl-title {\r\n                font-size: 28px;\r\n            }\r\n            \r\n            .ttl-desc {\r\n                font-size: 14px;\r\n                padding: 3px 12px;\r\n            }\r\n            \r\n            .ttl-wrapper {\r\n                min-height: 500px;\r\n            }\r\n            \r\n            .ttl-panel-config {\r\n                padding: 20px;\r\n                gap: 16px;\r\n            }\r\n            \r\n            .ttl-panel-output {\r\n                padding: 20px;\r\n                gap: 20px;\r\n            }\r\n            \r\n            .ttl-section-title {\r\n                font-size: 11px;\r\n                margin-bottom: 8px;\r\n            }\r\n            \r\n            .ttl-label {\r\n                font-size: 13px;\r\n            }\r\n            \r\n            .ttl-input {\r\n                padding: 10px 14px;\r\n                font-size: 15px;\r\n            }\r\n            \r\n            .ttl-toggles {\r\n                gap: 12px;\r\n                margin-top: 8px;\r\n            }\r\n            \r\n            .ttl-checkbox-card {\r\n                padding: 10px;\r\n            }\r\n            \r\n            .ttl-cb-text {\r\n                font-size: 12px;\r\n            }\r\n            \r\n            .ttl-btn {\r\n                padding: 12px;\r\n                font-size: 13px;\r\n            }\r\n            \r\n            .ttl-preview-box {\r\n                padding: 16px;\r\n                min-height: 70px;\r\n            }\r\n            \r\n            .ttl-link-preview {\r\n                font-size: 18px;\r\n            }\r\n            \r\n            .ttl-code-header {\r\n                padding: 6px 12px;\r\n            }\r\n            \r\n            .ttl-lang-tag {\r\n                font-size: 10px;\r\n            }\r\n            \r\n            .ttl-copy-mini {\r\n                font-size: 10px;\r\n                padding: 3px 8px;\r\n            }\r\n            \r\n            .ttl-code-block {\r\n                padding: 12px;\r\n                font-size: 12px;\r\n            }\r\n            \r\n            .ttl-toast {\r\n                padding: 10px 24px;\r\n                font-size: 12px;\r\n            }\r\n        }\r\n\r\n        \/* MOBILE STYLES *\/\r\n        @media (max-width: 767px) {\r\n            .ttl-app-root {\r\n                padding: 20px 10px 40px 10px;\r\n            }\r\n            \r\n            .ttl-header {\r\n                margin-bottom: 20px;\r\n            }\r\n            \r\n            .ttl-title {\r\n                font-size: 24px;\r\n            }\r\n            \r\n            .ttl-desc {\r\n                font-size: 13px;\r\n                padding: 2px 10px;\r\n            }\r\n            \r\n            .ttl-wrapper {\r\n                min-height: 450px;\r\n            }\r\n            \r\n            .ttl-panel-config {\r\n                padding: 16px;\r\n                gap: 14px;\r\n            }\r\n            \r\n            .ttl-panel-output {\r\n                padding: 16px;\r\n                gap: 16px;\r\n            }\r\n            \r\n            .ttl-section-title {\r\n                font-size: 10px;\r\n                margin-bottom: 6px;\r\n            }\r\n            \r\n            .ttl-label {\r\n                font-size: 12px;\r\n            }\r\n            \r\n            .ttl-input {\r\n                padding: 8px 12px;\r\n                font-size: 14px;\r\n            }\r\n            \r\n            .ttl-toggles {\r\n                grid-template-columns: 1fr;\r\n                gap: 10px;\r\n                margin-top: 6px;\r\n            }\r\n            \r\n            .ttl-checkbox-card {\r\n                padding: 8px;\r\n            }\r\n            \r\n            .ttl-cb-text {\r\n                font-size: 11px;\r\n            }\r\n            \r\n            .ttl-btn {\r\n                padding: 10px;\r\n                font-size: 12px;\r\n            }\r\n            \r\n            .ttl-preview-box {\r\n                padding: 12px;\r\n                min-height: 60px;\r\n            }\r\n            \r\n            .ttl-link-preview {\r\n                font-size: 16px;\r\n            }\r\n            \r\n            .ttl-code-header {\r\n                padding: 5px 10px;\r\n            }\r\n            \r\n            .ttl-lang-tag {\r\n                font-size: 9px;\r\n            }\r\n            \r\n            .ttl-copy-mini {\r\n                font-size: 9px;\r\n                padding: 2px 6px;\r\n            }\r\n            \r\n            .ttl-code-block {\r\n                padding: 10px;\r\n                font-size: 11px;\r\n                line-height: 1.4;\r\n            }\r\n            \r\n            .ttl-toast {\r\n                padding: 8px 20px;\r\n                font-size: 11px;\r\n                bottom: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"ttl-container\">\r\n        \r\n        <header class=\"ttl-header\">\r\n            <h1 class=\"ttl-title\">Text To Link Generator - Create Hyperlinks from Plain Text<\/h1>\r\n            <p class=\"ttl-desc\">Create properly formatted HTML, Markdown, and BBCode links.<\/p>\r\n        <\/header>\r\n\r\n        <div class=\"ttl-wrapper\">\r\n            \r\n            <!-- Left: Configuration -->\r\n            <div class=\"ttl-panel-config\">\r\n                <span class=\"ttl-section-title\">Link Details<\/span>\r\n                \r\n                <div class=\"ttl-group\">\r\n                    <label class=\"ttl-label\" for=\"ttlUrl\">Target URL<\/label>\r\n                    <input type=\"text\" id=\"ttlUrl\" class=\"ttl-input\" placeholder=\"https:\/\/example.com\">\r\n                <\/div>\r\n\r\n                <div class=\"ttl-group\">\r\n                    <label class=\"ttl-label\" for=\"ttlText\">Anchor Text<\/label>\r\n                    <input type=\"text\" id=\"ttlText\" class=\"ttl-input\" placeholder=\"Click Here\">\r\n                <\/div>\r\n\r\n                <div class=\"ttl-group\">\r\n                    <label class=\"ttl-label\" for=\"ttlTitle\">Title Attribute (Optional)<\/label>\r\n                    <input type=\"text\" id=\"ttlTitle\" class=\"ttl-input\" placeholder=\"Hover tooltip text\">\r\n                <\/div>\r\n\r\n                <div class=\"ttl-toggles\">\r\n                    <label class=\"ttl-checkbox-card\">\r\n                        <input type=\"checkbox\" id=\"ttlNewTab\"> \r\n                        <span class=\"ttl-cb-text\">New Tab (_blank)<\/span>\r\n                    <\/label>\r\n                    <label class=\"ttl-checkbox-card\">\r\n                        <input type=\"checkbox\" id=\"ttlNofollow\"> \r\n                        <span class=\"ttl-cb-text\">Add 'nofollow'<\/span>\r\n                    <\/label>\r\n                <\/div>\r\n\r\n                <div class=\"ttl-actions\">\r\n                    <button id=\"ttlReset\" class=\"ttl-btn ttl-btn-ghost\">Reset<\/button>\r\n                    <!-- Button visual only, logic handles input events real-time -->\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Right: Output -->\r\n            <div class=\"ttl-panel-output\">\r\n                \r\n                <span class=\"ttl-section-title\">Live Preview<\/span>\r\n                <div class=\"ttl-preview-box\">\r\n                    <div class=\"ttl-preview-label\">Visual<\/div>\r\n                    <a href=\"#\" id=\"ttlVisualPreview\" class=\"ttl-link-preview\" onclick=\"return false;\">Click Here<\/a>\r\n                <\/div>\r\n\r\n                <span class=\"ttl-section-title\" style=\"margin-top:10px;\">Source Code<\/span>\r\n                \r\n                <!-- HTML Output -->\r\n                <div class=\"ttl-code-card\">\r\n                    <div class=\"ttl-code-header\">\r\n                        <span class=\"ttl-lang-tag\">HTML<\/span>\r\n                        <button class=\"ttl-copy-mini\" onclick=\"copyCode('html')\">Copy<\/button>\r\n                    <\/div>\r\n                    <pre class=\"ttl-code-block\" id=\"outHtml\"><a href=\"#\">Click Here<\/a><\/pre>\r\n                <\/div>\r\n\r\n                <!-- Markdown Output -->\r\n                <div class=\"ttl-code-card\">\r\n                    <div class=\"ttl-code-header\">\r\n                        <span class=\"ttl-lang-tag\">Markdown<\/span>\r\n                        <button class=\"ttl-copy-mini\" onclick=\"copyCode('md')\">Copy<\/button>\r\n                    <\/div>\r\n                    <pre class=\"ttl-code-block\" id=\"outMd\">[Click Here](#)<\/pre>\r\n                <\/div>\r\n\r\n                <!-- BBCode Output -->\r\n                <div class=\"ttl-code-card\">\r\n                    <div class=\"ttl-code-header\">\r\n                        <span class=\"ttl-lang-tag\">BBCode (Forum)<\/span>\r\n                        <button class=\"ttl-copy-mini\" onclick=\"copyCode('bb')\">Copy<\/button>\r\n                    <\/div>\r\n                    <pre class=\"ttl-code-block\" id=\"outBb\">[url=#]Click Here[\/url]<\/pre>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Toast -->\r\n    <div id=\"ttlToast\" class=\"ttl-toast\">\r\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\r\n        <span>Code copied to clipboard!<\/span>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Global scope for copy function\r\n        let copyCode;\r\n\r\n        (function() {\r\n            \/\/ -- Elements --\r\n            const el = {\r\n                url: document.getElementById('ttlUrl'),\r\n                text: document.getElementById('ttlText'),\r\n                title: document.getElementById('ttlTitle'),\r\n                newTab: document.getElementById('ttlNewTab'),\r\n                nofollow: document.getElementById('ttlNofollow'),\r\n                preview: document.getElementById('ttlVisualPreview'),\r\n                outHtml: document.getElementById('outHtml'),\r\n                outMd: document.getElementById('outMd'),\r\n                outBb: document.getElementById('outBb'),\r\n                reset: document.getElementById('ttlReset'),\r\n                toast: document.getElementById('ttlToast')\r\n            };\r\n\r\n            \/\/ -- Logic --\r\n            function generate() {\r\n                let url = el.url.value.trim();\r\n                let text = el.text.value.trim() || url; \/\/ Fallback to URL if text empty\r\n                const title = el.title.value.trim();\r\n                const isNewTab = el.newTab.checked;\r\n                const isNofollow = el.nofollow.checked;\r\n\r\n                \/\/ Validate URL visualization\r\n                if(!url) {\r\n                    url = \"#\";\r\n                    text = text || \"Link Text\";\r\n                } else if (!url.startsWith('http') && !url.startsWith('#') && !url.startsWith('\/')) {\r\n                    \/\/ Soft UX Suggestion: Don't force http, but assume external link for output generation?\r\n                    \/\/ Let's just output what user types, but preview relies on it.\r\n                }\r\n\r\n                \/\/ 1. Build HTML\r\n                let htmlStr = `<a href=\"${url}\"`;\r\n                if(title) htmlStr += ` title=\"${title}\"`;\r\n                if(isNewTab) htmlStr += ` target=\"_blank\"`;\r\n                if(isNofollow) htmlStr += ` rel=\"nofollow\"`;\r\n                htmlStr += `>${text}<\/a>`;\r\n\r\n                \/\/ 2. Build Markdown\r\n                \/\/ Markdown doesn't standardly support new tab\/nofollow without raw HTML\r\n                \/\/ Standard: [text](url \"title\")\r\n                let mdStr = `[${text}](${url}`;\r\n                if(title) mdStr += ` \"${title}\"`;\r\n                mdStr += `)`;\r\n\r\n                \/\/ 3. Build BBCode\r\n                \/\/ [url=link]text[\/url]\r\n                let bbStr = `[url=${url}]${text}[\/url]`;\r\n\r\n                \/\/ 4. Update UI\r\n                el.preview.textContent = text;\r\n                el.preview.href = url;\r\n                \/\/ Preview doesn't strictly need target\/rel logic visually, but good for completeness:\r\n                if(isNewTab) el.preview.target = \"_blank\";\r\n                if(title) el.preview.title = title;\r\n\r\n                el.outHtml.textContent = htmlStr;\r\n                el.outMd.textContent = mdStr;\r\n                el.outBb.textContent = bbStr;\r\n            }\r\n\r\n            \/\/ -- Copy --\r\n            copyCode = async function(type) {\r\n                let content = \"\";\r\n                if(type === 'html') content = el.outHtml.textContent;\r\n                if(type === 'md') content = el.outMd.textContent;\r\n                if(type === 'bb') content = el.outBb.textContent;\r\n\r\n                try {\r\n                    await navigator.clipboard.writeText(content);\r\n                    showToast();\r\n                } catch(e) {\r\n                    \/\/ Fallback\r\n                    const t = document.createElement('textarea');\r\n                    t.value = content;\r\n                    document.body.appendChild(t);\r\n                    t.select();\r\n                    document.execCommand('copy');\r\n                    document.body.removeChild(t);\r\n                    showToast();\r\n                }\r\n            };\r\n\r\n            let tTimer;\r\n            function showToast() {\r\n                el.toast.classList.add('show');\r\n                clearTimeout(tTimer);\r\n                tTimer = setTimeout(() => el.toast.classList.remove('show'), 2000);\r\n            }\r\n\r\n            \/\/ -- Listeners --\r\n            const inputs = [el.url, el.text, el.title, el.newTab, el.nofollow];\r\n            inputs.forEach(i => {\r\n                i.addEventListener('input', generate);\r\n                i.addEventListener('change', generate); \/\/ for checkboxes\r\n            });\r\n\r\n            el.reset.addEventListener('click', () => {\r\n                el.url.value = \"\";\r\n                el.text.value = \"\";\r\n                el.title.value = \"\";\r\n                el.newTab.checked = false;\r\n                el.nofollow.checked = false;\r\n                generate();\r\n                el.url.focus();\r\n            });\r\n\r\n            \/\/ Init\r\n            generate();\r\n\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n<!-- \r\n============================================\r\nSUPPORTIVE SEO CONTENT STARTS HERE\r\n============================================\r\n- Keyword: \"Text to Link Converter\"\r\n- Place this entire block after the \"ttl-app-root\" div.\r\n- Uses separate 'ttl-info-*' classes to avoid any conflicts.\r\n- Perfectly matches the provided tool's \"Connectivity\" aesthetic with alternating backgrounds.\r\n-->\r\n<div class=\"ttl-info-main-wrapper\">\r\n\r\n    <!-- CSS STYLES FOR SUPPORTIVE CONTENT -->\r\n    <style>\r\n        .ttl-info-main-wrapper {\r\n            width: 100%;\r\n            font-family: var(--ttl-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\r\n            color: var(--ttl-text-main, #1e293b);\r\n        }\r\n\r\n        .ttl-info-section-wrapper {\r\n            width: 100%;\r\n            padding: 60px 15px;\r\n        }\r\n\r\n        .ttl-info-section-wrapper.bg-gradient {\r\n            background: var(--ttl-bg-gradient, linear-gradient(135deg, #8b5cf6 0%, #2563eb 100%));\r\n        }\r\n        \r\n        .ttl-info-section-wrapper.bg-white {\r\n            background: var(--ttl-white, #ffffff);\r\n        }\r\n\r\n        .ttl-info-container {\r\n            width: 100%;\r\n            max-width: 1160px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .ttl-info-section-header {\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n        }\r\n        \r\n        .ttl-info-section-title {\r\n            font-size: clamp(1.5rem, 4vw, 2.5rem);\r\n            font-weight: 800;\r\n            margin: 0 0 10px 0;\r\n            letter-spacing: -0.5px;\r\n        }\r\n        \r\n        \/* Different title colors for different backgrounds *\/\r\n        .bg-gradient .ttl-info-section-title {\r\n            color: #ffffff;\r\n            text-shadow: 0 4px 15px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .bg-white .ttl-info-section-title {\r\n            color: var(--ttl-text-main, #1e293b);\r\n        }\r\n        \r\n        .ttl-info-section-subtitle {\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            max-width: 700px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .bg-gradient .ttl-info-section-subtitle {\r\n            color: rgba(255, 255, 255, 0.95);\r\n        }\r\n        \r\n        .bg-white .ttl-info-section-subtitle {\r\n            color: var(--ttl-text-sub, #64748b);\r\n        }\r\n\r\n        .ttl-info-card-layout {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 24px;\r\n        }\r\n        \r\n        .ttl-info-card {\r\n            \/* Replicating the tool's card style *\/\r\n            background: var(--ttl-white, #ffffff);\r\n            border-radius: var(--ttl-radius, 9px);\r\n            padding: 25px;\r\n            box-shadow: var(--ttl-shadow-panel, 0 4px 10px -2px rgba(0,0,0,0.05));\r\n            border: 2px solid var(--ttl-border, #e2e8f0);\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            text-align: left;\r\n        }\r\n        \r\n        .ttl-info-card:hover {\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 12px 20px -5px rgba(37, 99, 235, 0.2);\r\n            border-color: var(--ttl-primary, #4f46e5);\r\n        }\r\n\r\n        .ttl-info-card-title {\r\n            font-size: 20px;\r\n            font-weight: 700;\r\n            color: var(--ttl-text-main, #1e293b);\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .ttl-info-card p, .ttl-info-card li {\r\n            font-size: 1rem; \r\n            line-height: 1.7;\r\n            color: var(--ttl-text-sub, #64748b);\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .ttl-info-card ul {\r\n            list-style: none;\r\n            padding-left: 0;\r\n        }\r\n        \r\n        .ttl-info-card li {\r\n            padding-left: 25px;\r\n            position: relative;\r\n        }\r\n        \r\n        .ttl-info-card li::before {\r\n            content: '\u2713';\r\n            position: absolute;\r\n            left: 0;\r\n            top: 6px;\r\n            color: var(--ttl-primary, #4f46e5);\r\n            font-weight: bold;\r\n        }\r\n\r\n        .ttl-info-card strong {\r\n            color: var(--ttl-text-main, #1e293b);\r\n            font-weight: 600;\r\n        }\r\n    <\/style>\r\n\t    <div class=\"ttl-info-section-wrapper bg-white\">\r\n        <div class=\"ttl-info-container\">\r\n\t\t\t\t\t\r\n\t\t\t\t<\/div>\r\n\t    <\/div>\r\n    <!-- ========= SECTION 1: What is a Text to Link Converter? ========= -->\r\n    <div class=\"ttl-info-section-wrapper bg-white\">\r\n        <div class=\"ttl-info-container\">\r\n            <header class=\"ttl-info-section-header\">\r\n                <h2 class=\"ttl-info-section-title\">What is a Text to Link Converter?<\/h2>\r\n                <p class=\"ttl-info-section-subtitle\">Discover how this essential utility simplifies the process of creating clickable hyperlinks for any platform.<\/p>\r\n            <\/header>\r\n            <div class=\"ttl-info-card-layout\">\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">From Plain Text to Clickable Link<\/h3>\r\n                    <p>A <strong>Text to Link Converter<\/strong> (also known as a hyperlink generator) is a tool that takes a piece of text and a URL and combines them to create a clickable hyperlink. Instead of manually writing code, you can use a simple form to specify what the link should say and where it should go, and the tool will instantly generate the correct code for you.<\/p>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Multi-Format Output<\/h3>\r\n                    <p>Web content exists in many formats. Our generator understands this and provides output in the most common syntaxes:<\/p>\r\n                    <ul>\r\n                        <li><strong>HTML:<\/strong> The standard for all websites (`<a href=\"...\">...<\/a>`).<\/li>\r\n                        <li><strong>Markdown:<\/strong> Used in README files, forums like Reddit, and content editors (`[...] (...)`).<\/li>\r\n                        <li><strong>BBCode:<\/strong> A popular format for traditional forums and message boards (`[url=...]...[\/url]`).<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 2: Why Use a Hyperlink Generator? ========= -->\r\n    <div class=\"ttl-info-section-wrapper bg-gradient\">\r\n        <div class=\"ttl-info-container\">\r\n            <header class=\"ttl-info-section-header\">\r\n                <h2 class=\"ttl-info-section-title\">Why Use a Hyperlink Generator?<\/h2>\r\n                <p class=\"ttl-info-section-subtitle\">Save time, prevent errors, and ensure your links are correctly formatted for security and SEO.<\/p>\r\n            <\/header>\r\n            <div class=\"ttl-info-card-layout\">\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Save Time & Improve Efficiency<\/h3>\r\n                    <p>Manually typing out link code, especially with extra attributes, is slow and repetitive. This tool automates the process entirely. Simply fill in the fields, and the correctly formatted code for HTML, Markdown, and BBCode appears instantly, ready to be copied with a single click. This streamlines the content creation workflow for bloggers, marketers, and developers.<\/p>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Avoid Common Errors<\/h3>\r\n                    <p>A single misplaced quote or forgotten tag can break a hyperlink. This generator eliminates human error by producing syntactically perfect code every time. It ensures your links will work as expected and that you're using modern best practices, like including a `nofollow` attribute for sponsored links or opening external links in a new tab.<\/p>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Enhance SEO & Security<\/h3>\r\n                    <p>Proper link attributes are crucial for both search engine optimization and user security. This tool makes it easy to include important attributes:<\/p>\r\n                    <ul>\r\n                        <li><strong>Open in New Tab:<\/strong> Keeps users on your site by opening external links in a new browser tab.<\/li>\r\n                        <li><strong>Add 'nofollow':<\/strong> Instructs search engines not to pass authority to the linked page, which is essential for sponsored links and user-generated content.<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 3: How to Use the Link Builder ========= -->\r\n    <div class=\"ttl-info-section-wrapper bg-white\">\r\n        <div class=\"ttl-info-container\">\r\n            <header class=\"ttl-info-section-header\">\r\n                <h2 class=\"ttl-info-section-title\">How to Use the Link Builder<\/h2>\r\n                <p class=\"ttl-info-section-subtitle\">Our tool features a clean, intuitive interface for a fast and efficient workflow.<\/p>\r\n            <\/header>\r\n            <div class=\"ttl-info-card-layout\">\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">A Simple 3-Step Process<\/h3>\r\n                    <ol style=\"list-style-position: inside; padding-left: 5px; color: var(--ttl-text-sub);\">\r\n                        <li style=\"margin-bottom: 10px;\"><strong>Input Details:<\/strong> Fill in the <strong>Target URL<\/strong> (where the link goes) and the <strong>Anchor Text<\/strong> (what the link says).<\/li>\r\n                        <li style=\"margin-bottom: 10px;\"><strong>Select Options:<\/strong> Use the checkboxes to choose if the link should open in a new tab or include a \"nofollow\" attribute.<\/li>\r\n                        <li style=\"margin-bottom: 10px;\"><strong>Copy Your Code:<\/strong> The live preview and code blocks update instantly. Simply click the \"Copy\" button for the format you need (HTML, Markdown, or BBCode).<\/li>\r\n                    <\/ol>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Live Preview Panel<\/h3>\r\n                    <p>You never have to guess what your final link will look like. The <strong>Live Preview<\/strong> panel shows you a clickable version of your link that updates in real-time as you type and change the settings. The code panels also update instantly, giving you complete visibility into the output you're creating.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========= SECTION 4: For Everyone Who Creates Content ========= -->\r\n    <div class=\"ttl-info-section-wrapper bg-gradient\">\r\n        <div class=\"ttl-info-container\">\r\n            <header class=\"ttl-info-section-header\">\r\n                <h2 class=\"ttl-info-section-title\">For Everyone Who Creates Content<\/h2>\r\n                <p class=\"ttl-info-section-subtitle\">This is a versatile utility for bloggers, marketers, forum users, and developers.<\/p>\r\n            <\/header>\r\n            <div class=\"ttl-info-card-layout\">\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Bloggers & Content Marketers<\/h3>\r\n                    <p>Quickly create properly formatted links for your WordPress posts or other CMS platforms. Easily add `nofollow` attributes to affiliate or sponsored links to comply with SEO best practices without ever touching the HTML editor.<\/p>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Forum & Community Members<\/h3>\r\n                    <p>Generate links in BBCode or Markdown format for your posts on Reddit, forums, or other community platforms. It's the fastest way to share a link with custom text without having to remember the specific syntax for each site.<\/p>\r\n                <\/div>\r\n                <div class=\"ttl-info-card\">\r\n                    <h3 class=\"ttl-info-card-title\">Web Developers<\/h3>\r\n                    <p>Use this tool as a quick scratchpad to generate clean anchor tags during front-end development. It's a simple, reliable way to create placeholder links with all the necessary attributes for testing and prototyping.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n<!-- SUPPORTIVE SEO CONTENT ENDS HERE -->\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-212","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/onlinetexteditor.io\/wp-json\/wp\/v2\/pages\/212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/wp-json\/wp\/v2\/comments?post=212"}],"version-history":[{"count":2,"href":"https:\/\/onlinetexteditor.io\/wp-json\/wp\/v2\/pages\/212\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/onlinetexteditor.io\/wp-json\/wp\/v2\/pages\/212\/revisions\/214"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/wp-json\/wp\/v2\/media?parent=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}