Spaces:

Coacobi2454677
/

sdds

Running

App Files Files Community

Coacobi2454677 commited on May 5, 2025

Commit

846b87a

verified ·

1 Parent(s): d57f03c

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +285 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Sdds
-emoji: 🔥
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: sdds
+emoji: 🐳
+colorFrom: gray
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,285 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Danh sách sự kiện</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        .tiptap-content {
+            line-height: 1.6;
+            color: #374151;
+            font-family: 'Inter', sans-serif;
+        }
+        .tiptap-content p {
+            margin-bottom: 1rem;
+        }
+        .tiptap-content ul,
+        .tiptap-content ol {
+            padding-left: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .tiptap-content ul {
+            list-style-type: disc;
+        }
+        .tiptap-content ol {
+            list-style-type: decimal;
+        }
+        .tiptap-content h1 {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin: 1.5rem 0 1rem;
+        }
+        .tiptap-content h2 {
+            font-size: 1.25rem;
+            font-weight: bold;
+            margin: 1.25rem 0 0.75rem;
+        }
+        .tiptap-content h3 {
+            font-size: 1.125rem;
+            font-weight: bold;
+            margin: 1rem 0 0.5rem;
+        }
+        .tiptap-content a {
+            color: #3b82f6;
+            text-decoration: underline;
+        }
+        .tiptap-content blockquote {
+            padding-left: 1rem;
+            border-left: 3px solid #e5e7eb;
+            color: #6b7280;
+            margin: 1rem 0;
+        }
+        .tiptap-content pre {
+            background: #f3f4f6;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            overflow-x: auto;
+            margin: 1rem 0;
+        }
+        .tiptap-content code {
+            background: #f3f4f6;
+            padding: 0.2rem 0.4rem;
+            border-radius: 0.25rem;
+            font-family: monospace;
+        }
+        /* Vietnam time badge */
+        .time-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            background-color: #f0f9ff;
+            color: #0369a1;
+            padding: 0.25rem 0.5rem;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+        .time-badge i {
+            font-size: 0.65rem;
+        }
+        /* Creator badge */
+        .creator-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            background-color: #f5f3ff;
+            color: #7c3aed;
+            padding: 0.25rem 0.5rem;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+        .admin-badge {
+            background-color: #fef2f2;
+            color: #dc2626;
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <div class="max-w-4xl mx-auto p-4 sm:p-6">
+        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 gap-4">
+            <div>
+                <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Danh sách sự kiện</h1>
+                <div class="time-badge mt-1">
+                    <i class="fas fa-clock"></i>
+                    <span>Giờ Việt Nam (UTC+7)</span>
+                </div>
+            </div>
+            <a href="/su-kien/create" class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition shadow hover:shadow-md w-full sm:w-auto justify-center">
+                <i class="fas fa-plus"></i>
+                <span>Tạo sự kiện mới</span>
+            </a>
+        </div>
+        @if($posts->isEmpty())
+        <div class="text-center py-12 bg-white rounded-xl shadow-sm">
+            <div class="mx-auto w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6">
+                <i class="fas fa-calendar-alt text-blue-500 text-4xl"></i>
+            </div>
+            <h3 class="text-xl font-medium text-gray-700 mb-2">Chưa có sự kiện nào</h3>
+            <p class="text-gray-500 mb-6">Hãy tạo sự kiện đầu tiên của bạn</p>
+            <a href="/su-kien/create" class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
+                <i class="fas fa-plus"></i>
+                <span>Tạo sự kiện mới</span>
+            </a>
+        </div>
+        @else
+        <div class="space-y-4">
+            @foreach($posts as $post)
+            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
+                <!-- Post Header -->
+                <div class="border-b border-gray-100 p-4 flex justify-between items-start">
+                    <div class="space-y-2">
+                        <div class="flex flex-wrap items-center gap-2">
+                            <div class="creator-badge {{ $post->user->is_admin ? 'admin-badge' : '' }}">
+                                <i class="fas {{ $post->user->is_admin ? 'fa-shield-alt' : 'fa-user' }}"></i>
+                                <span>{{ $post->user->name }}</span>
+                                @if($post->user->is_admin)
+                                <span class="ml-1">(Admin)</span>
+                                @endif
+                            </div>
+                            <div class="flex items-center gap-2 text-sm text-gray-600">
+                                <i class="fas fa-map-marker-alt text-blue-500"></i>
+                                <span>
+                                    {{ $post->area->name ?? '---' }} /
+                                    {{ $post->propertyStreet->full_name ?? '---' }} /
+                                    Căn hộ {{ $post->propertyUnit->number ?? '---' }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-2 text-sm text-gray-600">
+                            <i class="far fa-clock text-blue-500"></i>
+                            <span>
+                                {{ $post->created_at->setTimezone('Asia/Ho_Chi_Minh')->format('H:i d/m/Y') }}
+                                <span class="time-badge ml-2">ICT</span>
+                            </span>
+                        </div>
+                    </div>
+                    <!-- Dropdown Menu -->
+                    <div class="relative">
+                        <button class="text-gray-400 hover:text-gray-600 transition-colors" onclick="toggleDropdown('dropdown-{{ $post->id }}')">
+                            <i class="fas fa-ellipsis-v"></i>
+                        </button>
+                        <div id="dropdown-{{ $post->id }}" class="hidden absolute right-0 mt-2 w-40 bg-white rounded-md shadow-lg z-10 border border-gray-100">
+                            <a href="/su-kien/{{ $post->id }}/edit" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2">
+                                <i class="fas fa-edit text-blue-500"></i>
+                                <span>Sửa</span>
+                            </a>
+                            <form method="POST" action="/su-kien/{{ $post->id }}">
+                                @csrf
+                                @method('DELETE')
+                                <button type="submit" onclick="return confirm('Bạn có chắc muốn xoá?')" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-50 flex items-center gap-2">
+                                    <i class="fas fa-trash-alt text-red-500"></i>
+                                    <span>Xoá</span>
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <!-- Post Content -->
+                <div class="p-4">
+                    <div class="tiptap-content">
+                        {!! $post->content !!}
+                    </div>
+                    @if($post->images)
+                    <div class="flex flex-wrap gap-3 mt-4">
+                        @foreach($post->images as $img)
+                        <div class="relative group">
+                            <img src="{{ asset('storage/' . $img) }}"
+                                  class="w-24 h-24 object-cover rounded-lg border cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all"
+                                 onclick="openImageModal('{{ asset('storage/' . $img) }}')">
+                            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg transition-all duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100">
+                                <i class="fas fa-search-plus text-white text-xl"></i>
+                            </div>
+                        </div>
+                        @endforeach
+                    </div>
+                    @endif
+                </div>
+            </div>
+            @endforeach
+        </div>
+        @endif
+    </div>
+    <!-- Image Modal -->
+    <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
+        <div class="relative max-w-4xl max-h-screen">
+            <button onclick="closeImageModal()" class="absolute -top-10 right-0 text-white hover:text-gray-300">
+                <i class="fas fa-times text-2xl"></i>
+            </button>
+            <img id="modalImage" src="" class="max-w-full max-h-screen">
+        </div>
+    </div>
+    <script>
+        // Toggle dropdown
+        function toggleDropdown(id) {
+            const dropdown = document.getElementById(id);
+            dropdown.classList.toggle('hidden');
+            // Close other dropdowns
+            document.querySelectorAll('[id^="dropdown-"]').forEach(el => {
+                if (el.id !== id) el.classList.add('hidden');
+            });
+        }
+        // Close dropdowns when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('.relative')) {
+                document.querySelectorAll('[id^="dropdown-"]').forEach(el => {
+                    el.classList.add('hidden');
+                });
+            }
+        });
+        // Image modal functions
+        function openImageModal(src) {
+            document.getElementById('modalImage').src = src;
+            document.getElementById('imageModal').classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+        function closeImageModal() {
+            document.getElementById('imageModal').classList.add('hidden');
+            document.body.style.overflow = 'auto';
+        }
+        // Close modal when clicking outside image
+        document.getElementById('imageModal').addEventListener('click', function(e) {
+            if (e.target.id === 'imageModal') {
+                closeImageModal();
+            }
+        });
+        // Format content on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            document.querySelectorAll('.tiptap-content').forEach(content => {
+                // Convert line breaks to paragraphs if content is plain text
+                if (!content.innerHTML.includes('<p>') && !content.innerHTML.includes('<div>')) {
+                    content.innerHTML = content.innerHTML
+                        .split('\n')
+                        .filter(para => para.trim() !== '')
+                        .map(para => `<p>${para}</p>`)
+                        .join('');
+                }
+                // Add responsive styling to tables if they exist
+                const tables = content.querySelectorAll('table');
+                tables.forEach(table => {
+                    const wrapper = document.createElement('div');
+                    wrapper.className = 'overflow-x-auto';
+                    table.parentNode.insertBefore(wrapper, table);
+                    wrapper.appendChild(table);
+                    table.className = 'min-w-full divide-y divide-gray-200';
+                    // Style table headers and cells
+                    const ths = table.querySelectorAll('
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ you should add the logic to display who created the post and is it admin or not. And remember remain my code logics since I'm using laravel, don't add your fake data in here:@extends('layouts.app') @section('content') <style> <style> .tiptap-content { line-height: 1.6; color: #374151; font-family: 'Inter', sans-serif; } .tiptap-content p { margin-bottom: 1rem; } .tiptap-content ul, .tiptap-content ol { padding-left: 1.5rem; margin-bottom: 1rem; } .tiptap-content ul { list-style-type: disc; } .tiptap-content ol { list-style-type: decimal; } .tiptap-content h1 { font-size: 1.5rem; font-weight: bold; margin: 1.5rem 0 1rem; } .tiptap-content h2 { font-size: 1.25rem; font-weight: bold; margin: 1.25rem 0 0.75rem; } .tiptap-content h3 { font-size: 1.125rem; font-weight: bold; margin: 1rem 0 0.5rem; } .tiptap-content a { color: #3b82f6; text-decoration: underline; } .tiptap-content blockquote { padding-left: 1rem; border-left: 3px solid #e5e7eb; color: #6b7280; margin: 1rem 0; } .tiptap-content pre { background: #f3f4f6; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; } .tiptap-content code { background: #f3f4f6; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: monospace; } /* Vietnam time badge */ .time-badge { display: inline-flex; align-items: center; gap: 0.25rem; background-color: #f0f9ff; color: #0369a1; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; } .time-badge i { font-size: 0.65rem; } </style> <div class="max-w-4xl mx-auto p-4 sm:p-6"> <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 gap-4"> <div> <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Danh sách sự kiện</h1> <div class="time-badge mt-1"> <i class="fas fa-clock"></i> <span>Giờ Việt Nam (UTC+7)</span> </div> </div> <a href="/su-kien/create" class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition shadow hover:shadow-md w-full sm:w-auto justify-center"> <i class="fas fa-plus"></i> <span>Tạo sự kiện mới</span> </a> </div> @if($posts->isEmpty()) <div class="text-center py-12 bg-white rounded-xl shadow-sm"> <div class="mx-auto w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6"> <i class="fas fa-calendar-alt text-blue-500 text-4xl"></i> </div> <h3 class="text-xl font-medium text-gray-700 mb-2">Chưa có sự kiện nào</h3> <p class="text-gray-500 mb-6">Hãy tạo sự kiện đầu tiên của bạn</p> <a href="/su-kien/create" class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition"> <i class="fas fa-plus"></i> <span>Tạo sự kiện mới</span> </a> </div> @else <div class="space-y-4"> @foreach($posts as $post) <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">  <div class="border-b border-gray-100 p-4 flex justify-between items-start"> <div> <div class="flex items-center gap-2 text-sm text-gray-600 mb-1"> <i class="fas fa-map-marker-alt text-blue-500"></i> <span> {{ $post->area->name ?? '---' }} / {{ $post->propertyStreet->full_name ?? '---' }} / Căn hộ {{ $post->propertyUnit->number ?? '---' }} </span> </div> <div class="flex items-center gap-2 text-sm text-gray-600"> <i class="far fa-clock text-blue-500"></i> <span> {{ $post->created_at->setTimezone('Asia/Ho_Chi_Minh')->format('H:i d/m/Y') }} <span class="time-badge ml-2">ICT</span> </span> </div> </div>  <div class="relative"> <button class="text-gray-400 hover:text-gray-600 transition-colors" onclick="toggleDropdown('dropdown-{{ $post->id }}')"> <i class="fas fa-ellipsis-v"></i> </button> <div id="dropdown-{{ $post->id }}" class="hidden absolute right-0 mt-2 w-40 bg-white rounded-md shadow-lg z-10 border border-gray-100"> <a href="/su-kien/{{ $post->id }}/edit" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"> <i class="fas fa-edit text-blue-500"></i> <span>Sửa</span> </a> <form method="POST" action="/su-kien/{{ $post->id }}"> @csrf @method('DELETE') <button type="submit" onclick="return confirm('Bạn có chắc muốn xoá?')" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-50 flex items-center gap-2"> <i class="fas fa-trash-alt text-red-500"></i> <span>Xoá</span> </button> </form> </div> </div> </div>  <div class="p-4"> <div class="tiptap-content"> {!! $post->content !!} </div> @if($post->images) <div class="flex flex-wrap gap-3 mt-4"> @foreach($post->images as $img) <div class="relative group"> <img src="{{ asset('storage/' . $img) }}" class="w-24 h-24 object-cover rounded-lg border cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all" onclick="openImageModal('{{ asset('storage/' . $img) }}')"> <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg transition-all duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100"> <i class="fas fa-search-plus text-white text-xl"></i> </div> </div> @endforeach </div> @endif </div> </div> @endforeach </div> @endif </div>  <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> <div class="relative max-w-4xl max-h-screen"> <button onclick="closeImageModal()" class="absolute -top-10 right-0 text-white hover:text-gray-300"> <i class="fas fa-times text-2xl"></i> </button> <img id="modalImage" src="" class="max-w-full max-h-screen"> </div> </div> <script> // Toggle dropdown function toggleDropdown(id) { const dropdown = document.getElementById(id); dropdown.classList.toggle('hidden'); // Close other dropdowns document.querySelectorAll('[id^="dropdown-"]').forEach(el => { if (el.id !== id) el.classList.add('hidden'); }); } // Close dropdowns when clicking outside document.addEventListener('click', function(e) { if (!e.target.closest('.relative')) { document.querySelectorAll('[id^="dropdown-"]').forEach(el => { el.classList.add('hidden'); }); } }); // Image modal functions function openImageModal(src) { document.getElementById('modalImage').src = src; document.getElementById('imageModal').classList.remove('hidden'); document.body.style.overflow = 'hidden'; } function closeImageModal() { document.getElementById('imageModal').classList.add('hidden'); document.body.style.overflow = 'auto'; } // Close modal when clicking outside image document.getElementById('imageModal').addEventListener('click', function(e) { if (e.target.id === 'imageModal') { closeImageModal(); } }); // Format content on page load document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.tiptap-content').forEach(content => { // Convert line breaks to paragraphs if content is plain text if (!content.innerHTML.includes('<p>') && !content.innerHTML.includes('<div>')) { content.innerHTML = content.innerHTML .split('\n') .filter(para => para.trim() !== '') .map(para => `<p>${para}</p>`) .join(''); } // Add responsive styling to tables if they exist const tables = content.querySelectorAll('table'); tables.forEach(table => { const wrapper = document.createElement('div'); wrapper.className = 'overflow-x-auto'; table.parentNode.insertBefore(wrapper, table); wrapper.appendChild(table); table.className = 'min-w-full divide-y divide-gray-200'; // Style table headers and cells const ths = table.querySelectorAll('th'); ths.forEach(th => { th.className = 'px-4 py-2 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'; }); const tds = table.querySelectorAll('td'); tds.forEach(td => { td.className = 'px-4 py-2 whitespace-nowrap text-sm text-gray-500 border-t border-gray-200'; }); }); }); }); </script> @endsection