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
169 lines
8.1 KiB
Smarty
169 lines
8.1 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 $ch_title}{$ch_title}{elseif $usr_dname}{$usr_dname}{else}{$usr_user}{/if} - EasyStream</title>
|
||
<link rel="stylesheet" href="{$main_url}/f_templates/tpl_frontend/css/channel.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; }
|
||
.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: 0 20px; }
|
||
.channel-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3rem 0; margin-bottom: 2rem; }
|
||
.channel-info { display: flex; align-items: center; gap: 2rem; }
|
||
.channel-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid white; object-fit: cover; }
|
||
.channel-details h1 { margin: 0 0 0.5rem 0; font-size: 2rem; }
|
||
.channel-details p { margin: 0 0 1rem 0; opacity: 0.9; }
|
||
.channel-stats { display: flex; gap: 2rem; margin-bottom: 1rem; }
|
||
.stat { text-align: center; }
|
||
.stat-number { font-size: 1.5rem; font-weight: bold; }
|
||
.stat-label { font-size: 0.875rem; opacity: 0.8; }
|
||
.subscribe-btn { background: #cc0000; color: white; border: none; padding: 0.75rem 2rem; border-radius: 25px; cursor: pointer; font-weight: 500; }
|
||
.subscribe-btn:hover { background: #aa0000; }
|
||
.channel-nav { background: white; border-radius: 8px; padding: 1rem; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
||
.nav-tabs { display: flex; gap: 2rem; }
|
||
.nav-tab { padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; color: #495057; transition: all 0.2s; }
|
||
.nav-tab:hover, .nav-tab.active { background: #007bff; color: white; }
|
||
.channel-content { background: white; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<div class="header-content">
|
||
<a href="{$main_url}" class="logo">🎬 EasyStream</a>
|
||
<nav class="nav">
|
||
<a href="{$main_url}">Home</a>
|
||
<a href="{$main_url}/videos">Videos</a>
|
||
<a href="{$main_url}/upload">Upload</a>
|
||
<a href="{$main_url}/search">Search</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="channel-header">
|
||
<div class="container">
|
||
<div class="channel-info">
|
||
<img src="{if $usr_photo}{$usr_photo}{else}{$main_url}/f_templates/tpl_frontend/img/default-avatar.png{/if}"
|
||
alt="{if $ch_title}{$ch_title}{else}{$usr_user}{/if}" class="channel-avatar">
|
||
|
||
<div class="channel-details">
|
||
<h1>{if $ch_title}{$ch_title}{elseif $usr_dname}{$usr_dname}{else}{$usr_user}{/if}</h1>
|
||
<p>@{$usr_user}</p>
|
||
|
||
<div class="channel-stats">
|
||
<div class="stat">
|
||
<div class="stat-number">{if $usr_subscribers}{$usr_subscribers|number_format}{else}0{/if}</div>
|
||
<div class="stat-label">Subscribers</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-number">{if $total_videos}{$total_videos|number_format}{else}0{/if}</div>
|
||
<div class="stat-label">Videos</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-number">{if $total_views}{$total_views|number_format}{else}0{/if}</div>
|
||
<div class="stat-label">Views</div>
|
||
</div>
|
||
</div>
|
||
|
||
{if $smarty.session.USER_ID and $smarty.session.USER_ID neq $usr_id}
|
||
<button class="subscribe-btn" data-user-id="{$usr_id}">
|
||
{if $user_issub}Subscribed{else}Subscribe{/if}
|
||
</button>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="channel-nav">
|
||
<div class="nav-tabs">
|
||
<a href="?tab=home" class="nav-tab {if !$smarty.get.tab or $smarty.get.tab eq 'home'}active{/if}">
|
||
🏠 Home
|
||
</a>
|
||
{if $video_module}
|
||
<a href="?tab=videos" class="nav-tab {if $smarty.get.tab eq 'videos'}active{/if}">
|
||
📹 Videos
|
||
</a>
|
||
{/if}
|
||
{if $short_module}
|
||
<a href="?tab=shorts" class="nav-tab {if $smarty.get.tab eq 'shorts'}active{/if}">
|
||
🎬 Shorts
|
||
</a>
|
||
{/if}
|
||
{if $live_module}
|
||
<a href="?tab=live" class="nav-tab {if $smarty.get.tab eq 'live'}active{/if}">
|
||
📺 Live
|
||
</a>
|
||
{/if}
|
||
{if $image_module}
|
||
<a href="?tab=images" class="nav-tab {if $smarty.get.tab eq 'images'}active{/if}">
|
||
🖼️ Images
|
||
</a>
|
||
{/if}
|
||
{if $audio_module}
|
||
<a href="?tab=audio" class="nav-tab {if $smarty.get.tab eq 'audio'}active{/if}">
|
||
🎵 Audio
|
||
</a>
|
||
{/if}
|
||
<a href="?tab=about" class="nav-tab {if $smarty.get.tab eq 'about'}active{/if}">
|
||
ℹ️ About
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="channel-content">
|
||
{generate_html type="channel_layout" bullet_id="ct-bullet1" entry_id="ct-entry-details1" section="files" bb="1"}
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
var current_url = '{$main_url}/';
|
||
var menu_section = '{href_entry key="channel"}';
|
||
var fe_mask = 'on';
|
||
|
||
// Enhanced channel interactions
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Subscribe functionality
|
||
const subscribeBtn = document.querySelector('.subscribe-btn');
|
||
if (subscribeBtn) {
|
||
subscribeBtn.addEventListener('click', function() {
|
||
const userId = this.dataset.userId;
|
||
// Integration with existing EasyStream subscription system
|
||
console.log('Subscribe to user:', userId);
|
||
});
|
||
}
|
||
|
||
// Tab interactions
|
||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||
tab.addEventListener('mouseenter', function() {
|
||
this.style.transform = 'translateY(-1px)';
|
||
});
|
||
tab.addEventListener('mouseleave', function() {
|
||
this.style.transform = 'translateY(0)';
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
{insert name="swiperJS" for="tnav"}
|
||
{if $video_module}{insert name="swiperJS" for="video"}{/if}
|
||
{if $short_module}{insert name="swiperJS" for="short"}{/if}
|
||
{if $live_module}{insert name="swiperJS" for="live"}{/if}
|
||
{if $image_module}{insert name="swiperJS" for="image"}{/if}
|
||
{if $audio_module}{insert name="swiperJS" for="audio"}{/if}
|
||
{if $document_module}{insert name="swiperJS" for="doc"}{/if}
|
||
{if $blog_module}{insert name="swiperJS" for="blog"}{/if}
|
||
</body>
|
||
</html>
|