aik aesi app bnao jis mein mein apny sary coding projects ko category wise save kr skon, aur har category mein kitny codes hain aur kon se complete ho chuky Hain, kis date ko, kitny bajy, project ki pics, aur baki kch zrori cheezain bhi honi chahiyen, jo project complete ho jay us py tick lgany ka option, jo abhi nae huy wo sb untick hon aur us mein bhi jo zrori cheezain rakhna hon to rakh dena, project complete krny py client se kitny paisy liye, kitny baki hain ye bhi manage krna he aur accounts ki alag alag reports bhi bnani hain jin ko easyly print bhi kia ja sky, ye aik professional look app hona chahiye, jis mein advance technology ko use krty huy advance interface hona chahiye. App bht bhari na ho loading mein bht ziada time na ly. Aesa zbrdast design ho aur futuristic animations honi chahiye. Jb bhi kisi client ko add krna ho to us ki each and everything details save krni hon. Kisi bhi professional app ka look hona lazmi he
b3cd563 verified | /* Global Styles */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(45deg, #6366f1, #f59e0b); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(45deg, #4f46e5, #d97706); | |
| } | |
| /* Print Styles */ | |
| @media print { | |
| nav-bar, | |
| side-bar, | |
| button { | |
| display: none ; | |
| } | |
| body { | |
| background: white ; | |
| color: black ; | |
| } | |
| .bg-gradient-to-br { | |
| background: white ; | |
| border: 1px solid #ddd ; | |
| } | |
| } | |
| /* Animation Classes */ | |
| .animate-float-delay-1 { | |
| animation-delay: 0.2s; | |
| } | |
| .animate-float-delay-2 { | |
| animation-delay: 0.4s; | |
| } | |
| .animate-float-delay-3 { | |
| animation-delay: 0.6s; | |
| } | |
| /* Glass Effect */ | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| /* Gradient Text */ | |
| .gradient-text { | |
| background: linear-gradient(45deg, #6366f1, #f59e0b); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Hover Effects */ | |
| .hover-lift { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Loading Skeleton */ | |
| .skeleton { | |
| background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); | |
| background-size: 200% 100%; | |
| animation: loading 1.5s infinite; | |
| } | |
| @keyframes loading { | |
| 0% { | |
| background-position: 200% 0; | |
| } | |
| 100% { | |
| background-position: -200% 0; | |
| } | |
| } | |
| /* Card Hover Effects */ | |
| .project-card { | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .project-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .project-card:hover::before { | |
| left: 100%; | |
| } | |
| /* Status Badges */ | |
| .status-badge { | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .status-complete { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #22c55e; | |
| } | |
| .status-in-progress { | |
| background: rgba(249, 115, 22, 0.2); | |
| color: #f97316; | |
| } | |
| .status-pending { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #ef4444; | |
| } | |
| /* Form Styles */ | |
| .form-input { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| padding: 12px 16px; | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: #6366f1; | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); | |
| } | |
| /* Button Styles */ | |
| .btn-primary { | |
| background: linear-gradient(45deg, #6366f1, #4f46e5); | |
| padding: 12px 24px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn-secondary { | |
| background: linear-gradient(45deg, #f59e0b, #d97706); | |
| padding: 12px 24px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3); | |
| } | |
| /* Notification Badge */ | |
| .notification-badge { | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| background: linear-gradient(45deg, #ef4444, #dc2626); | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| font-weight: bold; | |
| } |