286 lines
11 KiB
PHP
286 lines
11 KiB
PHP
<?php
|
|
require_once 'config.php';
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="<?php echo $lang; ?>" data-theme="<?php echo $currentUserSettings['dark_mode'] ? 'dark' : 'light'; ?>">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>关于我们 - <?php echo SITE_NAME; ?></title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<?php include 'components/navbar.php'; ?>
|
|
|
|
<div class="container">
|
|
<div class="about-container">
|
|
<div class="about-header text-center">
|
|
<h1><i class="fas fa-info-circle"></i> 关于 <?php echo SITE_NAME; ?></h1>
|
|
<p class="lead">安全、快速、免费的图片托管服务</p>
|
|
</div>
|
|
|
|
<div class="about-content">
|
|
<div class="about-section card">
|
|
<h2><i class="fas fa-rocket"></i> 我们的使命</h2>
|
|
<p>为用户提供简单易用、功能强大的图片托管解决方案，让每个人都能轻松分享和管理自己的图片资源。</p>
|
|
</div>
|
|
|
|
<div class="about-section card">
|
|
<h2><i class="fas fa-star"></i> 主要特性</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-item">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
<h3>批量上传</h3>
|
|
<p>支持多文件同时上传，拖拽操作</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<i class="fas fa-tags"></i>
|
|
<h3>标签分类</h3>
|
|
<p>智能标签系统，方便图片管理</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<i class="fas fa-code"></i>
|
|
<h3>API 支持</h3>
|
|
<p>完整的 RESTful API 接口</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<i class="fas fa-palette"></i>
|
|
<h3>深色模式</h3>
|
|
<p>支持明暗主题切换</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<i class="fas fa-shield-alt"></i>
|
|
<h3>安全可靠</h3>
|
|
<p>多重安全验证机制</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<i class="fas fa-mobile-alt"></i>
|
|
<h3>响应式设计</h3>
|
|
<p>完美适配各种设备</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="about-section card">
|
|
<h2><i class="fas fa-cogs"></i> 技术栈</h2>
|
|
<div class="tech-stack">
|
|
<div class="tech-item">
|
|
<i class="fab fa-php"></i>
|
|
<span>PHP</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fas fa-database"></i>
|
|
<span>MySQL</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-js"></i>
|
|
<span>JavaScript</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-html5"></i>
|
|
<span>HTML5</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-css3-alt"></i>
|
|
<span>CSS3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="about-section card">
|
|
<h2><i class="fas fa-chart-line"></i> 统计数据</h2>
|
|
<div class="stats-grid">
|
|
<?php
|
|
try {
|
|
$stmt = $pdo->query("SELECT COUNT(*) as total FROM users");
|
|
$totalUsers = $stmt->fetch(PDO::FETCH_ASSOC)['total'];
|
|
|
|
$stmt = $pdo->query("SELECT COUNT(*) as total FROM images");
|
|
$totalImages = $stmt->fetch(PDO::FETCH_ASSOC)['total'];
|
|
|
|
$stmt = $pdo->query("SELECT SUM(file_size) as total FROM images");
|
|
$totalSize = $stmt->fetch(PDO::FETCH_ASSOC)['total'] ?: 0;
|
|
|
|
$stmt = $pdo->query("SELECT COUNT(*) as total FROM images WHERE DATE(uploaded_at) = CURDATE()");
|
|
$todayImages = $stmt->fetch(PDO::FETCH_ASSOC)['total'];
|
|
} catch(PDOException $e) {
|
|
$totalUsers = $totalImages = $totalSize = $todayImages = 0;
|
|
}
|
|
?>
|
|
<div class="stat-item">
|
|
<div class="stat-number"><?php echo $totalUsers; ?></div>
|
|
<div class="stat-label">注册用户</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number"><?php echo $totalImages; ?></div>
|
|
<div class="stat-label">托管图片</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number"><?php echo formatFileSize($totalSize); ?></div>
|
|
<div class="stat-label">存储空间</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number"><?php echo $todayImages; ?></div>
|
|
<div class="stat-label">今日上传</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="about-section card">
|
|
<h2><i class="fas fa-question-circle"></i> 常见问题</h2>
|
|
<div class="faq-list">
|
|
<div class="faq-item">
|
|
<h3>支持哪些图片格式？</h3>
|
|
<p>支持 JPG、PNG、GIF、WebP 格式，单文件最大 5MB。</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h3>图片会永久保存吗？</h3>
|
|
<p>是的，所有上传的图片都会永久保存，除非用户主动删除。</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h3>如何获取 API 密钥？</h3>
|
|
<p>登录后在 API 文档页面可以生成和管理您的 API 密钥。</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h3>支持外链吗？</h3>
|
|
<p>支持，每张图片都提供直接链接，可以嵌入到其他网站。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="about-section card">
|
|
<h2><i class="fas fa-envelope"></i> 联系我们</h2>
|
|
<div class="contact-info">
|
|
<p>如果您有任何问题或建议，欢迎通过以下方式联系我们：</p>
|
|
<div class="contact-methods">
|
|
<div class="contact-method">
|
|
<i class="fas fa-envelope"></i>
|
|
<span>邮箱: support@66ghz.com</span>
|
|
</div>
|
|
<div class="contact-method">
|
|
<i class="fas fa-bug"></i>
|
|
<span>问题反馈: <a href="feedback.php">反馈页面</a></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.about-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
.about-header {
|
|
margin-bottom: 40px;
|
|
}
|
|
.about-header h1 {
|
|
color: var(--primary-color);
|
|
margin-bottom: 10px;
|
|
}
|
|
.lead {
|
|
font-size: 1.2rem;
|
|
color: var(--text-color);
|
|
opacity: 0.8;
|
|
}
|
|
.about-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
.about-section h2 {
|
|
color: var(--primary-color);
|
|
margin-bottom: 20px;
|
|
border-bottom: 2px solid var(--primary-color);
|
|
padding-bottom: 10px;
|
|
}
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.feature-item {
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
.feature-item i {
|
|
font-size: 2.5rem;
|
|
color: var(--primary-color);
|
|
margin-bottom: 15px;
|
|
}
|
|
.feature-item h3 {
|
|
margin-bottom: 10px;
|
|
color: var(--text-color);
|
|
}
|
|
.tech-stack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
}
|
|
.tech-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 15px;
|
|
background: var(--bg-color);
|
|
border-radius: var(--radius);
|
|
min-width: 80px;
|
|
}
|
|
.tech-item i {
|
|
font-size: 2rem;
|
|
margin-bottom: 8px;
|
|
color: var(--primary-color);
|
|
}
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: var(--bg-color);
|
|
border-radius: var(--radius);
|
|
}
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: var(--primary-color);
|
|
margin-bottom: 5px;
|
|
}
|
|
.faq-list {
|
|
margin-top: 20px;
|
|
}
|
|
.faq-item {
|
|
margin-bottom: 20px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.faq-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.faq-item h3 {
|
|
color: var(--text-color);
|
|
margin-bottom: 10px;
|
|
}
|
|
.contact-methods {
|
|
margin-top: 15px;
|
|
}
|
|
.contact-method {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.contact-method i {
|
|
color: var(--primary-color);
|
|
width: 20px;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|