Modern Theme Component - Copy this Angular, Css Component to your project

لدي كود صفحة theme_light.css وهو :root { primary color: #128C7E; /* WhatsApp green */ secondary color: #25D366; /* WhatsApp accent green */ accent color: #FFD700; /* Gold color for highlights */ background color: #F5F5F5; text color: #333333; card bg: #FFFFFF; sidebar bg: #128C7E; sidebar text: #FFFFFF; input bg: #FFFFFF; input border: #E0E0E0; input text: #333333; button bg: var( primary color); button text: #FFFFFF; button hover bg: #075E54; /* Darker WhatsApp green */ form bg: var( card bg); list bg: var( card bg); list text: var( text color); list border: var( input border); table bg: var( card bg); table text: var( text color); table border: #E0E0E0; table hover bg: #F5F5F5; card text: var( text color); card hover bg: #F5F5F5; form text: var( text color); tab bg: var( card bg); tab active bg: var( primary color); tab text: var( text color); tab active text: #FFFFFF; box shadow default: 0 4px 6px rgba(0, 0, 0, 0.1); box shadow hover: 0 6px 12px rgba(0, 0, 0, 0.15); transition speed: 0.3s; } body { font family: 'Roboto', 'Tajawal', sans serif; background color: var( background color); color: var( text color); transition: background color var( transition speed), color var( transition speed); font size: 16px; line height: 1.5; margin: 0; padding: 0; overflow x: hidden; } [dir="rtl"] { direction: rtl; text align: right; } [dir="ltr"] { direction: ltr; text align: left; } select.Language { text align: center; width: 100%; max width: 200px; padding: 8px; background color: var( primary color); color: var( sidebar text); border: none; border radius: 5px; font size: 14px; outline: none; box shadow: 0 0 0 2px var( accent color); transition: all var( transition speed); } select.Language:hover, select.Language:focus { background color: var( button hover bg); box shadow: 0 0 0 2px var( accent color); } .wrapper { display: flex; min height: 100vh; position: relative; } .sidebar { width: 250px; height: 100vh; position: fixed; top: 0; background color: var( sidebar bg); color: var( sidebar text); overflow y: auto; z index: 1000; transition: all var( transition speed) ease; padding: 20px 0; box shadow: 2px 0 5px rgba(0, 0, 0, 0.1); } [dir="rtl"] .sidebar { right: 0; box shadow: 2px 0 5px rgba(0, 0, 0, 0.1); } [dir="ltr"] .sidebar { left: 0; box shadow: 2px 0 5px rgba(0, 0, 0, 0.1); } .sidebar sticky { position: sticky; top: 0; height: calc(100vh 48px); padding top: 1rem; overflow x: hidden; overflow y: auto; } .sidebar .nav link { font weight: 600; color: var( sidebar text); padding: 12px 20px; transition: background color var( transition speed), color var( transition speed), transform var( transition speed); display: flex; align items: center; border right: 4px solid transparent; border left: 4px solid transparent; } [dir="rtl"] .sidebar .nav link { text align: right; justify content: flex end; border right: 4px solid transparent; border left: none; } [dir="ltr"] .sidebar .nav link { text align: left; justify content: flex start; border left: 4px solid transparent; border right: none; } .sidebar .nav link .fas { margin: 0 15px; font size: 1.2rem; transition: transform var( transition speed) ease; } [dir="rtl"] .sidebar .nav link .fas { margin left: 15px; margin right: 0; } [dir="ltr"] .sidebar .nav link .fas { margin right: 15px; margin left: 0; } .sidebar .nav link.active, .sidebar .nav link:hover { color: #fff; background color: rgba(255, 255, 255, 0.1); transform: translateX( 5px); } [dir="rtl"] .sidebar .nav link.active, [dir="rtl"] .sidebar .nav link:hover { border right color: var( accent color); transform: translateX(5px); } [dir="ltr"] .sidebar .nav link.active, [dir="ltr"] .sidebar .nav link:hover { border left color: var( accent color); transform: translateX( 5px); } .sidebar .nav link.active .fas, .sidebar .nav link:hover .fas { transform: scale(1.2) rotate( 5deg); } .main content { padding: 30px; background color: var( background color); flex grow: 1; min height: 100vh; transition: margin var( transition speed) ease, padding var( transition speed); } [dir="rtl"] .main content { margin right: 250px; } [dir="ltr"] .main content { margin left: 250px; } .page title { font size: 2rem; font weight: bold; color: var( primary color); text align: center; margin bottom: 30px; position: relative; padding bottom: 15px; } .page title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX( 50%); width: 100px; height: 4px; background color: var( accent color); border radius: 2px; } .card .card title { font size: 1.25rem; font weight: bold; color: var( card text); } .btn toolbar { display: flex; flex wrap: wrap; justify content: center; align items: center; gap: 15px; margin bottom: 30px; padding: 20px; background color: var( card bg); border radius: 12px; box shadow: var( box shadow default); transition: box shadow var( transition speed); } .btn toolbar:hover { box shadow: var( box shadow hover); } .btn toolbar .btn { padding: 10px 20px; font size: 1rem; border radius: 8px; transition: all var( transition speed); min width: 120px; height: 45px; display: flex; align items: center; justify content: center; text align: center; margin: 5px 0; position: relative; overflow: hidden; } .btn toolbar .btn::before { content: ''; position: absolute; top: 0; width: 100%; height: 100%; background: linear gradient( 120deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transition: all 0.6s; } [dir="rtl"] .btn toolbar .btn::before { right: 100%; } [dir="ltr"] .btn toolbar .btn::before { left: 100%; } [dir="rtl"] .btn toolbar .btn:hover::before { right: 100%; } [dir="ltr"] .btn toolbar .btn:hover::before { left: 100%; } .form group { margin bottom: 1rem; } .form group label { color: var( text color); font weight: 600; display: block; margin bottom: 8px; position: relative; padding right: 20px; } [dir="rtl"] .form group label { padding right: 20px; padding left: 0; } [dir="ltr"] .form group label { padding left: 20px; padding right: 0; } .form group label::before { content: '\f044'; font family: 'Font Awesome 5 Free'; position: absolute; top: 50%; transform: translateY( 50%); color: var( primary color); } [dir="rtl"] .form group label::before { right: 0; } [dir="ltr"] .form group label::before { left: 0; } .form control { background color: var( input bg); border: 2px solid var( input border); color: var( input text); padding: 12px 15px; border radius: 8px; font size: 1rem; width: 100%; height: auto; transition: all var( transition speed); } .form control:focus { border color: var( primary color); box shadow: 0 0 0 3px rgba(18, 140, 126, 0.2); outline: none; } .btn primary { background color: var( button bg); border color: var( button bg); color: var( button text); position: relative; overflow: hidden; z index: 1; } .btn primary::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background color: var( button hover bg); border radius: 8px; z index: 2; } .btn primary::before { content: ''; position: absolute; bottom: 0; width: 0%; height: 100%; background color: var( accent color); transition: all 0.3s; border radius: 8px; z index: 1; } [dir="rtl"] .btn primary::before { right: 0; } [dir="ltr"] .btn primary::before { left: 0; } .btn primary:hover { color: #ffffff; } .btn primary:hover::before { width: 100%; } .table responsive { overflow x: auto; webkit overflow scrolling: touch; margin bottom: 1rem; } table { width: 100%; border collapse: separate; border spacing: 0; color: var( table text); background color: var( table bg); border radius: 12px; overflow: hidden; font size: 0.95rem; box shadow: var( box shadow default); } table th, table td { padding: 15px; text align: center; border: 1px solid var( table border); } table th { background color: var( primary color); color: var( button text); font weight: bold; text transform: uppercase; letter spacing: 1px; white space: nowrap; } table tr:hover td { background color: var( table hover bg); transform: scale(1.02); transition: all var( transition speed); } .card { background color: var( card bg); border: none; border radius: 12px; box shadow: var( box shadow default); transition: transform var( transition speed), box shadow var( transition speed); height: 100%; margin bottom: 2rem; overflow: hidden; } .card:hover { transform: translateY( 5px); box shadow: var( box shadow hover); } .card header { background color: var( primary color); color: white; border radius: 12px 12px 0 0; padding: 15px 20px; font size: 1.1rem; font weight: bold; position: relative; overflow: hidden; } .card header::after { content: ''; position: absolute; top: 50%; right: 50%; width: 200%; height: 200%; background: radial gradient(ellipse at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%); transform: rotate(30deg); transition: all 0.5s; } .card:hover .card header::after { transform: rotate(0deg); } .card body { padding: 20px; } .chart container { margin: 30px auto; padding: 20px; background color: var( card bg); border radius: 12px; box shadow: var( box shadow default); width: 100%; transition: all var( transition speed); } .chart container:hover { box shadow: var( box shadow hover); transform: scale(1.02); } .stats container { display: flex; flex wrap: wrap; justify content: space between; gap: 20px; margin bottom: 30px; } .stat box { background color: var( card bg); color: var( text color); padding: 20px; border radius: 12px; flex: 1; min width: 200px; text align: center; box shadow: var( box shadow default); transition: all var( transition speed); position: relative; overflow: hidden; } .stat box:hover { transform: translateY( 5px); box shadow: var( box shadow hover); } .stat box::before { content: ''; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; background: radial gradient(ellipse at center, rgba(18, 140, 126, 0.2) 0%, rgba(18, 140, 126, 0) 70%); transform: rotate(30deg); transition: all 0.5s; } .stat box:hover::before { transform: rotate(0deg); } .stat box h3 { font size: 1.5rem; margin bottom: 10px; color: var( primary color); } .stat box p { font size: 2rem; font weight: bold; margin: 0; } .filter container { display: flex; flex wrap: wrap; justify content: space between; align items: center; gap: 15px; margin bottom: 30px; padding: 20px; background color: var( card bg); border radius: 12px; box shadow: var( box shadow default); transition: all var( transition speed); } .filter container:hover { box shadow: var( box shadow hover); } .filter container .form control { flex: 1; min width: 200px; } .sidebar toggle { display: none; width: 100%; padding: 15px; background color: var( primary color); color: white; text align: center; cursor: pointer; font weight: bold; transition: all var( transition speed); position: relative; overflow: hidden; } .sidebar toggle:hover { background color: var( button hover bg); } .sidebar toggle::after { content: '\f0c9'; font family: 'Font Awesome 5 Free'; position: absolute; top: 50%; transform: translateY( 50%); } [dir="rtl"] .sidebar toggle::after { left: 15px; } [dir="ltr"] .sidebar toggle::after { right: 15px; } .table controls { display: flex; justify content: flex start; align items: center; gap: 10px; margin bottom: 15px; flex wrap: wrap; } .table controls .btn { padding: 8px 15px; font size: 0.9rem; min width: 40px; height: 40px; display: flex; align items: center; justify content: center; border radius: 50%; transition: all var( transition speed); background color: var( primary color); color: white; border: none; } .table controls .btn:hover { transform: rotate(15deg) scale(1.1); background color: var( button hover bg); } .pagination { display: flex; justify content: center; align items: center; margin top: 20px; } .pagination .page item { margin: 0 5px; } .pagination .page link { color: var( primary color); background color: var( card bg); border: 1px solid var( input border); padding: 8px 12px; border radius: 5px; transition: all var( transition speed); } .pagination .page link:hover, .pagination .page item.active .page link { background color: var( primary color); color: white; border color: var( primary color); } @media (max width: 992px) { body { font size: 0.9rem; } .page title { font size: 1.75rem; } .card .card title { font size: 1.15rem; } .sidebar { width: 200px; } [dir="rtl"] .main content { margin right: 0.1px; } [dir="ltr"] .main content { margin left: 0.1px; } .card deck { display: flex; flex flow: row wrap; margin right: 15px; margin left: 15px; } .card deck .card { display: flex; flex: 1 0 0%; flex direction: column; margin right: 15px; margin bottom: 0; margin left: 15px; } } @media (max width: 768px) { body { font size: 0.8rem; } .page title { font size: 1.5rem; } .card .card title { font size: 1rem; } .sidebar { width: 100%; height: auto; position: relative; padding: 0; } .sidebar content { display: none; } .sidebar.active .sidebar content { display: block; } .main content { margin right: 0; margin left: 0; padding: 20px; } .sidebar sticky { height: auto; } .sidebar toggle { display: block; position: fixed; top: 10px; z index: 1001; width: auto; padding: 10px 15px; border radius: 5px; } [dir="rtl"] .sidebar toggle { right: 10px; } [dir="ltr"] .sidebar toggle { left: 10px; } .stats container { flex direction: column; } .stat box { width: 100%; margin bottom: 15px; } table { font size: 14px; } .table responsive { overflow x: auto; webkit overflow scrolling: touch; } table td, table th { white space: nowrap; min width: 100px; } .table controls { justify content: center; margin bottom: 15px; } .table controls .btn { padding: 8px 12px; font size: 0.85rem; margin: 3px; } .form container { padding: 15px; max width: 100%; } .nav tabs { flex direction: column; } .nav tabs .nav item { width: 100%; margin bottom: 10px; } .nav tabs .nav link { width: 100%; padding: 12px 15px; font size: 14px; } .card deck { flex direction: column; } .card deck .card { margin right: 0; margin left: 0; margin bottom: 15px; } } @media (max width: 576px) { body { font size: 0.75rem; } .page title { font size: 1.25rem; } .card .card title { font size: 0.9rem; } .filter container { flex direction: column !important; width: 100%; } .filter container .form control { width: 100%; margin bottom: 10px; } .filter container .btn { width: 100%; margin top: 10px; padding: 12px; } #filterForm.d flex { display: block !important; } #filterForm .form control { margin bottom: 10px; width: 100%; } .stats container { flex direction: column !important; gap: 15px; width: 100%; } .stat box { width: 100%; margin bottom: 10px; } .chart container { margin top: 15px; width: 100%; } .input group { flex direction: column; gap: 10px; width: 100%; } .input group append { width: 100%; } .input group .form control { width: 100%; } table th, table td { font size: 12px; padding: 10px; } .table responsive { overflow x: auto; width: 100%; } .sidebar { width: 100%; height: auto; position: relative; padding: 0; } .main content { margin right: 0; margin left: 0; padding: 20px; width: 100%; } .sidebar toggle { display: block; position: fixed; top: 10px; z index: 1001; width: auto; padding: 10px 15px; border radius: 5px; } .stats container { flex direction: column; width: 100%; } .stat box { width: 100%; margin bottom: 15px; } .form container { padding: 15px; max width: 100%; } body { font size: 14px; } .form container { padding: 15px; } h1.h2, h2 { font size: 1.4rem; margin bottom: 20px; } .filter container .btn, .input group .input group append { display: block; width: 100%; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .btn:focus, .form control:focus { animation: pulse 0.5s ease in out; } a { position: relative; color: var( primary color); text decoration: none; transition: color var( transition speed); } a::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; background color: var( accent color); transform: scaleX(0); transition: transform 0.3s ease out; } [dir="rtl"] a::after { right: 0; transform origin: bottom right; } [dir="ltr"] a::after { left: 0; transform origin: bottom left; } a:hover { color: var( accent color); } a:hover::after { transform: scaleX(1); } [dir="rtl"] a:hover::after { transform origin: bottom left; } [dir="ltr"] a:hover::after { transform origin: bottom right; } @media (prefers reduced motion: reduce) { *, ::before, ::after { animation duration: 0.01ms !important; animation iteration count: 1 !important; transition duration: 0.01ms !important; scroll behavior: auto !important; } } @media print { .sidebar, .btn toolbar, .no print { display: none !important; } .main content { margin: 0; padding: 0; } body { font size: 12pt; background color: #ffffff; } .form container, .card { box shadow: none; border: 1px solid #ddd; } .table controls, .chart container { display: none; } table { border collapse: collapse; } table th, table td { border: 1px solid #000; } } .visually hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white space: nowrap !important; border: 0 !important; } :focus { outline: 3px solid var( accent color); outline offset: 2px; } .form control:invalid { border color: #dc3545; } .form control:invalid:focus { box shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } .invalid feedback { display: none; width: 100%; margin top: 0.25rem; font size: 80%; color: #dc3545; } .was validated .form control:invalid ~ .invalid feedback, .form control.is invalid ~ .invalid feedback { display: block; } .spinner { display: inline block; width: 50px; height: 50px; border: 3px solid rgba(0, 0, 0, 0.1); border radius: 50%; border top color: var( primary color); animation: spin 1s ease in out infinite; } @keyframes spin { to { transform: rotate(360deg); } } .tooltip { position: relative; display: inline block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background color: #555; color: #fff; text align: center; border radius: 6px; padding: 5px 0; position: absolute; z index: 1; bottom: 125%; left: 50%; margin left: 60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } :: webkit scrollbar { width: 10px; } :: webkit scrollbar track { background: #f1f1f1; } :: webkit scrollbar thumb { background: var( primary color); border radius: 5px; } :: webkit scrollbar thumb:hover { background: var( button hover bg); } i.fas.fa plus { margin right: 5px; margin left: 5px; } الان اريد تعديل الكود أولاً حذف الاكواد المكرره به بشكل صحيح التي تاثر علي الموقع ثانياً اريد جعله افضل من هذا بحيث منظمًا ومتناسقًا: يجب أن يكون الكود منظمًا وسهل الفهم، مع تقسيم واضح للأقسام (headers, footers, main content, sections, وغيرها). يتم استخدام الألوان والخطوط بطريقة متناسقة وجذابة. تصميم عصري: يشمل استخدام أحدث تقنيات CSS (مثل Flexbox وGrid) للحصول على تصميم مرن وجذاب يناسب جميع الأجهزة (Responsive Design). تأثيرات متطورة: إضافة تأثيرات حركة سلسة (Animations) باستخدام CSS مثل: تحريك العناصر عند التمرير (Scroll Effects). انتقالات سلسة (Transitions) بين الألوان أو الأحجام عند التفاعل مع العناصر. تأثيرات Hover مبتكرة. تفاعل المستخدم (Interactivity): تصميم أزرار وروابط ذات تأثيرات متطورة تُظهر تجاوبًا فوريًا مع المستخدم. اهتمام بالتفاصيل: الاهتمام بالأيقونات، الظلال، الحدود، وأنواع الخطوط، بحيث يكون التصميم النهائي مميزًا. التوافق: ضمان أن التصميم يعمل بشكل جيد على مختلف المتصفحات (Chrome, Firefox, Safari, Edge) والأجهزة (أجهزة الكمبيوتر، الأجهزة اللوحية، والهواتف الذكية). تحسين الأداء: تجنب الأكواد الزائدة أو المكررة، مع الحفاظ على الأداء العالي في التحميل ثم اعد كتابة الكود كاملاً بعد كل التعديلات