IssueTracker/dashboard.html at main · hasibzero/IssueTracker · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
<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" />
<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>

<style>
    *{
          font-family: "Geist", sans-serif;

    }
</style>

</head>
<body>

    <nav class="border-b border-gray-300">
    <div class="navbar bg-base-100 w-11/12 mx-auto flex-col md:flex-row gap-4 py-4 md:py-2">

        <div class="flex-1 w-full flex justify-center md:justify-start">
            <a class="flex items-center gap-2">
                <img src="./assets/github-logo.png" class="max-w-8 md:max-w-9" alt="">
                <h2 class="text-lg md:text-xl font-semibold text-center md:text-left">GitHub Issues Tracker</h2>
            </a>
        </div>

        <div class="flex flex-wrap gap-2 w-full md:w-auto justify-center md:justify-end items-center">

            <input id="searchInput" type="text" placeholder="Search" class="input input-bordered w-full md:w-auto" />

            <button id="searchBtn" class="btn btn-primary btn-soft whitespace-nowrap text-sm md:text-base">
                <i class="fa-solid fa-magnifying-glass"></i> Search
            </button>

            <button class="btn btn-primary whitespace-nowrap text-sm md:text-base">
                <i class="fa-solid fa-plus"></i> New Issue
            </button>

        </div>
    </div>
</nav>

    <main class=" bg-[#F8FAFC] min-h-screen py-6 space-y-4">
        <section class="container  mx-auto" >
            <div class="container">
                <!-- all open closed button  -->
                <div id="allTab" class="p-6 space-x-1 bg-white rounded-xl shadow-sm">

                    <button id="all" class="btn btn-primary ">ALL</button>

                    <button id="open" class="btn openClicked">Open</button>
                    <button id="closed" class="btn closedClicked">Closed</button>

                </div>


            </div>
        </section>

    <section class="container  mx-auto shadow-sm border-b border-gray-300 rounded-xl bg-[#FBFBFB]">
        <!-- issue count -->
        <div class="p-6 bg-white rounded-xl shadow-sm flex flex-col md:flex-row justify-between items-center gap-4 md:gap-0">

            <div class="flex flex-col sm:flex-row items-center gap-3 text-center sm:text-left">
                <img src="./assets/Aperture.png" alt="" class="bg-[#ECE4FF] p-3 rounded-full w-12 h-12 sm:w-auto sm:h-auto">
                <div>
                    <h3 class="text-lg sm:text-xl font-semibold"><span id="totalCount"></span> Issues</h3>
                    <p class="text-sm sm:text-base text-gray-400">Track and manage your project issues</p>
                </div>
            </div>

            <div class="flex gap-4 sm:gap-5 items-center text-sm sm:text-base">
                <p class="flex items-center gap-2">
                    <span class="bg-primary p-1.5 rounded-full inline-block"></span> Open
                </p>
                <p class="flex items-center gap-2">
                    <span class="bg-success p-1.5 rounded-full inline-block"></span> Closed
                </p>
            </div>

        </div>

        <!-- isuues list -->
        <div id="card-container" class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mx-auto">
            <!-- <div class="card bg-base-100 shadow-sm p-1 border-t-5 border-success ">
                <div class=" p-4 space-y-2">
                    <div class="flex justify-between">
                    <img src="./assets/Open-Status.png" alt="" class="max-w-7">
                    <span class="badge badge-xs text-[#EF4444] bg-[#FEECEC] px-6 py-2.5 rounded-full text-[12px]">HIGH</span>
                    </div>
                    <div class="space-y-2 ">
                        <h2 class="text-[16px] font-semibold">Fix navigation menu on mobile devices</h2>
                        <p class="text-gray-400 text-[12px]">
                            The navigation menu doesn't collapse properly on mobile devices...
                        </p>
                        <div class="flex gap-3 items-start">
                            <span class="badge badge-xs text-[#EF4444] bg-[#FEECEC]  py-3.5 rounded-full text-[10px]"><i class="fa-solid fa-bug"></i>BUG</span>
                            <span class="badge badge-xs text-[#D97706] bg-[#FFF8DB]   py-3.5 rounded-full text-[10px]"><i class="fa-solid fa-life-ring"></i>HELP WANTED</span>
                        </div>

                    </div>
                </div>

                <hr class="border-b border-gray-200 w-">

                <div class="p-4">
                    <p class="text-gray-400 text-[12px]">#1by john_doe</p>
                    <p class="text-gray-400 text-[12px]">1/15/2024</p>
                </div>
            </div> -->
        </div>


    </section>

    </main>


<dialog id="issue_modal" class="modal">
  <div id="modal_content" class="modal-box w-11/12 max-w-3xl rounded-2xl p-8 bg-white shadow-xl">
      </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>
    <script src="./dashboard.js"></script>
</body>
</html>