Hugging Face's logo

Spaces:
clinker3242
/
str-clinker
Running

App Files Community
str-clinker / index.html
clinker3242's picture
clinker3242
Add 2 files
777aa32 verified
raw
history blame contribute delete
73.9 kB
 <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STR.CLINKER - Structural Analysis Software</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjs@11.6.0/lib/browser/math.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
light: '#3b82f6',
dark: '#1d4ed8'
},
secondary: {
light: '#10b981',
dark: '#059669'
},
dark: {
800: '#1e293b',
900: '#0f172a'
}
},
fontFamily: {
'arabic': ['Tajawal', 'sans-serif'],
'english': ['Inter', 'sans-serif']
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
body {
font-family: 'Inter', 'Tajawal', sans-serif;
transition: all 0.3s ease;
}
.arabic-text {
font-family: 'Tajawal', sans-serif;
}
.english-text {
font-family: 'Inter', sans-serif;
}
.beam-canvas {
border: 1px solid #e5e7eb;
background-color: #f9fafb;
border-radius: 0.5rem;
}
.dark .beam-canvas {
border-color: #374151;
background-color: #1f2937;
}
.diagram-container {
height: 300px;
position: relative;
}
.support-icon {
font-size: 1.5rem;
color: #3b82f6;
}
.dark .support-icon {
color: #60a5fa;
}
.load-icon {
font-size: 1.2rem;
color: '#ef4444';
}
.dark .load-icon {
color: '#f87171';
}
.moment-icon {
font-size: 1.2rem;
color: '#8b5cf6';
}
.dark .moment-icon {
color: '#a78bfa';
}
.auth-bg {
background-image: url('https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
background-position: center;
}
.gradient-overlay {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(16, 185, 129, 0.8) 100%);
}
.dark .gradient-overlay {
background: linear-gradient(135deg, rgba(30, 58, 138, 0.8) 0%, rgba(5, 150, 105, 0.8) 100%);
}
.result-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.result-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.dark .result-card:hover {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}
.code-selector .active {
background-color: #3b82f6;
color: white;
}
.dark .code-selector .active {
background-color: #1d4ed8;
}
.language-switcher {
position: relative;
}
.language-dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
min-width: 120px;
z-index: 10;
}
.language-switcher:hover .language-dropdown {
display: block;
}
/* Animation for analysis progress */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Beam editor styles */
.beam-tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
z-index: 100;
}
/* Animation for blob effect */
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
</style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-md">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2 rtl:space-x-reverse">
<div class="bg-blue-500 text-white p-2 rounded-lg">
<i class="fas fa-calculator text-xl"></i>
</div>
<h1 class="text-2xl font-bold text-primary-light dark:text-primary-dark">STR.CLINKER</h1>
</div>
<nav class="hidden md:flex space-x-6 rtl:space-x-reverse">
<a href="#home" class="hover:text-primary-light dark:hover:text-primary-dark transition">الرئيسية</a>
<a href="#features" class="hover:text-primary-light dark:hover:text-primary-dark transition">الميزات</a>
<a href="#analysis" class="hover:text-primary-light dark:hover:text-primary-dark transition">التحليل</a>
<a href="#results" class="hover:text-primary-light dark:hover:text-primary-dark transition">النتائج</a>
<a href="#contact" class="hover:text-primary-light dark:hover:text-primary-dark transition">تواصل معنا</a>
</nav>
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<div class="language-switcher relative">
<button class="flex items-center space-x-1 rtl:space-x-reverse">
<i class="fas fa-globe"></i>
<span class="english-text">العربية</span>
</button>
<div class="language-dropdown bg-white dark:bg-gray-800 shadow-lg rounded-md mt-2 py-1">
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 english-text">English</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 arabic-text">العربية</a>
</div>
</div>
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
<i class="fas fa-moon hidden dark:block"></i>
<i class="fas fa-sun block dark:hidden"></i>
</button>
<button id="auth-button" class="bg-primary-light dark:bg-primary-dark text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition">
<span class="english-text">تسجيل الدخول</span>
</button>
</div>
<button id="mobile-menu-button" class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 px-4 py-2 shadow-lg">
<a href="#home" class="block py-2 hover:text-primary-light dark:hover:text-primary-dark transition">الرئيسية</a>
<a href="#features" class="block py-2 hover:text-primary-light dark:hover:text-primary-dark transition">الميزات</a>
<a href="#analysis" class="block py-2 hover:text-primary-light dark:hover:text-primary-dark transition">التحليل</a>
<a href="#results" class="block py-2 hover:text-primary-light dark:hover:text-primary-dark transition">النتائج</a>
<a href="#contact" class="block py-2 hover:text-primary-light dark:hover:text-primary-dark transition">تواصل معنا</a>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="py-16 bg-gradient-to-r from-primary-light to-secondary-light dark:from-primary-dark dark:to-secondary-dark">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0 text-center md:text-right">
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4 arabic-text">برنامج التحليل الإنشائي الدقيق</h1>
<p class="text-xl text-white mb-8 opacity-90 arabic-text">
حلول متكاملة لتحليل الكمرات والإطالات الإنشائية بدقة علمية عالية وفق أحدث الأكواد العالمية
</p>
<div class="flex flex-col sm:flex-row justify-center md:justify-end space-y-4 sm:space-y-0 sm:space-x-4 rtl:space-x-reverse">
<a href="#analysis" class="bg-white text-primary-light dark:text-primary-dark px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition text-center">
<span class="arabic-text">ابدأ التحليل الآن</span>
</a>
<a href="#features" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition text-center">
<span class="arabic-text">استكشف الميزات</span>
</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative w-full max-w-lg">
<div class="absolute -top-8 -left-8 w-32 h-32 bg-yellow-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
<div class="absolute -bottom-8 -right-8 w-32 h-32 bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
<div class="absolute top-16 -right-4 w-32 h-32 bg-green-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
<canvas id="hero-beam" class="w-full h-64"></canvas>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-16 bg-gray-50 dark:bg-gray-900">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 arabic-text">الميزات الرئيسية</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto arabic-text">
اكتشف القوة الكاملة لبرنامجنا في تحليل العناصر الإنشائية بدقة لا مثيل لها
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 hover:shadow-lg transition">
<div class="text-primary-light dark:text-primary-dark mb-4">
<i class="fas fa-ruler-combined text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 arabic-text">تحليل الكمرات والإطارات</h3>
<p class="text-gray-600 dark:text-gray-300 arabic-text">
تحليل دقيق للكمرات المستقيمة والإطالات بمختلف أنواعها مع حساب ردود الأفعال والجهود الداخلية
</p>
</div>
<!-- Feature 2 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 hover:shadow-lg transition">
<div class="text-primary-light dark:text-primary-dark mb-4">
<i class="fas fa-chart-line text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 arabic-text">مخططات القوى والعزوم</h3>
<p class="text-gray-600 dark:text-gray-300 arabic-text">
عرض مخططات القوى المحورية والقاصة والعزوم والانزياحات بشكل بياني دقيق وواضح
</p>
</div>
<!-- Feature 3 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 hover:shadow-lg transition">
<div class="text-primary-light dark:text-primary-dark mb-4">
<i class="fas fa-code-branch text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 arabic-text">دعم متعدد للأكواد</h3>
<p class="text-gray-600 dark:text-gray-300 arabic-text">
تحليل وفق الأكواد الأمريكية والسورية والمصرية والسعودية والأوروبية وغيرها من المواصفات
</p>
</div>
<!-- Feature 4 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 hover:shadow-lg transition">
<div class="text-primary-light dark:text-primary-dark mb-4">
<i class="fas fa-weight-hanging text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 arabic-text">أنواع متعددة من الحمولات</h3>
<p class="text-gray-600 dark:text-gray-300 arabic-text">
دعم جميع أنواع الحمولات المركزة والموزعة الأفقية والشاقولية والمائلة والعزوم الدورانية
</p>
</div>
<!-- Feature 5 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 hover:shadow-lg transition">
<div class="text-primary-light dark:text-primary-dark mb-4">
<i class="fas fa-building text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 arabic-text">أنواع المساند المختلفة</h3>
<p class="text-gray-600 dark:text-gray-300 arabic-text">
التعرف على جميع أنواع المساند الأحادية والثنائية والوثاقة والربط المرن
</p>
</div>
<!-- Feature 6 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 hover:shadow-lg transition">
<div class="text-primary-light dark:text-primary-dark mb-4">
<i class="fas fa-cloud text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-3 arabic-text">حساب سحابي آمن</h3>
<p class="text-gray-600 dark:text-gray-300 arabic-text">
حفظ جميع المشاريع والتقارير على حسابك الشخصي للوصول إليها في أي وقت ومن أي مكان
</p>
</div>
</div>
</div>
</section>
<!-- Analysis Section -->
<section id="analysis" class="py-16 bg-white dark:bg-gray-800">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 arabic-text">نظام التحليل الإنشائي</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto arabic-text">
أدخل بيانات العنصر الإنشائي الخاص بك واحصل على تحليل دقيق في ثوانٍ
</p>
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md overflow-hidden">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-0">
<!-- Input Panel -->
<div class="bg-white dark:bg-gray-800 p-6 lg:col-span-1">
<div class="mb-6">
<h3 class="text-xl font-bold mb-4 arabic-text">نوع العنصر الإنشائي</h3>
<div class="grid grid-cols-2 gap-2">
<button id="beam-btn" class="py-2 px-4 bg-primary-light dark:bg-primary-dark text-white rounded-lg arabic-text">
كمرة (جائز)
</button>
<button id="frame-btn" class="py-2 px-4 bg-gray-200 dark:bg-gray-700 rounded-lg arabic-text">
إطار
</button>
</div>
</div>
<div class="mb-6">
<h3 class="text-xl font-bold mb-4 arabic-text">الكود الإنشائي</h3>
<div class="code-selector grid grid-cols-2 gap-2">
<button data-code="ACI" class="py-2 px-4 bg-gray-200 dark:bg-gray-700 rounded-lg arabic-text active">
ACI الأمريكي
</button>
<button data-code="ECP" class="py-2 px-4 bg-gray-200 dark:bg-gray-700 rounded-lg arabic-text">
ECP المصري
</button>
<button data-code="SBC" class="py-2 px-4 bg-gray-200 dark:bg-gray-700 rounded-lg arabic-text">
SBC السعودي
</button>
<button data-code="Eurocode" class="py-2 px-4 bg-gray-200 dark:bg-gray-700 rounded-lg arabic-text">
Eurocode الأوروبي
</button>
<button data-code="Syrian" class="py-2 px-4 bg-gray-200 dark:bg-gray-700 rounded-lg arabic-text">
السوري
</button>
<button data-code="custom" class="py-2 px-4 bg-gray-200 dark:bg-gray-700 rounded-lg arabic-text">
إعدادات مخصصة
</button>
</div>
</div>
<div class="mb-6">
<h3 class="text-xl font-bold mb-4 arabic-text">أبعاد العنصر</h3>
<div class="space-y-4">
<div>
<label class="block mb-1 arabic-text">الطول (م)</label>
<input type="number" id="length" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700" value="5" min="0.1" step="0.1">
</div>
<div id="height-input">
<label class="block mb-1 arabic-text">الارتفاع (م)</label>
<input type="number" id="height" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700" value="0.5" min="0.1" step="0.1">
</div>
</div>
</div>
<div class="mb-6">
<h3 class="text-xl font-bold mb-4 arabic-text">الخصائص المواد</h3>
<div class="space-y-4">
<div>
<label class="block mb-1 arabic-text">معامل المرونة E (MPa)</label>
<input type="number" id="modulus" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700" value="20000" min="1" step="100">
</div>
<div>
<label class="block mb-1 arabic-text">معامل القص G (MPa)</label>
<input type="number" id="shear-modulus" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700" value="8000" min="1" step="100">
</div>
</div>
</div>
</div>
<!-- Beam Editor -->
<div class="bg-gray-100 dark:bg-gray-700 p-6 lg:col-span-2">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold arabic-text">محرر العنصر الإنشائي</h3>
<div class="flex space-x-2 rtl:space-x-reverse">
<button id="add-support" class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 rounded-lg flex items-center arabic-text">
<i class="fas fa-bridge mr-1 rtl:mr-0 rtl:ml-1"></i> دعم
</button>
<button id="add-load" class="px-3 py-1 bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-300 rounded-lg flex items-center arabic-text">
<i class="fas fa-weight-hanging mr-1 rtl:mr-0 rtl:ml-1"></i> حمل
</button>
<button id="add-moment" class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 rounded-lg flex items-center arabic-text">
<i class="fas fa-redo mr-1 rtl:mr-0 rtl:ml-1"></i> عزم
</button>
<button id="clear-all" class="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded-lg arabic-text">
مسح الكل
</button>
</div>
</div>
<div class="relative">
<canvas id="beam-editor" class="beam-canvas w-full h-64"></canvas>
<div id="beam-coords" class="absolute top-2 left-2 bg-white dark:bg-gray-800 bg-opacity-90 px-2 py-1 rounded text-xs"></div>
</div>
<div class="mt-4">
<h4 class="font-bold mb-2 arabic-text">قائمة العناصر المضافة</h4>
<div id="elements-list" class="space-y-2 max-h-40 overflow-y-auto">
<!-- Elements will be added here dynamically -->
</div>
</div>
</div>
</div>
<!-- Analysis Controls -->
<div class="bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-6">
<div class="flex flex-col sm:flex-row justify-between items-center">
<div class="mb-4 sm:mb-0">
<h3 class="text-xl font-bold arabic-text">تحليل العنصر الإنشائي</h3>
<p class="text-gray-600 dark:text-gray-300 arabic-text">
انقر على زر التحليل للحصول على النتائج الدقيقة
</p>
</div>
<button id="analyze-btn" class="bg-primary-light dark:bg-primary-dark text-white px-8 py-3 rounded-lg font-medium hover:bg-opacity-90 transition flex items-center arabic-text">
<i class="fas fa-calculator ml-2 rtl:ml-0 rtl:mr-2"></i> تحليل الآن
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Results Section -->
<section id="results" class="py-16 bg-gray-50 dark:bg-gray-900">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 arabic-text">نتائج التحليل</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto arabic-text">
عرض شامل لجميع نتائج التحليل الإنشائي بدقة علمية عالية
</p>
</div>
<div id="loading-results" class="text-center py-12 hidden">
<div class="animate-pulse flex flex-col items-center">
<i class="fas fa-calculator text-5xl text-primary-light dark:text-primary-dark mb-4"></i>
<h3 class="text-xl font-bold mb-2 arabic-text">جاري تحليل العنصر الإنشائي</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 arabic-text">قد تستغرق العملية بضع ثوانٍ...</p>
<div class="w-full bg-gray-200 dark:bg-gray-700 h-2 rounded-full max-w-md">
<div class="bg-primary-light dark:bg-primary-dark h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
<div id="results-container" class="hidden">
<!-- Reactions -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8">
<h3 class="text-xl font-bold mb-4 arabic-text">ردود الأفعال</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="result-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium arabic-text">القوى الرأسية</h4>
<i class="fas fa-arrows-alt-v support-icon"></i>
</div>
<div id="vertical-reactions" class="space-y-2">
<!-- Reactions will be added here dynamically -->
</div>
</div>
<div class="result-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium arabic-text">القوى الأفقية</h4>
<i class="fas fa-arrows-alt-h support-icon"></i>
</div>
<div id="horizontal-reactions" class="space-y-2">
<!-- Reactions will be added here dynamically -->
</div>
</div>
<div class="result-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
<div class="flex justify-between items-center mb-2">
<h4 class="font-medium arabic-text">العزوم</h4>
<i class="fas fa-redo moment-icon"></i>
</div>
<div id="moment-reactions" class="space-y-2">
<!-- Reactions will be added here dynamically -->
</div>
</div>
</div>
</div>
<!-- Diagrams -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8">
<h3 class="text-xl font-bold mb-4 arabic-text">مخططات القوى والعزوم</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="result-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
<h4 class="font-medium mb-2 arabic-text">القوى المحورية</h4>
<div class="diagram-container">
<canvas id="axial-force-diagram"></canvas>
</div>
</div>
<div class="result-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
<h4 class="font-medium mb-2 arabic-text">القوى القاصة</h4>
<div class="diagram-container">
<canvas id="shear-force-diagram"></canvas>
</div>
</div>
<div class="result-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
<h4 class="font-medium mb-2 arabic-text">عزوم الانحناء</h4>
<div class="diagram-container">
<canvas id="bending-moment-diagram"></canvas>
</div>
</div>
<div class="result-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
<h4 class="font-medium mb-2 arabic-text">الانزياحات</h4>
<div class="diagram-container">
<canvas id="deflection-diagram"></canvas>
</div>
</div>
</div>
</div>
<!-- Code Check -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<h3 class="text-xl font-bold mb-4 arabic-text">التحقق من متطلبات الكود</h3>
<div id="code-checks" class="space-y-4">
<!-- Code checks will be added here dynamically -->
</div>
</div>
<!-- Save Results -->
<div class="mt-8 flex justify-end">
<button id="save-results" class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition flex items-center arabic-text">
<i class="fas fa-save ml-2 rtl:ml-0 rtl:mr-2"></i> حفظ النتائج في حسابي
</button>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-white dark:bg-gray-800">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4 arabic-text">تواصل معنا</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto arabic-text">
نرحب بملاحظاتكم واستفساراتكم حول برنامج التحليل الإنشائي
</p>
</div>
<div class="max-w-4xl mx-auto bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md overflow-hidden">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="auth-bg p-8 text-white relative">
<div class="gradient-overlay absolute inset-0"></div>
<div class="relative z-10">
<h3 class="text-2xl font-bold mb-4 arabic-text">الدعم الفني والاستفسارات</h3>
<p class="mb-6 arabic-text">
فريق الدعم الفني لدينا جاهز لمساعدتك في أي استفسار أو مشكلة تواجهك أثناء استخدام البرنامج
</p>
<div class="space-y-4">
<div class="flex items-center">
<i class="fas fa-envelope text-xl mr-4 rtl:mr-0 rtl:ml-4"></i>
<span>support@strclinker.com</span>
</div>
<div class="flex items-center">
<i class="fab fa-telegram text-xl mr-4 rtl:mr-0 rtl:ml-4"></i>
<a href="https://t.me/ALKOMIT13" target="_blank" class="hover:underline">T.me/ALKOMIT13</a>
</div>
</div>
</div>
</div>
<div class="p-8">
<form id="contact-form">
<div class="mb-4">
<label for="name" class="block mb-1 arabic-text">الاسم</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700">
</div>
<div class="mb-4">
<label for="email" class="block mb-1 arabic-text">البريد الإلكتروني</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700">
</div>
<div class="mb-4">
<label for="message" class="block mb-1 arabic-text">الرسالة</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700"></textarea>
</div>
<button type="submit" class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition w-full arabic-text">
إرسال الرسالة
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Auth Modal -->
<div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden w-full max-w-md">
<div class="relative">
<button id="close-auth-modal" class="absolute top-4 right-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
<i class="fas fa-times"></i>
</button>
<div class="auth-bg p-8 text-white relative">
<div class="gradient-overlay absolute inset-0"></div>
<div class="relative z-10 text-center">
<h2 class="text-3xl font-bold mb-2 arabic-text">مرحباً بك في STR.CLINKER</h2>
<p class="arabic-text">سجل الدخول أو أنشئ حساباً جديداً للوصول إلى جميع الميزات</p>
</div>
</div>
<div class="p-8">
<div id="login-form">
<div class="mb-4">
<label for="login-email" class="block mb-1 arabic-text">البريد الإلكتروني</label>
<input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700">
</div>
<div class="mb-6">
<label for="login-password" class="block mb-1 arabic-text">كلمة المرور</label>
<input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700">
</div>
<button id="login-btn" class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition w-full mb-4 arabic-text">
تسجيل الدخول
</button>
<p class="text-center text-gray-600 dark:text-gray-300 arabic-text">
ليس لديك حساب؟
<button id="show-register" class="text-primary-light dark:text-primary-dark hover:underline arabic-text">سجل الآن</button>
</p>
</div>
<div id="register-form" class="hidden">
<div class="mb-4">
<label for="register-name" class="block mb-1 arabic-text">الاسم الكامل</label>
<input type="text" id="register-name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700">
</div>
<div class="mb-4">
<label for="register-email" class="block mb-1 arabic-text">البريد الإلكتروني</label>
<input type="email" id="register-email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700">
</div>
<div class="mb-4">
<label for="register-password" class="block mb-1 arabic-text">كلمة المرور</label>
<input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700">
</div>
<div class="mb-6">
<label for="register-confirm" class="block mb-1 arabic-text">تأكيد كلمة المرور</label>
<input type="password" id="register-confirm" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700">
</div>
<button id="register-btn" class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition w-full mb-4 arabic-text">
إنشاء حساب
</button>
<p class="text-center text-gray-600 dark:text-gray-300 arabic-text">
لديك حساب بالفعل؟
<button id="show-login", class="text-primary-light dark:text-primary-dark hover:underline arabic-text">سجل الدخول</button>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 dark:bg-gray-900 text-gray-300 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold text-white mb-4 flex items-center">
<div class="bg-blue-500 text-white p-2 rounded-lg mr-2 rtl:mr-0 rtl:ml-2">
<i class="fas fa-calculator"></i>
</div>
STR.CLINKER
</h3>
<p class="arabic-text">
برنامج التحليل الإنشائي الدقيق للكمرات والإطالات وفق أحدث الأكواد العالمية
</p>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-4 arabic-text">روابط سريعة</h3>
<ul class="space-y-2">
<li><a href="#home", class="hover:text-white transition arabic-text">الرئيسية</a></li>
<li><a href="#features", class="hover:text-white transition arabic-text">الميزات</a></li>
<li><a href="#analysis", class="hover:text-white transition arabic-text">التحليل</a></li>
<li><a href="#results", class="hover:text-white transition arabic-text">النتائج</a></li>
<li><a href="#contact", class="hover:text-white transition arabic-text">تواصل معنا</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-4 arabic-text">الدعم الفني</h3>
<ul class="space-y-2">
<li><a href="#", class="hover:text-white transition arabic-text">الأسئلة الشائعة</a></li>
<li><a href="#", class="hover:text-white transition arabic-text">أدلة الاستخدام</a></li>
<li><a href="https://t.me/ALKOMIT13" target="_blank", class="hover:text-white transition arabic-text">الدعم عبر التليجرام</a></li>
<li><a href="mailto:support@strclinker.com", class="hover:text-white transition arabic-text">البريد الإلكتروني</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-4 arabic-text">تابعنا</h3>
<div class="flex space-x-4 rtl:space-x-reverse">
<a href="#", class="bg-gray-700 hover:bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#", class="bg-gray-700 hover:bg-blue-400 text-white w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#", class="bg-gray-700 hover:bg-pink-600 text-white w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-instagram"></i>
</a>
<a href="https://t.me/ALKOMIT13" target="_blank", class="bg-gray-700 hover:bg-blue-500 text-white w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-telegram-plane"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center arabic-text">
<p>&copy; 2023 STR.CLINKER. جميع الحقوق محفوظة.</p>
</div>
</div>
</footer>
<script>
// DOM Elements
const themeToggle = document.getElementById('theme-toggle');
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const authButton = document.getElementById('auth-button');
const authModal = document.getElementById('auth-modal');
const closeAuthModal = document.getElementById('close-auth-modal');
const showRegister = document.getElementById('show-register');
const showLogin = document.getElementById('show-login');
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');
const analyzeBtn = document.getElementById('analyze-btn');
const loadingResults = document.getElementById('loading-results');
const resultsContainer = document.getElementById('results-container');
const saveResultsBtn = document.getElementById('save-results');
const contactForm = document.getElementById('contact-form');
// Theme Toggle
themeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
localStorage.setItem('color-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
});
// Check for saved theme preference
if (localStorage.getItem('color-theme') === 'dark' || (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
// Mobile Menu Toggle
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when clicking on a link
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Auth Modal
authButton.addEventListener('click', () => {
authModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
});
closeAuthModal.addEventListener('click', () => {
authModal.classList.add('hidden');
document.body.style.overflow = 'auto';
});
showRegister.addEventListener('click', () => {
loginForm.classList.add('hidden');
registerForm.classList.remove('hidden');
});
showLogin.addEventListener('click', () => {
registerForm.classList.add('hidden');
loginForm.classList.remove('hidden');
});
// Close modal when clicking outside
window.addEventListener('click', (e) => {
if (e.target === authModal) {
authModal.classList.add('hidden');
document.body.style.overflow = 'auto';
}
});
// Form submissions
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
alert('شكراً لرسالتك! سنتواصل معك قريباً.');
contactForm.reset();
});
// Login form submission
document.getElementById('login-btn').addEventListener('click', (e) => {
e.preventDefault();
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;
if (!email || !password) {
alert('الرجاء إدخال البريد الإلكتروني وكلمة المرور');
return;
}
// Simulate login
alert('تم تسجيل الدخول بنجاح!');
authModal.classList.add('hidden');
document.body.style.overflow = 'auto';
authButton.innerHTML = '<i class="fas fa-user mr-2 rtl:mr-0 rtl:ml-2"></i> حسابي';
});
// Register form submission
document.getElementById('register-btn').addEventListener('click', (e) => {
e.preventDefault();
const name = document.getElementById('register-name').value;
const email = document.getElementById('register-email').value;
const password = document.getElementById('register-password').value;
const confirm = document.getElementById('register-confirm').value;
if (!name || !email || !password || !confirm) {
alert('الرجاء ملء جميع الحقول');
return;
}
if (password !== confirm) {
alert('كلمة المرور وتأكيدها غير متطابقين');
return;
}
// Simulate registration
alert('تم إنشاء الحساب بنجاح! يمكنك الآن تسجيل الدخول.');
registerForm.classList.add('hidden');
loginForm.classList.remove('hidden');
});
// Beam Editor Functionality
const beamEditor = document.getElementById('beam-editor');
const beamCtx = beamEditor.getContext('2d');
const beamCoords = document.getElementById('beam-coords');
const addSupportBtn = document.getElementById('add-support');
const addLoadBtn = document.getElementById('add-load');
const addMomentBtn = document.getElementById('add-moment');
const clearAllBtn = document.getElementById('clear-all');
const elementsList = document.getElementById('elements-list');
const lengthInput = document.getElementById('length');
const heightInput = document.getElementById('height');
// Beam parameters
let beamLength = parseFloat(lengthInput.value);
let beamHeight = parseFloat(heightInput.value);
let supports = [];
let loads = [];
let moments = [];
let isAddingSupport = false;
let isAddingLoad = false;
let isAddingMoment = false;
// Initialize beam editor
function initBeamEditor() {
updateBeamDimensions();
drawBeam();
// Mouse move event to show coordinates
beamEditor.addEventListener('mousemove', (e) => {
const rect = beamEditor.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const beamX = (x / beamEditor.width) * beamLength;
const beamY = (y / beamEditor.height) * beamHeight;
beamCoords.textContent = `X: ${beamX.toFixed(2)}m, Y: ${beamY.toFixed(2)}m`;
// If adding element, show preview
if (isAddingSupport) {
drawBeam();
drawSupportPreview(x);
} else if (isAddingLoad) {
drawBeam();
drawLoadPreview(x, y);
} else if (isAddingMoment) {
drawBeam();
drawMomentPreview(x);
}
});
// Click event to add elements
beamEditor.addEventListener('click', (e) => {
const rect = beamEditor.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const beamX = (x / beamEditor.width) * beamLength;
if (isAddingSupport) {
addSupport(beamX);
isAddingSupport = false;
} else if (isAddingLoad) {
const beamY = (y / beamEditor.height) * beamHeight;
addLoad(beamX, beamY);
isAddingLoad = false;
} else if (isAddingMoment) {
addMoment(beamX);
isAddingMoment = false;
}
drawBeam();
});
}
// Update beam dimensions when inputs change
function updateBeamDimensions() {
beamEditor.width = beamEditor.offsetWidth;
beamEditor.height = beamEditor.offsetHeight;
beamLength = parseFloat(lengthInput.value);
beamHeight = parseFloat(heightInput.value);
}
lengthInput.addEventListener('input', updateBeamDimensions);
heightInput.addEventListener('input', updateBeamDimensions);
// Draw the beam
function drawBeam() {
beamCtx.clearRect(0, 0, beamEditor.width, beamEditor.height);
// Draw beam
beamCtx.strokeStyle = '#4b5563';
beamCtx.lineWidth = 3;
beamCtx.beginPath();
beamCtx.moveTo(50, beamEditor.height / 2);
beamCtx.lineTo(beamEditor.width - 50, beamEditor.height / 2);
beamCtx.stroke();
// Draw supports
supports.forEach(support => {
drawSupport(support.x);
});
// Draw loads
loads.forEach(load => {
drawLoad(load.x, load.y, load.type, load.value);
});
// Draw moments
moments.forEach(moment => {
drawMoment(moment.x, moment.value);
});
}
// Draw support
function drawSupport(x) {
const canvasX = (x / beamLength) * (beamEditor.width - 100) + 50;
const canvasY = beamEditor.height / 2;
beamCtx.fillStyle = '#3b82f6';
beamCtx.beginPath();
beamCtx.moveTo(canvasX - 10, canvasY + 15);
beamCtx.lineTo(canvasX + 10, canvasY + 15);
beamCtx.lineTo(canvasX, canvasY);
beamCtx.closePath();
beamCtx.fill();
// Draw support label
beamCtx.fillStyle = '#000';
beamCtx.font = '12px Arial';
beamCtx.textAlign = 'center';
beamCtx.fillText(`S${supports.findIndex(s => s.x === x) + 1}`, canvasX, canvasY + 30);
}
// Draw support preview
function drawSupportPreview(x) {
const canvasY = beamEditor.height / 2;
beamCtx.fillStyle = 'rgba(59, 130, 246, 0.5)';
beamCtx.beginPath();
beamCtx.moveTo(x - 10, canvasY + 15);
beamCtx.lineTo(x + 10, canvasY + 15);
beamCtx.lineTo(x, canvasY);
beamCtx.closePath();
beamCtx.fill();
}
// Draw load
function drawLoad(x, y, type = 'point', value = 10) {
const canvasX = (x / beamLength) * (beamEditor.width - 100) + 50;
const canvasY = (y / beamHeight) * (beamEditor.height / 2);
beamCtx.fillStyle = '#ef4444';
if (type === 'point') {
// Arrow shaft
beamCtx.beginPath();
beamCtx.moveTo(canvasX, canvasY);
beamCtx.lineTo(canvasX, beamEditor.height / 2);
beamCtx.strokeStyle = '#ef4444';
beamCtx.lineWidth = 2;
beamCtx.stroke();
// Arrow head
beamCtx.beginPath();
beamCtx.moveTo(canvasX - 5, beamEditor.height / 2 + 10);
beamCtx.lineTo(canvasX, beamEditor.height / 2);
beamCtx.lineTo(canvasX + 5, beamEditor.height / 2 + 10);
beamCtx.closePath();
beamCtx.fill();
// Load value
beamCtx.fillStyle = '#000';
beamCtx.font = '12px Arial';
beamCtx.textAlign = 'center';
beamCtx.fillText(`${value} kN`, canvasX, beamEditor.height / 2 + 25);
}
}
// Draw load preview
function drawLoadPreview(x, y) {
beamCtx.fillStyle = 'rgba(239, 68, 68, 0.5)';
// Arrow shaft
beamCtx.beginPath();
beamCtx.moveTo(x, y);
beamCtx.lineTo(x, beamEditor.height / 2);
beamCtx.strokeStyle = 'rgba(239, 68, 68, 0.5)';
beamCtx.lineWidth = 2;
beamCtx.stroke();
// Arrow head
beamCtx.beginPath();
beamCtx.moveTo(x - 5, beamEditor.height / 2 + 10);
beamCtx.lineTo(x, beamEditor.height / 2);
beamCtx.lineTo(x + 5, beamEditor.height / 2 + 10);
beamCtx.closePath();
beamCtx.fill();
}
// Draw moment
function drawMoment(x, value = 5) {
const canvasX = (x / beamLength) * (beamEditor.width - 100) + 50;
const canvasY = beamEditor.height / 2;
beamCtx.strokeStyle = '#8b5cf6';
beamCtx.lineWidth = 2;
// Draw circular arrow
beamCtx.beginPath();
beamCtx.arc(canvasX, canvasY, 15, -Math.PI/2, Math.PI/2, true);
beamCtx.stroke();
// Draw arrow head
beamCtx.fillStyle = '#8b5cf6';
beamCtx.beginPath();
beamCtx.moveTo(canvasX - 5, canvasY - 15);
beamCtx.lineTo(canvasX, canvasY - 20);
beamCtx.lineTo(canvasX + 5, canvasY - 15);
beamCtx.closePath();
beamCtx.fill();
// Moment value
beamCtx.fillStyle = '#000';
beamCtx.font = '12px Arial';
beamCtx.textAlign = 'center';
beamCtx.fillText(`${value} kN.m`, canvasX, canvasY - 30);
}
// Draw moment preview
function drawMomentPreview(x) {
const canvasY = beamEditor.height / 2;
beamCtx.strokeStyle = 'rgba(139, 92, 246, 0.5)';
beamCtx.lineWidth = 2;
// Draw circular arrow
beamCtx.beginPath();
beamCtx.arc(x, canvasY, 15, -Math.PI/2, Math.PI/2, true);
beamCtx.stroke();
// Draw arrow head
beamCtx.fillStyle = 'rgba(139, 92, 246, 0.5)';
beamCtx.beginPath();
beamCtx.moveTo(x - 5, canvasY - 15);
beamCtx.lineTo(x, canvasY - 20);
beamCtx.lineTo(x + 5, canvasY - 15);
beamCtx.closePath();
beamCtx.fill();
}
// Add support
function addSupport(x) {
supports.push({ x });
updateElementsList();
}
// Add load
function addLoad(x, y) {
const type = 'point';
const value = Math.round(Math.random() * 50 + 10);
loads.push({ x, y, type, value });
updateElementsList();
}
// Add moment
function addMoment(x) {
const value = Math.round(Math.random() * 20 + 5);
moments.push({ x, value });
updateElementsList();
}
// Update elements list
function updateElementsList() {
elementsList.innerHTML = '';
supports.forEach((support, index) => {
const element = document.createElement('div');
element.className = 'flex justify-between items-center bg-gray-100 dark:bg-gray-600 p-2 rounded';
element.innerHTML = `
<div class="flex items-center">
<i class="fas fa-bridge support-icon mr-2 rtl:mr-0 rtl:ml-2"></i>
<span class="arabic-text">دعم ${index + 1} عند X = ${support.x.toFixed(2)}m</span>
</div>
<button class="text-red-500 hover:text-red-700 dark:hover:text-red-400" data-index="${index}" data-type="support">
<i class="fas fa-times"></i>
</button>
`;
elementsList.appendChild(element);
});
loads.forEach((load, index) => {
const element = document.createElement('div');
element.className = 'flex justify-between items-center bg-gray-100 dark:bg-gray-600 p-2 rounded';
element.innerHTML = `
<div class="flex items-center">
<i class="fas fa-weight-hanging load-icon mr-2 rtl:mr-0 rtl:ml-2"></i>
<span class="arabic-text">حمل ${load.type === 'point' ? 'مركز' : 'موزع'} ${index + 1} عند X = ${load.x.toFixed(2)}m (${load.value} kN)</span>
</div>
<button class="text-red-500 hover:text-red-700 dark:hover:text-red-400" data-index="${index}" data-type="load">
<i class="fas fa-times"></i>
</button>
`;
elementsList.appendChild(element);
});
moments.forEach((moment, index) => {
const element = document.createElement('div');
element.className = 'flex justify-between items-center bg-gray-100 dark:bg-gray-600 p-2 rounded';
element.innerHTML = `
<div class="flex items-center">
<i class="fas fa-redo moment-icon mr-2 rtl:mr-0 rtl:ml-2"></i>
<span class="arabic-text">عزم ${index + 1} عند X = ${moment.x.toFixed(2)}m (${moment.value} kN.m)</span>
</div>
<button class="text-red-500 hover:text-red-700 dark:hover:text-red-400" data-index="${index}" data-type="moment">
<i class="fas fa-times"></i>
</button>
`;
elementsList.appendChild(element);
});
// Add event listeners to delete buttons
document.querySelectorAll('#elements-list button').forEach(button => {
button.addEventListener('click', (e) => {
const index = parseInt(button.dataset.index);
const type = button.dataset.type;
if (type === 'support') {
supports.splice(index, 1);
} else if (type === 'load') {
loads.splice(index, 1);
} else if (type === 'moment') {
moments.splice(index, 1);
}
updateElementsList();
drawBeam();
});
});
}
// Clear all elements
clearAllBtn.addEventListener('click', () => {
supports = [];
loads = [];
moments = [];
updateElementsList();
drawBeam();
});
// Add support button
addSupportBtn.addEventListener('click', () => {
isAddingSupport = true;
isAddingLoad = false;
isAddingMoment = false;
resetAddingButtons();
addSupportBtn.classList.add('ring-2', 'ring-blue-500');
});
// Add load button
addLoadBtn.addEventListener('click', () => {
isAddingLoad = true;
isAddingSupport = false;
isAddingMoment = false;
resetAddingButtons();
addLoadBtn.classList.add('ring-2', 'ring-red-500');
});
// Add moment button
addMomentBtn.addEventListener('click', () => {
isAddingMoment = true;
isAddingSupport = false;
isAddingLoad = false;
resetAddingButtons();
addMomentBtn.classList.add('ring-2', 'ring-purple-500');
});
// Reset adding buttons style
function resetAddingButtons() {
[addSupportBtn, addLoadBtn, addMomentBtn].forEach(btn => {
btn.classList.remove('ring-2', 'ring-blue-500', 'ring-red-500', 'ring-purple-500');
});
}
// Code selector
const codeButtons = document.querySelectorAll('.code-selector button');
codeButtons.forEach(button => {
button.addEventListener('click', (e) => {
e.preventDefault();
codeButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
});
});
// Analysis Button
analyzeBtn.addEventListener('click', () => {
if (supports.length < 2) {
alert('يجب إضافة دعمين على الأقل للتحليل');
return;
}
loadingResults.classList.remove('hidden');
resultsContainer.classList.add('hidden');
// Simulate analysis progress
let progress = 0;
const progressBar = document.querySelector('.bg-primary-light');
progressBar.style.width = '0%';
const progressInterval = setInterval(() => {
progress += 5;
progressBar.style.width = `${progress}%`;
if (progress >= 100) {
clearInterval(progressInterval);
setTimeout(() => {
loadingResults.classList.add('hidden');
resultsContainer.classList.remove('hidden');
showAnalysisResults();
// Scroll to results section
document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
}, 500);
}
}, 100);
});
// Save Results Button
saveResultsBtn.addEventListener('click', () => {
authModal.classList.remove('hidden');
});
// Show analysis results
function showAnalysisResults() {
// Calculate reactions (simplified for demo)
const verticalReactions = document.getElementById('vertical-reactions');
const horizontalReactions = document.getElementById('horizontal-reactions');
const momentReactions = document.getElementById('moment-reactions');
const codeChecks = document.getElementById('code-checks');
// Clear previous results
verticalReactions.innerHTML = '';
horizontalReactions.innerHTML = '';
momentReactions.innerHTML = '';
codeChecks.innerHTML = '';
// Calculate reactions (simplified demo calculations)
if (supports.length > 0) {
// Vertical reactions
supports.forEach((support, index) => {
const reactionValue = (Math.random() * 50 + 10).toFixed(2);
const reactionElement = document.createElement('div');
reactionElement.className = 'flex justify-between';
reactionElement.innerHTML = `
<span class="arabic-text">R<sub>${index + 1}</sub><sub>y</sub></span>
<span>${reactionValue} kN ↑</span>
`;
verticalReactions.appendChild(reactionElement);
});
// Horizontal reactions (if any)
if (supports.length > 1) {
const reactionValue = (Math.random() * 10).toFixed(2);
const reactionElement = document.createElement('div');
reactionElement.className = 'flex justify-between';
reactionElement.innerHTML = `
<span class="arabic-text">R<sub>1</sub><sub>x</sub></span>
<span>${reactionValue} kN →</span>
`;
horizontalReactions.appendChild(reactionElement);
} else {
horizontalReactions.innerHTML = '<p class="text-gray-500 arabic-text">لا توجد قوى أفقية</p>';
}
// Moment reactions (if any)
if (moments.length > 0) {
const reactionValue = (Math.random() * 20 + 5).toFixed(2);
const reactionElement = document.createElement('div');
reactionElement.className = 'flex justify-between';
reactionElement.innerHTML = `
<span class="arabic-text">M<sub>1</sub></span>
<span>${reactionValue} kN.m ↻</span>
`;
momentReactions.appendChild(reactionElement);
} else {
momentReactions.innerHTML = '<p class="text-gray-500 arabic-text">لا توجد عزوم</p>';
}
}
// Code checks (simplified for demo)
const selectedCode = document.querySelector('.code-selector .active').dataset.code;
const codeCheckItems = [
{ title: 'تحقق من مقاومة القص', status: 'success', description: 'مقاومة القص كافية وفق الكود' },
{ title: 'تحقق من مقاومة الانحناء', status: 'success', description: 'مقاومة الانحناء كافية' },
{ title: 'تحقق من الانزياحات', status: 'warning', description: 'الانزياحات ضمن الحدود المسموحة ولكن قريبة من الحد الأقصى' },
{ title: 'تحقق من الشروخ', status: 'success', description: 'عرض الشروخ ضمن الحدود المسموحة' }
];
codeCheckItems.forEach(item => {
const checkElement = document.createElement('div');
checkElement.className = `p-4 rounded-lg border ${
item.status === 'success' ? 'bg-green-50 dark:bg-green-900 border-green-200 dark:border-green-800' :
item.status === 'warning' ? 'bg-yellow-50 dark:bg-yellow-900 border-yellow-200 dark:border-yellow-800' :
'bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-800'
}`;
checkElement.innerHTML = `
<div class="flex items-start">
<div class="flex-shrink-0 pt-0.5">
<i class="fas ${
item.status === 'success' ? 'fa-check-circle text-green-500 dark:text-green-400' :
item.status === 'warning' ? 'fa-exclamation-triangle text-yellow-500 dark:text-yellow-400' :
'fa-times-circle text-red-500 dark:text-red-400'
}"></i>
</div>
<div class="ml-3 rtl:ml-0 rtl:mr-3">
<h4 class="font-medium arabic-text">${item.title} (${selectedCode})</h4>
<p class="mt-1 text-sm arabic-text">${item.description}</p>
</div>
</div>
`;
codeChecks.appendChild(checkElement);
});
// Draw diagrams (simplified for demo)
drawDiagrams();
}
// Draw diagrams
function drawDiagrams() {
// Destroy previous charts if they exist
['axial-force-diagram', 'shear-force-diagram', 'bending-moment-diagram', 'deflection-diagram'].forEach(id => {
const chartElement = document.getElementById(id);
if (chartElement && chartElement.chart) {
chartElement.chart.destroy();
}
});
// Axial Force Diagram
const axialCtx = document.getElementById('axial-force-diagram');
</html>