flo/bee-frontend-ARCHIVED
Archived
1
0
Fork 0
generated from flo/template-frontend
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

foundation

Browse Source
This commit is contained in:
Flo 2024-08-25 21:38:40 +00:00
parent 0adf0a9bfc
commit bdb6299692
5 changed files with 78 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/core/auth/components/login/login.component.html
View File

@ -2,7 +2,7 @@
</div>
<div class="max-w-sm mx-auto mb-10">
<h1 class="font-bold text-center text-skin-accent text-5xl mb-5">
<h1 class="font-bold text-center text-skin-primary text-5xl mb-5">
Beekeeper
</h1>
<h1 class="font-bold text-center text-skin-accent text-xl">
@ -12,13 +12,13 @@
<form class="max-w-sm mx-auto" [formGroup]="loginForm">
<div class="mb-5">
<label for="identifier" class="block mb-2 text-sm font-medium text-skin-accent-muted">Benutzername oder E-Mail</label>
<input formControlName="identifier" type="text" id="identifier" class="bg-skin-primary border border-gray-300 text-skin-accent-muted text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="username72 / your@email.com" required />
<label for="identifier" class="block mb-2 text-sm font-medium text-skin-primary-muted">Benutzername oder E-Mail</label>
<input formControlName="identifier" type="text" id="identifier" class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="username72 / your@email.com" required />
</div>
<div class="mb-5">
<label for="password" class="block mb-2 text-sm font-medium text-skin-accent-muted">Passwort</label>
<input formControlName="password" type="password" id="password" class="bg-skin-primary border border-gray-300 text-skin-accent-muted text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
<p id="helper-text-explanation" class="mt-2 text-sm text-skin-accent-muted">Neu hier? <a routerLink="/auth/registration" class="font-medium text-skin-secondary hover:underline">Jetzt registrieren!</a></p>
<label for="password" class="block mb-2 text-sm font-medium text-skin-primary-muted">Passwort</label>
<input formControlName="password" type="password" id="password" class="bg-skin-primary border border-gray-300 text-skin-primary text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
<p id="helper-text-explanation" class="mt-2 text-sm text-skin-primary-muted">Neu hier? <a routerLink="/auth/registration" class="font-medium text-skin-accent hover:underline hover:font-bold">Jetzt registrieren!</a></p>
</div>
<button (click)="login()" [disabled]="!loginForm.valid" type="submit" class="w-full 9xl:w-auto font-bold text-skin-primary bg-skin-secondary hover:bg-skin-accent rounded-lg text-sm px-5 py-2.5 text-center">Anmelden</button>
<button (click)="login()" [disabled]="!loginForm.valid" type="submit" class="w-full 9xl:w-auto font-bold text-skin-primary bg-skin-secondary hover:text-skin-secondary rounded-lg text-sm px-5 py-2.5 text-center">Anmelden</button>
</form>

88
src/app/core/components/navigation/navigation.component.html
View File

@ -2,46 +2,56 @@
<nav class="bg-skin-secondary">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="#" class="flex items-center space-x-3">
<img src="assets/icon.png" class="h-8" alt="Beekeeper Logo" />
<span class="text-skin-primary self-center text-2xl font-semibold whitespace-nowrap">Beekeeper</span>
</a>
<div class="flex items-center md:order-2 space-x-3 md:space-x-0">
<button type="button" class="block w-8 h-8 text-sm bg-skin-primary rounded-full md:me-0 focus:ring-4 focus:ring-gray-300" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
<span class="text-skin-secondary rounded-full">AA</span>
<!-- <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="user photo"> -->
<!-- Title -->
<a href="#" class="flex items-center space-x-3">
<img src="assets/icon.png" class="h-10" alt="Beekeeper Logo" />
<span class="text-skin-primary self-center text-2xl font-semibold whitespace-nowrap">Beekeeper</span>
</a>
<div class="flex items-center md:order-2 space-x-3 md:space-x-0">
<!--User Bubble-->
<button type="button" class="block w-10 h-10 text-sm bg-skin-primary rounded-full md:me-0 focus:ring-4 focus:ring-gray-300" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
<span class="text-skin-accent rounded-full font-bold p-2">AA</span>
<!-- <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="user photo"> -->
</button>
<!--Burger Menu-->
<button data-collapse-toggle="navbar-user" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-skin-primary rounded-lg md:hidden hover:bg-skin-primary" aria-controls="navbar-user" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
<!-- Dropdown menu -->
<div class="z-50 hidden my-4 text-base list-none divide-y divide-gray-100 rounded-lg shadow bg-skin-primary" id="user-dropdown">
<div class="px-4 py-3">
<span class="block text-sm text-skin-accent font-bold">{{state?.username}}</span>
<span class="block text-sm text-skin-accent-muted truncate">{{state?.roleIdentifier}}</span>
</div>
<ul class="p-4" aria-labelledby="user-menu-button">
<li>
<a href="#" class="block py-2 px-3 rounded text-skin-primary-muted hover:text-skin-primary md:text-skin-secondary-muted md:hover:text-skin-secondary hover:bg-skin-secondary md:p-0">Einstellungen</a>
</li>
<li>
<button class="w-full block py-2 px-3 rounded text-skin-primary-muted hover:text-skin-primary md:text-skin-secondary-muted md:hover:text-skin-secondary hover:bg-skin-secondary md:p-0" (click)="logout()">Ausloggen</button>
</li>
</ul>
</div>
<!-- User dropdown -->
<div class="z-50 hidden my-4 text-base list-none divide-y divide-gray-100 rounded-lg shadow-sm shadow-skin-primary bg-skin-primary" id="user-dropdown">
<div class="px-4 py-3">
<span class="block text-sm text-skin-accent font-bold">{{state?.username}}</span>
<span class="block text-sm text-skin-primary-muted truncate">{{state?.roleIdentifier}}</span>
</div>
<button data-collapse-toggle="navbar-user" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-skin-secondary bg-skin-primary rounded-lg md:hidden hover:bg-skin-primary-muted focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="navbar-user" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
</div>
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 rounded-lg bg-skin-primary md:bg-skin-secondary md:space-x-8 md:flex-row md:mt-0 md:border-0 md:bg-skin-fill">
<li>
<a routerLink="/home" class="block py-2 px-3 rounded text-skin-primary md:text-skin-secondary md:p-0" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 px-3 rounded text-skin-primary-muted hover:text-skin-primary md:text-skin-secondary-muted md:hover:text-skin-secondary hover:bg-skin-secondary md:p-0">About</a>
</li>
</ul>
</div>
<ul class="p-4" aria-labelledby="user-menu-button">
<li>
<a href="#" class="block py-2 px-3 rounded text-skin-primary hover:bg-skin-secondary">Einstellungen</a>
</li>
<li>
<button class="w-full block py-2 px-3 rounded text-skin-primary hover:bg-skin-secondary" (click)="logout()">Ausloggen</button>
</li>
</ul>
</div>
<!-- Navigatoin -->
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 rounded-lg bg-skin-primary md:bg-skin-secondary md:space-x-8 md:flex-row md:mt-0 md:border-0 md:bg-skin-fill">
<li>
<a routerLink="/home" class="block py-2 px-3 rounded text-skin-primary md:p-0" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 px-3 rounded text-skin-primary-muted hover:text-skin-primary hover:bg-skin-secondary md:p-0">About</a>
</li>
</ul>
</div>
</div>
</nav>

2
src/index.html
View File

@ -8,7 +8,7 @@
<link rel="icon" type="image/x-icon" href="assets/icon.png" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
</head>
<body>
<body class="bg-skin-primary">
<app-root></app-root>
</body>
</html>

16
src/styles.scss
View File

@ -11,10 +11,26 @@
--color-text-accent: 255, 199, 44;
--color-text-accent-muted: 255, 199, 44;
--color-shadow-primary: 100,100,100;
--color-primary: 255, 255, 255;
--color-secondary: 255, 199, 44;
--color-accent: 255, 199, 44;
}
.theme-dark {
--color-text-primary: 255,255,255;
--color-text-primary-muted: 170,170,170;
--color-text-secondary: 0,0,0;
--color-text-secondary-muted: 100,100,100;
--color-text-accent: 250, 183, 0;
--color-text-accent-muted: 250, 183, 0;
--color-shadow-primary: 170,170,170;
--color-primary: 10, 10, 10;
--color-secondary: 250, 183, 0;
--color-accent: 250, 183, 0;
}
}

5
tailwind.config.js
View File

@ -32,6 +32,11 @@ module.exports = {
accent: withOpacity('--color-accent'),
},
},
boxShadowColor: {
skin: {
primary: withOpacity('--color-shadow-primary'),
}
}
},
},
plugins: [