diff --git a/admin-dashboard/css/style.css b/admin-dashboard/css/style.css new file mode 100644 index 0000000..d1e5275 --- /dev/null +++ b/admin-dashboard/css/style.css @@ -0,0 +1,159 @@ + +:root { + --dark-bg: #2C3639; + --light-bg: #DCD7C9; + --dark-bg-color-2: #EBE3D5; + --content-color: #FAF6F0; + --card-color: #B0A695; +} + +* { + margin: 0; + padding: 0; +} + +.container { + display: grid; + grid-template-columns: 1fr 5fr; +} + +.sidebar { + grid-row: 1 / 3; + background-color: var(--dark-bg); + color: var(--light-bg); +} + +.navbar { + grid-column: 1 / 2; + display: grid; + grid-template-rows: repeat(auto-fit, minmax(60px, 1fr)); + justify-content: center; + gap: 40px; +} + +.navbar ul>a>h1 { + display: flex; + align-items: center; + gap: 1.3rem; + font-size: 2rem; +} + +.topbar-header { + margin: 12px 0; +} + +.topbar-header > [class="material-symbols-outlined"] { + font-size: 40px; +} + +.navbar ul>a>li { + display: flex; + align-items: center; + gap: 1rem; + font-size: 1.4rem; + padding: 5px; + margin-top: 20px; + margin-left: 10px; + margin-bottom: 10px; +} + + +.topbar { + background-color: var(--dark-bg-color-2); + box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); + grid-row: 1 / 1; + grid-column: 2 / 3; + margin: 20px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.topbar ul { + padding: 20px; + display: flex; + justify-content: flex-start; + gap: 20px; + margin-left: 10px; +} + +.topbar .user-info { + margin-right: 20px; + align-self: center; + +} + +.user-info { + display: flex; + justify-content: center; + gap: 20px; +} + +.user-info img { + height: 2.2rem; + border: 2px #2C3639 solid; + border-radius: 50%; +} + +.user-info span { + font-size: 2.2rem; +} + +.content-header { + margin-left: 20px; + margin-top: 20px; +} + + +.cards { + grid-column: 2 / 3; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + padding: 20px; + gap: 20px; +} + +.card { + word-wrap: wrap; + min-width: 300px; + padding: 20px; + border-radius: 2%; + background-color: var(--card-color); +} + +.card h1 { + font-size: 1.5rem; + margin-bottom: 6px; + text-align: left; + padding: 8px; +} + +.card p { + font-size: 0.9rem; + padding: 8px; +} + +.card-icons { + margin: 5px; + display: flex; + justify-content: flex-end; +} + + +ul { + list-style-type: none; +} + +body { + font-family: 'Fira Sans', sans-serif; + font-size: 16px; + margin: 0; + padding: 0; + background-color: var(--light-bg); +} + +a { + text-decoration: none; + color: inherit; +} diff --git a/admin-dashboard/index.html b/admin-dashboard/index.html new file mode 100644 index 0000000..1fe877e --- /dev/null +++ b/admin-dashboard/index.html @@ -0,0 +1,235 @@ + + + + + + + + + + + + + + Admin Dashboard + + + +
+
+
+
+
    +
  • New
    • +
  • Upload
    • +
  • Share
    • +
+
+ +
+
+
+ +
+ +
+

User stories

+
+
+

Some important Stuff!

+

+ Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec + nec + ante dictum, hendrerit dui id, mattis arcu. + In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum + mauris at, + placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+ share + more_vert +
+
+
+

Some important Stuff!

+

+ Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec + nec + ante dictum, hendrerit dui id, mattis arcu. + In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum + mauris at, + placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+ share + more_vert +
+
+
+

Some important Stuff!

+

+ Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec + nec + ante dictum, hendrerit dui id, mattis arcu. + In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum + mauris at, + placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+ share + more_vert +
+
+
+

Some important Stuff!

+

+ Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec + nec + ante dictum, hendrerit dui id, mattis arcu. + In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum + mauris at, + placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+ share + more_vert +
+
+
+

Some important Stuff!

+

+ Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec + nec + ante dictum, hendrerit dui id, mattis arcu. + In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum + mauris at, + placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+ share + more_vert +
+
+
+

Some important Stuff!

+

+ Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec + nec + ante dictum, hendrerit dui id, mattis arcu. + In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum + mauris at, + placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+ share + more_vert +
+
+
+

Some important Stuff!

+

+ Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec + nec + ante dictum, hendrerit dui id, mattis arcu. + In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum + mauris at, + placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+ share + more_vert +
+
+
+

Some important Stuff!

+

+ Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec + nec + ante dictum, hendrerit dui id, mattis arcu. + In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum + mauris at, + placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+ share + more_vert +
+
+
+

Some important Stuff!

+

+ Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec + nec + ante dictum, hendrerit dui id, mattis arcu. + In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum + mauris at, + placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+ share + more_vert +
+
+
+

Some important Stuff!

+

+ Pellentesque quis ligula ac enim sollicitudin feugiat ac et mi. Aenean in sodales ligula. Donec + nec + ante dictum, hendrerit dui id, mattis arcu. + In risus nunc, fringilla id pretium ut, mattis id dui. Sed mauris justo, condimentum elementum + mauris at, + placerat hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+ share + more_vert +
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/admin-dashboard/js/script.js b/admin-dashboard/js/script.js new file mode 100644 index 0000000..e69de29 diff --git a/admin-dashboard/static/logo.png b/admin-dashboard/static/logo.png new file mode 100644 index 0000000..5bded5c Binary files /dev/null and b/admin-dashboard/static/logo.png differ