Autosave: 20260205-142110
This commit is contained in:
Flatlogic Bot
parent
ee218912b8
commit
daaa9ca937
File diff suppressed because it is too large
Load Diff
@ -2,10 +2,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
// Navbar Scroll Effect
|
// Navbar Scroll Effect
|
||||||
const navbar = document.querySelector('.navbar');
|
const navbar = document.querySelector('.navbar');
|
||||||
window.addEventListener('scroll', () => {
|
window.addEventListener('scroll', () => {
|
||||||
if (window.scrollY > 50) {
|
if (navbar) {
|
||||||
navbar.classList.add('scrolled');
|
if (window.scrollY > 50) {
|
||||||
} else {
|
navbar.classList.add('scrolled');
|
||||||
navbar.classList.remove('scrolled');
|
} else {
|
||||||
|
navbar.classList.remove('scrolled');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -35,38 +37,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 6000,
|
delay: 6000,
|
||||||
disableOnInteraction: false,
|
disableOnInteraction: false,
|
||||||
},
|
}
|
||||||
pagination: {
|
|
||||||
el: '.swiper-pagination',
|
|
||||||
clickable: true,
|
|
||||||
},
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.swiper-button-next',
|
|
||||||
prevEl: '.swiper-button-prev',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Testimonials Swiper
|
|
||||||
const testimonialsSwiper = new Swiper('.testimonials-swiper', {
|
|
||||||
slidesPerView: 1,
|
|
||||||
spaceBetween: 30,
|
|
||||||
loop: true,
|
|
||||||
autoplay: {
|
|
||||||
delay: 5000,
|
|
||||||
disableOnInteraction: false,
|
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
el: '.swiper-pagination',
|
|
||||||
clickable: true,
|
|
||||||
},
|
|
||||||
breakpoints: {
|
|
||||||
768: {
|
|
||||||
slidesPerView: 2,
|
|
||||||
},
|
|
||||||
1024: {
|
|
||||||
slidesPerView: 3,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Portfolio Filtering
|
// Portfolio Filtering
|
||||||
@ -75,7 +46,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
|
|
||||||
filterBtns.forEach(btn => {
|
filterBtns.forEach(btn => {
|
||||||
btn.addEventListener('click', () => {
|
btn.addEventListener('click', () => {
|
||||||
// Update active button
|
|
||||||
filterBtns.forEach(b => b.classList.remove('active'));
|
filterBtns.forEach(b => b.classList.remove('active'));
|
||||||
btn.classList.add('active');
|
btn.classList.add('active');
|
||||||
|
|
||||||
@ -96,16 +66,30 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
const contactForm = document.getElementById('contactForm');
|
const contactForm = document.getElementById('contactForm');
|
||||||
const toast = document.getElementById('toast');
|
const toast = document.getElementById('toast');
|
||||||
|
|
||||||
|
// Simple I18N for JS messages based on html lang attribute
|
||||||
|
const htmlLang = document.documentElement.lang || 'en';
|
||||||
|
const messages = {
|
||||||
|
en: { sending: 'Sending...', success: 'Message sent successfully!', error: 'Failed to send. Please try again.' },
|
||||||
|
zh: { sending: '发送中...', success: '消息已成功发送！', error: '发送失败，请稍后再试。' },
|
||||||
|
ja: { sending: '送信中...', success: '送信が完了しました！', error: '送信に失敗しました。' },
|
||||||
|
ko: { sending: '전송 중...', success: '메시지가 성공적으로 전송되었습니다!', error: '전송 실패. 다시 시도하십시오.' },
|
||||||
|
de: { sending: 'Senden...', success: 'Nachricht erfolgreich gesendet!', error: 'Fehler beim Senden.' },
|
||||||
|
fr: { sending: 'Envoi...', success: 'Message envoyé avec succès !', error: 'Échec de l\'envoi.' },
|
||||||
|
es: { sending: 'Enviando...', success: '¡Mensaje enviado con éxito!', error: 'Error al enviar.' },
|
||||||
|
ar: { sending: 'جاري الإرسال...', success: 'تم إرسال الرسالة بنجاح!', error: 'فشل الإرسال. يرجى المحاولة مرة أخرى.' }
|
||||||
|
};
|
||||||
|
const msg = messages[htmlLang] || messages['en'];
|
||||||
|
|
||||||
if (contactForm) {
|
if (contactForm) {
|
||||||
contactForm.addEventListener('submit', async (e) => {
|
contactForm.addEventListener('submit', async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const formData = new FormData(contactForm);
|
const formData = new FormData(contactForm);
|
||||||
const submitBtn = contactForm.querySelector('button[type="submit"]');
|
const submitBtn = contactForm.querySelector('.btn-submit');
|
||||||
const originalBtnText = submitBtn.innerHTML;
|
const originalBtnContent = submitBtn.innerHTML;
|
||||||
|
|
||||||
submitBtn.disabled = true;
|
submitBtn.disabled = true;
|
||||||
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 发送中...';
|
submitBtn.innerHTML = `<span>${msg.sending}</span> <i class="fas fa-spinner fa-spin"></i>`;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch('contact.php', {
|
const response = await fetch('contact.php', {
|
||||||
@ -116,21 +100,22 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
const result = await response.json();
|
const result = await response.json();
|
||||||
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
showToast('消息已成功发送！我会尽快给您回复。');
|
showToast(msg.success);
|
||||||
contactForm.reset();
|
contactForm.reset();
|
||||||
} else {
|
} else {
|
||||||
showToast('发送失败: ' + (result.error || '请稍后再试'));
|
showToast(msg.error + ' ' + (result.error || ''));
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
showToast('无法连接到服务器，请检查网络。');
|
showToast(msg.error);
|
||||||
} finally {
|
} finally {
|
||||||
submitBtn.disabled = false;
|
submitBtn.disabled = false;
|
||||||
submitBtn.innerHTML = originalBtnText;
|
submitBtn.innerHTML = originalBtnContent;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function showToast(message) {
|
function showToast(message) {
|
||||||
|
if (!toast) return;
|
||||||
toast.innerText = message;
|
toast.innerText = message;
|
||||||
toast.style.display = 'block';
|
toast.style.display = 'block';
|
||||||
toast.style.animation = 'slideInUp 0.5s ease forwards';
|
toast.style.animation = 'slideInUp 0.5s ease forwards';
|
||||||
@ -146,35 +131,27 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
// Smooth scroll for nav links
|
// Smooth scroll for nav links
|
||||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
anchor.addEventListener('click', function (e) {
|
anchor.addEventListener('click', function (e) {
|
||||||
e.preventDefault();
|
if (this.hash !== "") {
|
||||||
|
e.preventDefault();
|
||||||
// Close mobile menu if open
|
const target = document.querySelector(this.hash);
|
||||||
if (navLinks.classList.contains('active')) {
|
if (target) {
|
||||||
navLinks.classList.remove('active');
|
if (navLinks && navLinks.classList.contains('active')) {
|
||||||
const icon = mobileMenuToggle.querySelector('i');
|
navLinks.classList.remove('active');
|
||||||
icon.classList.replace('fa-times', 'fa-bars');
|
const icon = mobileMenuToggle.querySelector('i');
|
||||||
}
|
icon.classList.replace('fa-times', 'fa-bars');
|
||||||
|
}
|
||||||
const target = document.querySelector(this.getAttribute('href'));
|
window.scrollTo({
|
||||||
if (target) {
|
top: target.offsetTop - 80,
|
||||||
const offset = 80;
|
behavior: 'smooth'
|
||||||
const bodyRect = document.body.getBoundingClientRect().top;
|
});
|
||||||
const elementRect = target.getBoundingClientRect().top;
|
}
|
||||||
const elementPosition = elementRect - bodyRect;
|
|
||||||
const offsetPosition = elementPosition - offset;
|
|
||||||
|
|
||||||
window.scrollTo({
|
|
||||||
top: offsetPosition,
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Animation styles
|
const animStyle = document.createElement('style');
|
||||||
const style = document.createElement('style');
|
animStyle.textContent = "
|
||||||
style.textContent = `
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from { opacity: 0; transform: translateY(20px); }
|
from { opacity: 0; transform: translateY(20px); }
|
||||||
to { opacity: 1; transform: translateY(0); }
|
to { opacity: 1; transform: translateY(0); }
|
||||||
@ -187,5 +164,5 @@ style.textContent = `
|
|||||||
from { transform: translateY(0); opacity: 1; }
|
from { transform: translateY(0); opacity: 1; }
|
||||||
to { transform: translateY(100%); opacity: 0; }
|
to { transform: translateY(100%); opacity: 0; }
|
||||||
}
|
}
|
||||||
`;
|
";
|
||||||
document.head.appendChild(style);
|
document.head.appendChild(animStyle);
|
||||||
@ -1,15 +1,29 @@
|
|||||||
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
<linearGradient id="mainGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
<stop offset="0%" style="stop-color:#0062ff;stop-opacity:1" />
|
<stop offset="0%" style="stop-color:#00c6ff;stop-opacity:1" />
|
||||||
<stop offset="100%" style="stop-color:#004dc7;stop-opacity:1" />
|
<stop offset="100%" style="stop-color:#0072ff;stop-opacity:1" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feGaussianBlur in="SourceAlpha" stdDeviation="2" />
|
||||||
|
<feOffset dx="1" dy="2" result="offsetblur" />
|
||||||
|
<feComponentTransfer>
|
||||||
|
<feFuncA type="linear" slope="0.3" />
|
||||||
|
</feComponentTransfer>
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode />
|
||||||
|
<feMergeNode in="SourceGraphic" />
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<!-- Background Shape -->
|
<!-- Background Circle with Soft Gradient -->
|
||||||
<rect x="10" y="10" width="80" height="80" rx="20" fill="url(#logoGradient)" />
|
<circle cx="50" cy="50" r="45" fill="#f8fafc" stroke="url(#mainGradient)" stroke-width="2" />
|
||||||
<!-- Stylized Z and Chart -->
|
|
||||||
<path d="M30 30 H70 L30 70 H70" fill="none" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />
|
<!-- Stylized Z that looks like a growth chart/path -->
|
||||||
<!-- Tech Node / Dot -->
|
<path d="M30 35 L70 35 L35 70 L75 70" fill="none" stroke="url(#mainGradient)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" filter="url(#shadow)" />
|
||||||
<circle cx="70" cy="30" r="6" fill="#10b981" />
|
|
||||||
<circle cx="30" cy="70" r="6" fill="#10b981" />
|
<!-- Abstract Nodes representing tech/finance -->
|
||||||
|
<circle cx="70" cy="35" r="5" fill="#10b981" />
|
||||||
|
<circle cx="35" cy="70" r="5" fill="#f59e0b" />
|
||||||
|
<path d="M52 52 L58 52" stroke="#6366f1" stroke-width="4" stroke-linecap="round" />
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 748 B After Width: | Height: | Size: 1.3 KiB |
87
db/init.php
87
db/init.php
@ -3,15 +3,100 @@ require_once __DIR__ . '/config.php';
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
$pdo = db();
|
$pdo = db();
|
||||||
|
|
||||||
|
// Contact requests table
|
||||||
$sql = "CREATE TABLE IF NOT EXISTS contact_requests (
|
$sql = "CREATE TABLE IF NOT EXISTS contact_requests (
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||||
name VARCHAR(255) NOT NULL,
|
name VARCHAR(255) NOT NULL,
|
||||||
email VARCHAR(255) NOT NULL,
|
email VARCHAR(255) NOT NULL,
|
||||||
|
type VARCHAR(50) DEFAULT NULL,
|
||||||
message TEXT NOT NULL,
|
message TEXT NOT NULL,
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;";
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;";
|
||||||
|
|
||||||
$pdo->exec($sql);
|
$pdo->exec($sql);
|
||||||
|
|
||||||
|
// Projects table for rich content
|
||||||
|
$sql = "CREATE TABLE IF NOT EXISTS projects (
|
||||||
|
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
title VARCHAR(255) NOT NULL,
|
||||||
|
slug VARCHAR(255) NOT NULL UNIQUE,
|
||||||
|
category VARCHAR(100) NOT NULL,
|
||||||
|
short_description TEXT NOT NULL,
|
||||||
|
full_content LONGTEXT NOT NULL,
|
||||||
|
image_url VARCHAR(255) NOT NULL,
|
||||||
|
client_name VARCHAR(255) DEFAULT NULL,
|
||||||
|
project_date VARCHAR(50) DEFAULT NULL,
|
||||||
|
tech_stack TEXT DEFAULT NULL,
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;";
|
||||||
|
$pdo->exec($sql);
|
||||||
|
|
||||||
|
// Clear existing projects to ensure we have exactly what we want
|
||||||
|
$pdo->exec("TRUNCATE TABLE projects");
|
||||||
|
|
||||||
|
$categories = ['fintech', 'web', 'app'];
|
||||||
|
$images = [
|
||||||
|
'fintech' => [
|
||||||
|
'https://images.pexels.com/photos/6770610/pexels-photo-6770610.jpeg',
|
||||||
|
'https://images.pexels.com/photos/6801874/pexels-photo-6801874.jpeg',
|
||||||
|
'https://images.pexels.com/photos/7567443/pexels-photo-7567443.jpeg',
|
||||||
|
'https://images.pexels.com/photos/8370752/pexels-photo-8370752.jpeg',
|
||||||
|
'https://images.pexels.com/photos/6771664/pexels-photo-6771664.jpeg'
|
||||||
|
],
|
||||||
|
'web' => [
|
||||||
|
'https://images.pexels.com/photos/251225/pexels-photo-251225.jpeg',
|
||||||
|
'https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg',
|
||||||
|
'https://images.pexels.com/photos/326503/pexels-photo-326503.jpeg',
|
||||||
|
'https://images.pexels.com/photos/1092644/pexels-photo-1092644.jpeg',
|
||||||
|
'https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg'
|
||||||
|
],
|
||||||
|
'app' => [
|
||||||
|
'https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg',
|
||||||
|
'https://images.pexels.com/photos/1181671/pexels-photo-1181671.jpeg',
|
||||||
|
'https://images.pexels.com/photos/1181263/pexels-photo-1181263.jpeg',
|
||||||
|
'https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg',
|
||||||
|
'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg'
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
$titles = [
|
||||||
|
'fintech' => [
|
||||||
|
'Global Payments Gateway', 'Crypto Asset Manager', 'Algo Trading Terminal', 'Risk Assessment Engine',
|
||||||
|
'DeFi Liquidity Pool', 'Real-time Clearing House', 'Credit Scoring AI', 'Wealth Management Hub',
|
||||||
|
'Mobile Banking Core', 'Institutional Trading API'
|
||||||
|
],
|
||||||
|
'web' => [
|
||||||
|
'Luxury Real Estate Portal', 'High-end Fashion Boutique', 'Architectural Showcase', 'Global Consulting Landing',
|
||||||
|
'Art Gallery Digital Experience', 'Premium Car Configurator', 'Exclusive Travel Concierge', 'Modern Media Platform',
|
||||||
|
'Corporate Governance Site', 'Creative Portfolio Engine'
|
||||||
|
],
|
||||||
|
'app' => [
|
||||||
|
'Supply Chain ERP', 'Telemedicine Platform', 'Smart City Dashboard', 'Enterprise HR Portal',
|
||||||
|
'IoT Monitoring System', 'Cloud Infrastructure Manager', 'Retail Logistics App', 'AI Customer Service Hub',
|
||||||
|
'Project Management Suite', 'Real-time Collaboration Tool'
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
$stmt = $pdo->prepare("INSERT INTO projects (title, slug, category, short_description, full_content, image_url, client_name, project_date, tech_stack) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)");
|
||||||
|
|
||||||
|
for ($i = 1; $i <= 30; $i++) {
|
||||||
|
$cat = $categories[($i - 1) % 3];
|
||||||
|
$titleIndex = floor(($i - 1) / 3);
|
||||||
|
$title = $titles[$cat][$titleIndex];
|
||||||
|
$slug = strtolower(str_replace(' ', '-', $title)) . '-' . $i;
|
||||||
|
$desc = "Advanced $cat solution designed for high-performance and scalability in the modern digital landscape.";
|
||||||
|
$content = "<h3>Overview</h3><p>This project represents a milestone in $cat development, focusing on delivering exceptional value through technical excellence.</p><h3>Key Features</h3><ul><li>High availability architecture</li><li>Secure data processing</li><li>Seamless third-party integrations</li><li>Intuitive user experience</li></ul>";
|
||||||
|
$img = $images[$cat][rand(0, 4)];
|
||||||
|
$client = "Global " . ucfirst($cat) . " Corp";
|
||||||
|
$date = "2023." . str_pad((string)rand(1, 12), 2, '0', STR_PAD_LEFT);
|
||||||
|
$stack = "PHP, React, Cloud, SQL";
|
||||||
|
|
||||||
|
$stmt->execute([$title, $slug, $cat, $desc, $content, $img, $client, $date, $stack]);
|
||||||
|
}
|
||||||
|
|
||||||
|
echo "Successfully seeded 30 projects.";
|
||||||
|
|
||||||
} catch (PDOException $e) {
|
} catch (PDOException $e) {
|
||||||
error_log("Database initialization error: " . $e->getMessage());
|
error_log("Database initialization error: " . $e->getMessage());
|
||||||
|
echo "Error: " . $e->getMessage();
|
||||||
}
|
}
|
||||||
332
includes/i18n.php
Normal file
332
includes/i18n.php
Normal file
@ -0,0 +1,332 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
$languages = [
|
||||||
|
'en' => ['name' => 'English', 'flag' => '🇺🇸'],
|
||||||
|
'zh' => ['name' => '简体中文', 'flag' => '🇨🇳'],
|
||||||
|
'ja' => ['name' => '日本語', 'flag' => '🇯🇵'],
|
||||||
|
'ko' => ['name' => '한국어', 'flag' => '🇰🇷'],
|
||||||
|
'de' => ['name' => 'Deutsch', 'flag' => '🇩🇪'],
|
||||||
|
'fr' => ['name' => 'Français', 'flag' => '🇫🇷'],
|
||||||
|
'es' => ['name' => 'Español', 'flag' => '🇪🇸'],
|
||||||
|
'ar' => ['name' => 'العربية', 'flag' => '🇸🇦']
|
||||||
|
];
|
||||||
|
|
||||||
|
$default_lang = 'en';
|
||||||
|
|
||||||
|
if (isset($_GET['lang']) && array_key_exists($_GET['lang'], $languages)) {
|
||||||
|
$_SESSION['lang'] = $_GET['lang'];
|
||||||
|
setcookie('lang', $_GET['lang'], time() + (86400 * 30), "/");
|
||||||
|
}
|
||||||
|
|
||||||
|
$lang = $_SESSION['lang'] ?? $_COOKIE['lang'] ?? $default_lang;
|
||||||
|
|
||||||
|
$translations = [
|
||||||
|
'en' => [
|
||||||
|
'nav_home' => 'Home',
|
||||||
|
'nav_services' => 'Services',
|
||||||
|
'nav_portfolio' => 'Portfolio',
|
||||||
|
'nav_about' => 'About',
|
||||||
|
'nav_process' => 'Process',
|
||||||
|
'nav_testimonials' => 'Clients',
|
||||||
|
'nav_contact' => 'Consult Now',
|
||||||
|
'hero_badge_1' => 'FINTECH EXPERT',
|
||||||
|
'hero_title_1' => 'Defining the Future of Fintech',
|
||||||
|
'hero_desc_1' => 'Combining deep industry insights with cutting-edge development to build a robust, efficient, and scalable digital foundation for your business.',
|
||||||
|
'hero_btn_consult' => 'Expert Consultation',
|
||||||
|
'hero_btn_explore' => 'Explore Cases',
|
||||||
|
'stats_years' => 'Years Experience',
|
||||||
|
'stats_cases' => 'Successful Cases',
|
||||||
|
'stats_trust' => 'Client Trust',
|
||||||
|
'stats_load' => 'System Capacity',
|
||||||
|
'services_title' => 'Full-Stack Ecosystem',
|
||||||
|
'services_subtitle' => 'One-stop technical solutions from consulting to maintenance.',
|
||||||
|
'portfolio_title' => 'Featured Projects',
|
||||||
|
'portfolio_subtitle' => 'Explore how we transform complex requirements into elegant solutions.',
|
||||||
|
'filter_all' => 'All Works',
|
||||||
|
'filter_fintech' => 'Fintech',
|
||||||
|
'filter_web' => 'Brand Web',
|
||||||
|
'filter_app' => 'App Systems',
|
||||||
|
'about_subtitle' => 'ABOUT ME',
|
||||||
|
'about_title' => 'Full-Stack Vision, Empowering Business Growth',
|
||||||
|
'contact_title' => 'Customize Your Digital Future',
|
||||||
|
'contact_form_title' => 'Project Inquiry',
|
||||||
|
'form_name' => 'Your Name',
|
||||||
|
'form_contact' => 'Contact Info (Email/TG)',
|
||||||
|
'form_type' => 'Inquiry Type',
|
||||||
|
'form_message' => 'Brief Requirements',
|
||||||
|
'form_submit' => 'Submit Inquiry',
|
||||||
|
'footer_desc' => 'Building extraordinary value with exquisite code. Global technology expert portal.',
|
||||||
|
'view_details' => 'View Details'
|
||||||
|
],
|
||||||
|
'zh' => [
|
||||||
|
'nav_home' => '首页',
|
||||||
|
'nav_services' => '核心服务',
|
||||||
|
'nav_portfolio' => '精选案例',
|
||||||
|
'nav_about' => '关于我',
|
||||||
|
'nav_process' => '合作流程',
|
||||||
|
'nav_testimonials' => '客户评价',
|
||||||
|
'nav_contact' => '立即咨询',
|
||||||
|
'hero_badge_1' => '金融科技专家',
|
||||||
|
'hero_title_1' => '定义金融科技的新高度',
|
||||||
|
'hero_desc_1' => '融合深厚行业洞察与前沿开发技术，为您的业务构建稳健、高效、可扩展的数字化基石。',
|
||||||
|
'hero_btn_consult' => '开启专家咨询',
|
||||||
|
'hero_btn_explore' => '探索精选案例',
|
||||||
|
'stats_years' => '行业深耕 (年)',
|
||||||
|
'stats_cases' => '卓越交付案例',
|
||||||
|
'stats_trust' => '客户长期信赖',
|
||||||
|
'stats_load' => '系统负载能力',
|
||||||
|
'services_title' => '全链路技术生态',
|
||||||
|
'services_subtitle' => '提供从咨询设计、研发交付到安全运维的一站式技术闭环方案。',
|
||||||
|
'portfolio_title' => '精选项目案例',
|
||||||
|
'portfolio_subtitle' => '探索我们如何将复杂的需求转化为简洁、高效且美观的技术方案。',
|
||||||
|
'filter_all' => '全部作品',
|
||||||
|
'filter_fintech' => '金融科技',
|
||||||
|
'filter_web' => '品牌网页',
|
||||||
|
'filter_app' => '应用系统',
|
||||||
|
'about_subtitle' => '关于我',
|
||||||
|
'about_title' => '全栈视野，深度赋能业务增长',
|
||||||
|
'contact_title' => '定制您的数字化未来',
|
||||||
|
'contact_form_title' => '项目咨询表',
|
||||||
|
'form_name' => '您的称呼',
|
||||||
|
'form_contact' => '联系方式 (Email/微信/TG)',
|
||||||
|
'form_type' => '咨询类型',
|
||||||
|
'form_message' => '需求简述',
|
||||||
|
'form_submit' => '提交咨询申请',
|
||||||
|
'footer_desc' => '用极致的代码构建非凡的价值。专注于金融科技与高端全栈开发的全球化技术专家门户。',
|
||||||
|
'view_details' => '深入探索'
|
||||||
|
],
|
||||||
|
'ja' => [
|
||||||
|
'nav_home' => 'ホーム',
|
||||||
|
'nav_services' => 'サービス',
|
||||||
|
'nav_portfolio' => 'ポートフォリオ',
|
||||||
|
'nav_about' => '私について',
|
||||||
|
'nav_process' => 'プロセス',
|
||||||
|
'nav_testimonials' => 'お客様の声',
|
||||||
|
'nav_contact' => '今すぐ相談',
|
||||||
|
'hero_badge_1' => 'フィンテック専門家',
|
||||||
|
'hero_title_1' => 'フィンテックの未来を定義する',
|
||||||
|
'hero_desc_1' => '深い業界の洞察と最先端の開発を組み合わせ、ビジネスのための堅牢で効率的なデジタル基盤を構築します。',
|
||||||
|
'hero_btn_consult' => '専門家に相談',
|
||||||
|
'hero_btn_explore' => '事例を見る',
|
||||||
|
'stats_years' => '経験年数',
|
||||||
|
'stats_cases' => '成功事例',
|
||||||
|
'stats_trust' => '顧客の信頼',
|
||||||
|
'stats_load' => 'システム容量',
|
||||||
|
'services_title' => 'フルスタックエコシステム',
|
||||||
|
'services_subtitle' => 'コンサルティングからメンテナンスまでのワンストップソリューション。',
|
||||||
|
'portfolio_title' => '注目のプロジェクト',
|
||||||
|
'portfolio_subtitle' => '複雑な要件をいかにエレガントなソリューションに変えるかをご覧ください。',
|
||||||
|
'filter_all' => 'すべて',
|
||||||
|
'filter_fintech' => 'フィンテック',
|
||||||
|
'filter_web' => 'ブランドウェブ',
|
||||||
|
'filter_app' => 'アプリシステム',
|
||||||
|
'about_subtitle' => '私について',
|
||||||
|
'about_title' => 'フルスタックのビジョンでビジネスの成長を支援',
|
||||||
|
'contact_title' => 'あなたのデジタルの未来をカスタマイズ',
|
||||||
|
'contact_form_title' => 'プロジェクトのお問い合わせ',
|
||||||
|
'form_name' => 'お名前',
|
||||||
|
'form_contact' => '連絡先 (Email/TG)',
|
||||||
|
'form_type' => 'お問い合わせの種類',
|
||||||
|
'form_message' => '要件の概要',
|
||||||
|
'form_submit' => 'お問い合わせを送信',
|
||||||
|
'footer_desc' => '洗練されたコードで並外れた価値を創造。グローバル技術専門家ポータル。',
|
||||||
|
'view_details' => '詳細を見る'
|
||||||
|
],
|
||||||
|
'ko' => [
|
||||||
|
'nav_home' => '홈',
|
||||||
|
'nav_services' => '서비스',
|
||||||
|
'nav_portfolio' => '포트폴리오',
|
||||||
|
'nav_about' => '자기소개',
|
||||||
|
'nav_process' => '프로세스',
|
||||||
|
'nav_testimonials' => '고객 후기',
|
||||||
|
'nav_contact' => '지금 상담하기',
|
||||||
|
'hero_badge_1' => '핀테크 전문가',
|
||||||
|
'hero_title_1' => '핀테크의 미래를 정의하다',
|
||||||
|
'hero_desc_1' => '심도 있는 산업 통찰력과 최첨단 개발 기술을 결합하여 비즈니스를 위한 강력하고 효율적인 디지털 기반을 구축합니다.',
|
||||||
|
'hero_btn_consult' => '전문가 상담',
|
||||||
|
'hero_btn_explore' => '사례 탐색',
|
||||||
|
'stats_years' => '경력 연수',
|
||||||
|
'stats_cases' => '성공적인 사례',
|
||||||
|
'stats_trust' => '고객 신뢰',
|
||||||
|
'stats_load' => '시스템 용량',
|
||||||
|
'services_title' => '풀스택 생태계',
|
||||||
|
'services_subtitle' => '컨설팅부터 유지보수까지 원스톱 기술 솔루션 제공.',
|
||||||
|
'portfolio_title' => '주요 프로젝트',
|
||||||
|
'portfolio_subtitle' => '복잡한 요구 사항을 우아한 솔루션으로 전환하는 방법을 확인하세요.',
|
||||||
|
'filter_all' => '전체 보기',
|
||||||
|
'filter_fintech' => '핀테크',
|
||||||
|
'filter_web' => '브랜드 웹',
|
||||||
|
'filter_app' => '앱 시스템',
|
||||||
|
'about_subtitle' => '자기소개',
|
||||||
|
'about_title' => '풀스택 비전, 비즈니스 성장 강화',
|
||||||
|
'contact_title' => '귀하의 디지털 미래를 맞춤화하십시오',
|
||||||
|
'contact_form_title' => '프로젝트 문의',
|
||||||
|
'form_name' => '성함',
|
||||||
|
'form_contact' => '연락처 (Email/TG)',
|
||||||
|
'form_type' => '문의 유형',
|
||||||
|
'form_message' => '요구 사항 요약',
|
||||||
|
'form_submit' => '문의 제출',
|
||||||
|
'footer_desc' => '정교한 코드로 탁월한 가치를 창출합니다. 글로벌 기술 전문가 포털.',
|
||||||
|
'view_details' => '자세히 보기'
|
||||||
|
],
|
||||||
|
'de' => [
|
||||||
|
'nav_home' => 'Startseite',
|
||||||
|
'nav_services' => 'Dienstleistungen',
|
||||||
|
'nav_portfolio' => 'Portfolio',
|
||||||
|
'nav_about' => 'Über mich',
|
||||||
|
'nav_process' => 'Prozess',
|
||||||
|
'nav_testimonials' => 'Kunden',
|
||||||
|
'nav_contact' => 'Jetzt beraten',
|
||||||
|
'hero_badge_1' => 'FINTECH EXPERTE',
|
||||||
|
'hero_title_1' => 'Die Zukunft von Fintech definieren',
|
||||||
|
'hero_desc_1' => 'Kombination aus tiefen Brancheneinblicken und modernster Entwicklung für ein robustes digitales Fundament.',
|
||||||
|
'hero_btn_consult' => 'Expertenberatung',
|
||||||
|
'hero_btn_explore' => 'Projekte entdecken',
|
||||||
|
'stats_years' => 'Jahre Erfahrung',
|
||||||
|
'stats_cases' => 'Erfolgreiche Projekte',
|
||||||
|
'stats_trust' => 'Kundenvertrauen',
|
||||||
|
'stats_load' => 'Systemkapazität',
|
||||||
|
'services_title' => 'Full-Stack Ökosystem',
|
||||||
|
'services_subtitle' => 'Technische Komplettlösungen von der Beratung bis zur Wartung.',
|
||||||
|
'portfolio_title' => 'Ausgewählte Projekte',
|
||||||
|
'portfolio_subtitle' => 'Wie wir komplexe Anforderungen in elegante Lösungen verwandeln.',
|
||||||
|
'filter_all' => 'Alle Werke',
|
||||||
|
'filter_fintech' => 'Fintech',
|
||||||
|
'filter_web' => 'Marken-Web',
|
||||||
|
'filter_app' => 'App-Systeme',
|
||||||
|
'about_subtitle' => 'ÜBER MICH',
|
||||||
|
'about_title' => 'Full-Stack Vision für Geschäftswachstum',
|
||||||
|
'contact_title' => 'Gestalten Sie Ihre digitale Zukunft',
|
||||||
|
'contact_form_title' => 'Projektanfrage',
|
||||||
|
'form_name' => 'Ihr Name',
|
||||||
|
'form_contact' => 'Kontakt (E-Mail/TG)',
|
||||||
|
'form_type' => 'Anfragetyp',
|
||||||
|
'form_message' => 'Kurze Beschreibung',
|
||||||
|
'form_submit' => 'Anfrage senden',
|
||||||
|
'footer_desc' => 'Außergewöhnliche Werte durch exquisiten Code schaffen. Globales Expertenportal.',
|
||||||
|
'view_details' => 'Details anzeigen'
|
||||||
|
],
|
||||||
|
'fr' => [
|
||||||
|
'nav_home' => 'Accueil',
|
||||||
|
'nav_services' => 'Services',
|
||||||
|
'nav_portfolio' => 'Portfolio',
|
||||||
|
'nav_about' => 'À propos',
|
||||||
|
'nav_process' => 'Processus',
|
||||||
|
'nav_testimonials' => 'Clients',
|
||||||
|
'nav_contact' => 'Consulter',
|
||||||
|
'hero_badge_1' => 'EXPERT FINTECH',
|
||||||
|
'hero_title_1' => 'Définir l\'avenir de la Fintech',
|
||||||
|
'hero_desc_1' => 'Allier expertise sectorielle et développement de pointe pour bâtir des fondations digitales robustes.',
|
||||||
|
'hero_btn_consult' => 'Consultation d\'expert',
|
||||||
|
'hero_btn_explore' => 'Explorer les cas',
|
||||||
|
'stats_years' => 'Années d\'expérience',
|
||||||
|
'stats_cases' => 'Cas réussis',
|
||||||
|
'stats_trust' => 'Confiance client',
|
||||||
|
'stats_load' => 'Capacité système',
|
||||||
|
'services_title' => 'Écosystème Full-Stack',
|
||||||
|
'services_subtitle' => 'Solutions techniques de bout en bout, du conseil à la maintenance.',
|
||||||
|
'portfolio_title' => 'Projets vedettes',
|
||||||
|
'portfolio_subtitle' => 'Découvrez comment nous transformons des besoins complexes en solutions élégantes.',
|
||||||
|
'filter_all' => 'Tous les travaux',
|
||||||
|
'filter_fintech' => 'Fintech',
|
||||||
|
'filter_web' => 'Web de marque',
|
||||||
|
'filter_app' => 'Systèmes App',
|
||||||
|
'about_subtitle' => 'À PROPOS',
|
||||||
|
'about_title' => 'Vision Full-Stack pour la croissance des entreprises',
|
||||||
|
'contact_title' => 'Personnalisez votre avenir numérique',
|
||||||
|
'contact_form_title' => 'Demande de projet',
|
||||||
|
'form_name' => 'Votre nom',
|
||||||
|
'form_contact' => 'Contact (Email/TG)',
|
||||||
|
'form_type' => 'Type de demande',
|
||||||
|
'form_message' => 'Brève description',
|
||||||
|
'form_submit' => 'Envoyer la demande',
|
||||||
|
'footer_desc' => 'Créer une valeur extraordinaire avec un code exquis. Portail d\'experts mondiaux.',
|
||||||
|
'view_details' => 'Voir les détails'
|
||||||
|
],
|
||||||
|
'es' => [
|
||||||
|
'nav_home' => 'Inicio',
|
||||||
|
'nav_services' => 'Servicios',
|
||||||
|
'nav_portfolio' => 'Portafolio',
|
||||||
|
'nav_about' => 'Sobre mí',
|
||||||
|
'nav_process' => 'Proceso',
|
||||||
|
'nav_testimonials' => 'Clientes',
|
||||||
|
'nav_contact' => 'Consultar ahora',
|
||||||
|
'hero_badge_1' => 'EXPERTO FINTECH',
|
||||||
|
'hero_title_1' => 'Definiendo el futuro de Fintech',
|
||||||
|
'hero_desc_1' => 'Combinando visión industrial con desarrollo de vanguardia para bases digitales sólidas.',
|
||||||
|
'hero_btn_consult' => 'Consulta experta',
|
||||||
|
'hero_btn_explore' => 'Explorar casos',
|
||||||
|
'stats_years' => 'Años de experiencia',
|
||||||
|
'stats_cases' => 'Casos exitosos',
|
||||||
|
'stats_trust' => 'Confianza del cliente',
|
||||||
|
'stats_load' => 'Capacidad del sistema',
|
||||||
|
'services_title' => 'Ecosistema Full-Stack',
|
||||||
|
'services_subtitle' => 'Soluciones técnicas integrales desde consultoría hasta mantenimiento.',
|
||||||
|
'portfolio_title' => 'Proyectos destacados',
|
||||||
|
'portfolio_subtitle' => 'Vea cómo transformamos requisitos complejos en soluciones elegantes.',
|
||||||
|
'filter_all' => 'Todos los trabajos',
|
||||||
|
'filter_fintech' => 'Fintech',
|
||||||
|
'filter_web' => 'Web de marca',
|
||||||
|
'filter_app' => 'Sistemas App',
|
||||||
|
'about_subtitle' => 'SOBRE MÍ',
|
||||||
|
'about_title' => 'Visión Full-Stack para el crecimiento empresarial',
|
||||||
|
'contact_title' => 'Personalice su futuro digital',
|
||||||
|
'contact_form_title' => 'Consulta de proyecto',
|
||||||
|
'form_name' => 'Su nombre',
|
||||||
|
'form_contact' => 'Contacto (Email/TG)',
|
||||||
|
'form_type' => 'Tipo de consulta',
|
||||||
|
'form_message' => 'Breve descripción',
|
||||||
|
'form_submit' => 'Enviar consulta',
|
||||||
|
'footer_desc' => 'Creando un valor extraordinario con un código exquisito. Portal de expertos globales.',
|
||||||
|
'view_details' => 'Ver detalles'
|
||||||
|
],
|
||||||
|
'ar' => [
|
||||||
|
'nav_home' => 'الرئيسية',
|
||||||
|
'nav_services' => 'الخدمات',
|
||||||
|
'nav_portfolio' => 'الأعمال',
|
||||||
|
'nav_about' => 'عني',
|
||||||
|
'nav_process' => 'العملية',
|
||||||
|
'nav_testimonials' => 'العملاء',
|
||||||
|
'nav_contact' => 'استشر الآن',
|
||||||
|
'hero_badge_1' => 'خبير فينتاك',
|
||||||
|
'hero_title_1' => 'تحديد مستقبل التكنولوجيا المالية',
|
||||||
|
'hero_desc_1' => 'الجمع بين رؤى الصناعة والتطوير المتطور لبناء أساس رقمي قوي وفعال.',
|
||||||
|
'hero_btn_consult' => 'استشارة خبير',
|
||||||
|
'hero_btn_explore' => 'استكشاف الحالات',
|
||||||
|
'stats_years' => 'سنوات الخبرة',
|
||||||
|
'stats_cases' => 'حالات ناجحة',
|
||||||
|
'stats_trust' => 'ثقة العملاء',
|
||||||
|
'stats_load' => 'سعة النظام',
|
||||||
|
'services_title' => 'منظومة التطوير الشامل',
|
||||||
|
'services_subtitle' => 'حلول تقنية متكاملة من الاستشارة إلى الصيانة.',
|
||||||
|
'portfolio_title' => 'المشاريع المختارة',
|
||||||
|
'portfolio_subtitle' => 'اكتشف كيف نحول المتطلبات المعقدة إلى حلول أنيقة.',
|
||||||
|
'filter_all' => 'كل الأعمال',
|
||||||
|
'filter_fintech' => 'فينتاك',
|
||||||
|
'filter_web' => 'مواقع الماركات',
|
||||||
|
'filter_app' => 'أنظمة التطبيقات',
|
||||||
|
'about_subtitle' => 'عني',
|
||||||
|
'about_title' => 'رؤية شاملة لتمكين نمو الأعمال',
|
||||||
|
'contact_title' => 'خصص مستقبلك الرقمي',
|
||||||
|
'contact_form_title' => 'طلب مشروع',
|
||||||
|
'form_name' => 'اسمك',
|
||||||
|
'form_contact' => 'معلومات التواصل (إيميل/تليجرام)',
|
||||||
|
'form_type' => 'نوع الطلب',
|
||||||
|
'form_message' => 'وصف المتطلبات',
|
||||||
|
'form_submit' => 'إرسال الطلب',
|
||||||
|
'footer_desc' => 'بناء قيمة استثنائية بكود رائع. بوابة خبراء التكنولوجيا العالمية.',
|
||||||
|
'view_details' => 'عرض التفاصيل'
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
function t($key) {
|
||||||
|
global $translations, $lang;
|
||||||
|
return $translations[$lang][$key] ?? $translations['en'][$key] ?? $key;
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_current_lang_info() {
|
||||||
|
global $languages, $lang;
|
||||||
|
return $languages[$lang];
|
||||||
|
}
|
||||||
|
|
||||||
544
index.php
544
index.php
@ -1,18 +1,27 @@
|
|||||||
<?php
|
<?php
|
||||||
declare(strict_types=1);
|
declare(strict_types=1);
|
||||||
|
require_once __DIR__ . '/includes/i18n.php';
|
||||||
|
require_once __DIR__ . '/db/config.php';
|
||||||
|
|
||||||
@ini_set('display_errors', '0');
|
@ini_set('display_errors', '0');
|
||||||
@error_reporting(E_ALL);
|
@error_reporting(E_ALL);
|
||||||
|
|
||||||
$projectName = $_SERVER['PROJECT_NAME'] ?? 'Zhang Portfolio';
|
$projectName = $_SERVER['PROJECT_NAME'] ?? 'Zhang Portfolio';
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '专业金融科技与全栈开发专家个人门户，为您提供全方位的数字化转型方案。';
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? t('footer_desc');
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||||
|
|
||||||
|
// Fetch projects from DB
|
||||||
|
$pdo = db();
|
||||||
|
$projects = $pdo->query("SELECT * FROM projects ORDER BY id DESC")->fetchAll();
|
||||||
|
|
||||||
|
$currentLang = get_current_lang_info();
|
||||||
?>
|
?>
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="zh-CN">
|
<html lang="<?= $lang ?>" dir="<?= ($lang === 'ar' ? 'rtl' : 'ltr') ?>">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title><?= htmlspecialchars($projectName) ?> | 金融科技与全栈开发专家 | 全球化技术咨询</title>
|
<title><?= htmlspecialchars($projectName) ?> | <?= t('hero_badge_1') ?></title>
|
||||||
|
|
||||||
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<meta property="og:title" content="<?= htmlspecialchars($projectName) ?>" />
|
<meta property="og:title" content="<?= htmlspecialchars($projectName) ?>" />
|
||||||
@ -27,13 +36,20 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Icons & Libraries -->
|
<!-- Icons & Libraries -->
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
|
||||||
|
|
||||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif; }
|
||||||
|
<?php if ($lang === 'ar'): ?>
|
||||||
|
body { font-family: 'Montserrat', sans-serif; }
|
||||||
|
.nav-links { gap: 20px; }
|
||||||
|
<?php endif; ?>
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@ -41,17 +57,32 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a href="#" class="logo">
|
<a href="#" class="logo">
|
||||||
<img src="assets/logo.svg" alt="Logo" width="40" height="40">
|
<img src="assets/logo.svg" alt="Logo" width="50" height="50">
|
||||||
<span><?= htmlspecialchars($projectName) ?></span>
|
<span><?= htmlspecialchars($projectName) ?></span>
|
||||||
</a>
|
</a>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
<a href="#hero">首页</a>
|
<a href="#hero"><?= t('nav_home') ?></a>
|
||||||
<a href="#services">核心服务</a>
|
<a href="#services"><?= t('nav_services') ?></a>
|
||||||
<a href="#portfolio">项目案例</a>
|
<a href="#portfolio"><?= t('nav_portfolio') ?></a>
|
||||||
<a href="#about">关于我</a>
|
<a href="#about"><?= t('nav_about') ?></a>
|
||||||
<a href="#process">服务流程</a>
|
<a href="#contact" class="nav-cta"><?= t('nav_contact') ?></a>
|
||||||
<a href="#testimonials">客户评价</a>
|
|
||||||
<a href="#contact" class="nav-cta">立即咨询</a>
|
<!-- Language Switcher -->
|
||||||
|
<div class="lang-switcher">
|
||||||
|
<div class="lang-btn">
|
||||||
|
<span class="flag"><?= $currentLang['flag'] ?></span>
|
||||||
|
<span><?= $currentLang['name'] ?></span>
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</div>
|
||||||
|
<div class="lang-dropdown">
|
||||||
|
<?php foreach ($languages as $code => $info): ?>
|
||||||
|
<a href="?lang=<?= $code ?>" class="lang-item">
|
||||||
|
<span class="flag"><?= $info['flag'] ?></span>
|
||||||
|
<span><?= $info['name'] ?></span>
|
||||||
|
</a>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mobile-menu-toggle">
|
<div class="mobile-menu-toggle">
|
||||||
<i class="fas fa-bars"></i>
|
<i class="fas fa-bars"></i>
|
||||||
@ -64,53 +95,22 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|||||||
<div class="swiper hero-swiper">
|
<div class="swiper hero-swiper">
|
||||||
<div class="swiper-wrapper">
|
<div class="swiper-wrapper">
|
||||||
<!-- Slide 1 -->
|
<!-- Slide 1 -->
|
||||||
<div class="swiper-slide" style="background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
<div class="swiper-slide" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<span class="badge">金融科技专家</span>
|
<span class="badge"><?= t('hero_badge_1') ?></span>
|
||||||
<h1>数字化转型的领航者</h1>
|
<h1><?= t('hero_title_1') ?></h1>
|
||||||
<p>结合深厚的金融行业洞察与前沿开发技术，为您的业务构建稳健、高效的数字化基石。从架构设计到最终落地，全方位赋能。</p>
|
<p><?= t('hero_desc_1') ?></p>
|
||||||
<div class="hero-btns">
|
<div class="hero-btns">
|
||||||
<a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
|
<a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
|
||||||
<i class="fab fa-telegram"></i> 立即沟通
|
<i class="fab fa-telegram"></i> <?= t('hero_btn_consult') ?>
|
||||||
</a>
|
</a>
|
||||||
<a href="#portfolio" class="btn btn-glass">
|
<a href="#portfolio" class="btn btn-glass">
|
||||||
探索案例 <i class="fas fa-arrow-right"></i>
|
<?= t('hero_btn_explore') ?> <i class="fas fa-arrow-right"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Slide 2 -->
|
|
||||||
<div class="swiper-slide" style="background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.pexels.com/photos/7567443/pexels-photo-7567443.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
||||||
<div class="hero-content">
|
|
||||||
<span class="badge">全栈开发</span>
|
|
||||||
<h1>极致体验，艺术级交互</h1>
|
|
||||||
<p>我们不仅仅在写代码，更在塑造用户的感知。每一个动效、每一行逻辑，都旨在为您的用户提供最顺畅、最直观的交互体验。</p>
|
|
||||||
<div class="hero-btns">
|
|
||||||
<a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
|
|
||||||
<i class="fab fa-telegram"></i> 预约视频会议
|
|
||||||
</a>
|
|
||||||
<a href="#contact" class="btn btn-glass">获取定制方案</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Slide 3 -->
|
|
||||||
<div class="swiper-slide" style="background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
||||||
<div class="hero-content">
|
|
||||||
<span class="badge">全球视野</span>
|
|
||||||
<h1>驱动未来的创新技术</h1>
|
|
||||||
<p>从区块链应用到 AI 驱动的分析平台，我们紧跟时代浪潮，将最先进的技术转化为您的商业竞争优势。</p>
|
|
||||||
<div class="hero-btns">
|
|
||||||
<a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
|
|
||||||
<i class="fab fa-telegram"></i> TG 详细咨询
|
|
||||||
</a>
|
|
||||||
<a href="#about" class="btn btn-glass">了解更多</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
<div class="swiper-button-next"></div>
|
|
||||||
<div class="swiper-button-prev"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -120,19 +120,19 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|||||||
<div class="stats-grid">
|
<div class="stats-grid">
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<h3>8+</h3>
|
<h3>8+</h3>
|
||||||
<p>行业经验 (年)</p>
|
<p><?= t('stats_years') ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<h3>150+</h3>
|
<h3>30+</h3>
|
||||||
<p>成功交付项目</p>
|
<p><?= t('stats_cases') ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<h3>98%</h3>
|
<h3>99%</h3>
|
||||||
<p>客户好评率</p>
|
<p><?= t('stats_trust') ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
<h3>1M+</h3>
|
<h3>5M+</h3>
|
||||||
<p>支撑用户量级</p>
|
<p><?= t('stats_load') ?></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -142,70 +142,25 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|||||||
<section id="services" class="services-section">
|
<section id="services" class="services-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2>全方位技术服务</h2>
|
<h2><?= t('services_title') ?></h2>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<p>深耕技术领域，为您解决从 0 到 1 的开发痛点与从 1 到 N 的增长瓶颈</p>
|
<p><?= t('services_subtitle') ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="services-grid">
|
<div class="services-grid">
|
||||||
<div class="service-card">
|
<div class="service-card">
|
||||||
<div class="icon-box"><i class="fas fa-laptop-code"></i></div>
|
<div class="icon-box"><i class="fas fa-laptop-code"></i></div>
|
||||||
<h3>全栈应用定制</h3>
|
<h3>Full-Stack Customization</h3>
|
||||||
<p>涵盖 Web、移动端及桌面端。使用 PHP (Laravel), Node.js, React, Vue, Flutter 等主流框架，确保系统高性能与跨平台兼容性。</p>
|
<p>End-to-end development using React, Vue 3, Node.js, and Go for high-performance systems.</p>
|
||||||
<ul class="service-list">
|
|
||||||
<li><i class="fas fa-check"></i> 响应式 Web 开发</li>
|
|
||||||
<li><i class="fas fa-check"></i> 跨平台移动 App</li>
|
|
||||||
<li><i class="fas fa-check"></i> 复杂系统架构设计</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="service-card">
|
<div class="service-card">
|
||||||
<div class="icon-box"><i class="fas fa-vault"></i></div>
|
<div class="icon-box"><i class="fas fa-vault"></i></div>
|
||||||
<h3>金融科技 (Fintech)</h3>
|
<h3>Fintech Solutions</h3>
|
||||||
<p>专注金融级别的安全与性能。提供支付网关集成、加密资产管理、量化交易终端及实时风控系统的深度定制。</p>
|
<p>Secure payment gateways, asset management, and high-frequency trading engines.</p>
|
||||||
<ul class="service-list">
|
|
||||||
<li><i class="fas fa-check"></i> 高频交易系统界面</li>
|
|
||||||
<li><i class="fas fa-check"></i> 支付通道合规对接</li>
|
|
||||||
<li><i class="fas fa-check"></i> 量化策略展示引擎</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="icon-box"><i class="fas fa-paint-brush"></i></div>
|
|
||||||
<h3>UI/UX 品牌视觉</h3>
|
|
||||||
<p>不仅仅是美观。通过深入的用户研究与交互设计，打造具有极高品牌辨识度与卓越易用性的产品视觉体验。</p>
|
|
||||||
<ul class="service-list">
|
|
||||||
<li><i class="fas fa-check"></i> UI 系统规范建立</li>
|
|
||||||
<li><i class="fas fa-check"></i> 动效与交互微调</li>
|
|
||||||
<li><i class="fas fa-check"></i> 品牌视觉策略咨询</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="service-card">
|
<div class="service-card">
|
||||||
<div class="icon-box"><i class="fas fa-shield-halved"></i></div>
|
<div class="icon-box"><i class="fas fa-shield-halved"></i></div>
|
||||||
<h3>安全与运维托管</h3>
|
<h3>Security & Operations</h3>
|
||||||
<p>为您的业务保驾护航。提供金融级安全审计、DDoS 防护方案、云基础设施 (AWS/GCP/Aliyun) 自动化部署。 </p>
|
<p>Financial-grade security audits, automated CI/CD pipelines, and cloud scaling.</p>
|
||||||
<ul class="service-list">
|
|
||||||
<li><i class="fas fa-check"></i> 渗透测试与加固</li>
|
|
||||||
<li><i class="fas fa-check"></i> CI/CD 流程优化</li>
|
|
||||||
<li><i class="fas fa-check"></i> 24/7 监控与响应</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="icon-box"><i class="fas fa-brain"></i></div>
|
|
||||||
<h3>AI 智能化集成</h3>
|
|
||||||
<p>将人工智能注入您的业务。集成 LLM (大语言模型)、图像识别、预测性分析模型，助力业务实现智能化跨越。</p>
|
|
||||||
<ul class="service-list">
|
|
||||||
<li><i class="fas fa-check"></i> AI 聊天机器人集成</li>
|
|
||||||
<li><i class="fas fa-check"></i> 自动化内容生产</li>
|
|
||||||
<li><i class="fas fa-check"></i> 数据挖掘与预测</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="service-card">
|
|
||||||
<div class="icon-box"><i class="fas fa-rocket"></i></div>
|
|
||||||
<h3>出海与全球化</h3>
|
|
||||||
<p>协助中国企业走向全球。提供多语言适配、多国支付集成、全球加速节点部署以及合规性技术咨询。</p>
|
|
||||||
<ul class="service-list">
|
|
||||||
<li><i class="fas fa-check"></i> i18n 多语言方案</li>
|
|
||||||
<li><i class="fas fa-check"></i> 全球 CDN 分发加速</li>
|
|
||||||
<li><i class="fas fa-check"></i> 海外云平台合规部署</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -215,170 +170,35 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|||||||
<section id="portfolio" class="portfolio-section">
|
<section id="portfolio" class="portfolio-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2>精选项目案例</h2>
|
<h2><?= t('portfolio_title') ?></h2>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<p>每一个项目都是技术与创意的结晶</p>
|
<p><?= t('portfolio_subtitle') ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="portfolio-filters">
|
<div class="portfolio-filters">
|
||||||
<button class="filter-btn active" data-filter="all">全部作品</button>
|
<button class="filter-btn active" data-filter="all"><?= t('filter_all') ?></button>
|
||||||
<button class="filter-btn" data-filter="fintech">金融科技</button>
|
<button class="filter-btn" data-filter="fintech"><?= t('filter_fintech') ?></button>
|
||||||
<button class="filter-btn" data-filter="web">品牌网页</button>
|
<button class="filter-btn" data-filter="web"><?= t('filter_web') ?></button>
|
||||||
<button class="filter-btn" data-filter="app">应用系统</button>
|
<button class="filter-btn" data-filter="app"><?= t('filter_app') ?></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="portfolio-grid">
|
<div class="portfolio-grid">
|
||||||
<!-- Item 1 -->
|
<?php foreach ($projects as $project): ?>
|
||||||
<div class="portfolio-item fintech" data-title="智能理财投顾平台">
|
<div class="portfolio-item <?= htmlspecialchars($project['category']) ?>">
|
||||||
<div class="portfolio-img-wrapper">
|
<div class="portfolio-img-wrapper">
|
||||||
<img src="https://images.pexels.com/photos/6770610/pexels-photo-6770610.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Fintech Project">
|
<img src="<?= htmlspecialchars($project['image_url']) ?>" alt="<?= htmlspecialchars($project['title']) ?>" loading="lazy">
|
||||||
<div class="portfolio-overlay">
|
<div class="portfolio-overlay">
|
||||||
<div class="overlay-content">
|
<div class="overlay-content">
|
||||||
<h3>智能理财投顾平台</h3>
|
<h3><?= htmlspecialchars($project['title']) ?></h3>
|
||||||
<p>AI 驱动的资产配置与收益分析系统，支撑 10W+ 日活用户。</p>
|
<p><?= htmlspecialchars($project['short_description']) ?></p>
|
||||||
<a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
|
<a href="project-detail.php?slug=<?= $project['slug'] ?>" class="view-details"><?= t('view_details') ?> <i class="fas fa-arrow-right"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="portfolio-info">
|
<div class="portfolio-info">
|
||||||
<h4>智能理财投顾平台</h4>
|
<h4><?= htmlspecialchars($project['title']) ?></h4>
|
||||||
<span>金融科技 / AI 驱动</span>
|
<span><?= htmlspecialchars(strtoupper($project['category'])) ?></span>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Item 2 -->
|
|
||||||
<div class="portfolio-item web" data-title="奢华酒店品牌站">
|
|
||||||
<div class="portfolio-img-wrapper">
|
|
||||||
<img src="https://images.pexels.com/photos/2507007/pexels-photo-2507007.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Web Project">
|
|
||||||
<div class="portfolio-overlay">
|
|
||||||
<div class="overlay-content">
|
|
||||||
<h3>奢华酒店品牌站</h3>
|
|
||||||
<p>沉浸式视觉体验与全球预订系统深度集成。</p>
|
|
||||||
<a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="portfolio-info">
|
|
||||||
<h4>奢华酒店品牌站</h4>
|
|
||||||
<span>品牌网页 / 高级视觉设计</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Item 3 -->
|
|
||||||
<div class="portfolio-item app" data-title="企业级 ERP 办公系统">
|
|
||||||
<div class="portfolio-img-wrapper">
|
|
||||||
<img src="https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&w=800" alt="App Project">
|
|
||||||
<div class="portfolio-overlay">
|
|
||||||
<div class="overlay-content">
|
|
||||||
<h3>企业级 ERP 办公系统</h3>
|
|
||||||
<p>模块化资源管理，大幅提升跨部门协同效率 40%。</p>
|
|
||||||
<a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="portfolio-info">
|
|
||||||
<h4>企业级 ERP 办公系统</h4>
|
|
||||||
<span>应用系统 / 业务流优化</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Item 4 -->
|
|
||||||
<div class="portfolio-item fintech" data-title="量化交易终端仪表盘">
|
|
||||||
<div class="portfolio-img-wrapper">
|
|
||||||
<img src="https://images.pexels.com/photos/844124/pexels-photo-844124.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Fintech Project">
|
|
||||||
<div class="portfolio-overlay">
|
|
||||||
<div class="overlay-content">
|
|
||||||
<h3>量化交易终端仪表盘</h3>
|
|
||||||
<p>毫秒级行情刷新与复杂策略一键执行面板。</p>
|
|
||||||
<a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="portfolio-info">
|
|
||||||
<h4>量化交易终端仪表盘</h4>
|
|
||||||
<span>金融科技 / 实时数据可视化</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Item 5 -->
|
|
||||||
<div class="portfolio-item web" data-title="创意设计工作室官方网站">
|
|
||||||
<div class="portfolio-img-wrapper">
|
|
||||||
<img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Web Project">
|
|
||||||
<div class="portfolio-overlay">
|
|
||||||
<div class="overlay-content">
|
|
||||||
<h3>创意设计工作室</h3>
|
|
||||||
<p>极简主义风格，完美展现作品集质感与团队魅力。</p>
|
|
||||||
<a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="portfolio-info">
|
|
||||||
<h4>创意设计工作室</h4>
|
|
||||||
<span>品牌网页 / 极简主义设计</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Item 6 -->
|
|
||||||
<div class="portfolio-item app" data-title="跨境供应链管理平台">
|
|
||||||
<div class="portfolio-img-wrapper">
|
|
||||||
<img src="https://images.pexels.com/photos/6169668/pexels-photo-6169668.jpeg?auto=compress&cs=tinysrgb&w=800" alt="App Project">
|
|
||||||
<div class="portfolio-overlay">
|
|
||||||
<div class="overlay-content">
|
|
||||||
<h3>跨境供应链管理平台</h3>
|
|
||||||
<p>集成多国物流接口与自动关税计算引擎。</p>
|
|
||||||
<a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="portfolio-info">
|
|
||||||
<h4>跨境供应链管理平台</h4>
|
|
||||||
<span>应用系统 / 跨境电商解决方案</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Item 7 -->
|
|
||||||
<div class="portfolio-item fintech" data-title="去中心化钱包系统">
|
|
||||||
<div class="portfolio-img-wrapper">
|
|
||||||
<img src="https://images.pexels.com/photos/844124/pexels-photo-844124.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Fintech Project">
|
|
||||||
<div class="portfolio-overlay">
|
|
||||||
<div class="overlay-content">
|
|
||||||
<h3>去中心化钱包系统</h3>
|
|
||||||
<p>高强度加密安全方案，支持多链资产管理。</p>
|
|
||||||
<a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="portfolio-info">
|
|
||||||
<h4>去中心化钱包系统</h4>
|
|
||||||
<span>金融科技 / Web3</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Item 8 -->
|
|
||||||
<div class="portfolio-item web" data-title="高端地产虚拟看房平台">
|
|
||||||
<div class="portfolio-img-wrapper">
|
|
||||||
<img src="https://images.pexels.com/photos/323705/pexels-photo-323705.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Web Project">
|
|
||||||
<div class="portfolio-overlay">
|
|
||||||
<div class="overlay-content">
|
|
||||||
<h3>高端地产虚拟看房</h3>
|
|
||||||
<p>360度全景展示与实时预约看房系统。</p>
|
|
||||||
<a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="portfolio-info">
|
|
||||||
<h4>高端地产虚拟看房</h4>
|
|
||||||
<span>品牌网页 / 3D展示</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Item 9 -->
|
|
||||||
<div class="portfolio-item app" data-title="智能健康管理 App">
|
|
||||||
<div class="portfolio-img-wrapper">
|
|
||||||
<img src="https://images.pexels.com/photos/4386466/pexels-photo-4386466.jpeg?auto=compress&cs=tinysrgb&w=800" alt="App Project">
|
|
||||||
<div class="portfolio-overlay">
|
|
||||||
<div class="overlay-content">
|
|
||||||
<h3>智能健康管理 App</h3>
|
|
||||||
<p>硬件数据实时对接，提供个性化健康建议。</p>
|
|
||||||
<a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="portfolio-info">
|
|
||||||
<h4>智能健康管理 App</h4>
|
|
||||||
<span>应用系统 / 物联网</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -391,188 +211,44 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|||||||
<img src="https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Profile">
|
<img src="https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Profile">
|
||||||
<div class="experience-tag">
|
<div class="experience-tag">
|
||||||
<strong>8+</strong>
|
<strong>8+</strong>
|
||||||
<span>行业资深经验</span>
|
<span><?= t('stats_years') ?></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="about-text">
|
<div class="about-text">
|
||||||
<span class="subtitle">关于我</span>
|
<span class="subtitle"><?= t('about_subtitle') ?></span>
|
||||||
<h2>全栈视野，深度赋能业务增长</h2>
|
<h2><?= t('about_title') ?></h2>
|
||||||
<p>您好，我是 <strong>Zhang</strong>。我是一名深耕金融科技与全栈开发领域的资深工程师及技术顾问。在超过 8 年的职业生涯中，我曾服务于多家领先的金融机构与初创科技公司。</p>
|
<p>I am <strong>Zhang</strong>, a senior engineer specializing in Fintech and full-stack development. With 8 years of experience, I've built mission-critical systems for global clients.</p>
|
||||||
<p>我坚信：<strong>技术是解决商业问题的手段，而非目的。</strong> 我的核心优势在于能够快速理解业务逻辑，并将其转化为高性能、可维护的代码架构。无论是追求极致体验的 C 端产品，还是要求严苛的 B 端金融系统，我都能提供从咨询、设计到交付的全流程专家服务。</p>
|
|
||||||
|
|
||||||
<div class="skills-grid">
|
<div class="skills-grid">
|
||||||
<div class="skill-item"><i class="fab fa-php"></i> 后端：PHP (Laravel) / Go / Node.js</div>
|
<div class="skill-item"><i class="fab fa-php"></i> PHP (Laravel) / Go / Node.js</div>
|
||||||
<div class="skill-item"><i class="fab fa-js"></i> 前端：React / Vue3 / Flutter</div>
|
<div class="skill-item"><i class="fab fa-js"></i> React / Vue 3 / TypeScript</div>
|
||||||
<div class="skill-item"><i class="fas fa-database"></i> 存储：MySQL / PostgreSQL / Redis</div>
|
<div class="skill-item"><i class="fas fa-database"></i> MySQL / PostgreSQL / Redis</div>
|
||||||
<div class="skill-item"><i class="fas fa-server"></i> 架构：AWS / K8s / 云原生</div>
|
<div class="skill-item"><i class="fas fa-server"></i> AWS / K8s / Cloud Native</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="milestones">
|
|
||||||
<h3>职业里程碑</h3>
|
|
||||||
<div class="milestone-item">
|
|
||||||
<span class="year">2023 - 至今</span>
|
|
||||||
<p>担任独立技术顾问，助力 20+ 企业完成数字化转型与全球化布局。</p>
|
|
||||||
</div>
|
|
||||||
<div class="milestone-item">
|
|
||||||
<span class="year">2019 - 2022</span>
|
|
||||||
<p>某头部 Fintech 公司技术负责人，主导重构了日处理金额过亿的支付清算系统。</p>
|
|
||||||
</div>
|
|
||||||
<div class="milestone-item">
|
|
||||||
<span class="year">2016 - 2019</span>
|
|
||||||
<p>全栈工程师，负责多款金融理财类 App 从 0 到 1 的研发与迭代。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="about-btns">
|
|
||||||
<a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
|
|
||||||
<i class="fab fa-telegram"></i> TG 立即咨询
|
|
||||||
</a>
|
|
||||||
<a href="#portfolio" class="btn btn-outline">查看作品集</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Process Section -->
|
|
||||||
<section id="process" class="process-section">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-header">
|
|
||||||
<h2>服务流程</h2>
|
|
||||||
<div class="line"></div>
|
|
||||||
<p>标准化、透明化的合作流程，确保项目高品质交付</p>
|
|
||||||
</div>
|
|
||||||
<div class="process-steps">
|
|
||||||
<div class="step-card">
|
|
||||||
<div class="step-num">01</div>
|
|
||||||
<h3>需求挖掘</h3>
|
|
||||||
<p>深入沟通您的业务目标、目标用户及痛点，明确核心需求与项目边界。</p>
|
|
||||||
</div>
|
|
||||||
<div class="step-card">
|
|
||||||
<div class="step-num">02</div>
|
|
||||||
<h3>方案设计</h3>
|
|
||||||
<p>输出原型设计与技术架构方案，确保每一步都有据可依，规避技术风险。</p>
|
|
||||||
</div>
|
|
||||||
<div class="step-card">
|
|
||||||
<div class="step-num">03</div>
|
|
||||||
<h3>高效研发</h3>
|
|
||||||
<p>敏捷开发模式，定期同步进展，让您随时掌控项目动态，快速迭代反馈。</p>
|
|
||||||
</div>
|
|
||||||
<div class="step-card">
|
|
||||||
<div class="step-num">04</div>
|
|
||||||
<h3>质量管控</h3>
|
|
||||||
<p>覆盖压力测试、安全审计与多端适配，确保产品在任何环境下都表现卓越。</p>
|
|
||||||
</div>
|
|
||||||
<div class="step-card">
|
|
||||||
<div class="step-num">05</div>
|
|
||||||
<h3>部署交付</h3>
|
|
||||||
<p>一键自动化部署与全方位技术培训，提供长期可靠的技术支持与运维指导。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Testimonials Section -->
|
|
||||||
<section id="testimonials" class="testimonials-section">
|
|
||||||
<div class="container">
|
|
||||||
<div class="section-header">
|
|
||||||
<h2>来自全球客户的真实评价</h2>
|
|
||||||
<div class="line"></div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper testimonials-swiper">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="testimonial-card">
|
|
||||||
<div class="quote-icon"><i class="fas fa-quote-left"></i></div>
|
|
||||||
<p>“我们在开发复杂的量化展示工具时遇到了很大的性能挑战，直到遇到了 Zhang。专业的态度和高效的代码实现让我们的产品提前上线，这种对业务的深刻理解在技术圈非常罕见。”</p>
|
|
||||||
<div class="client-info">
|
|
||||||
<img src="https://i.pravatar.cc/60?u=1" alt="Client">
|
|
||||||
<div>
|
|
||||||
<h4>李伟</h4>
|
|
||||||
<span>某金融机构 技术总监</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="testimonial-card">
|
|
||||||
<div class="quote-icon"><i class="fas fa-quote-left"></i></div>
|
|
||||||
<p>“网站的设计不仅美观，而且在移动端的体验极其流畅。Telegram 响应非常及时，交流过程非常愉快，能够精准捕捉到我们品牌想要传达的高级感。”</p>
|
|
||||||
<div class="client-info">
|
|
||||||
<img src="https://i.pravatar.cc/60?u=2" alt="Client">
|
|
||||||
<div>
|
|
||||||
<h4>王曼迪</h4>
|
|
||||||
<span>创意工作室 创始人</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="testimonial-card">
|
|
||||||
<div class="quote-icon"><i class="fas fa-quote-left"></i></div>
|
|
||||||
<p>“我们需要一个极具个性且能承载大量内容的着陆页，他完全超出了我们的预期。视觉效果震撼，功能逻辑严密，真正做到了技术与艺术的结合。”</p>
|
|
||||||
<div class="client-info">
|
|
||||||
<img src="https://i.pravatar.cc/60?u=3" alt="Client">
|
|
||||||
<div>
|
|
||||||
<h4>陈杰</h4>
|
|
||||||
<span>电商初创企业 CEO</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="testimonial-card">
|
|
||||||
<div class="quote-icon"><i class="fas fa-quote-left"></i></div>
|
|
||||||
<p>“Zhang 帮我们重构了核心支付逻辑，稳定性提升了显著，再也没有出现过掉单情况。他不仅仅是开发者，更是我们值得信赖的技术合伙人。”</p>
|
|
||||||
<div class="client-info">
|
|
||||||
<img src="https://i.pravatar.cc/60?u=4" alt="Client">
|
|
||||||
<div>
|
|
||||||
<h4>Sarah Thompson</h4>
|
|
||||||
<span>Global Fintech Ltd. CTO</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<div class="testimonial-card">
|
|
||||||
<div class="quote-icon"><i class="fas fa-quote-left"></i></div>
|
|
||||||
<p>“从最初的简单想法到最终的复杂系统落地，Zhang 全程表现出了极高的专业素养。交付物质量极高，文档齐全，后续交接非常顺畅。”</p>
|
|
||||||
<div class="client-info">
|
|
||||||
<img src="https://i.pravatar.cc/60?u=5" alt="Client">
|
|
||||||
<div>
|
|
||||||
<h4>刘洋</h4>
|
|
||||||
<span>智能硬件创业者</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Contact Section -->
|
||||||
<section id="contact" class="contact-section">
|
<section id="contact" class="contact-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="contact-wrapper">
|
<div class="contact-wrapper">
|
||||||
<div class="contact-visual">
|
<div class="contact-visual">
|
||||||
<div class="contact-header">
|
<div class="contact-header">
|
||||||
<span class="badge">立即咨询</span>
|
<span class="badge">READY TO START?</span>
|
||||||
<h2>定制您的数字化未来</h2>
|
<h2><?= t('contact_title') ?></h2>
|
||||||
<p>拒绝千篇一律的方案。填写下方表单，我们将为您提供针对性的一对一技术咨询。</p>
|
<p>We protection your business secrets. Fill the form for a customized assessment.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-methods">
|
<div class="contact-methods">
|
||||||
<div class="method-card">
|
<div class="method-card">
|
||||||
<i class="fab fa-telegram"></i>
|
<i class="fab fa-telegram"></i>
|
||||||
<h3>Telegram</h3>
|
<h3>Telegram</h3>
|
||||||
<p>实时在线，极速反馈</p>
|
|
||||||
<a href="https://t.me/zhangshihao818" target="_blank">@zhangshihao818</a>
|
<a href="https://t.me/zhangshihao818" target="_blank">@zhangshihao818</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="method-card">
|
<div class="method-card">
|
||||||
<i class="fas fa-envelope"></i>
|
<i class="fas fa-envelope"></i>
|
||||||
<h3>Email</h3>
|
<h3>Email</h3>
|
||||||
<p>正式商务沟通</p>
|
|
||||||
<span>contact@yourdomain.com</span>
|
<span>contact@yourdomain.com</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -580,37 +256,34 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|||||||
<div class="contact-form-container">
|
<div class="contact-form-container">
|
||||||
<form id="contactForm" class="modern-form">
|
<form id="contactForm" class="modern-form">
|
||||||
<div class="form-title">
|
<div class="form-title">
|
||||||
<h3>项目咨询表</h3>
|
<h3><?= t('contact_form_title') ?></h3>
|
||||||
<p>我们将保护您的隐私信息</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="text" name="name" id="name" required>
|
<input type="text" name="name" id="name" required>
|
||||||
<label for="name">您的尊称</label>
|
<label for="name"><?= t('form_name') ?></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="text" name="email" id="email" required>
|
<input type="text" name="email" id="email" required>
|
||||||
<label for="email">联系方式 (Email/微信/TG)</label>
|
<label for="email"><?= t('form_contact') ?></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<select name="type" id="type" required>
|
<select name="type" id="type" required>
|
||||||
<option value="" disabled selected hidden></option>
|
<option value="" disabled selected hidden></option>
|
||||||
<option value="fintech">金融科技定制</option>
|
<option value="fintech">Fintech Solution</option>
|
||||||
<option value="web">品牌官网建设</option>
|
<option value="web">Luxury Web</option>
|
||||||
<option value="app">全栈系统开发</option>
|
<option value="app">App System</option>
|
||||||
<option value="consult">技术咨询/外包</option>
|
<option value="consult">Consulting</option>
|
||||||
<option value="other">其他合作</option>
|
|
||||||
</select>
|
</select>
|
||||||
<label for="type" class="select-label">咨询类型</label>
|
<label for="type"><?= t('form_type') ?></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<textarea name="message" id="message" required rows="3"></textarea>
|
<textarea name="message" id="message" required rows="3"></textarea>
|
||||||
<label for="message">需求简述 (您想解决什么问题？)</label>
|
<label for="message"><?= t('form_message') ?></label>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn-submit">
|
<button type="submit" class="btn-submit">
|
||||||
<span>发送咨询申请</span>
|
<span><?= t('form_submit') ?></span>
|
||||||
<i class="fas fa-paper-plane"></i>
|
<i class="fas fa-paper-plane"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="form-status"></div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -623,31 +296,22 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|||||||
<div class="footer-top">
|
<div class="footer-top">
|
||||||
<div class="footer-brand">
|
<div class="footer-brand">
|
||||||
<a href="#" class="logo">
|
<a href="#" class="logo">
|
||||||
<img src="assets/logo.svg" alt="Logo" width="40" height="40">
|
<img src="assets/logo.svg" alt="Logo" width="60" height="60">
|
||||||
<span><?= htmlspecialchars($projectName) ?></span>
|
<span><?= htmlspecialchars($projectName) ?></span>
|
||||||
</a>
|
</a>
|
||||||
<p>用代码构建价值，以专业赢得信任。专注于金融科技与全栈开发的高级专家门户。</p>
|
<p><?= t('footer_desc') ?></p>
|
||||||
</div>
|
|
||||||
<div class="footer-nav">
|
|
||||||
<h4>快速导航</h4>
|
|
||||||
<a href="#hero">首页</a>
|
|
||||||
<a href="#services">核心服务</a>
|
|
||||||
<a href="#portfolio">项目案例</a>
|
|
||||||
<a href="#about">关于我</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-social">
|
<div class="footer-social">
|
||||||
<h4>社交媒体</h4>
|
<h4>SOCIAL</h4>
|
||||||
<div class="social-icons">
|
<div class="social-icons">
|
||||||
<a href="https://t.me/zhangshihao818" target="_blank"><i class="fab fa-telegram"></i></a>
|
<a href="https://t.me/zhangshihao818" target="_blank"><i class="fab fa-telegram"></i></a>
|
||||||
<a href="#"><i class="fab fa-github"></i></a>
|
<a href="#"><i class="fab fa-github"></i></a>
|
||||||
<a href="#"><i class="fab fa-linkedin"></i></a>
|
<a href="#"><i class="fab fa-linkedin"></i></a>
|
||||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-bottom">
|
<div class="footer-bottom">
|
||||||
<p>© <?= date('Y') ?> <?= htmlspecialchars($projectName) ?>. All Rights Reserved. </p>
|
<p>© <?= date('Y') ?> <?= htmlspecialchars($projectName) ?>. All Rights Reserved.</p>
|
||||||
<p class="tech-stack">Powered by PHP 8.x | React | Swiper.js | FontAwesome</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
243
project-detail.php
Normal file
243
project-detail.php
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
require_once __DIR__ . '/includes/i18n.php';
|
||||||
|
require_once __DIR__ . '/db/config.php';
|
||||||
|
|
||||||
|
$slug = $_GET['slug'] ?? '';
|
||||||
|
$pdo = db();
|
||||||
|
$stmt = $pdo->prepare("SELECT * FROM projects WHERE slug = ?");
|
||||||
|
$stmt->execute([$slug]);
|
||||||
|
$project = $stmt->fetch();
|
||||||
|
|
||||||
|
if (!$project) {
|
||||||
|
header("Location: index.php");
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$projectName = $_SERVER['PROJECT_NAME'] ?? 'Zhang Portfolio';
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="<?= $lang ?>" dir="<?= ($lang === 'ar' ? 'rtl' : 'ltr') ?>">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title><?= htmlspecialchars($project['title']) ?> | <?= htmlspecialchars($projectName) ?></title>
|
||||||
|
|
||||||
|
<link rel="icon" type="image/svg+xml" href="assets/logo.svg">
|
||||||
|
|
||||||
|
<!-- Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Icons -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
|
||||||
|
<style>
|
||||||
|
body { font-family: 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif; }
|
||||||
|
.project-hero {
|
||||||
|
height: 60vh;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.project-hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0; width: 100%; height: 100%;
|
||||||
|
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7));
|
||||||
|
}
|
||||||
|
.project-hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 800px;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.project-hero h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.project-meta-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.project-main {
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
.project-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
gap: 60px;
|
||||||
|
}
|
||||||
|
.project-content {
|
||||||
|
background: white;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
.project-content h3 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin: 30px 0 20px;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
.project-content p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: var(--gray-dark);
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
.project-content ul {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.project-content li {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding-left: 25px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.project-content li::before {
|
||||||
|
content: '\f00c';
|
||||||
|
font-family: 'Font Awesome 6 Free';
|
||||||
|
font-weight: 900;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
.project-sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
.sidebar-widget {
|
||||||
|
background: #f8fafc;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid var(--gray-light);
|
||||||
|
}
|
||||||
|
.sidebar-widget h4 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 2px solid var(--primary);
|
||||||
|
display: inline-block;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
.info-list li {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.info-list span {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--gray);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
.info-list strong {
|
||||||
|
color: var(--dark);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
.back-nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
left: 30px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.back-btn {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 50px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.back-btn:hover {
|
||||||
|
background: white;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.project-layout { grid-template-columns: 1fr; }
|
||||||
|
.project-hero h1 { font-size: 2.5rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="project-hero" style="background-image: url('<?= htmlspecialchars($project['image_url']) ?>');">
|
||||||
|
<div class="back-nav">
|
||||||
|
<a href="index.php#portfolio" class="back-btn"><i class="fas fa-arrow-left"></i> <?= t('filter_all') ?></a>
|
||||||
|
</div>
|
||||||
|
<div class="project-hero-content">
|
||||||
|
<span class="badge"><?= htmlspecialchars($project['category']) ?></span>
|
||||||
|
<h1><?= htmlspecialchars($project['title']) ?></h1>
|
||||||
|
<div class="project-meta-top">
|
||||||
|
<span><i class="far fa-calendar-alt"></i> <?= htmlspecialchars($project['project_date']) ?></span>
|
||||||
|
<span><i class="far fa-user"></i> <?= htmlspecialchars($project['client_name']) ?></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="project-main">
|
||||||
|
<div class="container">
|
||||||
|
<div class="project-layout">
|
||||||
|
<div class="project-content">
|
||||||
|
<?= $project['full_content'] ?>
|
||||||
|
|
||||||
|
<div class="project-actions" style="margin-top: 50px; border-top: 1px solid #eee; padding-top: 30px;">
|
||||||
|
<a href="index.php#contact" class="btn btn-primary"><?= t('nav_contact') ?></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="project-sidebar">
|
||||||
|
<div class="sidebar-widget">
|
||||||
|
<h4>Overview</h4>
|
||||||
|
<ul class="info-list">
|
||||||
|
<li>
|
||||||
|
<span>Client</span>
|
||||||
|
<strong><?= htmlspecialchars($project['client_name']) ?></strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>Date</span>
|
||||||
|
<strong><?= htmlspecialchars($project['project_date']) ?></strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>Stack</span>
|
||||||
|
<strong><?= htmlspecialchars($project['tech_stack']) ?></strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>Category</span>
|
||||||
|
<strong><?= htmlspecialchars(strtoupper($project['category'])) ?></strong>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar-widget">
|
||||||
|
<h4>Expert Advice</h4>
|
||||||
|
<p style="margin-bottom: 20px; font-size: 0.95rem;">Interested in this case? We can provide a professional technical assessment.</p>
|
||||||
|
<a href="https://t.me/zhangshihao818" class="btn btn-primary btn-block" target="_blank">
|
||||||
|
<i class="fab fa-telegram"></i> Telegram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer style="padding: 60px 0;">
|
||||||
|
<div class="container" style="text-align: center;">
|
||||||
|
<p>© <?= date('Y') ?> <?= htmlspecialchars($projectName) ?>. All Rights Reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user