0b7e2d0a5b
- Created complete documentation in docs/ directory - Added PROJECT_OVERVIEW.md with feature highlights and getting started guide - Added ARCHITECTURE.md with system design and technical details - Added SECURITY.md with comprehensive security implementation guide - Added DEVELOPMENT.md with development workflows and best practices - Added DEPLOYMENT.md with production deployment instructions - Added API.md with complete REST API documentation - Added CONTRIBUTING.md with contribution guidelines - Added CHANGELOG.md with version history and migration notes - Reorganized all documentation files into docs/ directory for better organization - Updated README.md with proper documentation links and quick navigation - Enhanced project structure with professional documentation standards
203 lines
10 KiB
Smarty
203 lines
10 KiB
Smarty
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{if $smarty.get.q}Search: {$smarty.get.q} - EasyStream{else}Search - EasyStream{/if}</title>
|
|
<link rel="stylesheet" href="{$main_url}/f_templates/tpl_frontend/css/search.css">
|
|
<style>
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; background: #f8f9fa; }
|
|
.header { background: #fff; border-bottom: 1px solid #e1e5e9; padding: 1rem 0; }
|
|
.header-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
|
|
.logo { font-size: 1.5rem; font-weight: bold; color: #007bff; text-decoration: none; }
|
|
.header-search { flex: 1; max-width: 600px; margin: 0 2rem; }
|
|
.search-container { display: flex; position: relative; }
|
|
.search-input { flex: 1; padding: 0.75rem 1rem; border: 1px solid #ccc; border-radius: 25px 0 0 25px; font-size: 1rem; outline: none; }
|
|
.search-input:focus { border-color: #007bff; }
|
|
.search-btn { background: #007bff; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0 25px 25px 0; cursor: pointer; }
|
|
.search-btn:hover { background: #0056b3; }
|
|
.nav { display: flex; gap: 2rem; }
|
|
.nav a { color: #495057; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; transition: all 0.2s; }
|
|
.nav a:hover { background: #f8f9fa; }
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 2rem 20px; }
|
|
.search-filters { background: white; padding: 1rem; border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
.filter-tabs { display: flex; gap: 1rem; flex-wrap: wrap; }
|
|
.filter-tab { padding: 0.5rem 1rem; border: 1px solid #dee2e6; border-radius: 20px; background: white; color: #495057; text-decoration: none; transition: all 0.2s; }
|
|
.filter-tab:hover, .filter-tab.active { background: #007bff; color: white; border-color: #007bff; }
|
|
.search-results-header { margin-bottom: 1.5rem; }
|
|
.results-count { color: #6c757d; font-size: 0.875rem; }
|
|
.no-results { text-align: center; padding: 3rem; background: white; border-radius: 8px; }
|
|
.no-results h3 { color: #495057; margin: 0 0 1rem 0; }
|
|
.no-results p { color: #6c757d; margin: 0; }
|
|
.suggestions { margin-top: 2rem; }
|
|
.suggestions h4 { margin: 0 0 1rem 0; color: #495057; }
|
|
.suggestion-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
|
|
.suggestion-tag { padding: 0.25rem 0.75rem; background: #e9ecef; color: #495057; border-radius: 15px; text-decoration: none; font-size: 0.875rem; }
|
|
.suggestion-tag:hover { background: #007bff; color: white; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<a href="{$main_url}" class="logo">🎬 EasyStream</a>
|
|
|
|
<div class="header-search">
|
|
<form method="get" action="{$main_url}/search">
|
|
<div class="search-container">
|
|
<input type="text" name="q" class="search-input"
|
|
value="{$smarty.get.q|escape}"
|
|
placeholder="Search videos, channels, and more..."
|
|
autocomplete="off">
|
|
<button type="submit" class="search-btn">🔍</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<nav class="nav">
|
|
<a href="{$main_url}">Home</a>
|
|
<a href="{$main_url}/videos">Videos</a>
|
|
<a href="{$main_url}/upload">Upload</a>
|
|
{if $smarty.session.USER_ID}
|
|
<a href="{$main_url}/account">Account</a>
|
|
{else}
|
|
<a href="{$main_url}/signin">Sign In</a>
|
|
{/if}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
{if $smarty.get.q}
|
|
<div class="search-filters">
|
|
<div class="filter-tabs">
|
|
<a href="?q={$smarty.get.q|urlencode}&tf=0" class="filter-tab {if !$smarty.get.tf or $smarty.get.tf eq '0'}active{/if}">
|
|
📹 All
|
|
</a>
|
|
<a href="?q={$smarty.get.q|urlencode}&tf=1" class="filter-tab {if $smarty.get.tf eq '1'}active{/if}">
|
|
🎬 Videos
|
|
</a>
|
|
<a href="?q={$smarty.get.q|urlencode}&tf=8" class="filter-tab {if $smarty.get.tf eq '8'}active{/if}">
|
|
📺 Live
|
|
</a>
|
|
<a href="?q={$smarty.get.q|urlencode}&tf=2" class="filter-tab {if $smarty.get.tf eq '2'}active{/if}">
|
|
🖼️ Images
|
|
</a>
|
|
<a href="?q={$smarty.get.q|urlencode}&tf=3" class="filter-tab {if $smarty.get.tf eq '3'}active{/if}">
|
|
🎵 Audio
|
|
</a>
|
|
<a href="?q={$smarty.get.q|urlencode}&tf=4" class="filter-tab {if $smarty.get.tf eq '4'}active{/if}">
|
|
📄 Documents
|
|
</a>
|
|
<a href="?q={$smarty.get.q|urlencode}&tf=6" class="filter-tab {if $smarty.get.tf eq '6'}active{/if}">
|
|
👤 Channels
|
|
</a>
|
|
<a href="?q={$smarty.get.q|urlencode}&tf=5" class="filter-tab {if $smarty.get.tf eq '5'}active{/if}">
|
|
📋 Playlists
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-results-header">
|
|
<h1 style="margin: 0 0 0.5rem 0; color: #212529;">
|
|
Search Results for "{$smarty.get.q|escape}"
|
|
</h1>
|
|
<div class="results-count">
|
|
{if $total_results}
|
|
{$total_results|number_format} results found
|
|
{else}
|
|
No results found
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="search-results">
|
|
{generate_html type="search_layout" bullet_id="ct-search" entry_id="ct-search-details" section="search" bb="0"}
|
|
</div>
|
|
|
|
{if !$total_results}
|
|
<div class="no-results">
|
|
<h3>No results found for "{$smarty.get.q|escape}"</h3>
|
|
<p>Try different keywords, check your spelling, or browse our categories below</p>
|
|
|
|
<div class="suggestions">
|
|
<h4>Popular searches:</h4>
|
|
<div class="suggestion-tags">
|
|
<a href="?q=music" class="suggestion-tag">music</a>
|
|
<a href="?q=gaming" class="suggestion-tag">gaming</a>
|
|
<a href="?q=tutorial" class="suggestion-tag">tutorial</a>
|
|
<a href="?q=comedy" class="suggestion-tag">comedy</a>
|
|
<a href="?q=news" class="suggestion-tag">news</a>
|
|
<a href="?q=sports" class="suggestion-tag">sports</a>
|
|
<a href="?q=technology" class="suggestion-tag">technology</a>
|
|
<a href="?q=education" class="suggestion-tag">education</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{else}
|
|
<div style="text-align: center; padding: 3rem;">
|
|
<h1 style="color: #495057; margin: 0 0 1rem 0;">🔍 Search EasyStream</h1>
|
|
<p style="color: #6c757d; margin: 0 0 2rem 0;">Find videos, channels, and content across our platform</p>
|
|
|
|
<form method="get" action="{$main_url}/search" style="max-width: 500px; margin: 0 auto;">
|
|
<div class="search-container">
|
|
<input type="text" name="q" class="search-input"
|
|
placeholder="What are you looking for?"
|
|
autocomplete="off" style="border-radius: 25px;">
|
|
<button type="submit" class="search-btn" style="border-radius: 25px; margin-left: 0.5rem;">
|
|
Search
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="suggestions" style="margin-top: 3rem;">
|
|
<h4>Trending searches:</h4>
|
|
<div class="suggestion-tags" style="justify-content: center;">
|
|
<a href="?q=music" class="suggestion-tag">music</a>
|
|
<a href="?q=gaming" class="suggestion-tag">gaming</a>
|
|
<a href="?q=tutorial" class="suggestion-tag">tutorial</a>
|
|
<a href="?q=comedy" class="suggestion-tag">comedy</a>
|
|
<a href="?q=news" class="suggestion-tag">news</a>
|
|
<a href="?q=sports" class="suggestion-tag">sports</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<script>
|
|
// Enhanced search functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchInput = document.querySelector('.search-input');
|
|
|
|
// Auto-focus search input
|
|
if (searchInput && !searchInput.value) {
|
|
searchInput.focus();
|
|
}
|
|
|
|
// Search suggestions (integrate with existing EasyStream autocomplete)
|
|
if (searchInput) {
|
|
let timeout;
|
|
searchInput.addEventListener('input', function() {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
// Integration with existing EasyStream autocomplete system
|
|
// This would call the existing VGenerate::processAutoComplete() method
|
|
console.log('Search suggestions for:', this.value);
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
// Filter tab interactions
|
|
document.querySelectorAll('.filter-tab').forEach(tab => {
|
|
tab.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-1px)';
|
|
});
|
|
tab.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |