feat: create home page

This commit is contained in:
2025-07-04 15:03:36 -07:00
parent 6b19de55f2
commit 0ebe55ee0e
4 changed files with 212 additions and 7 deletions

View File

@ -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;
}
}

View File

@ -1,8 +1,16 @@
<h1>Hi there, I'm Hikari~!</h1> <h1>Hi there, I'm Hikari~!</h1>
<img src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png" alt="Hikari" height="250" /> <img src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png" alt="Hikari" height="250" />
<p> <p id="one">How may I help you today?</p>
I am here to help you with all of NHCarrigan's products, including things like managing your subscriptions and configuring applications! <p id="two">I can assist you with:</p>
</p> <ul>
<p> <li id="three">Finding a product to suit your needs</li>
Naomi is still hard at work bringing me to life! We would love to hear your thoughts in our <a href="https://chat.nhcarrigan.com" target="_blank">community</a>~! <li id="four">Manage your account, subscriptions, and licenses</li>
</p> <li id="five">Modifying settings for individual products</li>
<li id="six">Answering your specific questions with a chat assistant</li>
</ul>
<div id="fade">
<a href="/products" class="btn">Browse Products</a>
<a href="/account" class="btn">Manage Account</a>
<a href="/settings" class="btn">Modify Settings</a>
<a href="/chat" class="btn">Chat with Hikari</a>
</div>

View File

@ -12,4 +12,10 @@
<app-root></app-root> <app-root></app-root>
</body> </body>
<script src="https://cdn.nhcarrigan.com/headers/index.js"></script> <script src="https://cdn.nhcarrigan.com/headers/index.js"></script>
<script>
const styleElement = document.getElementById("nhcarrigan-global-styles");
if (styleElement) {
styleElement.remove();
}
</script>
</html> </html>

View File

@ -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;
}
}