| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
|
|
| <meta charset="UTF-8">
|
|
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
| <title>Update Task</title>
|
|
|
|
|
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
|
| rel="stylesheet">
|
|
|
|
|
| <link rel="stylesheet"
|
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
|
|
| <style>
|
|
|
| *{
|
| margin:0;
|
| padding:0;
|
| box-sizing:border-box;
|
| font-family:'Poppins',sans-serif;
|
| }
|
|
|
| body{
|
|
|
| min-height:100vh;
|
|
|
| background:
|
| linear-gradient(135deg,#0f172a,#1e293b,#334155);
|
|
|
| display:flex;
|
|
|
| justify-content:center;
|
|
|
| align-items:center;
|
|
|
| padding:20px;
|
|
|
| color:white;
|
| }
|
|
|
| .container{
|
|
|
| width:100%;
|
|
|
| max-width:650px;
|
|
|
| background:rgba(255,255,255,0.08);
|
|
|
| backdrop-filter:blur(18px);
|
|
|
| border:1px solid rgba(255,255,255,0.1);
|
|
|
| border-radius:24px;
|
|
|
| padding:40px;
|
|
|
| box-shadow:
|
| 0 10px 40px rgba(0,0,0,0.4);
|
|
|
| animation:fadeIn 0.5s ease;
|
| }
|
|
|
| @keyframes fadeIn{
|
|
|
| from{
|
| opacity:0;
|
| transform:translateY(20px);
|
| }
|
|
|
| to{
|
| opacity:1;
|
| transform:translateY(0);
|
| }
|
| }
|
|
|
| .header{
|
|
|
| text-align:center;
|
|
|
| margin-bottom:35px;
|
| }
|
|
|
| .header i{
|
|
|
| font-size:55px;
|
|
|
| margin-bottom:15px;
|
|
|
| color:#38bdf8;
|
| }
|
|
|
| .header h1{
|
|
|
| font-size:32px;
|
|
|
| font-weight:700;
|
|
|
| background:
|
| linear-gradient(to right,#60a5fa,#22d3ee);
|
|
|
| -webkit-background-clip:text;
|
|
|
| -webkit-text-fill-color:transparent;
|
| }
|
|
|
| .header p{
|
|
|
| color:#cbd5e1;
|
|
|
| margin-top:10px;
|
|
|
| font-size:15px;
|
| }
|
|
|
| .current-task{
|
|
|
| background:rgba(255,255,255,0.06);
|
|
|
| border:1px solid rgba(255,255,255,0.08);
|
|
|
| padding:18px;
|
|
|
| border-radius:18px;
|
|
|
| margin-bottom:25px;
|
| }
|
|
|
| .current-task small{
|
|
|
| display:block;
|
|
|
| color:#94a3b8;
|
|
|
| margin-bottom:8px;
|
| }
|
|
|
| .current-task h3{
|
|
|
| font-size:20px;
|
|
|
| font-weight:500;
|
|
|
| line-height:1.5;
|
| }
|
|
|
| .update-form{
|
|
|
| display:flex;
|
|
|
| flex-direction:column;
|
|
|
| gap:20px;
|
| }
|
|
|
| .input-group{
|
|
|
| position:relative;
|
| }
|
|
|
| .input-group i{
|
|
|
| position:absolute;
|
|
|
| left:18px;
|
|
|
| top:50%;
|
|
|
| transform:translateY(-50%);
|
|
|
| color:#94a3b8;
|
|
|
| font-size:18px;
|
| }
|
|
|
| .update-form input{
|
|
|
| width:100%;
|
|
|
| padding:18px 18px 18px 55px;
|
|
|
| border:none;
|
|
|
| outline:none;
|
|
|
| border-radius:16px;
|
|
|
| background:rgba(255,255,255,0.08);
|
|
|
| color:white;
|
|
|
| font-size:16px;
|
|
|
| transition:0.3s;
|
| }
|
|
|
| .update-form input:focus{
|
|
|
| background:rgba(255,255,255,0.12);
|
|
|
| box-shadow:
|
| 0 0 0 3px rgba(56,189,248,0.25);
|
| }
|
|
|
| .update-form input::placeholder{
|
|
|
| color:#cbd5e1;
|
| }
|
|
|
| .button-group{
|
|
|
| display:flex;
|
|
|
| gap:15px;
|
|
|
| flex-wrap:wrap;
|
| }
|
|
|
| .btn{
|
|
|
| flex:1;
|
|
|
| min-width:180px;
|
|
|
| text-decoration:none;
|
|
|
| border:none;
|
|
|
| padding:16px;
|
|
|
| border-radius:16px;
|
|
|
| font-size:15px;
|
|
|
| font-weight:600;
|
|
|
| cursor:pointer;
|
|
|
| transition:0.3s;
|
|
|
| display:flex;
|
|
|
| justify-content:center;
|
|
|
| align-items:center;
|
|
|
| gap:10px;
|
| }
|
|
|
| .update-btn{
|
|
|
| background:
|
| linear-gradient(to right,#3b82f6,#06b6d4);
|
|
|
| color:white;
|
| }
|
|
|
| .update-btn:hover{
|
|
|
| transform:translateY(-3px);
|
|
|
| box-shadow:
|
| 0 10px 25px rgba(59,130,246,0.4);
|
| }
|
|
|
| .back-btn{
|
|
|
| background:rgba(255,255,255,0.08);
|
|
|
| color:white;
|
|
|
| border:1px solid rgba(255,255,255,0.08);
|
| }
|
|
|
| .back-btn:hover{
|
|
|
| background:rgba(255,255,255,0.15);
|
| }
|
|
|
| .task-meta{
|
|
|
| margin-top:25px;
|
|
|
| display:flex;
|
|
|
| justify-content:center;
|
|
|
| gap:10px;
|
|
|
| flex-wrap:wrap;
|
| }
|
|
|
| .meta-badge{
|
|
|
| background:rgba(255,255,255,0.08);
|
|
|
| padding:10px 14px;
|
|
|
| border-radius:12px;
|
|
|
| font-size:13px;
|
|
|
| color:#cbd5e1;
|
| }
|
|
|
| @media(max-width:768px){
|
|
|
| .container{
|
| padding:25px;
|
| }
|
|
|
| .header h1{
|
| font-size:26px;
|
| }
|
|
|
| .button-group{
|
| flex-direction:column;
|
| }
|
|
|
| .btn{
|
| width:100%;
|
| }
|
| }
|
|
|
| </style>
|
|
|
| </head>
|
|
|
| <body>
|
|
|
| <div class="container">
|
|
|
| <div class="header">
|
|
|
| <i class="fa-solid fa-pen-to-square"></i>
|
|
|
| <h1>Update Task</h1>
|
|
|
| <p>Edit your task and keep your workflow organized</p>
|
|
|
| </div>
|
|
|
| <div class="current-task">
|
|
|
| <small>Current Task</small>
|
|
|
| <h3>
|
| {{ todo.task }}
|
| </h3>
|
|
|
| </div>
|
|
|
| <form action="/update/{{ todo._id }}"
|
| method="POST"
|
| class="update-form">
|
|
|
| <div class="input-group">
|
|
|
| <i class="fa-solid fa-list-check"></i>
|
|
|
| <input
|
| type="text"
|
| name="new_task"
|
| value="{{ todo.task }}"
|
| placeholder="Update your task..."
|
| required
|
| >
|
|
|
| </div>
|
|
|
| <div class="button-group">
|
|
|
| <button type="submit"
|
| class="btn update-btn">
|
|
|
| <i class="fa-solid fa-floppy-disk"></i>
|
|
|
| Save Changes
|
|
|
| </button>
|
|
|
| <a href="/"
|
| class="btn back-btn">
|
|
|
| <i class="fa-solid fa-arrow-left"></i>
|
|
|
| Back To List
|
|
|
| </a>
|
|
|
| </div>
|
|
|
| </form>
|
|
|
| <div class="task-meta">
|
|
|
| <div class="meta-badge">
|
|
|
| <i class="fa-regular fa-clock"></i>
|
|
|
| Last Updated:
|
| {{ todo.task_time.strftime('%d %b %Y') }}
|
|
|
| </div>
|
|
|
| <div class="meta-badge">
|
|
|
| <i class="fa-solid fa-database"></i>
|
|
|
| MongoDB Connected
|
|
|
| </div>
|
|
|
| </div>
|
|
|
| </div>
|
|
|
| </body>
|
|
|
| </html> |
