Spaces:
No application file
No application file
| *{ | |
| margin:0; | |
| padding:0; | |
| box-sizing:border-box; | |
| font-family:Poppins,sans-serif; | |
| } | |
| body{ | |
| min-height:100vh; | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| background:linear-gradient(135deg,#4facfe,#00f2fe); | |
| padding:40px; | |
| } | |
| .container{ | |
| width:100%; | |
| max-width:850px; | |
| } | |
| .card{ | |
| background:rgba(255,255,255,.18); | |
| backdrop-filter:blur(18px); | |
| border-radius:25px; | |
| padding:45px; | |
| box-shadow:0 20px 50px rgba(0,0,0,.2); | |
| color:white; | |
| } | |
| h1{ | |
| text-align:center; | |
| font-size:38px; | |
| margin-bottom:10px; | |
| } | |
| .subtitle{ | |
| text-align:center; | |
| margin-bottom:35px; | |
| opacity:.9; | |
| } | |
| label{ | |
| font-weight:600; | |
| display:block; | |
| margin-bottom:10px; | |
| } | |
| textarea{ | |
| width:100%; | |
| height:170px; | |
| padding:18px; | |
| border:none; | |
| outline:none; | |
| border-radius:15px; | |
| resize:none; | |
| font-size:18px; | |
| } | |
| .counter{ | |
| margin-top:10px; | |
| text-align:right; | |
| font-size:13px; | |
| opacity:.8; | |
| } | |
| button{ | |
| width:100%; | |
| margin-top:25px; | |
| padding:16px; | |
| font-size:18px; | |
| font-weight:600; | |
| border:none; | |
| border-radius:15px; | |
| cursor:pointer; | |
| background:white; | |
| color:#2193b0; | |
| transition:.3s; | |
| } | |
| button:hover{ | |
| transform:translateY(-3px); | |
| } | |
| .loading{ | |
| display:none; | |
| text-align:center; | |
| margin-top:25px; | |
| font-size:18px; | |
| } | |
| .result{ | |
| margin-top:40px; | |
| } | |
| .urdu-box{ | |
| background:white; | |
| color:#111; | |
| padding:25px; | |
| min-height:150px; | |
| border-radius:15px; | |
| font-size:28px; | |
| font-family:"Noto Nastaliq Urdu",serif; | |
| direction:rtl; | |
| line-height:2.2; | |
| } | |
| #copyBtn{ | |
| margin-top:20px; | |
| background:#00c853; | |
| color:white; | |
| } | |
| @media(max-width:768px){ | |
| .card{ | |
| padding:25px; | |
| } | |
| h1{ | |
| font-size:28px; | |
| } | |
| textarea{ | |
| height:140px; | |
| } | |
| .urdu-box{ | |
| font-size:22px; | |
| } | |
| } |