Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ProSuite - لوحة الإنتاجية الشاملة</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap'); | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #ec4899; | |
| --accent: #10b981; | |
| --bg-dark: #0f172a; | |
| --bg-light: #f8fafc; | |
| --surface-dark: #1e293b; | |
| --surface-light: #ffffff; | |
| --text-dark: #e2e8f0; | |
| --text-light: #1e293b; | |
| --glass-dark: rgba(30, 41, 59, 0.7); | |
| --glass-light: rgba(255, 255, 255, 0.7); | |
| --shadow: 0 8px 32px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: var(--bg-dark); | |
| color: var(--text-dark); | |
| transition: var(--transition); | |
| overflow-x: hidden; | |
| } | |
| body.light-mode { | |
| background: var(--bg-light); | |
| color: var(--text-light); | |
| } | |
| /* Animated Background */ | |
| .bg-animation { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .bg-animation span { | |
| position: absolute; | |
| display: block; | |
| width: 20px; | |
| height: 20px; | |
| background: rgba(99, 102, 241, 0.1); | |
| animation: move 25s linear infinite; | |
| bottom: -150px; | |
| border-radius: 50%; | |
| } | |
| .bg-animation span:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; } | |
| .bg-animation span:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; } | |
| .bg-animation span:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; } | |
| .bg-animation span:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; } | |
| .bg-animation span:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; } | |
| .bg-animation span:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; } | |
| .bg-animation span:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; } | |
| .bg-animation span:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; } | |
| .bg-animation span:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; } | |
| .bg-animation span:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; } | |
| @keyframes move { | |
| 0% { transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } | |
| 100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } | |
| } | |
| /* Layout */ | |
| .container { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| min-height: 100vh; | |
| gap: 2rem; | |
| padding: 1rem; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| background: var(--glass-dark); | |
| backdrop-filter: blur(12px); | |
| border-radius: 24px; | |
| padding: 2rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| position: sticky; | |
| top: 1rem; | |
| height: calc(100vh - 2rem); | |
| overflow-y: auto; | |
| transition: var(--transition); | |
| } | |
| body.light-mode .sidebar { | |
| background: var(--glass-light); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .logo i { | |
| font-size: 2rem; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .nav-links { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| list-style: none; | |
| } | |
| .nav-link { | |
| padding: 1rem 1.5rem; | |
| border-radius: 16px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| font-weight: 500; | |
| border: 2px solid transparent; | |
| } | |
| .nav-link:hover, .nav-link.active { | |
| background: rgba(99, 102, 241, 0.1); | |
| border-color: var(--primary); | |
| transform: translateX(-5px); | |
| } | |
| .nav-link i { | |
| width: 24px; | |
| text-align: center; | |
| } | |
| .built-with { | |
| margin-top: auto; | |
| padding: 1rem; | |
| background: rgba(99, 102, 241, 0.1); | |
| border-radius: 12px; | |
| text-align: center; | |
| font-size: 0.875rem; | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| } | |
| .built-with a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 700; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .theme-toggle { | |
| position: fixed; | |
| top: 2rem; | |
| left: 2rem; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: var(--glass-dark); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: var(--text-dark); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| z-index: 1000; | |
| transition: var(--transition); | |
| backdrop-filter: blur(12px); | |
| } | |
| body.light-mode .theme-toggle { | |
| background: var(--glass-light); | |
| color: var(--text-light); | |
| } | |
| .theme-toggle:hover { | |
| transform: rotate(180deg) scale(1.1); | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| padding: 2rem; | |
| overflow-y: auto; | |
| } | |
| .section { | |
| display: none; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| .section.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .section-header { | |
| margin-bottom: 2rem; | |
| } | |
| .section-title { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| margin-bottom: 0.5rem; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .section-desc { | |
| color: rgba(226, 232, 240, 0.7); | |
| font-size: 1.1rem; | |
| } | |
| body.light-mode .section-desc { | |
| color: rgba(30, 41, 59, 0.7); | |
| } | |
| /* Glass Cards */ | |
| .glass-card { | |
| background: var(--glass-dark); | |
| backdrop-filter: blur(12px); | |
| border-radius: 24px; | |
| padding: 2rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: var(--transition); | |
| } | |
| body.light-mode .glass-card { | |
| background: var(--glass-light); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow); | |
| } | |
| /* Task Manager */ | |
| .task-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .task-column { | |
| background: rgba(99, 102, 241, 0.05); | |
| border-radius: 20px; | |
| padding: 1.5rem; | |
| min-height: 400px; | |
| } | |
| .task-column-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 1rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 2px solid rgba(99, 102, 241, 0.2); | |
| } | |
| .task-column-title { | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .task-count { | |
| background: var(--primary); | |
| color: white; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 20px; | |
| font-size: 0.875rem; | |
| } | |
| .task-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .task-item { | |
| background: var(--glass-dark); | |
| padding: 1rem; | |
| border-radius: 12px; | |
| cursor: move; | |
| transition: var(--transition); | |
| border: 2px solid transparent; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| body.light-mode .task-item { | |
| background: var(--glass-light); | |
| } | |
| .task-item:hover { | |
| border-color: var(--primary); | |
| transform: scale(1.02); | |
| } | |
| .task-item.dragging { | |
| opacity: 0.5; | |
| } | |
| .task-priority { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 4px; | |
| height: 100%; | |
| } | |
| .priority-high { background: #ef4444; } | |
| .priority-medium { background: #f59e0b; } | |
| .priority-low { background: #10b981; } | |
| .add-task-btn { | |
| width: 100%; | |
| padding: 1rem; | |
| margin-top: 1rem; | |
| background: transparent; | |
| border: 2px dashed rgba(99, 102, 241, 0.3); | |
| border-radius: 12px; | |
| color: var(--primary); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-family: inherit; | |
| font-weight: 600; | |
| } | |
| .add-task-btn:hover { | |
| background: rgba(99, 102, 241, 0.1); | |
| border-style: solid; | |
| } | |
| /* Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| z-index: 2000; | |
| align-items: center; | |
| justify-content: center; | |
| backdrop-filter: blur(5px); | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background: var(--surface-dark); | |
| padding: 2rem; | |
| border-radius: 24px; | |
| width: 90%; | |
| max-width: 500px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| body.light-mode .modal-content { | |
| background: var(--surface-light); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| .form-input, .form-select, .form-textarea { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border-radius: 12px; | |
| border: 2px solid rgba(99, 102, 241, 0.2); | |
| background: transparent; | |
| color: inherit; | |
| font-family: inherit; | |
| transition: var(--transition); | |
| } | |
| .form-input:focus, .form-select:focus, .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .btn-group { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .btn { | |
| flex: 1; | |
| padding: 0.875rem; | |
| border-radius: 12px; | |
| border: none; | |
| cursor: pointer; | |
| font-family: inherit; | |
| font-weight: 600; | |
| transition: var(--transition); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| } | |
| .btn-secondary { | |
| background: rgba(99, 102, 241, 0.1); | |
| color: var(--primary); | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); | |
| } | |
| /* Pomodoro Timer */ | |
| .timer-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 60vh; | |
| } | |
| .timer-circle { | |
| width: 300px; | |
| height: 300px; | |
| border-radius: 50%; | |
| background: conic-gradient(var(--primary) 0deg, rgba(99, 102, 241, 0.1) 0deg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| margin-bottom: 3rem; | |
| box-shadow: 0 0 60px rgba(99, 102, 241, 0.3); | |
| } | |
| .timer-inner { | |
| width: 260px; | |
| height: 260px; | |
| border-radius: 50%; | |
| background: var(--bg-dark); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| body.light-mode .timer-inner { | |
| background: var(--bg-light); | |
| } | |
| .timer-display { | |
| font-size: 4rem; | |
| font-weight: 800; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .timer-label { | |
| font-size: 1.2rem; | |
| color: rgba(226, 232, 240, 0.7); | |
| } | |
| body.light-mode .timer-label { | |
| color: rgba(30, 41, 59, 0.7); | |
| } | |
| .timer-controls { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .timer-btn { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| border: none; | |
| background: var(--glass-dark); | |
| color: inherit; | |
| cursor: pointer; | |
| font-size: 1.5rem; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 2px solid rgba(99, 102, 241, 0.3); | |
| } | |
| body.light-mode .timer-btn { | |
| background: var(--glass-light); | |
| } | |
| .timer-btn:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: scale(1.1); | |
| } | |
| .timer-modes { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .mode-btn { | |
| padding: 0.5rem 1.5rem; | |
| border-radius: 20px; | |
| border: 2px solid rgba(99, 102, 241, 0.3); | |
| background: transparent; | |
| color: inherit; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-family: inherit; | |
| } | |
| .mode-btn.active, .mode-btn:hover { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| color: white; | |
| } | |
| /* Calculator */ | |
| .calculator-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1rem; | |
| max-width: 400px; | |
| margin: 0 auto; | |
| } | |
| .calc-display { | |
| grid-column: 1 / -1; | |
| background: var(--glass-dark); | |
| padding: 1.5rem; | |
| border-radius: 16px; | |
| text-align: left; | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| min-height: 80px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| overflow-x: auto; | |
| } | |
| body.light-mode .calc-display { | |
| background: var(--glass-light); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .calc-btn { | |
| padding: 1.5rem; | |
| border-radius: 16px; | |
| border: none; | |
| background: var(--glass-dark); | |
| color: inherit; | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-family: inherit; | |
| } | |
| body.light-mode .calc-btn { | |
| background: var(--glass-light); | |
| } | |
| .calc-btn:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: translateY(-2px); | |
| } | |
| .calc-btn.operator { | |
| background: rgba(99, 102, 241, 0.2); | |
| color: var(--primary); | |
| } | |
| .calc-btn.equals { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| color: white; | |
| grid-column: span 2; | |
| } | |
| /* Password Generator */ | |
| .password-container { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .password-display { | |
| background: var(--glass-dark); | |
| padding: 2rem; | |
| border-radius: 16px; | |
| font-size: 1.5rem; | |
| font-family: 'Courier New', monospace; | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| border: 2px solid rgba(99, 102, 241, 0.3); | |
| position: relative; | |
| word-break: break-all; | |
| } | |
| body.light-mode .password-display { | |
| background: var(--glass-light); | |
| } | |
| .copy-btn { | |
| position: absolute; | |
| left: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: var(--primary); | |
| border: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 8px; | |
| color: white; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .copy-btn:hover { | |
| transform: translateY(-50%) scale(1.1); | |
| } | |
| .password-options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .option-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem; | |
| background: rgba(99, 102, 241, 0.05); | |
| border-radius: 12px; | |
| } | |
| .length-slider { | |
| width: 100%; | |
| margin: 0 1rem; | |
| -webkit-appearance: none; | |
| height: 6px; | |
| border-radius: 3px; | |
| background: rgba(99, 102, 241, 0.2); | |
| outline: none; | |
| } | |
| .length-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .length-slider::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); | |
| } | |
| .checkbox-wrapper { | |
| position: relative; | |
| width: 50px; | |
| height: 26px; | |
| } | |
| .checkbox-wrapper input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(99, 102, 241, 0.2); | |
| transition: .4s; | |
| border-radius: 34px; | |
| } | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 18px; | |
| width: 18px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider { | |
| background-color: var(--primary); | |
| } | |
| input:checked + .slider:before { | |
| transform: translateX(24px); | |
| } | |
| .generate-btn { | |
| width: 100%; | |
| padding: 1rem; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| border: none; | |
| border-radius: 12px; | |
| color: white; | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| margin-top: 1rem; | |
| } | |
| .generate-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); | |
| } | |
| /* Notes */ | |
| .notes-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .note-card { | |
| background: var(--glass-dark); | |
| padding: 1.5rem; | |
| border-radius: 16px; | |
| min-height: 200px; | |
| position: relative; | |
| transition: var(--transition); | |
| border: 2px solid transparent; | |
| } | |
| body.light-mode .note-card { | |
| background: var(--glass-light); | |
| } | |
| .note-card:hover { | |
| border-color: var(--primary); | |
| transform: translateY(-5px); | |
| } | |
| .note-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: start; | |
| margin-bottom: 1rem; | |
| } | |
| .note-title { | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| background: transparent; | |
| border: none; | |
| color: inherit; | |
| width: 100%; | |
| font-family: inherit; | |
| } | |
| .note-content { | |
| width: 100%; | |
| min-height: 100px; | |
| background: transparent; | |
| border: none; | |
| resize: none; | |
| color: inherit; | |
| font-family: inherit; | |
| line-height: 1.6; | |
| } | |
| .note-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| opacity: 0; | |
| transition: var(--transition); | |
| } | |
| .note-card:hover .note-actions { | |
| opacity: 1; | |
| } | |
| .note-btn { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 8px; | |
| border: none; | |
| background: rgba(239, 68, 68, 0.1); | |
| color: #ef4444; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .note-btn:hover { | |
| background: #ef4444; | |
| color: white; | |
| } | |
| .add-note { | |
| border: 2px dashed rgba(99, 102, 241, 0.3); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| background: transparent; | |
| } | |
| .add-note:hover { | |
| background: rgba(99, 102, 241, 0.05); | |
| } | |
| .add-note i { | |
| font-size: 3rem; | |
| color: var(--primary); | |
| } | |
| /* Unit Converter */ | |
| .converter-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 1fr auto 1fr; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .converter-box { | |
| background: var(--glass-dark); | |
| padding: 2rem; | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| body.light-mode .converter-box { | |
| background: var(--glass-light); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .converter-select { | |
| width: 100%; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| border-radius: 12px; | |
| border: 2px solid rgba(99, 102, 241, 0.2); | |
| background: transparent; | |
| color: inherit; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| } | |
| .converter-input { | |
| width: 100%; | |
| padding: 1rem; | |
| font-size: 1.5rem; | |
| border-radius: 12px; | |
| border: 2px solid rgba(99, 102, 241, 0.2); | |
| background: transparent; | |
| color: inherit; | |
| font-family: inherit; | |
| text-align: center; | |
| } | |
| .swap-btn { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| border: none; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| color: white; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .swap-btn:hover { | |
| transform: rotate(180deg); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 968px) { | |
| .container { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| top: auto; | |
| height: auto; | |
| flex-direction: row; | |
| padding: 1rem; | |
| z-index: 100; | |
| border-radius: 24px 24px 0 0; | |
| overflow-x: auto; | |
| } | |
| .logo, .built-with { | |
| display: none; | |
| } | |
| .nav-links { | |
| flex-direction: row; | |
| width: 100%; | |
| justify-content: space-around; | |
| } | |
| .nav-link { | |
| padding: 0.75rem; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| font-size: 0.75rem; | |
| } | |
| .nav-link span { | |
| display: none; | |
| } | |
| .main-content { | |
| padding-bottom: 100px; | |
| } | |
| .converter-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .swap-btn { | |
| transform: rotate(90deg); | |
| } | |
| .swap-btn:hover { | |
| transform: rotate(270deg); | |
| } | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| bottom: 100px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| background: var(--primary); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 12px; | |
| opacity: 0; | |
| transition: var(--transition); | |
| z-index: 3000; | |
| font-weight: 600; | |
| } | |
| .toast.show { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(99, 102, 241, 0.3); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(99, 102, 241, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-animation"> | |
| <span></span><span></span><span></span><span></span><span></span> | |
| <span></span><span></span><span></span><span></span><span></span> | |
| </div> | |
| <button class="theme-toggle" onclick="toggleTheme()"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| <div class="container"> | |
| <aside class="sidebar"> | |
| <div class="logo"> | |
| <i class="fas fa-layer-group"></i> | |
| <span>ProSuite</span> | |
| </div> | |
| <nav> | |
| <ul class="nav-links"> | |
| <li class="nav-link active" onclick="showSection('tasks')"> | |
| <i class="fas fa-tasks"></i> | |
| <span>المهام</span> | |
| </li> | |
| <li class="nav-link" onclick="showSection('timer')"> | |
| <i class="fas fa-clock"></i> | |
| <span>المؤقت</span> | |
| </li> | |
| <li class="nav-link" onclick="showSection('notes')"> | |
| <i class="fas fa-sticky-note"></i> | |
| <span>الملاحظات</span> | |
| </li> | |
| <li class="nav-link" onclick="showSection('calculator')"> | |
| <i class="fas fa-calculator"></i> | |
| <span>الحاسبة</span> | |
| </li> | |
| <li class="nav-link" onclick="showSection('password')"> | |
| <i class="fas fa-key"></i> | |
| <span>كلمة المرور</span> | |
| </li> | |
| <li class="nav-link" onclick="showSection('converter')"> | |
| <i class="fas fa-exchange-alt"></i> | |
| <span>التحويل</span> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="built-with"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"> | |
| <i class="fas fa-code"></i> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </aside> | |
| <main class="main-content"> | |
| <!-- Tasks Section --> | |
| <section id="tasks" class="section active"> | |
| <div class="section-header"> | |
| <h1 class="section-title">مدير المهام</h1> | |
| <p class="section-desc">نظم عملك باستخدام نظام Kanban</p> | |
| </div> | |
| <div class="task-container"> | |
| <div class="task-column" ondrop="drop(event)" ondragover="allowDrop(event)" data-status="todo"> | |
| <div class="task-column-header"> | |
| <span class="task-column-title"> | |
| <i class="fas fa-circle text-red-500"></i> | |
| للقيام به | |
| </span> | |
| <span class="task-count" id="count-todo">0</span> | |
| </div> | |
| <div class="task-list" id="todo-list"></div> | |
| <button class="add-task-btn" onclick="openTaskModal('todo')"> | |
| <i class="fas fa-plus"></i> إضافة مهمة | |
| </button> | |
| </div> | |
| <div class="task-column" ondrop="drop(event)" ondragover="allowDrop(event)" data-status="inprogress"> | |
| <div class="task-column-header"> | |
| <span class="task-column-title"> | |
| <i class="fas fa-circle text-yellow-500"></i> | |
| قيد التنفيذ | |
| </span> | |
| <span class="task-count" id="count-inprogress">0</span> | |
| </div> | |
| <div class="task-list" id="inprogress-list"></div> | |
| <button class="add-task-btn" onclick="openTaskModal('inprogress')"> | |
| <i class="fas fa-plus"></i> إضافة مهمة | |
| </button> | |
| </div> | |
| <div class="task-column" ondrop="drop(event)" ondragover="allowDrop(event)" data-status="done"> | |
| <div class="task-column-header"> | |
| <span class="task-column-title"> | |
| <i class="fas fa-circle text-green-500"></i> | |
| مكتمل | |
| </span> | |
| <span class="task-count" id="count-done">0</span> | |
| </div> | |
| <div class="task-list" id="done-list"></div> | |
| <button class="add-task-btn" onclick="openTaskModal('done')"> | |
| <i class="fas fa-plus"></i> إضافة مهمة | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Timer Section --> | |
| <section id="timer" class="section"> | |
| <div class="section-header"> | |
| <h1 class="section-title">مؤقت بومودورو</h1> | |
| <p class="section-desc">ركز على عملك مع تقنية Pomodoro</p> | |
| </div> | |
| <div class="timer-container"> | |
| <div class="timer-modes"> | |
| <button class="mode-btn active" onclick="setTimerMode(25)">عمل (25د)</button> | |
| <button class="mode-btn" onclick="setTimerMode(5)">راحة قصيرة (5د)</button> | |
| <button class="mode-btn" onclick="setTimerMode(15)">راحة طويلة (15د)</button> | |
| </div> | |
| <div class="timer-circle" id="timerCircle"> | |
| <div class="timer-inner"> | |
| <div class="timer-display" id="timerDisplay">25:00</div> | |
| <div class="timer-label">دقيقة</div> | |
| </div> | |
| </div> | |
| <div class="timer-controls"> | |
| <button class="timer-btn" onclick="toggleTimer()"> | |
| <i class="fas fa-play" id="playIcon"></i> | |
| </button> | |
| <button class="timer-btn" onclick="resetTimer()"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Notes Section --> | |
| <section id="notes" class="section"> | |
| <div class="section-header"> | |
| <h1 class="section-title">الملاحظات السريعة</h1> | |
| <p class="section-desc">احفظ أفكارك وأفكارك في مكان واحد</p> | |
| </div> | |
| <div class="notes-grid" id="notesGrid"> | |
| <div class="note-card add-note" onclick="addNewNote()"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Calculator Section --> | |
| <section id="calculator" class="section"> | |
| <div class="section-header"> | |
| <h1 class="section-title">الحاسبة العلمية</h1> | |
| <p class="section-desc">حاسبة متقدمة مع جميع العمليات الحسابية</p> | |
| </div> | |
| <div class="glass-card"> | |
| <div class="calculator-grid"> | |
| <div class="calc-display" id="calcDisplay">0</div> | |
| <button class="calc-btn" onclick="clearCalc()">C</button> | |
| <button class="calc-btn" onclick="appendToCalc('(')">(</button> | |
| <button class="calc-btn" onclick="appendToCalc(')')">)</button> | |
| <button class="calc-btn operator" onclick="appendToCalc('/')">÷</button> | |
| <button class="calc-btn" onclick="appendToCalc('7')">7</button> | |
| <button class="calc-btn" onclick="appendToCalc('8')">8</button> | |
| <button class="calc-btn" onclick="appendToCalc('9')">9</button> | |
| <button class="calc-btn operator" onclick="appendToCalc('*')">×</button> | |
| <button class="calc-btn" onclick="appendToCalc('4')">4</button> | |
| <button class="calc-btn" onclick="appendToCalc('5')">5</button> | |
| <button class="calc-btn" onclick="appendToCalc('6')">6</button> | |
| <button class="calc-btn operator" onclick="appendToCalc('-')">-</button> | |
| <button class="calc-btn" onclick="appendToCalc('1')">1</button> | |
| <button class="calc-btn" onclick="appendToCalc('2')">2</button> | |
| <button class="calc-btn" onclick="appendToCalc('3')">3</button> | |
| <button class="calc-btn operator" onclick="appendToCalc('+')">+</button> | |
| <button class="calc-btn" onclick="appendToCalc('0')">0</button> | |
| <button class="calc-btn" onclick="appendToCalc('.')">.</button> | |
| <button class="calc-btn equals" onclick="calculate()">=</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Password Section --> | |
| <section id="password" class="section"> | |
| <div class="section-header"> | |
| <h1 class="section-title">مولد كلمات المرور</h1> | |
| <p class="section-desc">أنشئ كلمات مرور قوية وآمنة</p> | |
| </div> | |
| <div class="password-container glass-card"> | |
| <div class="password-display" id="passwordDisplay"> | |
| اضغط على الزر لتوليد كلمة مرور | |
| <button class="copy-btn" onclick="copyPassword()"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| <div class="password-options"> | |
| <div class="option-row"> | |
| <span>طول كلمة المرور: <span id="lengthValue">16</span></span> | |
| <input type="range" class="length-slider" id="lengthSlider" min="8" max="32" value="16" oninput="updateLength(this.value)"> | |
| </div> | |
| <div class="option-row"> | |
| <span>تضمين أحرف كبيرة (A-Z)</span> | |
| <label class="checkbox-wrapper"> | |
| <input type="checkbox" id="uppercase" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <div class="option-row"> | |
| <span>تضمين أحرف صغيرة (a-z)</span> | |
| <label class="checkbox-wrapper"> | |
| <input type="checkbox" id="lowercase" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <div class="option-row"> | |
| <span>تضمين أرقام (0-9)</span> | |
| <label class="checkbox-wrapper"> | |
| <input type="checkbox" id="numbers" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <div class="option-row"> | |
| <span>تضمين رموز خاصة (!@#$)</span> | |
| <label class="checkbox-wrapper"> | |
| <input type="checkbox" id="symbols" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <button class="generate-btn" onclick="generatePassword()"> | |
| <i class="fas fa-magic"></i> توليد كلمة مرور | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Converter Section --> | |
| <section id="converter" class="section"> | |
| <div class="section-header"> | |
| <h1 class="section-title">محول الوحدات</h1> | |
| <p class="section-desc">حول بين مختلف الوحدات بسهولة</p> | |
| </div> | |
| <div class="converter-container"> | |
| <div class="converter-box"> | |
| <select class="converter-select" id="fromUnit" onchange="convert()"> | |
| <option value="m">متر (m)</option> | |
| <option value="km">كيلومتر (km)</option> | |
| <option value="cm">سنتيمتر (cm)</option> | |
| <option value="mm">مليمتر (mm)</option> | |
| <option value="mi">ميل (mi)</option> | |
| <option value="ft">قدم (ft)</option> | |
| <option value="in">بوصة (in)</option> | |
| </select> | |
| <input type="number" class="converter-input" id="fromValue" placeholder="0" oninput="convert()"> | |
| </div> | |
| <button class="swap-btn" onclick="swapUnits()"> | |
| <i class="fas fa-exchange-alt"></i> | |
| </button> | |
| <div class="converter-box"> | |
| <select class="converter-select" id="toUnit" onchange="convert |