From de2c3c960fd8ec93082a50d064a7f64c9b16bc40 Mon Sep 17 00:00:00 2001 From: Corban-Lee Jones Date: Sun, 26 Jan 2025 01:02:29 +0000 Subject: [PATCH] writing page layout --- package.json | 1 + src/client/public/css/main.css | 60 +++++++ src/client/public/css/tailwind.css | 138 +++++++++++++- src/client/views/eee.ejs | 279 +++++++++++++++++++++++++++++ src/client/views/home.ejs | 43 ++++- src/client/views/layout.ejs | 239 ++++-------------------- src/server/controllers/home.js | 12 +- src/utils/avatarGen.js | 29 +++ 8 files changed, 592 insertions(+), 209 deletions(-) create mode 100644 src/client/views/eee.ejs create mode 100644 src/utils/avatarGen.js diff --git a/package.json b/package.json index 16d0a49..6c81953 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "license": "ISC", "description": "", "dependencies": { + "canvas": "^3.1.0", "discord.js": "^14.17.3", "dotenv": "^16.4.7", "ejs": "^3.1.10", diff --git a/src/client/public/css/main.css b/src/client/public/css/main.css index 74c7749..3c9d905 100644 --- a/src/client/public/css/main.css +++ b/src/client/public/css/main.css @@ -11,3 +11,63 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te .sidebar-btn { @apply flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200; } + + +.layout-sidebar-main { + @apply + [--auto-close:lg] + lg:block + lg:translate-x-0 + lg:end-auto + lg:bottom-0 + -translate-x-full + transition-all + duration-300 + + /* Position and Display */ + transform + w-64 + h-full + fixed + top-0 + start-0 + bottom-0 + z-[60] + + /* Colours and Border */ + bg-white + border-e + border-gray-200 + dark:bg-neutral-800 + dark:border-neutral-700; +} + +.layout-sidebar-guilds { + @apply + [--auto-close:lg] + lg:block + lg:translate-x-0 + lg:end-auto + lg:bottom-0 + -translate-x-full + transition-all + duration-300 + + /* Position and Display */ + transform + w-64 + h-full + /* hidden */ + fixed + top-0 + start-64 + bottom-0 + z-[60] + + /* Colours and Border */ + bg-white + border-e + border-gray-200 + dark:bg-neutral-800 + dark:border-neutral-700; +} diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css index 2e72599..0e01acb 100644 --- a/src/client/public/css/tailwind.css +++ b/src/client/public/css/tailwind.css @@ -731,6 +731,14 @@ video { margin-inline-end: 1.25rem; } +.ml-2 { + margin-left: 0.5rem; +} + +.ml-auto { + margin-left: auto; +} + .ms-0\.5 { margin-inline-start: 0.125rem; } @@ -755,6 +763,10 @@ video { margin-top: 0.5rem; } +.mt-5 { + margin-top: 1.25rem; +} + .mt-auto { margin-top: auto; } @@ -826,6 +838,11 @@ video { height: 2rem; } +.size-\[34px\] { + width: 34px; + height: 34px; +} + .size-\[38px\] { width: 38px; height: 38px; @@ -839,6 +856,10 @@ video { height: 0.5rem; } +.h-\[32px\] { + height: 32px; +} + .h-auto { height: auto; } @@ -1038,6 +1059,10 @@ video { border-radius: 0.125rem !important; } +.rounded { + border-radius: 0.25rem; +} + .rounded-full { border-radius: 9999px; } @@ -1140,6 +1165,11 @@ video { background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); } +.bg-neutral-100 { + --tw-bg-opacity: 1; + background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)); +} + .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); @@ -1182,6 +1212,11 @@ video { padding-bottom: 0.125rem !important; } +.px-2\.5 { + padding-left: 0.625rem; + padding-right: 0.625rem; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -1217,6 +1252,15 @@ video { padding-bottom: 0.75rem; } +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.pb-1 { + padding-bottom: 0.25rem; +} + .pe-1 { padding-inline-end: 0.25rem; } @@ -1265,11 +1309,20 @@ video { vertical-align: bottom; } +.font-mono { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + .\!text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; } +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + .text-\[12px\] { font-size: 12px; } @@ -1467,6 +1520,82 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1)); } +.layout-sidebar-main { + position: fixed; + top: 0px; + inset-inline-start: 0px; + bottom: 0px; + z-index: 60; + height: 100%; + width: 16rem; + --tw-translate-x: -100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-inline-end-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + --auto-close: lg; +} + +@media (min-width: 1024px) { + .layout-sidebar-main { + inset-inline-end: auto; + bottom: 0px; + display: block; + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } +} + +.layout-sidebar-main:where(.dark, .dark *) { + --tw-border-opacity: 1; + border-color: rgb(64 64 64 / var(--tw-border-opacity, 1)); + --tw-bg-opacity: 1; + background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)); +} + +.layout-sidebar-guilds { + position: fixed; + top: 0px; + inset-inline-start: 16rem; + bottom: 0px; + z-index: 60; + height: 100%; + width: 16rem; + --tw-translate-x: -100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + border-inline-end-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + --auto-close: lg; +} + +@media (min-width: 1024px) { + .layout-sidebar-guilds { + inset-inline-end: auto; + bottom: 0px; + display: block; + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } +} + +.layout-sidebar-guilds:where(.dark, .dark *) { + --tw-border-opacity: 1; + border-color: rgb(64 64 64 / var(--tw-border-opacity, 1)); + --tw-bg-opacity: 1; + background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)); +} + .before\:absolute::before { content: var(--tw-content); position: absolute; @@ -1688,10 +1817,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te display: flex !important; } -.dark .hs-dark-mode-active\:flex { - display: flex; -} - .dark .hs-dark-mode-active\:hidden { display: none; } @@ -1850,6 +1975,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te color: rgb(59 130 246 / var(--tw-text-opacity, 1)); } +.dark\:text-gray-400:where(.dark, .dark *) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity, 1)); +} + .dark\:text-neutral-200:where(.dark, .dark *) { --tw-text-opacity: 1; color: rgb(229 229 229 / var(--tw-text-opacity, 1)); diff --git a/src/client/views/eee.ejs b/src/client/views/eee.ejs new file mode 100644 index 0000000..2f49ba4 --- /dev/null +++ b/src/client/views/eee.ejs @@ -0,0 +1,279 @@ + + + + + + <%= title %> + + + +
+ +
+ +
+ +
+
+ + + + + +
    +
  1. + Application Layout + + + +
    2. +
  2. + Dashboard +
    3. +
+ +
+
+ +
+ + + + + + +
+
+ <%- body -%> +
+
+ + + + + \ No newline at end of file diff --git a/src/client/views/home.ejs b/src/client/views/home.ejs index a02f292..550e8ec 100644 --- a/src/client/views/home.ejs +++ b/src/client/views/home.ejs @@ -1,3 +1,44 @@ <% layout("layout") -%> -test \ No newline at end of file +

Home Page

+ +

+ This is some placeholder text. +

+ +

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla aliquid temporibus sed odit blanditiis, repellendus id quibusdam voluptas harum vel culpa eligendi nihil corporis exercitationem ipsam a, deserunt voluptatibus soluta. + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi fugit necessitatibus assumenda eum. Sint est officiis ad laborum, dolores, illum explicabo error, doloribus repudiandae animi quis quam mollitia expedita fugiat! + Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum asperiores provident et expedita ea unde vitae aut blanditiis, beatae sed rem a ad, quis quia dolorem ullam omnis magni sit? + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio ipsum voluptatibus enim laboriosam dolorem eveniet. Vitae cumque recusandae molestias molestiae necessitatibus nam quidem incidunt officia dignissimos, facilis, mollitia quaerat ad. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate hic odio non ad expedita itaque accusantium nostrum. Veritatis provident quaerat, quibusdam ullam possimus beatae corrupti repudiandae! Accusantium dolorem enim cupiditate? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ullam exercitationem voluptas ducimus, veritatis repellat mollitia inventore recusandae tempore numquam voluptatibus dolores perferendis minima ut omnis, corrupti deserunt. Debitis, fuga? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero natus quod iure id cum a eligendi et laudantium in incidunt, consequatur perspiciatis aliquid aliquam eaque debitis deserunt. Alias, accusamus veniam. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, laudantium. Reprehenderit beatae autem illum et similique nesciunt suscipit? Quo dignissimos delectus minus, distinctio vero nesciunt iusto architecto accusamus eius iste. + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor harum vero, ut laboriosam error dolores itaque animi quo accusamus consectetur. Distinctio pariatur quo iste dolorem a nobis eum fuga delectus. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit cumque rerum commodi aut modi maiores, incidunt suscipit odit? Natus aspernatur amet, est sapiente cupiditate consequuntur nam rerum autem accusamus culpa! + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere quaerat rem amet, laboriosam eius facilis minus pariatur magnam ea molestiae totam vitae suscipit veniam nihil explicabo voluptatibus sequi deleniti. Earum! + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam dolores exercitationem voluptas qui dolor consequuntur nostrum quidem, similique, incidunt voluptatum cum nulla. Quis odio ducimus cum eos saepe officiis at. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni ratione quaerat, sequi nostrum eius odio corrupti deserunt corporis, voluptates ex quas hic laborum non consequatur neque commodi, fuga inventore assumenda. + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam aperiam distinctio numquam esse perferendis, placeat, pariatur consequatur nulla atque amet voluptatem molestiae quasi veniam quis sunt similique, modi ipsam! Consectetur! +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo consequuntur neque numquam quam cumque dolores debitis dolorum exercitationem ratione optio fuga libero itaque, et ut. Tempore repellendus sit impedit illo. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet velit natus inventore unde rerum nemo, aliquam cum nihil mollitia eligendi. Iusto aliquam ea molestias, nobis nostrum expedita delectus neque saepe. + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos odit sint cumque et perspiciatis debitis magnam inventore ratione magni, architecto sequi vel ipsum sunt id minus vitae necessitatibus, neque voluptatem! + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, delectus facere enim veritatis reiciendis esse non ex perspiciatis explicabo incidunt pariatur fuga impedit officiis doloribus commodi quam deleniti fugiat modi. + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste odit consequuntur neque, voluptate aut similique cupiditate ex asperiores excepturi unde sed totam sapiente, placeat praesentium sit corrupti officia minima veritatis. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum rem quidem omnis fuga aspernatur, error qui maiores blanditiis rerum suscipit enim, totam vero, eligendi beatae laudantium inventore cumque mollitia impedit. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur, maxime soluta consequuntur est ullam quia dolor, consequatur quasi ut porro ipsam! Maxime labore obcaecati dolorum, reprehenderit sunt repudiandae consequuntur assumenda. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae atque explicabo consequuntur quo totam similique magni laboriosam, reprehenderit quos deleniti pariatur ab esse sed fugiat accusantium veritatis, voluptas possimus ut? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio ducimus esse quae ad sapiente possimus quisquam dolorum ab error, voluptatum libero eveniet tenetur dignissimos id sunt, ullam, facere corrupti eaque. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus laborum id temporibus quis eveniet. Accusantium consequatur, beatae et facilis natus pariatur vitae aliquam possimus. Enim ratione odio harum eos hic? +

diff --git a/src/client/views/layout.ejs b/src/client/views/layout.ejs index c3dfe74..a545ff9 100644 --- a/src/client/views/layout.ejs +++ b/src/client/views/layout.ejs @@ -6,229 +6,62 @@ <%= title %> - -
-