import { useState, useEffect } from 'react';

import { useCHESSData } from '@/hooks/useCHESSData';
import { PriceInput } from '@/components/PriceInput';
import { Indicators } from '@/components/Indicators';
import { Recommendation } from '@/components/Recommendation';
import { PositionCalculator } from '@/components/PositionCalculator';
import { Loader2 } from 'lucide-react';

const Index = () => {
const { data, refetch } = useCHESSData();
const [manualPrice, setManualPrice] = useState<number>(0);
const [useManual, setUseManual] = useState<boolean>(false);

useEffect(() => {
if (data.currentPrice > 0 && manualPrice === 0) {
setManualPrice(data.currentPrice);
}
}, [data.currentPrice]);

const displayPrice = useManual ? manualPrice : data.currentPrice;

const handlePriceChange = (price: number) => {
setManualPrice(price);
setUseManual(true);
};

const handleUseLivePrice = () => {
setManualPrice(data.currentPrice);
setUseManual(false);
refetch();
};

if (data.isLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-background">
<div className="text-center space-y-4">
<Loader2 className="h-12 w-12 animate-spin text-primary mx-auto" />
<p className="text-lg font-medium text-muted-foreground">
جارٍ تحميل البيانات من CoinGecko...
</p>
</div>
</div>
);
}

return (
<div className="min-h-screen bg-background" dir="rtl">
<div className="container max-w-6xl mx-auto py-8 px-4 space-y-6">
{/* Header */}
<div className="text-center space-y-2 mb-8">
<h1 className="text-3xl md:text-4xl font-bold bg-clip-text text-transparent gradient-primary">
تحليل استراتيجية CHESS/USDT
</h1>
<p className="text-muted-foreground max-w-2xl mx-auto">
تحليل آلي متقدم مع مؤشرات: SMA، RSI، MACD، FVG، OB، NPD، POC، Buy/Sell Ratio،
NY Low/High، Sydney/Asia Sessions، PD Levels، وبيانات حية
</p>
</div>

{/* Price Input */}
<PriceInput
currentPrice={displayPrice}
onPriceChange={handlePriceChange}
onUseLivePrice={handleUseLivePrice}
/>

{/* Recommendation */}
{displayPrice > 0 && data.historicalCloses.length > 0 && (
<Recommendation
currentPrice={displayPrice}
historicalCloses={data.historicalCloses}
historicalVolumes={data.historicalVolumes}
/>
)}

{/* Indicators */}
{displayPrice > 0 && data.historicalCloses.length > 0 && (
<Indicators
currentPrice={displayPrice}
historicalCloses={data.historicalCloses}
historicalVolumes={data.historicalVolumes}
price24hChange={data.price24hChange}
/>
)}

{/* Position Calculator */}
{displayPrice > 0 && (
<PositionCalculator currentPrice={displayPrice} />
)}

{/* Footer */}
<div className="text-center text-sm text-muted-foreground pt-8 border-t">
<p>
البيانات من CoinGecko API • التحليل للأغراض التعليمية فقط • ليس نصيحة استثمارية
</p>
</div>
</div>
</div>
);
}; حولها الى صيغة html

README.md

@@ -1,10 +1,13 @@
 ---
-title: Chessmaster Pro Tracker
-emoji: 🐠
-colorFrom: blue
-colorTo: indigo
+title: ChessMaster Pro Tracker ♟️
+colorFrom: pink
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/loading-spinner.js

@@ -0,0 +1,26 @@
+class LoadingSpinner extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .spinner {
+                    animation: spin 1s linear infinite;
+                    width: 2rem;
+                    height: 2rem;
+                    border: 0.25rem solid rgba(59, 130, 246, 0.2);
+                    border-top-color: rgb(59, 130, 246);
+                    border-radius: 50%;
+                }
+                
+                @keyframes spin {
+                    to { transform: rotate(360deg); }
+                }
+            </style>
+            <div class="flex justify-center items-center">
+                <div class="spinner"></div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('loading-spinner', LoadingSpinner);

index.html

@@ -1,19 +1,128 @@
-<!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="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>تحليل استراتيجية CHESS/USDT</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#3b82f6',
+                        },
+                        secondary: {
+                            500: '#10b981',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="min-h-screen bg-gray-50">
+    <div class="container max-w-6xl mx-auto py-8 px-4 space-y-6">
+        <!-- Header -->
+        <div class="text-center space-y-2 mb-8">
+            <h1 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-secondary-500">
+                تحليل استراتيجية CHESS/USDT
+            </h1>
+            <p class="text-gray-600 max-w-2xl mx-auto">
+                تحليل آلي متقدم مع مؤشرات: SMA، RSI، MACD، FVG، OB، NPD، POC، Buy/Sell Ratio،
+                NY Low/High، Sydney/Asia Sessions، PD Levels، وبيانات حية
+            </p>
+        </div>
+
+        <!-- Price Input -->
+        <div id="price-input" class="bg-white p-6 rounded-xl shadow-md">
+            <div class="flex flex-col md:flex-row gap-4 items-center">
+                <div class="flex-1">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">سعر CHESS الحالي (USDT)</label>
+                    <input type="number" id="current-price" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="أدخل السعر يدويًا">
+                </div>
+                <div class="flex gap-2">
+                    <button id="use-live-price" class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition">
+                        استخدام السعر الحي
+                    </button>
+                    <button id="update-price" class="px-4 py-2 bg-secondary-500 text-white rounded-lg hover:bg-secondary-600 transition">
+                        تحديث
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Recommendation -->
+        <div id="recommendation" class="bg-white p-6 rounded-xl shadow-md">
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">التوصية</h2>
+            <div class="flex items-center justify-center py-8">
+                <div class="text-center">
+                    <div class="text-2xl font-bold mb-2 text-primary-500">جارٍ تحميل البيانات...</div>
+                    <p class="text-gray-600">سيتم عرض التوصية هنا</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Indicators -->
+        <div id="indicators" class="bg-white p-6 rounded-xl shadow-md">
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">المؤشرات الفنية</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <!-- Indicators will be populated here by JavaScript -->
+            </div>
+        </div>
+
+        <!-- Position Calculator -->
+        <div id="position-calculator" class="bg-white p-6 rounded-xl shadow-md">
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">حاسبة المركز</h2>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">رأس المال (USDT)</label>
+                    <input type="number" id="capital" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="أدخل رأس المال">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">نسبة المخاطرة (%)</label>
+                    <input type="number" id="risk-percentage" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="أدخل نسبة المخاطرة" value="2">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">سعر الدخول (USDT)</label>
+                    <input type="number" id="entry-price" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="سعر الدخول">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">سعر الخروج (Stop Loss) (USDT)</label>
+                    <input type="number" id="stop-loss" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="سعر Stop Loss">
+                </div>
+                <button id="calculate-position" class="w-full py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition">
+                    احسب المركز
+                </button>
+                <div id="position-result" class="hidden p-4 bg-gray-50 rounded-lg">
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <p class="text-sm text-gray-600">حجم المركز</p>
+                            <p id="position-size" class="font-medium">-</p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-600">عدد العملات</p>
+                            <p id="coin-amount" class="font-medium">-</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="text-center text-sm text-gray-500 pt-8 border-t">
+            <p>
+                البيانات من CoinGecko API • التحليل للأغراض التعليمية فقط • ليس نصيحة استثمارية
+            </p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,169 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Price Input Handling
+    const priceInput = document.getElementById('current-price');
+    const useLivePriceBtn = document.getElementById('use-live-price');
+    const updatePriceBtn = document.getElementById('update-price');
+    
+    // Position Calculator Elements
+    const capitalInput = document.getElementById('capital');
+    const riskPercentageInput = document.getElementById('risk-percentage');
+    const entryPriceInput = document.getElementById('entry-price');
+    const stopLossInput = document.getElementById('stop-loss');
+    const calculatePositionBtn = document.getElementById('calculate-position');
+    const positionResult = document.getElementById('position-result');
+    const positionSizeEl = document.getElementById('position-size');
+    const coinAmountEl = document.getElementById('coin-amount');
+    
+    // Simulate fetching live price (in a real app, this would be from an API)
+    function fetchLivePrice() {
+        showLoading();
+        setTimeout(() => {
+            // Simulate a live price (between 0.8 and 1.2)
+            const livePrice = (0.8 + Math.random() * 0.4).toFixed(4);
+            priceInput.value = livePrice;
+            updateAnalysis(livePrice);
+            hideLoading();
+        }, 1000);
+    }
+    
+    // Update analysis based on price
+    function updateAnalysis(price) {
+        // Update recommendation
+        const recommendationEl = document.getElementById('recommendation');
+        const recommendationText = getRandomRecommendation();
+        
+        recommendationEl.innerHTML = `
+            <h2 class="text-xl font-semibold mb-4 text-gray-800">التوصية</h2>
+            <div class="flex items-center justify-center py-8">
+                <div class="text-center">
+                    <div class="text-4xl font-bold mb-2 ${recommendationText.color}">${recommendationText.action}</div>
+                    <p class="text-gray-600">${recommendationText.reason}</p>
+                </div>
+            </div>
+        `;
+        
+        // Update indicators
+        updateIndicators(price);
+        
+        // Update position calculator entry price if empty
+        if (!entryPriceInput.value) {
+            entryPriceInput.value = price;
+        }
+    }
+    
+    // Generate random recommendation for demo
+    function getRandomRecommendation() {
+        const actions = [
+            { action: 'شراء', color: 'text-green-500', reason: 'المؤشرات إيجابية مع زخم صاعد' },
+            { action: 'بيع', color: 'text-red-500', reason: 'المؤشرات سلبية مع زخم هابط' },
+            { action: 'انتظر', color: 'text-yellow-500', reason: 'السوق في نطاق جانبي يحتاج إلى تأكيد' }
+        ];
+        return actions[Math.floor(Math.random() * actions.length)];
+    }
+    
+    // Update indicators for demo
+    function updateIndicators(price) {
+        const indicatorsContainer = document.getElementById('indicators').querySelector('.grid');
+        indicatorsContainer.innerHTML = '';
+        
+        const indicators = [
+            { name: 'SMA (7 أيام)', value: (price * (0.95 + Math.random() * 0.1)).toFixed(4), trend: getRandomTrend() },
+            { name: 'RSI (14)', value: (30 + Math.random() * 40).toFixed(2), trend: getRandomTrend() },
+            { name: 'MACD', value: getRandomMACD(), trend: getRandomTrend() },
+            { name: 'حجم التداول (24h)', value: `${(Math.random() * 1000).toFixed(0)}K`, trend: getRandomTrend() },
+            { name: 'نسبة الشراء/البيع', value: `${(0.5 + Math.random()).toFixed(2)}`, trend: getRandomTrend() },
+            { name: 'نقاط الدعم/المقاومة', value: '3/2', trend: 'neutral' }
+        ];
+        
+        indicators.forEach(indicator => {
+            const trendIcon = indicator.trend === 'up' ? 'trending-up' : 
+                            indicator.trend === 'down' ? 'trending-down' : 'minus';
+            const trendColor = indicator.trend === 'up' ? 'text-green-500' : 
+                             indicator.trend === 'down' ? 'text-red-500' : 'text-gray-500';
+            
+            const card = document.createElement('div');
+            card.className = 'indicator-card bg-gray-50 p-4 rounded-lg';
+            card.innerHTML = `
+                <div class="flex justify-between items-center">
+                    <span class="font-medium text-gray-700">${indicator.name}</span>
+                    <i data-feather="${trendIcon}" class="w-5 h-5 ${trendColor}"></i>
+                </div>
+                <div class="text-2xl font-bold mt-2">${indicator.value}</div>
+            `;
+            indicatorsContainer.appendChild(card);
+        });
+        
+        feather.replace();
+    }
+    
+    // Get random trend for demo
+    function getRandomTrend() {
+        const trends = ['up', 'down', 'neutral'];
+        return trends[Math.floor(Math.random() * trends.length)];
+    }
+    
+    // Get random MACD value for demo
+    function getRandomMACD() {
+        const value = (Math.random() * 0.02 - 0.01).toFixed(4);
+        return parseFloat(value) > 0 ? `+${value}` : value;
+    }
+    
+    // Calculate position size
+    function calculatePosition() {
+        const capital = parseFloat(capitalInput.value);
+        const riskPercentage = parseFloat(riskPercentageInput.value) / 100;
+        const entryPrice = parseFloat(entryPriceInput.value);
+        const stopLoss = parseFloat(stopLossInput.value);
+        
+        if (!capital || !entryPrice || !stopLoss) {
+            alert('الرجاء إدخال جميع القيم المطلوبة');
+            return;
+        }
+        
+        const riskAmount = capital * riskPercentage;
+        const riskPerUnit = entryPrice - stopLoss;
+        const positionSize = riskAmount / riskPerUnit;
+        const coinAmount = positionSize / entryPrice;
+        
+        positionSizeEl.textContent = positionSize.toFixed(2) + ' USDT';
+        coinAmountEl.textContent = coinAmount.toFixed(2) + ' CHESS';
+        positionResult.classList.remove('hidden');
+    }
+    
+    // Show loading overlay
+    function showLoading() {
+        document.body.insertAdjacentHTML('beforeend', `
+            <div id="loading-overlay">
+                <div class="text-center space-y-4">
+                    <div class="loader w-12 h-12 border-4 border-primary-500 border-t-transparent rounded-full"></div>
+                    <p class="text-lg font-medium text-gray-700">جارٍ تحميل البيانات من CoinGecko...</p>
+                </div>
+            </div>
+        `);
+    }
+    
+    // Hide loading overlay
+    function hideLoading() {
+        const overlay = document.getElementById('loading-overlay');
+        if (overlay) overlay.remove();
+    }
+    
+    // Event Listeners
+    useLivePriceBtn.addEventListener('click', fetchLivePrice);
+    updatePriceBtn.addEventListener('click', () => {
+        if (priceInput.value) {
+            showLoading();
+            setTimeout(() => {
+                updateAnalysis(priceInput.value);
+                hideLoading();
+            }, 500);
+        } else {
+            alert('الرجاء إدخال سعر');
+        }
+    });
+    
+    calculatePositionBtn.addEventListener('click', calculatePosition);
+    
+    // Initialize with a random price
+    fetchLivePrice();
+});

style.css

@@ -1,28 +1,40 @@
+@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Tajawal', sans-serif;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.loader {
+    animation: spin 1s linear infinite;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.indicator-card {
+    transition: all 0.3s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.indicator-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
+
+#loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}