generated from nhcarrigan/template
feat: build out project dashboard (#2)
All checks were successful
Node.js CI / Lint and Test (push) Successful in 57s
All checks were successful
Node.js CI / Lint and Test (push) Successful in 57s
### Explanation This creates an interactive product directory to help potential consumers discover our works. ### Issue _No response_ ### Attestations - [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [x] I have pinned the dependencies to a specific patch version. ### Style - [x] I have run the linter and resolved any errors. - [x] My pull request uses an appropriate title, matching the conventional commit standards. - [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [ ] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [ ] All new and existing tests pass locally with my changes. - [ ] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning _No response_ Reviewed-on: #2 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit is contained in:
@ -1,3 +1,4 @@
|
||||
<app-nav></app-nav>
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
|
||||
@ -6,7 +6,11 @@
|
||||
|
||||
import { Routes } from "@angular/router";
|
||||
import { Home } from "./home/home.js";
|
||||
import { Products } from "./products/products.js";
|
||||
import { Soon } from "./soon/soon.js";
|
||||
|
||||
export const routes: Routes = [
|
||||
{ component: Home, path: "", pathMatch: "full" },
|
||||
{ component: Products, path: "products" },
|
||||
{ component: Soon, path: "**" },
|
||||
];
|
||||
|
||||
@ -6,9 +6,10 @@
|
||||
|
||||
import { Component } from "@angular/core";
|
||||
import { RouterOutlet } from "@angular/router";
|
||||
import { Nav } from "./nav/nav.js";
|
||||
|
||||
@Component({
|
||||
imports: [ RouterOutlet ],
|
||||
imports: [ RouterOutlet, Nav ],
|
||||
selector: "app-root",
|
||||
styleUrl: "./app.css",
|
||||
templateUrl: "./app.html",
|
||||
|
||||
473
client/src/app/config/products.ts
Normal file
473
client/src/app/config/products.ts
Normal file
@ -0,0 +1,473 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
/* eslint-disable stylistic/max-len -- we are going to have long descriptions here. */
|
||||
/* eslint-disable max-lines -- Big ol' config!*/
|
||||
|
||||
export const products: Array<{
|
||||
name: string;
|
||||
description: string;
|
||||
url: string | null;
|
||||
wip: boolean;
|
||||
category: "community" | "websites" | "apps";
|
||||
premium: boolean;
|
||||
avatar: string | null;
|
||||
}> = [
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/rosalia.png",
|
||||
category: "websites",
|
||||
description:
|
||||
"Our global logging server, which pipes logs from all of our apps into a Discord webhook and our email inbox.",
|
||||
name: "Rosalia Nightsong",
|
||||
premium: false,
|
||||
url: "https://rosalia.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: null,
|
||||
category: "websites",
|
||||
description:
|
||||
"Our self-hosted LibreTranslate instance, which powers some of our apps and is available for subscribers.",
|
||||
name: "Translation Service",
|
||||
premium: true,
|
||||
url: "https://trans.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/aria.png",
|
||||
category: "community",
|
||||
description:
|
||||
"A user-installable bot that allows you to translate any message into your preferred language.",
|
||||
name: "Aria Iuvo",
|
||||
premium: true,
|
||||
url: "https://aria.nhcarrigan.com/",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/becca.png",
|
||||
category: "community",
|
||||
description:
|
||||
"A user-installable Discord app that facilitates a solo Dungeons and Dragons experience in private messages.",
|
||||
name: "Becca Lyria",
|
||||
premium: true,
|
||||
url: "https://becca.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/cordelia.png",
|
||||
category: "community",
|
||||
description:
|
||||
"A user-installable Discord app that allows you to ask questions, generate alt text for images, evaluate code, and more.",
|
||||
name: "Cordelia Taryne",
|
||||
premium: true,
|
||||
url: "https://cordelia.nhcarrigan.com/",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/gwen.png",
|
||||
category: "community",
|
||||
description: "A ticketing system for Discord servers.",
|
||||
name: "Gwen Abalise",
|
||||
premium: true,
|
||||
url: "https://gwen.nhcarrigan.com/",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/maylin.png",
|
||||
category: "community",
|
||||
description: "A helpful and supportive Discord bot that allows you to have conversations with a virtual friend in private messages.",
|
||||
name: "Maylin Taryne",
|
||||
premium: true,
|
||||
url: "https://maylin.nhcarrigan.com/",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/melody.png",
|
||||
category: "community",
|
||||
description: "A user-installable task management application for Discord.",
|
||||
name: "Melody Iuvo",
|
||||
premium: true,
|
||||
url: "https://melody.nhcarrigan.com/",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/beccalia.png",
|
||||
category: "apps",
|
||||
description: "Originally planned as the story of Becca and Rosalia growing up, this game was only released as a demo.",
|
||||
name: "Beccalia: Origins",
|
||||
premium: false,
|
||||
url: "https://beccalia.nhcarrigan.com/origins",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/beccalia.png",
|
||||
category: "apps",
|
||||
description: "An introductory story that sets the stage for the Beccalia universe, featuring Becca and Rosalia.",
|
||||
name: "Beccalia: Prologue",
|
||||
premium: false,
|
||||
url: "https://beccalia.nhcarrigan.com/prologue",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/profile.png",
|
||||
category: "apps",
|
||||
description: "A quick game that introduces who Naomi is, and provides a glimpse into her life.",
|
||||
name: "Life of a Naomi",
|
||||
premium: false,
|
||||
url: "https://loan.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: null,
|
||||
category: "apps",
|
||||
description: "A game developed for our friend Ruu's game jam.",
|
||||
name: "Ruu's Goblin Quest",
|
||||
premium: false,
|
||||
url: "https://goblin.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/profile.png",
|
||||
category: "websites",
|
||||
description: "The personal musings of our founder, Naomi Carrigan.",
|
||||
name: "Naomi's Blog",
|
||||
premium: false,
|
||||
url: "https://blog.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/nymira.png",
|
||||
category: "websites",
|
||||
description: "A service that allows you to claim a custom <username>.naomi.party username for Bluesky.",
|
||||
name: "Nymira",
|
||||
premium: true,
|
||||
url: "https://naomi.party",
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: null,
|
||||
category: "websites",
|
||||
description: "A website outlining our policies, legal agreements, community rules, and product information.",
|
||||
name: "NHCarrigan Documentation",
|
||||
premium: false,
|
||||
url: "https://docs.nhcarrigan.com",
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: null,
|
||||
category: "websites",
|
||||
description: "A self-hosted Discourse instance for our community.",
|
||||
name: "Fourm",
|
||||
premium: false,
|
||||
url: "https://forum.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: null,
|
||||
category: "websites",
|
||||
description: "A self-hosted Gitea instance to hold all of our source code.",
|
||||
name: "Gitea",
|
||||
premium: false,
|
||||
url: "https://git.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/hikari.png",
|
||||
category: "websites",
|
||||
description: "This dashboard!",
|
||||
name: "Hikari",
|
||||
premium: false,
|
||||
url: "https://hikari.nhcarrigan.com",
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: null,
|
||||
category: "community",
|
||||
description: "A Discord, Slack, and Bluesky bot that provides you motherly love and encouragement.",
|
||||
name: "Mommy Bot",
|
||||
premium: false,
|
||||
url: "https://mommy-bot.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: null,
|
||||
category: "websites",
|
||||
description: "A quick web app that provides you motherly love and encouragements.",
|
||||
name: "Mommy",
|
||||
premium: false,
|
||||
url: "https://mommy.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/lucinda.png",
|
||||
category: "websites",
|
||||
description: "A kanban-style task management site.",
|
||||
name: "Lucinda",
|
||||
premium: false,
|
||||
url: "https://lucinda.nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: null,
|
||||
category: "websites",
|
||||
description: "Our homepage and marketing landing.",
|
||||
name: "NHCarrigan",
|
||||
premium: false,
|
||||
url: "https://nhcarrigan.com",
|
||||
wip: false,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/vitalia.png",
|
||||
category: "websites",
|
||||
description: "A full-featured nutrition tracker with community-driven nutrient data.",
|
||||
name: "Vitalia",
|
||||
premium: true,
|
||||
url: "https://vitalia.nhcarrigan.com",
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/octavia.png",
|
||||
category: "apps",
|
||||
description: "Linux-native music player application with a focus on handling large libraries with minimal memory.",
|
||||
name: "Octavia",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/maribelle.png",
|
||||
category: "community",
|
||||
description: "A Discord bot that allows you to configure daily progress huddle reminders for your server members.",
|
||||
name: "Maribelle",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/sorielle.png",
|
||||
category: "community",
|
||||
description: "A Discord bot that allows servers to specify a venting channel for automatic deletion.",
|
||||
name: "Sorielle",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/verena.png",
|
||||
category: "community",
|
||||
description: "A Discord bot that allows identity and age verification.",
|
||||
name: "Verena",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/thalassa.png",
|
||||
category: "apps",
|
||||
description: "A rich presence application for Linux.",
|
||||
name: "Thalassa",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/aeris.png",
|
||||
category: "websites",
|
||||
description: "An authentication service featuring magic links and support for multiple social media platforms",
|
||||
name: "Aeris",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/liora.png",
|
||||
category: "community",
|
||||
description: "A Discord bot that allows your server members to specify 'highlight' words, which they'll get pinged on if a message contains that word.",
|
||||
name: "Liora",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/thessalia.png",
|
||||
category: "community",
|
||||
description: "An RPG game on Discord",
|
||||
name: "Thessalia",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/callista.png",
|
||||
category: "community",
|
||||
description: "A user-installable Discord bot that allows you to bookmark messages and save a link and copy in your DMs.",
|
||||
name: "Callista",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/isolda.png",
|
||||
category: "apps",
|
||||
description: "Modern, sleek email client for the web or desktop",
|
||||
name: "Isolda",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/meliora.png",
|
||||
category: "websites",
|
||||
description: "Embeddable chat widget, comment section, and full support flow utility.",
|
||||
name: "Meliora",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/aurelia.png",
|
||||
category: "websites",
|
||||
description: "Blogging platform with markdown editor",
|
||||
name: "Aurelia",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/eirene.png",
|
||||
category: "community",
|
||||
description: "Website and Discord activity that allows you to participate in code challenges competitively or collaboratively",
|
||||
name: "Eirene",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/amirei.png",
|
||||
category: "websites",
|
||||
description: "A quick social link aggregator for 'link in bio' pages.",
|
||||
name: "Amirei",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/zephra.png",
|
||||
category: "websites",
|
||||
description: "Microblogging social media platform.",
|
||||
name: "Zephra",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/oriana.png",
|
||||
category: "websites",
|
||||
description: "Uptime monitoring tool with status pages",
|
||||
name: "Oriana",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/lyra.png",
|
||||
category: "websites",
|
||||
description: "A web-based API mocking tool, allowing you to create temporary endpoints for a front-end to hit, test webhook payloads, and more!",
|
||||
name: "Lyra",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/selene.png",
|
||||
category: "apps",
|
||||
description: "A local-only privacy-focused REST API client.",
|
||||
name: "Selene",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/sybil.png",
|
||||
category: "community",
|
||||
description: "A Discord bot that syndicates forum threads to an indexable website and generates help articles based on resolved conversations.",
|
||||
name: "Sybil",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/calenelle.png",
|
||||
category: "websites",
|
||||
description: "A group coordination app with event scheduling and such.",
|
||||
name: "Calenelle",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/rowena.png",
|
||||
category: "websites",
|
||||
description: "Web app that allows you to create and share forms, and track responses in a user friendly table.",
|
||||
name: "Rowena",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/alouette.png",
|
||||
category: "websites",
|
||||
description: "A web server that allows you to set up arbitrary webhooks and format them to post on Discord.",
|
||||
name: "Alouette",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/clarion.png",
|
||||
category: "community",
|
||||
description: "A Discord bot with dashboard that allows server mangers to post and edit announcements, rules, and similar.",
|
||||
name: "Clarion",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/elowyn.png",
|
||||
category: "websites",
|
||||
description: "A quick website that helps you format text.",
|
||||
name: "Elowyn",
|
||||
premium: false,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/evangeline.png",
|
||||
category: "community",
|
||||
description: "A Discord bot that allows you to configure canned replies, retrieve them anywhere on discord, and easily copy + paste them into chat.",
|
||||
name: "Evangeline",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/theodora.png",
|
||||
category: "community",
|
||||
description: "A Discord bot that generates 100 days of code reminders.",
|
||||
name: "Theodora",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
{
|
||||
avatar: "https://cdn.nhcarrigan.com/new-avatars/vivienne.png",
|
||||
category: "websites",
|
||||
description: "An RSS feed reader/management site.",
|
||||
name: "Vivienne",
|
||||
premium: true,
|
||||
url: null,
|
||||
wip: true,
|
||||
},
|
||||
];
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,20 @@
|
||||
<h1>Hi there, I'm Hikari~!</h1>
|
||||
<img src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png" alt="Hikari" height="250" />
|
||||
<p>
|
||||
I am here to help you with all of NHCarrigan's products, including things like managing your subscriptions and configuring applications!
|
||||
</p>
|
||||
<p>
|
||||
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>~!
|
||||
</p>
|
||||
<img
|
||||
src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png"
|
||||
alt="Hikari"
|
||||
height="250"
|
||||
/>
|
||||
<p id="one">How may I help you today?</p>
|
||||
<p id="two">I can assist you with:</p>
|
||||
<ul>
|
||||
<li id="three">Finding a product to suit your needs</li>
|
||||
<li id="four">Manage your account, subscriptions, and licenses</li>
|
||||
<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>
|
||||
|
||||
65
client/src/app/nav/nav.css
Normal file
65
client/src/app/nav/nav.css
Normal file
@ -0,0 +1,65 @@
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
color: var(--foreground);
|
||||
background-color: var(--background);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
nav a:not(#logo) {
|
||||
text-decoration: none;
|
||||
padding: 0 15px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
nav a:hover:not(#logo) {
|
||||
text-decoration: underline;
|
||||
color: var(--background);
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 30px;
|
||||
width: auto;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-top: 1px solid var(--foreground);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown.open {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 40px;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
border: 1px solid var(--foreground);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
|
||||
text-decoration: none;
|
||||
font-size: 2rem;
|
||||
}
|
||||
19
client/src/app/nav/nav.html
Normal file
19
client/src/app/nav/nav.html
Normal file
@ -0,0 +1,19 @@
|
||||
<nav>
|
||||
<a href="/" id="logo"
|
||||
><img src="https://cdn.nhcarrigan.com/logo.png" alt="Logo" /><span id="name"
|
||||
>Hikari</span
|
||||
></a
|
||||
>
|
||||
<div [class]="dropdownClass">
|
||||
<a href="/products" class="nav-link">Products</a>
|
||||
<hr />
|
||||
<a href="/account" class="nav-link">Account</a>
|
||||
<hr />
|
||||
<a href="/settings" class="nav-link">Settings</a>
|
||||
<hr />
|
||||
<a href="/chat" class="nav-link">Chat</a>
|
||||
<hr />
|
||||
</div>
|
||||
<i class="fa-solid fa-bars" *ngIf="!navOpen" (click)="toggleNav()"></i>
|
||||
<i class="fa-solid fa-times" *ngIf="navOpen" (click)="toggleNav()"></i>
|
||||
</nav>
|
||||
28
client/src/app/nav/nav.ts
Normal file
28
client/src/app/nav/nav.ts
Normal file
@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
imports: [ CommonModule ],
|
||||
selector: "app-nav",
|
||||
styleUrl: "./nav.css",
|
||||
templateUrl: "./nav.html",
|
||||
})
|
||||
export class Nav {
|
||||
public navOpen = false;
|
||||
public dropdownClass = "dropdown";
|
||||
|
||||
public toggleNav(): void {
|
||||
this.navOpen = !this.navOpen;
|
||||
if (this.navOpen) {
|
||||
this.dropdownClass = "dropdown open";
|
||||
} else {
|
||||
this.dropdownClass = "dropdown";
|
||||
}
|
||||
}
|
||||
}
|
||||
85
client/src/app/products/products.css
Normal file
85
client/src/app/products/products.css
Normal file
@ -0,0 +1,85 @@
|
||||
a.product {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.product:hover {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.product:not(a) {
|
||||
cursor: default;
|
||||
border: 2px dashed grey;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: var(--foreground);
|
||||
color: var(--background);
|
||||
text-decoration: none;
|
||||
border-radius: 50px;
|
||||
border: 2px solid white;
|
||||
font-family: 'OpenDyslexic', monospace;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.product {
|
||||
display: grid;
|
||||
grid-template-areas: "logo title icon" "logo description icon";
|
||||
grid-template-columns: 100px 1fr auto;
|
||||
background-color: var(--foreground);
|
||||
color: var(--background);
|
||||
border: 2px solid white;
|
||||
border-radius: 50px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding-right: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icons {
|
||||
grid-area: icon;
|
||||
font-size: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-area: title;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-area: description;
|
||||
font-size: 1rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
grid-area: logo;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
150
client/src/app/products/products.html
Normal file
150
client/src/app/products/products.html
Normal file
@ -0,0 +1,150 @@
|
||||
<h1>Products</h1>
|
||||
<img
|
||||
src="https://cdn.nhcarrigan.com/new-avatars/hikari-thinking-full.png"
|
||||
alt="Hikari"
|
||||
height="250"
|
||||
/>
|
||||
<p>Excellent! What sort of product are you looking for?</p>
|
||||
<div class="row">
|
||||
<button
|
||||
class="btn"
|
||||
(click)="selectCategory('community')"
|
||||
[disabled]="view === 'community' ? true : false"
|
||||
>
|
||||
Community Tooling and Integrations
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
(click)="selectCategory('websites')"
|
||||
[disabled]="view === 'websites' ? true : false"
|
||||
>
|
||||
Websites and APIs
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
(click)="selectCategory('apps')"
|
||||
[disabled]="view === 'apps' ? true : false"
|
||||
>
|
||||
Apps and Games
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
(click)="selectCategory('all')"
|
||||
[disabled]="view === 'all' ? true : false"
|
||||
>
|
||||
Show Me Everything!
|
||||
</button>
|
||||
</div>
|
||||
<p>And would you like to apply a filter?</p>
|
||||
<div class="row">
|
||||
<button class="btn" (click)="toggleFilter('wip')">
|
||||
<span *ngIf="filters.wip">Hide</span
|
||||
><span *ngIf="!filters.wip">Show</span> WIP
|
||||
</button>
|
||||
<button class="btn" (click)="toggleFilter('prod')">
|
||||
<span *ngIf="filters.prod">Hide</span
|
||||
><span *ngIf="!filters.prod">Show</span> Production
|
||||
</button>
|
||||
<button class="btn" (click)="toggleFilter('paid')">
|
||||
<span *ngIf="filters.paid">Hide</span
|
||||
><span *ngIf="!filters.paid">Show</span> Paid
|
||||
</button>
|
||||
<button class="btn" (click)="toggleFilter('free')">
|
||||
<span *ngIf="filters.free">Hide</span
|
||||
><span *ngIf="!filters.free">Show</span> Free
|
||||
</button>
|
||||
</div>
|
||||
<hr />
|
||||
<p *ngIf="products.length === 0">
|
||||
Oh dear, it appears there are no products in this category yet! Please check
|
||||
back later.
|
||||
</p>
|
||||
<div id="products">
|
||||
<div *ngFor="let product of products">
|
||||
<!-- Render as <a> if product has a URL -->
|
||||
<a
|
||||
*ngIf="product.url"
|
||||
[class]="product.wip ? 'product wip' : 'product'"
|
||||
[href]="product.url"
|
||||
target="_blank"
|
||||
>
|
||||
<h2 class="title">{{ product.name }}</h2>
|
||||
<img
|
||||
class="logo"
|
||||
[src]="product.avatar ?? 'https://cdn.nhcarrigan.com/logo.png'"
|
||||
alt="{{ product.name }} Logo"
|
||||
/>
|
||||
<p class="description">{{ product.description }}</p>
|
||||
<div class="icons">
|
||||
<i
|
||||
title="Under construction"
|
||||
*ngIf="product.wip"
|
||||
class="fa-solid fa-wrench"
|
||||
style="color: rgb(141, 23, 23)"
|
||||
></i>
|
||||
<i
|
||||
title="Production Ready"
|
||||
*ngIf="!product.wip"
|
||||
class="fa-solid fa-check"
|
||||
style="color: rgb(31, 117, 19)"
|
||||
></i>
|
||||
<i
|
||||
title="Requires Subscription"
|
||||
*ngIf="product.premium"
|
||||
class="fa-solid fa-money-bill-1-wave"
|
||||
style="color: rgb(145, 129, 40)"
|
||||
></i>
|
||||
<i
|
||||
title="Free to Use"
|
||||
*ngIf="!product.premium"
|
||||
class="fa-solid fa-piggy-bank"
|
||||
style="color: rgb(116, 37, 206)"
|
||||
></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Render as <div> if no URL -->
|
||||
<div *ngIf="!product.url" [class]="product.wip ? 'product wip' : 'product'">
|
||||
<h2 class="title">{{ product.name }}</h2>
|
||||
<img
|
||||
class="logo"
|
||||
[src]="product.avatar ?? 'https://cdn.nhcarrigan.com/logo.png'"
|
||||
alt="{{ product.name }} Logo"
|
||||
/>
|
||||
<p class="description">{{ product.description }}</p>
|
||||
<div *ngIf="product.wip || product.premium" class="icons">
|
||||
<i
|
||||
title="Under construction"
|
||||
*ngIf="product.wip"
|
||||
class="fa-solid fa-wrench"
|
||||
style="color: rgb(141, 23, 23)"
|
||||
></i>
|
||||
<i
|
||||
title="Production Ready"
|
||||
*ngIf="!product.wip"
|
||||
class="fa-solid fa-check"
|
||||
style="color: rgb(31, 117, 19)"
|
||||
></i>
|
||||
<i
|
||||
title="Requires Subscription"
|
||||
*ngIf="product.premium"
|
||||
class="fa-solid fa-money-bill-1-wave"
|
||||
style="color: rgb(145, 129, 40)"
|
||||
></i>
|
||||
<i
|
||||
title="Free to Use"
|
||||
*ngIf="!product.premium"
|
||||
class="fa-solid fa-piggy-bank"
|
||||
style="color: rgb(116, 37, 206)"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<a
|
||||
href="https://forms.nhcarrigan.com/form/XRlQjeu8CbMrTA-v0IPOxlUPEPitLKXTWg70UUCIORA"
|
||||
target="_blank"
|
||||
class="btn"
|
||||
>I want something custom...</a
|
||||
>
|
||||
78
client/src/app/products/products.ts
Normal file
78
client/src/app/products/products.ts
Normal file
@ -0,0 +1,78 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { Component } from "@angular/core";
|
||||
import { products } from "../config/products.js";
|
||||
|
||||
@Component({
|
||||
imports: [ CommonModule ],
|
||||
selector: "app-products",
|
||||
styleUrl: "./products.css",
|
||||
templateUrl: "./products.html",
|
||||
})
|
||||
export class Products {
|
||||
public view: (typeof products)[number]["category"] | "all"
|
||||
= "all";
|
||||
public products: typeof products = [];
|
||||
public readonly filters: {
|
||||
wip: boolean;
|
||||
prod: boolean;
|
||||
paid: boolean;
|
||||
free: boolean;
|
||||
} = {
|
||||
free: true,
|
||||
paid: true,
|
||||
prod: true,
|
||||
wip: true,
|
||||
};
|
||||
|
||||
public constructor() {
|
||||
this.selectCategory("all");
|
||||
}
|
||||
|
||||
public selectCategory(
|
||||
category: (typeof products)[number]["category"] | "all",
|
||||
): void {
|
||||
this.view = category;
|
||||
const sortedProducts = products.sort((a, b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
if (this.view === "all") {
|
||||
this.products = sortedProducts;
|
||||
return;
|
||||
}
|
||||
this.products = sortedProducts.filter((product) => {
|
||||
return product.category === this.view;
|
||||
});
|
||||
}
|
||||
|
||||
public toggleFilter(
|
||||
filter: "wip" | "prod" | "paid" | "free",
|
||||
): void {
|
||||
this.filters[filter] = !this.filters[filter];
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
private applyFilters(): void {
|
||||
this.selectCategory(this.view);
|
||||
this.products = this.products.filter((product) => {
|
||||
if (!this.filters.wip && product.wip) {
|
||||
return false;
|
||||
}
|
||||
if (!this.filters.prod && !product.wip) {
|
||||
return false;
|
||||
}
|
||||
if (!this.filters.paid && product.premium) {
|
||||
return false;
|
||||
}
|
||||
if (!this.filters.free && !product.premium) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
}
|
||||
15
client/src/app/soon/soon.css
Normal file
15
client/src/app/soon/soon.css
Normal file
@ -0,0 +1,15 @@
|
||||
.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;
|
||||
}
|
||||
16
client/src/app/soon/soon.html
Normal file
16
client/src/app/soon/soon.html
Normal file
@ -0,0 +1,16 @@
|
||||
<h1>Oh dear~!</h1>
|
||||
<img
|
||||
src="https://cdn.nhcarrigan.com/new-avatars/hikari-cry-full.png"
|
||||
alt="Hikari"
|
||||
height="250"
|
||||
/>
|
||||
<p>You appear to have become lost!</p>
|
||||
<p>
|
||||
Either this feature is still under construction, or you have tried to go
|
||||
somewhere that does not exist.
|
||||
</p>
|
||||
<p>Do not worry, I can guide you back. Where would you like to go?</p>
|
||||
<div id="fade">
|
||||
<a href="javascript:history.back()" class="btn">Take me back!</a>
|
||||
<a href="/" class="btn">Take me home!</a>
|
||||
</div>
|
||||
17
client/src/app/soon/soon.ts
Normal file
17
client/src/app/soon/soon.ts
Normal file
@ -0,0 +1,17 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
imports: [],
|
||||
selector: "app-soon",
|
||||
styleUrl: "./soon.css",
|
||||
templateUrl: "./soon.html",
|
||||
})
|
||||
export class Soon {
|
||||
|
||||
}
|
||||
@ -1,15 +1,24 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hikari</title>
|
||||
<meta name="description" content="Dashboard and account management platform for NHCarrigan's products.">
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
<script src="https://cdn.nhcarrigan.com/headers/index.js"></script>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Hikari</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Dashboard and account management platform for NHCarrigan's products."
|
||||
/>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
<script src="https://cdn.nhcarrigan.com/headers/index.js"></script>
|
||||
<script>
|
||||
const styleElement = document.getElementById("nhcarrigan-global-styles");
|
||||
if (styleElement) {
|
||||
styleElement.remove();
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1 +1,102 @@
|
||||
/* 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;
|
||||
margin-top: 50px;
|
||||
min-height: calc(100vh - 85px - 50px);
|
||||
}
|
||||
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;
|
||||
}
|
||||
.btn:not(:disabled) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user