Made legal modals global
- Redesigned credits page
This commit is contained in:
parent
d9e621165d
commit
7d253675c8
@ -1,21 +1,40 @@
|
||||
<p>credits works!</p>
|
||||
<div class="flex flex-col items-center justify-center min-h-fit p-4 lg:p-28">
|
||||
<div class="flex items-center justify-center mb-3">
|
||||
<a href="/" class="flex items-center justify-center">
|
||||
<img src="./assets/cloud-solid.svg" class="mr-3 w-24 animate-bounce ease-out" alt="SharePulse Logo" />
|
||||
<span class="self-center text-4xl font-semibold whitespace-nowrap">SharePulse</span>
|
||||
</a>
|
||||
</div>
|
||||
<h2 class="text-2xl font-semibold text-gray-800 mb-10 text-center">
|
||||
Upload a file. Share the URL/link. Download the file. Simple as that.
|
||||
</h2>
|
||||
<div class="space-y-4 text-xl mb-20">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4">
|
||||
<h3 class="font-semibold text-gray-800 sm:col-span-2 md:text-right">Developer:</h3>
|
||||
<p class="text-gray-800 sm:col-span-2 sm:text-left">Walzen665</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4">
|
||||
<h3 class="font-semibold text-gray-800 sm:col-span-2 md:text-right">Version:</h3>
|
||||
<p class="text-gray-800 sm:col-span-2 sm:text-left">1.0.0</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4">
|
||||
<h3 class="font-semibold text-gray-800 sm:col-span-2 md:text-right">API-Status:</h3>
|
||||
<p class="sm:col-span-2 sm:text-left text-green-600">online</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4">
|
||||
<h3 class=" font-semibold text-gray-800 sm:col-span-2 md:text-right">Libraries:</h3>
|
||||
<p class="text-gray-800 sm:col-span-2 sm:text-left">
|
||||
<a href="https://fontawesome.com/" class="text-indigo-600 hover:text-indigo-800">Fontawesome</a>,
|
||||
<a href="https://tailwindcss.com/" class="text-indigo-600 hover:text-indigo-800">TailwindCSS</a>,
|
||||
<a href="https://axios-http.com/" class="text-indigo-600 hover:text-indigo-800">AXIOS http</a>,
|
||||
<a href="https://www.npmjs.com/package/tailwindcss-animate" class="text-indigo-600 hover:text-indigo-800">TailwindCSS Animations</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-800 mb-4">
|
||||
Used media
|
||||
</h2>
|
||||
<ul class="list-disc pl-5 space-y-2">
|
||||
<li>
|
||||
<p class="font-medium text-gray-700">Icons used:</p>
|
||||
<a href="https://fontawesome.com/" class="text-blue-500 hover:text-blue-600 transition duration-300 ease-in-out">Fontawesome</a>
|
||||
</li>
|
||||
<li>
|
||||
<p class="font-medium text-gray-700">HTML, CSS, JS Libraries used:</p>
|
||||
<a href="https://tailwindcss.com/" class="text-blue-500 hover:text-blue-600 transition duration-300 ease-in-out">TailwindCSS</a>,
|
||||
<a href="https://axios-http.com/" class="text-blue-500 hover:text-blue-600 transition duration-300 ease-in-out">AXIOS http</a>,
|
||||
<a href="https://www.npmjs.com/package/tailwindcss-animate" class="text-blue-500 hover:text-blue-600 transition duration-300 ease-in-out">TailwindCSS Animations</a>
|
||||
</li>
|
||||
<li>
|
||||
<p class="font-medium text-gray-700">App Icon by flaticon.com</p>
|
||||
<a href="https://www.flaticon.com/de/autoren/najmunnahar" class="text-blue-500 hover:text-blue-600 transition duration-300 ease-in-out">NajmunNahar</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<span class="text-indigo-600 cursor-pointer" (click)="openPrivacyPolicyModal()">Privacy Policy</span> |
|
||||
<span class="text-indigo-600 cursor-pointer" (click)="openTermsOfUseModal()">Terms of Use</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,26 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {RouterLink} from "@angular/router";
|
||||
import {LegalService} from "../../service/legalService";
|
||||
|
||||
@Component({
|
||||
selector: 'app-credits',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [
|
||||
RouterLink
|
||||
],
|
||||
templateUrl: './credits.component.html',
|
||||
styleUrl: './credits.component.scss'
|
||||
})
|
||||
export class CreditsComponent {
|
||||
|
||||
constructor(private legalService: LegalService) {
|
||||
}
|
||||
|
||||
openPrivacyPolicyModal() {
|
||||
this.legalService.openPrivacyPolicy();
|
||||
}
|
||||
|
||||
openTermsOfUseModal() {
|
||||
this.legalService.openTermsOfUse();
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,72 +25,11 @@
|
||||
<p class="text-gray-600 text-center mb-4">We prioritize data security and privacy consequently.
|
||||
Files uploaded by our clients are securely stored on our servers for a maximum duration of one day,
|
||||
after which they are permanently deleted to guarantee the highest level of confidentiality and data protection. Read more in our
|
||||
<span class="text-indigo-600 cursor-pointer" (click)="openPrivacyPolicy()">Privacy Policy</span> note.
|
||||
By using SharePulse, you agree to the <span class="text-indigo-600 cursor-pointer" (click)="openTermsOfUse()">Terms of Use</span>.</p>
|
||||
<span class="text-indigo-600 cursor-pointer" (click)="openPrivacyPolicyModal()">Privacy Policy</span> note.
|
||||
By using SharePulse, you agree to the <span class="text-indigo-600 cursor-pointer" (click)="openTermsOfUseModal()">Terms of Use</span>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialog #privacy_policy_modal class="modal">
|
||||
<div class="modal-box w-11/12 max-w-5xl">
|
||||
<h3 class="font-bold text-lg">SharePulse™ Privacy Policy</h3>
|
||||
<div>
|
||||
<div class="mx-auto my-6">
|
||||
<ol class="list-decimal">
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Uploaded files are stored on a secure server.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Files are stored for a maximum of 24 hours.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse tracks your IP address when uploading files. This serves as a method of identification, allowing you to check the status of your upload.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse may track your IP address when downloading files.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse does not track you when accessing the website.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Personal information collected by SharePulse is used solely for data protection and is not processed.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse will not sell, rent, or share personal information with third parties without user consent, except as required by law.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Users have the right to request the deletion of their data from SharePulse's servers at any time.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse does not store any cookies on your device.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Operators do not view or manipulate uploaded files.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Users are encouraged to review the privacy policy periodically for any changes or updates.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<form method="dialog">
|
||||
<button class="btn">Okay</button>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<dialog #terms_of_use_modal class="modal">
|
||||
<div class="modal-box w-11/12 max-w-5xl">
|
||||
<h3 class="font-bold text-lg">SharePulse™ Terms of Use</h3>
|
||||
<div>
|
||||
<div class="mx-auto my-6">
|
||||
<ol class="list-decimal">
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Users must not upload files that contain malware, illegal content, or violate copyright laws.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse is not responsible for the content of the files shared through its service.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">By using SharePulse, users agree not to attempt to breach the security of the service.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse reserves the right to remove any files or suspend users that violate these terms without notice.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">The service is provided "as is" without warranty of any kind, express or implied.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Users agree to indemnify and hold harmless SharePulse from any claims resulting from the use of the service.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse reserves the right to modify these terms at any time. Continued use of the service after such changes constitutes acceptance of the new terms.</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
<form method="dialog">
|
||||
<button class="btn">Okay</button>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<!-- Invisible SVGs to prevent lazy loading -->
|
||||
<div class="invisible h-0 w-0">
|
||||
<img src="./assets/cloud-arrow-up-solid.svg">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import {Component, ElementRef, ViewChild} from '@angular/core';
|
||||
import {RouterLink} from "@angular/router";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {LegalService} from "../../service/legalService";
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
@ -13,15 +14,14 @@ import {FormsModule} from "@angular/forms";
|
||||
styleUrl: './home.component.scss'
|
||||
})
|
||||
export class HomeComponent {
|
||||
@ViewChild('privacy_policy_modal') privacy_policy_modal: ElementRef<HTMLDialogElement> | undefined;
|
||||
@ViewChild('terms_of_use_modal') terms_of_use_modal: ElementRef<HTMLDialogElement> | undefined;
|
||||
|
||||
|
||||
openPrivacyPolicy() {
|
||||
this.privacy_policy_modal?.nativeElement.showModal();
|
||||
constructor(private legalService: LegalService) {
|
||||
}
|
||||
|
||||
openTermsOfUse() {
|
||||
this.terms_of_use_modal?.nativeElement.showModal();
|
||||
openPrivacyPolicyModal() {
|
||||
this.legalService.openPrivacyPolicy();
|
||||
}
|
||||
|
||||
openTermsOfUseModal() {
|
||||
this.legalService.openTermsOfUse();
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,3 +26,65 @@
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<dialog #privacy_policy_modal class="modal">
|
||||
<div class="modal-box w-11/12 max-w-5xl">
|
||||
<h3 class="font-bold text-lg">SharePulse™ Privacy Policy</h3>
|
||||
<div>
|
||||
<div class="mx-auto my-6">
|
||||
<ol class="list-decimal">
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Uploaded files are stored on a secure server.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Files are stored for a maximum of 24 hours.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse tracks your IP address when uploading files. This serves as a method of identification, allowing you to check the status of your upload.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse may track your IP address when downloading files.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse does not track you when accessing the website.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Personal information collected by SharePulse is used solely for data protection and is not processed.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse will not sell, rent, or share personal information with third parties without user consent, except as required by law.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Users have the right to request the deletion of their data from SharePulse's servers at any time.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse does not store any cookies on your device.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Operators do not view or manipulate uploaded files.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Users are encouraged to review the privacy policy periodically for any changes or updates.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<form method="dialog">
|
||||
<button class="btn">Okay</button>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<dialog #terms_of_use_modal class="modal">
|
||||
<div class="modal-box w-11/12 max-w-5xl">
|
||||
<h3 class="font-bold text-lg">SharePulse™ Terms of Use</h3>
|
||||
<div>
|
||||
<div class="mx-auto my-6">
|
||||
<ol class="list-decimal">
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Users must not upload files that contain malware, illegal content, or violate copyright laws.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse is not responsible for the content of the files shared through its service.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">By using SharePulse, users agree not to attempt to breach the security of the service.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse reserves the right to remove any files or suspend users that violate these terms without notice.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">The service is provided "as is" without warranty of any kind, express or implied.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">Users agree to indemnify and hold harmless SharePulse from any claims resulting from the use of the service.</li>
|
||||
<li class="ml-4 mb-2 text-gray-800 font-semibold">SharePulse reserves the right to modify these terms at any time. Continued use of the service after such changes constitutes acceptance of the new terms.</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
<form method="dialog">
|
||||
<button class="btn">Okay</button>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
||||
</form>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
@ -1,21 +1,46 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {Component, ElementRef, ViewChild} from '@angular/core';
|
||||
import {RouterLink} from "@angular/router";
|
||||
import {NgClass} from "@angular/common";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {LegalService} from "../../service/legalService";
|
||||
|
||||
@Component({
|
||||
selector: 'app-navbar',
|
||||
standalone: true,
|
||||
imports: [
|
||||
RouterLink,
|
||||
NgClass
|
||||
],
|
||||
imports: [
|
||||
RouterLink,
|
||||
NgClass,
|
||||
FormsModule
|
||||
],
|
||||
templateUrl: './navbar.component.html',
|
||||
styleUrl: './navbar.component.scss'
|
||||
})
|
||||
export class NavbarComponent {
|
||||
|
||||
@ViewChild('privacy_policy_modal') privacy_policy_modal: ElementRef<HTMLDialogElement> | undefined;
|
||||
@ViewChild('terms_of_use_modal') terms_of_use_modal: ElementRef<HTMLDialogElement> | undefined;
|
||||
|
||||
isMenuOpen = false;
|
||||
|
||||
constructor(private legalService: LegalService) {
|
||||
this.legalService.openModal$.subscribe((modalId) => {
|
||||
if (modalId === 'privacyPolicy') {
|
||||
this.openPrivacyPolicy();
|
||||
} else if (modalId === 'termsOfUse') {
|
||||
this.openTermsOfUse();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggleMenu(): void {
|
||||
this.isMenuOpen = !this.isMenuOpen;
|
||||
}
|
||||
|
||||
openPrivacyPolicy() {
|
||||
this.privacy_policy_modal?.nativeElement.showModal();
|
||||
}
|
||||
|
||||
openTermsOfUse() {
|
||||
this.terms_of_use_modal?.nativeElement.showModal();
|
||||
}
|
||||
}
|
||||
|
||||
19
frontend/src/service/legalService.ts
Normal file
19
frontend/src/service/legalService.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class LegalService {
|
||||
private openModalSource = new Subject<string>();
|
||||
|
||||
openModal$ = this.openModalSource.asObservable();
|
||||
|
||||
openPrivacyPolicy() {
|
||||
this.openModalSource.next('privacyPolicy');
|
||||
}
|
||||
|
||||
openTermsOfUse() {
|
||||
this.openModalSource.next('termsOfUse');
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user