amghsa's picture
import { useState, useEffect } from 'react';
1763642 verified
<!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>