Add fresh design
This commit is contained in:
Joris Bertomeu
@@ -1,64 +1,144 @@
|
||||
<div class="row mx-2">
|
||||
<div class="col-12 col-lg-8 mt-4">
|
||||
<div class="card shadow">
|
||||
<div class="card-content p-3 text-center">
|
||||
<h1 class="mb-6">CrawlFlix</h1>
|
||||
<small>Paramount+ / Max HBO / Netflix / Disney+ / Amazon Prime / Canal+</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card shadow mt-3">
|
||||
<div class="card-content p-3 text-center">
|
||||
<div class="row" *ngIf="welcomeHeader">
|
||||
<div class="col-6">
|
||||
<b>Downloader</b>
|
||||
<div class="row mt-3">
|
||||
<div class="col-4">
|
||||
Installed binary:
|
||||
<span *ngIf="welcomeHeader.downloader.filsIsPresent">
|
||||
<i class="fa fa-circle-check text-success me-1"></i>Yes
|
||||
</span>
|
||||
<span *ngIf="!welcomeHeader.downloader.filsIsPresent">
|
||||
<i class="fa fa-exclamation-triangle text-danger me-1"></i>No
|
||||
</span>
|
||||
<div class="card border-0 position-relative overflow-hidden mb-4" style="background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); backdrop-filter: blur(10px);">
|
||||
<div class="position-absolute w-100 h-100" style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #f093fb, #f5576c); opacity: 0.8; z-index: -1;"></div>
|
||||
<div class="card-body text-center text-white py-3 position-relative">
|
||||
<div class="mb-4">
|
||||
<h1 class="display-2 fw-bold mb-0 text-shadow">CrawlFlix</h1>
|
||||
<p class="fs-5 mb-4 text-shadow">
|
||||
<i class="fas fa-download me-2"></i>
|
||||
DRM Media Content Downloader
|
||||
<i class="fas fa-cloud-download-alt ms-2"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
||||
<div class="badge bg-white bg-opacity-25 text-white px-4 py-2 fs-6 border border-white border-opacity-25">
|
||||
<i class="fas fa-mountain me-2"></i>Paramount+
|
||||
</div>
|
||||
<div class="col-8">
|
||||
Update available:
|
||||
<span *ngIf="welcomeHeader.downloader.newReleaseAvailable">
|
||||
<i class="fa fa-exclamation-triangle text-danger me-1"></i>Yes -<button [disabled]="welcomeHeader.downloader.isUpdating" (click)="processUpdate(welcomeHeader.downloader, 'downloader')" style="margin-top:-3px" class="btn btn-outline-primary btn-sm ms-2 p-0 px-1"><i *ngIf="welcomeHeader.downloader.isUpdating" class="fa fa-circle-notch fa-spin me-1"></i>Proceed</button>
|
||||
</span>
|
||||
<span *ngIf="!welcomeHeader.downloader.newReleaseAvailable">
|
||||
<i class="fa fa-circle-check text-success me-1"></i>No
|
||||
</span>
|
||||
<div class="badge bg-white bg-opacity-25 text-white px-4 py-2 fs-6 border border-white border-opacity-25">
|
||||
<i class="fas fa-dragon me-2"></i>Max HBO
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<b>Content Decrypter</b>
|
||||
<div class="row mt-3">
|
||||
<div class="col-4">
|
||||
Installed binary:
|
||||
<span *ngIf="welcomeHeader.mp4decrypt.filsIsPresent">
|
||||
<i class="fa fa-circle-check text-success me-1"></i>Yes
|
||||
</span>
|
||||
<span *ngIf="!welcomeHeader.mp4decrypt.filsIsPresent">
|
||||
<i class="fa fa-exclamation-triangle text-danger me-1"></i>No
|
||||
</span>
|
||||
<div class="badge bg-white bg-opacity-25 text-white px-4 py-2 fs-6 border border-white border-opacity-25">
|
||||
<i class="fas fa-film me-2"></i>Netflix
|
||||
</div>
|
||||
<div class="col-8">
|
||||
Update available:
|
||||
<span *ngIf="welcomeHeader.mp4decrypt.newReleaseAvailable">
|
||||
<i class="fa fa-exclamation-triangle text-danger me-1"></i>Yes -<button [disabled]="welcomeHeader.mp4decrypt.isUpdating" (click)="processUpdate(welcomeHeader.mp4decrypt, 'mp4decrypt')" style="margin-top:-3px" class="btn btn-outline-primary btn-sm ms-2 p-0 px-1"><i *ngIf="welcomeHeader.mp4decrypt.isUpdating" class="fa fa-circle-notch fa-spin me-1"></i>Proceed</button>
|
||||
</span>
|
||||
<span *ngIf="!welcomeHeader.mp4decrypt.newReleaseAvailable">
|
||||
<i class="fa fa-circle-check text-success me-1"></i>No
|
||||
</span>
|
||||
<div class="badge bg-white bg-opacity-25 text-white px-4 py-2 fs-6 border border-white border-opacity-25">
|
||||
<i class="fas fa-magic me-2"></i>Disney+
|
||||
</div>
|
||||
<div class="badge bg-white bg-opacity-25 text-white px-4 py-2 fs-6 border border-white border-opacity-25">
|
||||
<i class="fab fa-amazon me-2"></i>Amazon Prime
|
||||
</div>
|
||||
<div class="badge bg-white bg-opacity-25 text-white px-4 py-2 fs-6 border border-white border-opacity-25">
|
||||
<i class="fas fa-satellite-dish me-2"></i>Canal+
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row p-2" *ngIf="!welcomeHeader">
|
||||
<div class="col-12">
|
||||
<i class="fa fa-circle-notch fa-2x fa-spin"></i>
|
||||
|
||||
<!-- Indicateurs de statut avec Font Awesome -->
|
||||
<div class="row mt-4 justify-content-center">
|
||||
<div class="col-auto">
|
||||
<div class="d-flex align-items-center gap-4 text-white-50">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-server me-2"></i>
|
||||
<small>Server Ready</small>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-shield-alt me-2"></i>
|
||||
<small>Widevine L3</small>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-rocket me-2"></i>
|
||||
<small>High Speed</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card shadow">
|
||||
<div class="card-body p-4">
|
||||
<div class="row" *ngIf="welcomeHeader">
|
||||
<div class="col-md-6">
|
||||
<div class="border-start border-4 border-primary ps-3 h-100">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<i class="fas fa-download text-primary me-2"></i>
|
||||
<h6 class="mb-0 fw-semibold">Downloader</h6>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<small class="text-muted d-block mb-1">Installed binary</small>
|
||||
<span *ngIf="welcomeHeader.downloader.filsIsPresent" class="badge bg-success bg-opacity-10 text-success border border-success">
|
||||
<i class="fas fa-circle-check me-1"></i>Yes
|
||||
</span>
|
||||
<span *ngIf="!welcomeHeader.downloader.filsIsPresent" class="badge bg-danger bg-opacity-10 text-danger border border-danger">
|
||||
<i class="fas fa-exclamation-triangle me-1"></i>No
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<small class="text-muted d-block mb-1">Update available</small>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span *ngIf="welcomeHeader.downloader.newReleaseAvailable" class="badge bg-warning bg-opacity-10 text-warning border border-warning">
|
||||
<i class="fas fa-exclamation-triangle me-1"></i>Yes
|
||||
</span>
|
||||
<span *ngIf="!welcomeHeader.downloader.newReleaseAvailable" class="badge bg-success bg-opacity-10 text-success border border-success">
|
||||
<i class="fas fa-circle-check me-1"></i>No
|
||||
</span>
|
||||
|
||||
<button *ngIf="welcomeHeader.downloader.newReleaseAvailable" [disabled]="welcomeHeader.downloader.isUpdating" (click)="processUpdate(welcomeHeader.downloader, 'downloader')" class="btn btn-sm btn-primary">
|
||||
<i *ngIf="welcomeHeader.downloader.isUpdating" class="fas fa-circle-notch fa-spin me-1"></i>
|
||||
<i *ngIf="!welcomeHeader.downloader.isUpdating" class="fas fa-arrow-up me-1"></i>
|
||||
Proceed
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="border-start border-4 border-info ps-3 h-100">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<i class="fas fa-key text-info me-2"></i>
|
||||
<h6 class="mb-0 fw-semibold">Content Decrypter</h6>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<small class="text-muted d-block mb-1">Installed binary</small>
|
||||
<span *ngIf="welcomeHeader.mp4decrypt.filsIsPresent" class="badge bg-success bg-opacity-10 text-success border border-success">
|
||||
<i class="fas fa-circle-check me-1"></i>Yes
|
||||
</span>
|
||||
<span *ngIf="!welcomeHeader.mp4decrypt.filsIsPresent" class="badge bg-danger bg-opacity-10 text-danger border border-danger">
|
||||
<i class="fas fa-exclamation-triangle me-1"></i>No
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<small class="text-muted d-block mb-1">Update available</small>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span *ngIf="welcomeHeader.mp4decrypt.newReleaseAvailable" class="badge bg-warning bg-opacity-10 text-warning border border-warning">
|
||||
<i class="fas fa-exclamation-triangle me-1"></i>Yes
|
||||
</span>
|
||||
<span *ngIf="!welcomeHeader.mp4decrypt.newReleaseAvailable" class="badge bg-success bg-opacity-10 text-success border border-success">
|
||||
<i class="fas fa-circle-check me-1"></i>No
|
||||
</span>
|
||||
|
||||
<button *ngIf="welcomeHeader.mp4decrypt.newReleaseAvailable" [disabled]="welcomeHeader.mp4decrypt.isUpdating" (click)="processUpdate(welcomeHeader.mp4decrypt, 'mp4decrypt')" class="btn btn-sm btn-primary">
|
||||
<i *ngIf="welcomeHeader.mp4decrypt.isUpdating" class="fas fa-circle-notch fa-spin me-1"></i>
|
||||
<i *ngIf="!welcomeHeader.mp4decrypt.isUpdating" class="fas fa-arrow-up me-1"></i>
|
||||
Proceed
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" *ngIf="!welcomeHeader">
|
||||
<div class="col-12 text-center py-4">
|
||||
<i class="fas fa-circle-notch fa-2x fa-spin text-primary"></i>
|
||||
<p class="text-muted mt-2 mb-0">Loading system status...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -185,7 +265,7 @@
|
||||
<p class="text-sm mb-1">Finished {{ job.finishedOn | amTimeAgo }}</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p class="text-sm mb-1">Duration: {{ job.finishedOn ? (((job.finishedOn - job.processedOn)/1000) > 120 ? (((job.finishedOn - job.processedOn)/1000) | amDuration:'seconds') : Math.floor((job.finishedOn - job.processedOn)/1000)) + 's' : 'In progress' }}</p>
|
||||
<p class="text-sm mb-1">Duration: {{ job.finishedOn ? (((job.finishedOn - job.processedOn)/1000) > 120 ? (((job.finishedOn - job.processedOn)/1000) | amDuration:'seconds') : Math.floor((job.finishedOn - job.processedOn)/1000)) : 'In progress' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger mt-2 mb-1" *ngIf="job.state === 'failed' && job.failedReason">
|
||||
|
||||
Reference in New Issue
Block a user