Task-notes-node/index.ejs at main · Tanu9569/Task-notes-node · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="main w-full min-h-screen bg-gradient-to-br from-pink-300 to-pink-400">
    <div class="form p-10 text-white">
        <form action="/create" method="post" class="space-y-3">
            <input class="block w-full rounded-md outline-none px-5 py-2 bg-pink-600 placeholder-black font-bold text-white shadow-md focus:ring2 focus:ring-pink-400" type="text" placeholder="Title goes here" name="title">
            <textarea class="block w-full rounded-md outline-none mt-2 px-5 py-2 resize-none bg-pink-600 placeholder-black text-white shadow-md focus:ring2 focus:ring-pink-400" placeholder="Write your task details here" name="details"></textarea>
            <input class="mt-2 bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-md cursor-pointer transition duration-200 shadow-lg" type="submit" value="Create Task">
        </form>
    </div>
    <div class="tasks flex gap-3 flex-wrap p-10">
        <% if(files.length > 0){ %>
            <% files.forEach(function(val){ %>
                <div class="task w-72  px-5 py-4 rounded-2xl bg-purple-800 shadow-xl hover:scale-105 transition duration-300">
                    <h1 class="text-white text-2xl font-semibold tracking-tighter truncate"><%= val %></h1>
                        <div class="flex w-full justify-between items-center mt-4">
                            <a  class="text-blue-400 hover:text-blue-300 transition inline-block mt-3" href="/file/<%= val %>">Read more</a>
                            <a class = "text-grey-300 hover:text-gray-100 transition"href="/edit/<%= val %>">edit filename</a>
                        </div>>
                </div>
            <% }) %>
        <% } else { %>
            <h3 class="text-zinc-600 text-xl font-medium">No task yet</h3>
        <% } %>
    </div>
 </div>

</body>
</html>