Spaces:

ABD20124082402
/

undefined

Running

App Files Files Community

ABD20124082402 commited on Oct 9, 2025

Commit

b07d9ae

verified ·

1 Parent(s): 2ec058a

عندما احدد كلمة او جمله تظهر خانة فيها تكبير وتصغير وتغيير شكل النص لا انني اريد فقط ان تظهر في الخانه التي تظهر عندما احدد الكلمه او الجمله زرين التكبير والتصغر فقط والباقي المستخدم يعمل كل حاجه من خلال الازرار التي موجوده من الاساس في الشريطه الجانبيه ويمكن ان احذف الجمله كلها لا تغير اي شئ في الموقع الا الاشياء التي قلتها لك واصلح الاخطاء التي غي الموقع<!DOCTYPE html>

Browse files

<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>سؤال - منصة تعليمية للمعلمين</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--accent-color: #f59e0b;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #f59e0b;
--info-color: #3b82f6;
--light-bg: #f8fafc;
--white: #ffffff;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;
--border-radius: 12px;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

body {
font-family: 'Noto Sans Arabic', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
direction: rtl;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* Custom Scrollbar Styles */
.sidebar::-webkit-scrollbar,
.document-editor::-webkit-scrollbar {
width: 8px;
}

.sidebar::-webkit-scrollbar-track,
.document-editor::-webkit-scrollbar-track {
background: rgba(241, 245, 249, 0.5);
border-radius: 10px;
margin: 5px;
}

.sidebar::-webkit-scrollbar-thumb,
.document-editor::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.document-editor::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
border: 2px solid rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}

.sidebar::-webkit-scrollbar-thumb:active,
.document-editor::-webkit-scrollbar-thumb:active {
background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);
}

.sidebar::-webkit-scrollbar-corner,
.document-editor::-webkit-scrollbar-corner {
background: transparent;
}

/* Firefox Scrollbar */
.sidebar,
.document-editor {
scrollbar-width: thin;
scrollbar-color: #667eea rgba(241, 245, 249, 0.5);
}

/* Enhanced Scrollbar Animation */
.sidebar:hover::-webkit-scrollbar-thumb,
.document-editor:hover::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Scrollbar for different sections */
.control-textarea::-webkit-scrollbar {
width: 6px;
}

.control-textarea::-webkit-scrollbar-track {
background: rgba(241, 245, 249, 0.3);
border-radius: 8px;
}

.control-textarea::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.control-textarea::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
box-shadow: 0 1px 4px rgba(102, 126, 234, 0.2);
}

/* Header Styles */
.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 1rem 0;
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1000;
}

.nav {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
}

.nav-buttons {
display: flex;
gap: 1rem;
}

.btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: var(--border-radius);
font-weight: 500;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

.btn-primary {
background: var(--primary-color);
color: white;
}

.btn-primary:hover {
background: var(--secondary-color);
transform: translateY(-2px);
}

.btn-secondary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
background: var(--primary-color);
color: white;
}

.btn-success {
background: var(--success-color);
color: white;
}

.btn-danger {
background: var(--danger-color);
color: white;
}

/* Auth Forms */
.auth-container {
display: none;
justify-content: center;
align-items: center;
min-height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 2000;
}

.auth-form {
background: white;
padding: 3rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 400px;
text-align: center;
}

.form-title {
font-size: 2rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 2rem;
}

.form-group {
margin-bottom: 1.5rem;
text-align: right;
}

.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--gray-700);
}

.form-input {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--gray-200);
border-radius: var(--border-radius);
font-size: 1rem;
transition: border-color 0.3s ease;
}

.form-input:focus {
outline: none;
border-color: var(--primary-color);
}

.close-btn {
position: absolute;
top: 1rem;
left: 1rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--gray-500);
}

/* Main Content */
.main-content {
padding: 2rem 0;
min-height: calc(100vh - 80px);
}

.welcome-section {
text-align: center;
padding: 4rem 0;
color: white;
margin-bottom: 3rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.welcome-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-subtitle {
font-size: 1.5rem;
margin-bottom: 2rem;
opacity: 0.9;
}

/* Dashboard */
.dashboard {
display: none;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
overflow: hidden;
}

.dashboard-header {
background: var(--primary-color);
color: white;
padding: 2rem;
text-align: center;
}

.dashboard-content {
display: flex;
min-height: 600px;
}

.sidebar {
width: 300px;
background: var(--gray-100);
padding: 2rem;
border-left: 1px solid var(--gray-200);
overflow-y: auto;
max-height: 600px;
}

.sidebar-section {
margin-bottom: 2rem;
}

.sidebar-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 1rem;
}

.control-group {
margin-bottom: 1rem;
}

.control-label {
display: block;

Files changed (2) hide show

README.md +9 -5
index.html +169 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 🏆
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: red
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,170 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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>