From 0ebe55ee0e6fb60becf93935e86c319fa60b7192 Mon Sep 17 00:00:00 2001 From: Naomi Carrigan Date: Fri, 4 Jul 2025 15:03:36 -0700 Subject: [PATCH] feat: create home page --- client/src/app/home/home.css | 94 +++++++++++++++++++++++++++++++++ client/src/app/home/home.html | 20 ++++--- client/src/index.html | 6 +++ client/src/styles.css | 99 ++++++++++++++++++++++++++++++++++- 4 files changed, 212 insertions(+), 7 deletions(-) diff --git a/client/src/app/home/home.css b/client/src/app/home/home.css index e69de29..f54fb81 100644 --- a/client/src/app/home/home.css +++ b/client/src/app/home/home.css @@ -0,0 +1,94 @@ +ul { + list-style: none; + padding: 0; + margin: 0; +} + +#one { + transform: translateY(-200vh); + animation: slide-down 2s forwards; + font-size: 1.3rem; +} + +#two { + transform: translateY(200vh); + animation: slide-up 2s forwards 2s; +} + +#three { + transform: translateX(-200vw); + animation: slide-left 2s forwards 4s; +} + +#four { + transform: translateX(200vw); + animation: slide-right 2s forwards 6s; +} + +#five { + transform: translateX(-200vw); + animation: slide-left 2s forwards 8s; +} + +#six { + transform: translateX(200vw); + animation: slide-right 2s forwards 10s; +} + +#fade { + opacity: 0; + animation: fade-in 2s forwards 12s; + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + flex-wrap: wrap; +} + +.btn { + display: inline-block; + padding: 10px 20px; + background-color: var(--foreground); + color: var(--background); + text-decoration: none; + border-radius: 50px; + border: 2px solid white; +} + +.btn:hover { + background-color: var(--background); + color: var(--foreground); + transition: background-color 0.3s, color 0.3s; +} + +@keyframes slide-left { + 100% { transform: translateX(0%); } +} + +@keyframes slide-right { + 100% { transform: translateX(0%); } +} + +@keyframes slide-up { + 100% { transform: translateY(0%); } +} + +@keyframes slide-down { + 100% { transform: translateY(0%); } +} + +@keyframes fade-in { + 100% { opacity: 1; } +} + +@keyframes background-color { + 0% { background-color: var(--foreground); } + 100% { background-color: var(--background); } +} + +@media screen and (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transform: none !important; + } +} diff --git a/client/src/app/home/home.html b/client/src/app/home/home.html index 2652c7b..a03f754 100644 --- a/client/src/app/home/home.html +++ b/client/src/app/home/home.html @@ -1,8 +1,16 @@

Hi there, I'm Hikari~!

Hikari -

- I am here to help you with all of NHCarrigan's products, including things like managing your subscriptions and configuring applications! -

-

- Naomi is still hard at work bringing me to life! We would love to hear your thoughts in our community~! -

+

How may I help you today?

+

I can assist you with:

+ +
+ Browse Products + Manage Account + Modify Settings + Chat with Hikari +
diff --git a/client/src/index.html b/client/src/index.html index 7955438..a1178e9 100644 --- a/client/src/index.html +++ b/client/src/index.html @@ -12,4 +12,10 @@ + diff --git a/client/src/styles.css b/client/src/styles.css index 90d4ee0..a6fbbbd 100644 --- a/client/src/styles.css +++ b/client/src/styles.css @@ -1 +1,98 @@ -/* You can add global styles to this file, and also import other style files */ +@font-face { + font-family: 'OpenDyslexic'; + src: url('https://cdn.nhcarrigan.com/fonts/OpenDyslexicMono-Regular.otf') format('opentype'); +} + +:root { + --foreground: #2a0a18; + --background: #ffb6c1bb; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-family: 'OpenDyslexic', monospace; + cursor: url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto; + min-height: 100vh; + min-width: 100vw; +} +body::before { + background: url(https://cdn.nhcarrigan.com/background.png); + background-size: cover; + background-position: center; + width: 100%; + height: 100%; + z-index: -1; + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 1; + pointer-events: none; +} +main { + color: var(--foreground); + background-color: var(--background); + text-align: center; + border-radius: 10px; + width: 100vw; + margin-bottom: 85px; + min-height: calc(100vh - 85px); +} +footer { + width: 100%; + color: var(--foreground); + background-color: var(--background); + position: fixed; + bottom: 0; + height: 75px; + padding: 0 10px; +} +#footer-inner-container { + display: flex; + align-items: center; + justify-content: space-between; + height: 75px; +} +#footer-badge-container { + display: grid; + grid-template-columns: repeat(8, 1fr); + align-items: center; + justify-content: space-around; +} +#audio-theme-button, #theme-select-button { + background: none; + border: none; + cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer; + color: var(--foreground); +} +a { + color: unset; + cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer; +} +#tree-nation-offset-website { + display: flex; + align-items: center; +} +.is-dark { + --foreground: #ffb6c1; + --background: #2a0a18bb; +} +@media screen and (max-width: 625px) { + #tree-nation-offset-website { + display: none; + } + footer, #footer-inner-container { + height: 50px; + justify-content: space-around; + } + main { + margin-bottom: 60px; + } +}