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">
|
<p>
|
||||||
Used media
|
<span class="text-indigo-600 cursor-pointer" (click)="openPrivacyPolicyModal()">Privacy Policy</span> |
|
||||||
</h2>
|
<span class="text-indigo-600 cursor-pointer" (click)="openTermsOfUseModal()">Terms of Use</span>
|
||||||
<ul class="list-disc pl-5 space-y-2">
|
</p>
|
||||||
<li>
|
|
||||||
<p class="font-medium text-gray-700">Icons used:</p>
|
</div>
|
||||||
<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>
|
|
||||||
|
|||||||
@ -1,12 +1,26 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
import {RouterLink} from "@angular/router";
|
||||||
|
import {LegalService} from "../../service/legalService";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-credits',
|
selector: 'app-credits',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [],
|
imports: [
|
||||||
|
RouterLink
|
||||||
|
],
|
||||||
templateUrl: './credits.component.html',
|
templateUrl: './credits.component.html',
|
||||||
styleUrl: './credits.component.scss'
|
styleUrl: './credits.component.scss'
|
||||||
})
|
})
|
||||||
export class CreditsComponent {
|
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.
|
<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,
|
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
|
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.
|
<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)="openTermsOfUse()">Terms of Use</span>.</p>
|
By using SharePulse, you agree to the <span class="text-indigo-600 cursor-pointer" (click)="openTermsOfUseModal()">Terms of Use</span>.</p>
|
||||||
</div>
|
</div>
|
||||||
</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 -->
|
<!-- Invisible SVGs to prevent lazy loading -->
|
||||||
<div class="invisible h-0 w-0">
|
<div class="invisible h-0 w-0">
|
||||||
<img src="./assets/cloud-arrow-up-solid.svg">
|
<img src="./assets/cloud-arrow-up-solid.svg">
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import {Component, ElementRef, ViewChild} from '@angular/core';
|
import {Component, ElementRef, ViewChild} from '@angular/core';
|
||||||
import {RouterLink} from "@angular/router";
|
import {RouterLink} from "@angular/router";
|
||||||
import {FormsModule} from "@angular/forms";
|
import {FormsModule} from "@angular/forms";
|
||||||
|
import {LegalService} from "../../service/legalService";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-home',
|
selector: 'app-home',
|
||||||
@ -13,15 +14,14 @@ import {FormsModule} from "@angular/forms";
|
|||||||
styleUrl: './home.component.scss'
|
styleUrl: './home.component.scss'
|
||||||
})
|
})
|
||||||
export class HomeComponent {
|
export class HomeComponent {
|
||||||
@ViewChild('privacy_policy_modal') privacy_policy_modal: ElementRef<HTMLDialogElement> | undefined;
|
constructor(private legalService: LegalService) {
|
||||||
@ViewChild('terms_of_use_modal') terms_of_use_modal: ElementRef<HTMLDialogElement> | undefined;
|
|
||||||
|
|
||||||
|
|
||||||
openPrivacyPolicy() {
|
|
||||||
this.privacy_policy_modal?.nativeElement.showModal();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
openTermsOfUse() {
|
openPrivacyPolicyModal() {
|
||||||
this.terms_of_use_modal?.nativeElement.showModal();
|
this.legalService.openPrivacyPolicy();
|
||||||
|
}
|
||||||
|
|
||||||
|
openTermsOfUseModal() {
|
||||||
|
this.legalService.openTermsOfUse();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -26,3 +26,65 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</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 {RouterLink} from "@angular/router";
|
||||||
import {NgClass} from "@angular/common";
|
import {NgClass} from "@angular/common";
|
||||||
|
import {FormsModule} from "@angular/forms";
|
||||||
|
import {LegalService} from "../../service/legalService";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-navbar',
|
selector: 'app-navbar',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [
|
imports: [
|
||||||
RouterLink,
|
RouterLink,
|
||||||
NgClass
|
NgClass,
|
||||||
],
|
FormsModule
|
||||||
|
],
|
||||||
templateUrl: './navbar.component.html',
|
templateUrl: './navbar.component.html',
|
||||||
styleUrl: './navbar.component.scss'
|
styleUrl: './navbar.component.scss'
|
||||||
})
|
})
|
||||||
export class NavbarComponent {
|
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;
|
isMenuOpen = false;
|
||||||
|
|
||||||
|
constructor(private legalService: LegalService) {
|
||||||
|
this.legalService.openModal$.subscribe((modalId) => {
|
||||||
|
if (modalId === 'privacyPolicy') {
|
||||||
|
this.openPrivacyPolicy();
|
||||||
|
} else if (modalId === 'termsOfUse') {
|
||||||
|
this.openTermsOfUse();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
toggleMenu(): void {
|
toggleMenu(): void {
|
||||||
this.isMenuOpen = !this.isMenuOpen;
|
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