responsive_dashboard_tw/index.html at master · Jorgylemos/responsive_dashboard_tw · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Development version -->
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  </head>
  <body>
    <main class="min-h-screen flex flex-col text-white bg-gray-800">
      <div class="flex-1 flex">
        <aside class="fixed min-h-full w-12 md:w-44 bg-gray-900 flex flex-col">
          <div
            class="flex items-center gap-2 justify-center mt-2 md:mt-5 bg-gray-950/20 md:hover:bg-gray-700 md:p-1 md:mx-3 rounded cursor-pointer"
          >
            <img
              src="https://picsum.photos/200"
              class="rounded-full w-10 md:w-10 flex"
              alt=""
            />
            <div class="md:flex flex-col hidden">
              <h1>John Doe</h1>
              <p class="text-xs">@johndoe</p>
            </div>
          </div>
          <nav
            class="flex-1 flex flex-col justify-center items-center md:justify-start md:items-start md:p-3 gap-4"
          >
            <a
              class="relative group gap-2 flex items-center p-1.5 bg-gray-950/60 hover:bg-gray-700 md:w-full md:px-2 md:py-1.5 rounded-full md:hover:rounded-full"
              href="index.html"
              ><span><i data-lucide="home" class=""></i></span
              ><span class="hidden md:block">Home</span
              ><span
                class="hidden md:group-hover:block rounded absolute w-4 h-4 bg-white right-3 rotate-45"
              ></span>
            </a>
            <a
              class="relative group gap-2 flex items-center p-1.5 bg-gray-950/60 hover:bg-gray-700 md:w-full md:px-2 md:py-1.5 rounded-full md:hover:rounded-full"
              href="pages/profile.html"
              ><span><i data-lucide="user-circle" class=""></i></span
              ><span class="hidden md:block">Profile</span
              ><span
                class="hidden md:group-hover:block rounded absolute w-4 h-4 bg-white right-3 rotate-45"
              ></span
            ></a>
            <a
              class="relative group gap-2 flex items-center p-1.5 bg-gray-950/60 hover:bg-gray-700 md:w-full md:px-2 md:py-1.5 rounded-full md:hover:rounded-full"
              href="pages/videos.html"
              ><span><i data-lucide="video" class=""></i></span
              ><span class="hidden md:block">Videos</span
              ><span
                class="hidden md:group-hover:block rounded absolute w-4 h-4 bg-white right-3 rotate-45"
              ></span
            ></a>
            <a
              class="relative group gap-2 flex items-center p-1.5 bg-gray-950/60 hover:bg-gray-700 md:w-full md:px-2 md:py-1.5 rounded-full md:hover:rounded-full"
              href="pages/settings.html"
              ><span><i data-lucide="settings" class=""></i></span
              ><span class="hidden md:block">Settings</span
              ><span
                class="hidden md:group-hover:block rounded absolute w-4 h-4 bg-white right-3 rotate-45"
              ></span
            ></a>

            <video
              src="https://www.w3schools.com/html/mov_bbb.mp4"
              class="rounded-xl border-4 border-gray-950/70 hidden md:block"
              autoplay
              muted
              loop
            ></video>
          </nav>
          <button
            class="py-1.5 md:py-2 rounded md:rounded-lg flex justify-center bg-gray-950 hover:bg-gray-700"
          >
            <span><i data-lucide="log-out" class="md:hidden"></i></span
            ><span class="hidden md:block">SignOut</span>
          </button>
        </aside>
        <div
          id="dashboardContent"
          class="space-y-4 ml-12 md:ml-44 min-h-full flex flex-col justify-center items-center w-full"
        >
          <h1 class="text-2xl md:text-6xl font-bold uppercase">
            Hello, <span class="italic font-light">World</span>!
          </h1>
          <h2 class="text-lg md:text-4xl font-semibold">
            Lorem ipsum dolor sit amet
          </h2>
          <p class="text-sm text-center">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel,
            similique? Possimus quasi expedita.
          </p>
          <button
            class="rounded bg-blue-500 hover:bg-blue-600 text-white font-medium py-1 px-4 md:py-2 md:px-6"
          >
            Click
          </button>
        </div>
      </div>
      <footer class="text-center">
        <span id="fullYear"></span> &copy; Developed By Jorge Lemos
      </footer>
    </main>
  </body>
  <script>
    let getFullYear = new Date().getFullYear();

    document.getElementById('fullYear').innerText = getFullYear;
    lucide.createIcons();
  </script>
</html>