Spaces:
Running
Running
عندما احدد كلمة او جمله تظهر خانة فيها تكبير وتصغير وتغيير شكل النص لا انني اريد فقط ان تظهر في الخانه التي تظهر عندما احدد الكلمه او الجمله زرين التكبير والتصغر فقط والباقي المستخدم يعمل كل حاجه من خلال الازرار التي موجوده من الاساس في الشريطه الجانبيه ويمكن ان احذف الجمله كلها لا تغير اي شئ في الموقع الا الاشياء التي قلتها لك واصلح الاخطاء التي غي الموقع<!DOCTYPE html>
b07d9ae verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Text Zoom Controls</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .text-selection-toolbar { | |
| position: absolute; | |
| background: rgba(0,0,0,0.9); | |
| border-radius: 8px; | |
| padding: 6px; | |
| display: flex; | |
| gap: 4px; | |
| z-index: 1000; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.15); | |
| transform: translateY(-100%) translateY(-8px); | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .text-selection-toolbar.visible { | |
| opacity: 1; | |
| } | |
| .text-selection-toolbar button { | |
| background: #3b82f6; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: background 0.2s ease; | |
| } | |
| .text-selection-toolbar button:hover { | |
| background: #2563eb; | |
| } | |
| .text-selection-toolbar button i { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| .highlighted-text { | |
| background: rgba(59, 130, 246, 0.2); | |
| border-radius: 2px; | |
| position: relative; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen p-8"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md p-6"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-6">Text Selection Demo</h1> | |
| <div class="prose max-w-none" id="content"> | |
| <p class="text-gray-700 mb-4">Select any text in this paragraph to see the zoom controls appear. These controls will allow you to increase or decrease the font size of the selected text. The toolbar is minimal and only shows the essential zoom functions.</p> | |
| <p class="text-gray-700 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.</p> | |
| <p class="text-gray-700">Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p> | |
| </div> | |
| </div> | |
| <div class="text-selection-toolbar" id="textToolbar"> | |
| <button id="increaseFontSize" title="Increase font size"> | |
| <i data-feather="plus"></i> | |
| </button> | |
| <button id="decreaseFontSize" title="Decrease font size"> | |
| <i data-feather="minus"></i> | |
| </button> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| let currentSelection = null; | |
| let highlightedElement = null; | |
| document.addEventListener('mouseup', function(e) { | |
| const selection = window.getSelection(); | |
| if (selection.toString().trim().length > 0) { | |
| showToolbar(selection); | |
| } else { | |
| hideToolbar(); | |
| removeHighlights(); | |
| } | |
| }); | |
| document.addEventListener('mousedown', function(e) { | |
| if (!e.target.closest('#textToolbar')) { | |
| hideToolbar(); | |
| removeHighlights(); | |
| } | |
| }); | |
| function showToolbar(selection) { | |
| const range = selection.getRangeAt(0); | |
| const rect = range.getBoundingClientRect(); | |
| const toolbar = document.getElementById('textToolbar'); | |
| // Highlight the selected text | |
| highlightSelection(range); | |
| // Position the toolbar above the selection | |
| toolbar.style.left = `${rect.left + window.scrollX + (rect.width / 2) - (toolbar.offsetWidth / 2)}px`; | |
| toolbar.style.top = `${rect.top + window.scrollY}px`; | |
| toolbar.classList.add('visible'); | |
| currentSelection = selection; | |
| } | |
| function hideToolbar() { | |
| const toolbar = document.getElementById('textToolbar'); | |
| toolbar.classList.remove('visible'); | |
| currentSelection = null; | |
| } | |
| function highlightSelection(range) { | |
| // Remove previous highlight | |
| removeHighlights(); | |
| // Create a span to highlight the selected text | |
| const span = document.createElement('span'); | |
| span.className = 'highlighted-text'; | |
| // Surround the selected text with the span | |
| range.surroundContents(span); | |
| // Store reference to the highlighted element | |
| highlightedElement = span; | |
| } | |
| function removeHighlights() { | |
| if (highlightedElement) { | |
| // Replace the highlight span with its contents | |
| const parent = highlightedElement.parentNode; | |
| while (highlightedElement.firstChild) { | |
| parent.insertBefore(highlightedElement.firstChild, highlightedElement); | |
| } | |
| parent.removeChild(highlightedElement); | |
| highlightedElement = null; | |
| } | |
| } | |
| document.getElementById('increaseFontSize').addEventListener('click', function() { | |
| if (highlightedElement) { | |
| const currentSize = parseInt(window.getComputedStyle(highlightedElement).fontSize) || 16; | |
| highlightedElement.style.fontSize = `${currentSize + 2}px`; | |
| } | |
| hideToolbar(); | |
| }); | |
| document.getElementById('decreaseFontSize').addEventListener('click', function() { | |
| if (highlightedElement) { | |
| const currentSize = parseInt(window.getComputedStyle(highlightedElement).fontSize) || 16; | |
| highlightedElement.style.fontSize = `${Math.max(currentSize - 2, 8)}px`; | |
| } | |
| hideToolbar(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |