fun/Kol-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add content showcase feature to rate card profiles with PDF rendering support

Browse Source
This commit is contained in:
I-Fun
2026-04-05 23:43:33 +07:00
parent 47dfc7cc95
commit 1c73279e52
7 changed files with 453 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
resources/views/rate-cards/public.blade.php
View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rate Card — {{ $profile->owner_name }}</title>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
* {
box-sizing: border-box;
@@ -240,7 +241,7 @@
</style>
</head>
<body>
<body x-data="{ popupOpen: false, popupImage: '' }">
<div class="container">
<div class="header">
@if($profile->logo_path)
@@ -328,9 +329,66 @@
</div>
@endif
@if(!empty($profile->content_showcase))
<div class="platform-section" style="margin-top:40px;">
<div class="platform-title" style="justify-content:center;">Content Showcase</div>
<div class="cards">
@foreach($profile->content_showcase as $item)
@php
$isUrl = ($item['file_id'] === 'url');
$file = !$isUrl ? \App\Models\MediaFile::find($item['file_id']) : null;
@endphp
@if($file || $isUrl)
<div class="card" style="padding:0; overflow:hidden; display:flex; flex-direction:column;">
<div style="flex:1; background:#F9FAFB; display:flex; align-items:center; justify-content:center; position:relative;">
@if(!empty($item['thumbnail_path']))
@if(!$isUrl && $file->is_image)
<div style="width:100%; height:180px; cursor:pointer; position:relative;" @click="popupImage = '{{ $file->url }}'; popupOpen = true;">
<img src="{{ asset('storage/' . $item['thumbnail_path']) }}" style="width:100%; height:100%; object-fit:cover; display:block;">
</div>
@else
<a href="{{ $isUrl ? ($item['url'] ?? '#') : $file->url }}" target="_blank" style="display:block; width:100%; height:180px; position:relative;">
<img src="{{ asset('storage/' . $item['thumbnail_path']) }}" style="width:100%; height:100%; object-fit:cover; display:block;">
@if(!$isUrl && $file->is_video)
<div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.2);">
<div style="width:48px; height:48px; background:rgba(255,255,255,0.8); border-radius:50%; display:flex; align-items:center; justify-content:center; color:{{ $profile->accent_color }}; font-size:24px;">▶</div>
</div>
@endif
</a>
@endif
@elseif($isUrl)
<div style="height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center;">
<span style="font-size:48px;">🌐</span>
<a href="{{ $item['url'] ?? '#' }}" target="_blank" style="margin-top:10px; font-size:12px; color:{{ $profile->accent_color }}; text-decoration:none; font-weight:700;">Open Link</a>
</div>
@else
@if($file->is_image)
<div style="width:100%; height:180px; cursor:pointer;" @click="popupImage = '{{ $file->url }}'; popupOpen = true;">
<img src="{{ $file->url }}" style="width:100%; height:100%; object-fit:cover; display:block;">
</div>
@elseif($file->is_video)
<video src="{{ $file->url }}" style="width:100%; height:180px; object-fit:cover; display:block;" controls></video>
@else
<div style="height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center;">
<span style="font-size:48px;">{{ $file->icon }}</span>
<a href="{{ $file->url }}" target="_blank" style="margin-top:10px; font-size:12px; color:{{ $profile->accent_color }}; text-decoration:none; font-weight:700;">View File</a>
</div>
@endif
@endif
</div>
<div style="padding:16px;">
<div class="service" style="margin-bottom:0; text-align:center; font-weight:700;">{{ $item['name'] }}</div>
</div>
</div>
@endif
@endforeach
</div>
</div>
@endif
@if($profile->terms_and_conditions)
<div class="platform-section" style="margin-top:40px;">
<div class="platform-title">Terms & Conditions</div>
<div class="platform-title" style="justify-content:center;">Terms & Conditions</div>
<div class="card" style="font-size:13px; color:#6B7280; line-height:1.6;">
{!! $profile->terms_and_conditions !!}</div>
</div>
@@ -341,6 +399,13 @@
<!--<br>Generated by Cathy's App · {{ now()->format('Y-M-D') }}-->
</div>
</div>
<!-- Image Popup Modal -->
<div x-show="popupOpen" x-transition.opacity style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:9999; align-items:center; justify-content:center; padding:20px;" :style="popupOpen ? 'display:flex' : 'display:none'">
<div style="position:absolute; inset:0; cursor:pointer;" @click="popupOpen = false"></div>
<img :src="popupImage" style="max-width:100%; max-height:100%; object-fit:contain; position:relative; z-index:10000; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.5);">
<button @click="popupOpen = false" style="position:absolute; top:20px; right:20px; background:rgba(255,255,255,0.2); border:none; color:white; font-size:30px; width:40px; height:40px; border-radius:50%; cursor:pointer; z-index:10001; display:flex; align-items:center; justify-content:center;">&times;</button>
</div>
</body>
</html>