github-issues-tracker/dashboard.html at main · marufbillah-dev/github-issues-tracker · 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
    <title>Dashboard | GitHub Issues Tracker</title>
    <!-- font awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
        integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- tailwindcss and daisyui -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body class="min-h-dvh bg-slate-50 font-sans">
    <!-- navbar -->
    <nav class="navbar bg-white border-b border-slate-200 px-4 md:px-8 lg:px-12 py-3 min-h-[72px] font-sans">
        <!-- navbar start / logo -->
        <div class="navbar-start flex-1 gap-3">
            <div class="flex items-center gap-3 max-sm:gap-2 group cursor-pointer shrink-0">
                <div class="transition-transform group-hover:scale-105 shrink-0">
                    <img src="./assets/github-logo.png" class="h-8 w-8" alt="GitHub Logo">
                </div>
                <span class="text-[18px] md:text-[20px] font-bold tracking-tight text-slate-800 hidden sm:block">
                    GitHub Issues Tracker
                </span>
                <span class="text-[16px] font-bold tracking-tight text-slate-800 sm:hidden">
                    GitHub Issues Tracker
                </span>
            </div>
        </div>

        <!-- navbar end -->
        <div class="navbar-end flex-none gap-2 md:gap-4">
            <!-- search bar -->
            <div class="relative group">
                <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none z-10">
                    <i
                        class="fa-solid fa-magnifying-glass text-slate-400 text-sm group-focus-within:text-[#5800FF] transition-colors"></i>
                </div>

                <input id="search" onkeyup="loadSearchIssues()" type="text" placeholder="Search..."
                    class="input input-bordered h-10 pl-10 bg-slate-50 border-slate-200 text-sm focus:bg-white focus:outline-[#5800FF] transition-all rounded-lg w-28 sm:w-48 md:w-64 lg:w-80" />
            </div>
            <!-- new issue button -->
            <button
                class="btn btn-primary bg-[#5800FF] hover:bg-[#4800D4] border-none text-white px-3 sm:px-5 min-h-0 h-10 normal-case font-semibold rounded-lg shadow-sm">
                <i class="fa-solid fa-plus text-sm"></i>
                <span class="max-sm:hidden">New Issue</span>
            </button>
        </div>
    </nav>

    <main class="max-w-[1400px] mx-auto px-4 md:px-8 lg:px-12 mt-8 space-y-6">
        <!-- filter buttons -->
        <div
            class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 flex flex-wrap max-sm:justify-between gap-3">
            <button id="all"
                class="btn filter-btn max-sm:flex-1 h-10 px-8 bg-[#5800FF] hover:bg-[#4800D4] border-none text-white normal-case font-bold rounded-lg shadow-md transition-all"
                onclick="loadAllIssues('all')">
                All
            </button>

            <button id="open"
                class="btn filter-btn max-sm:flex-1 h-10 px-8 bg-white hover:bg-slate-50 border border-slate-200 text-slate-500 normal-case font-medium rounded-lg transition-all"
                onclick="loadOpenIssues('open')">
                Open
            </button>

            <button id="closed"
                class="btn filter-btn max-sm:flex-1 h-10 px-8 bg-white hover:bg-slate-50 border border-slate-200 text-slate-500 normal-case font-medium rounded-lg transition-all"
                onclick="loadClosedIssues('closed')">
                Closed
            </button>
        </div>
        <!-- issues count -->
        <div
            class="bg-white rounded-xl border border-slate-100 shadow-sm p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex items-center gap-5">
                <div class="w-12 h-12 bg-indigo-50 flex items-center justify-center rounded-xl">
                    <img src="./assets/Aperture.png" class="h-6 w-6">
                </div>

                <div class="space-y-0.5">
                    <h2 class="text-xl font-bold text-slate-800 tracking-tight"><span id="issues-count">0</span> Issues
                    </h2>
                    <p class="text-slate-400 text-sm font-medium">Track and manage your project issues</p>
                </div>
            </div>

            <div class="flex items-center gap-6">
                <div class="flex items-center gap-2">
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                    <span class="text-sm font-bold text-slate-700">Open</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-2.5 h-2.5 rounded-full bg-purple-500"></span>
                    <span class="text-sm font-bold text-slate-700">Closed</span>
                </div>
            </div>
        </div>

        <!-- issue card container -->
        <div id="card-container"
            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-4 lg:px-12 lg:pt-5 lg:pb-10 bg-slate-50 font-sans">
        </div>

        <!-- loading -->
        <div id="loading"
            class="hidden grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-4 lg:px-12 lg:pt-5 lg:pb-10 bg-slate-50 font-sans">
            <div class="col-span-full flex flex-col items-center justify-center py-24">
                <span class="loading loading-spinner w-16 text-[#5800FF]"></span>
                <h2 class="text-slate-500 font-medium mt-4 tracking-wide">Syncing with GitHub...</h2>
            </div>
        </div>
    </main>

    <!-- issue details modal -->
    <dialog id="issue_details_modal" class="modal">
        <div class="modal-box max-w-2xl bg-white p-8 rounded-2xl shadow-2xl border border-slate-100 font-sans">
            <form method="dialog">
                <button class="btn btn-sm btn-circle btn-ghost absolute right-4 top-4 text-slate-400">✕</button>
            </form>
            <div id="modal-info-container">
            </div>
            <div class="modal-action mt-8">
                <form method="dialog">
                    <button
                        class="btn bg-[#5800FF] hover:bg-[#4800D4] border-none text-white px-8 normal-case font-bold rounded-lg">
                        Close
                    </button>
                </form>
            </div>
        </div>

        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>

    <script src="./scripts/./script.js"></script>
</body>

</html>