Scribd
Upload
8 views4 pages

DOCTYPE HTML

The document is an HTML template for a task management and productivity application in Arabic. It includes features for adding tasks, sorting and filtering them, displaying a list of tasks with deadlines and priorities, and showing daily and monthly productivity statistics. The layout is styled using Tailwind CSS for a modern look.

Uploaded by

mybe.somehow
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views4 pages

DOCTYPE HTML

The document is an HTML template for a task management and productivity application in Arabic. It includes features for adding tasks, sorting and filtering them, displaying a list of tasks with deadlines and priorities, and showing daily and monthly productivity statistics. The layout is styled using Tailwind CSS for a modern look.

Uploaded by

mybe.somehow
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>

<html lang="ar">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>‫<قائمة المهام واإلنتاجية‬/title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet">

</head>

<body class="bg-gray-900 text-white p-6">

<h1 class="text-3xl font-bold">📝 ‫<قائمة المهام واإلنتاجية‬/h1>

<!-- Add Task -->

<div class="bg-gray-800 p-4 rounded-lg">

<div class="grid grid-cols-1 sm:grid-cols-3 gap-2">

<input type="text" placeholder="‫ "أدخل المهمة‬class="p-2 rounded-md bg-gray-700 text-white" />

<input type="date" class="p-2 rounded-md bg-gray-700 text-white" />

<button class="w-full p-2 bg-blue-600 rounded-md text-white">

<span class="mr-2">+</span> ‫إضافة‬

</button>

</div>

</div>

<!-- Sorting & Filtering -->

<div class="flex gap-4 justify-center my-4">

<button class="p-2 bg-gray-700 rounded-md">‫<الكل‬/button>

<button class="p-2 bg-gray-700 rounded-md">‫<غير مكتملة‬/button>

<button class="p-2 bg-gray-700 rounded-md">‫<مكتملة‬/button>

<button class="p-2 bg-gray-700 rounded-md">‫<ترتيب حسب الموعد النهائي‬/button>

<button class="p-2 bg-gray-700 rounded-md">‫<ترتيب حسب األولوية‬/button>


</div>

<!-- Task List -->

<div class="bg-gray-800 p-4 rounded-lg">

<h2 class="text-lg mb-4">📋 ‫<مهامك‬/h2>

<ul class="space-y-2">

<li class="flex justify-between items-center bg-gray-700 p-2 rounded-md">

<div>

<p class="text-white">Task 1</p>

<small class="text-xs text-gray-400">10-05-2025 :‫<الموعد النهائي‬/small>

<small class="text-xs text-gray-400 block">‫ عالي‬:‫<األولوية‬/small>

</div>

<div class="flex gap-2">

<button class="p-2 bg-green-600 rounded-md">✅ ‫<تم‬/button>

<button class="p-2 bg-red-600 rounded-md">

<svg class="w-4 h-4" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"


viewBox="0 0 24 24" aria-hidden="true"><path d="M6 18L18 6M6 6l12 12" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round"></path></svg>

</button>

</div>

</li>

<li class="flex justify-between items-center bg-gray-700 p-2 rounded-md">

<div>

<p class="text-white">Task 2</p>

<small class="text-xs text-gray-400">12-05-2025 :‫<الموعد النهائي‬/small>

<small class="text-xs text-gray-400 block">‫ منخفض‬:‫<األولوية‬/small>

</div>

<div class="flex gap-2">

<button class="p-2 bg-green-600 rounded-md">✅ ‫<تم‬/button>

<button class="p-2 bg-red-600 rounded-md">


<svg class="w-4 h-4" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" aria-hidden="true"><path d="M6 18L18 6M6 6l12 12" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round"></path></svg>

</button>

</div>

</li>

</ul>

</div>

<!-- Daily Productivity -->

<div class="bg-gray-800 p-4 rounded-lg mt-4">

<div class="flex justify-between items-center mb-2">

<h2 class="text-lg">📊 ‫<اإلنتاجية اليومية‬/h2>

<span class="text-sm">50.00%</span>

</div>

<div class="bg-gray-700 rounded-full h-2 w-full">

<div class="bg-green-600 h-2 rounded-full" style="width: 50%"></div>

</div>

</div>

<!-- Monthly Productivity -->

<div class="bg-gray-800 p-4 rounded-lg mt-4">

<div class="flex justify-between items-center mb-2">

<h2 class="text-lg">📅 ‫<اإلنتاجية الشهرية‬/h2>

<span class="text-sm">60.00%</span>

</div>

<div class="bg-gray-700 rounded-full h-2 w-full">

<div class="bg-green-600 h-2 rounded-full" style="width: 60%"></div>

</div>

</div>

</body>
</html>

You might also like