Spaces:

joermd
/

speedy_urltest

Running

App Files Files Community

joermd commited on Nov 18, 2024

Commit

059dc67

verified ·

1 Parent(s): 827756a

Update index.html

Browse files

Files changed (1) hide show

index.html +342 -19

index.html CHANGED Viewed

@@ -1,19 +1,342 @@
-<!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 dir="rtl" lang="ar">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>سبيدي | فاحص المواقع السريع</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');
+        :root {
+            --speedy-primary: #8B4513;
+            --speedy-dark: #5C2C0B;
+            --speedy-light: #F5E6DB;
+            --speedy-accent: #D2691E;
+            --speedy-bg: #FDF9F6;
+            --speedy-text: #3E2723;
+            --speedy-border: #DEB887;
+            --speedy-gradient: linear-gradient(135deg, #8B4513 0%, #5C2C0B 100%);
+            --speedy-shadow: 0 4px 6px rgba(139, 69, 19, 0.2);
+        }
+        body {
+            font-family: 'Cairo', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background: var(--speedy-bg);
+            color: var(--speedy-text);
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 900px;
+            margin: 20px auto;
+            background: white;
+            padding: 30px;
+            border-radius: 20px;
+            box-shadow: var(--speedy-shadow);
+            border: 1px solid var(--speedy-border);
+        }
+        .brand {
+            text-align: center;
+            margin-bottom: 10px;
+        }
+        .logo {
+            font-size: 3em;
+            font-weight: 700;
+            color: var(--speedy-primary);
+            text-shadow: 2px 2px 4px rgba(139, 69, 19, 0.2);
+            margin: 0;
+        }
+        .tagline {
+            color: var(--speedy-accent);
+            font-size: 1.2em;
+            margin-top: 5px;
+        }
+        h1 {
+            text-align: center;
+            color: var(--speedy-dark);
+            font-size: 2em;
+            margin: 20px 0;
+            font-weight: 700;
+        }
+        .input-group {
+            display: flex;
+            gap: 15px;
+            margin: 30px auto;
+            max-width: 700px;
+            padding: 20px;
+            background: var(--speedy-light);
+            border-radius: 16px;
+            box-shadow: inset 0 2px 4px rgba(92, 44, 11, 0.1);
+        }
+        input {
+            flex: 1;
+            padding: 15px 20px;
+            border: 2px solid var(--speedy-border);
+            border-radius: 12px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Cairo', sans-serif;
+            background: white;
+            color: var(--speedy-text);
+        }
+        input:focus {
+            outline: none;
+            border-color: var(--speedy-primary);
+            box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.2);
+        }
+        input::placeholder {
+            color: var(--speedy-border);
+        }
+        button {
+            padding: 15px 30px;
+            background: var(--speedy-gradient);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            font-family: 'Cairo', sans-serif;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(92, 44, 11, 0.3);
+        }
+        button:active {
+            transform: translateY(0);
+            background: var(--speedy-dark);
+        }
+        button:disabled {
+            background: var(--speedy-border);
+            transform: none;
+            box-shadow: none;
+        }
+        .loading {
+            text-align: center;
+            display: none;
+            margin: 20px 0;
+            color: var(--speedy-primary);
+            font-weight: 600;
+        }
+        .loading::after {
+            content: '🚀';
+            display: inline-block;
+            margin-right: 10px;
+            animation: rocket 1s infinite;
+        }
+        @keyframes rocket {
+            0% { transform: translateY(0) rotate(45deg); }
+            50% { transform: translateY(-10px) rotate(45deg); }
+            100% { transform: translateY(0) rotate(45deg); }
+        }
+        .results {
+            margin-top: 30px;
+            display: none;
+            animation: fadeIn 0.5s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .results-section {
+            background: white;
+            border-radius: 16px;
+            padding: 25px;
+            margin-bottom: 20px;
+            border: 1px solid var(--speedy-border);
+            transition: all 0.3s ease;
+        }
+        .results-section:hover {
+            transform: translateY(-3px);
+            box-shadow: var(--speedy-shadow);
+            border-color: var(--speedy-primary);
+        }
+        .results h2 {
+            color: var(--speedy-dark);
+            border-bottom: 2px solid var(--speedy-primary);
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+        }
+        .info-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 12px;
+            border-bottom: 1px solid var(--speedy-light);
+            transition: background-color 0.2s ease;
+        }
+        .info-item:hover {
+            background-color: var(--speedy-bg);
+            border-radius: 8px;
+        }
+        .info-item:last-child {
+            border-bottom: none;
+        }
+        .info-label {
+            font-weight: 600;
+            color: var(--speedy-text);
+        }
+        .info-value {
+            color: var(--speedy-primary);
+        }
+        .error {
+            color: #D35400;
+            background: rgba(211, 84, 0, 0.1);
+            padding: 15px;
+            border-radius: 12px;
+            text-align: center;
+            margin: 20px 0;
+            display: none;
+            border: 1px solid rgba(211, 84, 0, 0.3);
+        }
+        /* للشاشات الصغيرة */
+        @media (max-width: 768px) {
+            .input-group {
+                flex-direction: column;
+            }
+            button {
+                width: 100%;
+            }
+            .container {
+                padding: 20px;
+            }
+            .logo {
+                font-size: 2.5em;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="brand">
+            <h1 class="logo">سبيدي</h1>
+            <div class="tagline">فاحص المواقع السريع والذكي</div>
+        </div>
+        <div class="input-group">
+            <input type="url" id="urlInput" placeholder="https://example.com" dir="ltr">
+            <button onclick="checkUrl()">فحص سريع</button>
+        </div>
+        <div class="loading" id="loading">
+            جاري التحليل السريع للموقع...
+        </div>
+        <div class="error" id="error"></div>
+        <div class="results" id="results">
+            <div class="results-section">
+                <h2>معلومات الموقع</h2>
+                <div id="info"></div>
+            </div>
+            <div class="results-section">
+                <h2>نصائح تحسين الموقع</h2>
+                <div id="tips"></div>
+            </div>
+            <div class="results-section">
+                <h2>تحليل الزيارات</h2>
+                <div id="traffic"></div>
+            </div>
+        </div>
+    </div>
+    <script>
+        async function checkUrl() {
+            const urlInput = document.getElementById('urlInput');
+            const loading = document.getElementById('loading');
+            const results = document.getElementById('results');
+            const error = document.getElementById('error');
+            const button = document.querySelector('button');
+            if (!urlInput.value) {
+                error.textContent = 'الرجاء إدخال رابط صالح للفحص';
+                error.style.display = 'block';
+                return;
+            }
+            error.style.display = 'none';
+            results.style.display = 'none';
+            loading.style.display = 'block';
+            button.disabled = true;
+            try {
+                const response = await fetch('/check-url', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ url: urlInput.value })
+                });
+                const data = await response.json();
+                if (data.error) {
+                    error.textContent = data.error;
+                    error.style.display = 'block';
+                } else {
+                    document.getElementById('info').innerHTML = formatInfo(data.info);
+                    document.getElementById('tips').innerHTML = formatList(data.tips);
+                    document.getElementById('traffic').innerHTML = formatList(data.traffic_estimate);
+                    results.style.display = 'block';
+                }
+            } catch (err) {
+                error.textContent = 'عذراً، حدث خطأ أثناء الاتصال بالخا��م';
+                error.style.display = 'block';
+            } finally {
+                loading.style.display = 'none';
+                button.disabled = false;
+            }
+        }
+        function formatInfo(info) {
+            return Object.entries(info)
+                .map(([key, value]) => `
+                    <div class="info-item">
+                        <span class="info-label">${key}</span>
+                        <span class="info-value">${value}</span>
+                    </div>
+                `).join('');
+        }
+        function formatList(items) {
+            return items
+                .map(item => `<div class="info-item">${item}</div>`)
+                .join('');
+        }
+    </script>
+</body>
+</html>