Files
web_template/web/dist/index.html
Geliebte 10979351f8 feat: 默认语言改为英语 + 导航页添加i18n三语支持
- 导航页(index.html)添加完整i18n引擎,支持zh-CN/zh-TW/en
- 导航页添加语言切换按钮(EN/中/繁)
- 所有20个前端模板默认语言从zh-CN改为en
- 导航页SEO meta标签改为英文
2026-09-09 19:48:45 +08:00

733 lines
44 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<title>Gotest · Multi-Industry Website Templates - Enterprise/E-commerce/Food/Gaming/App/Music</title>
<meta name="description" content="Gotest offers 19 carefully designed website templates covering enterprise, cross-border e-commerce, food delivery, gaming, app store, and music platforms. Responsive design, instant preview.">
<meta name="keywords" content="website templates,enterprise templates,ecommerce templates,responsive design,template gallery,cross-border ecommerce,food delivery,gaming platform,app store,music platform">
<meta name="author" content="Gotest">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="/">
<meta property="og:title" content="Gotest · Multi-Industry Website Templates">
<meta property="og:description" content="19 carefully designed website templates covering 6 industries. Responsive design, instant preview.">
<meta property="og:site_name" content="Gotest Templates">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Gotest · Multi-Industry Website Templates">
<meta name="twitter:description" content="19 carefully designed website templates covering 6 industries. Responsive design, instant preview.">
<link rel="canonical" href="/">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Gotest Templates",
"description": "Multi-Industry website templates covering enterprise, e-commerce, food delivery, gaming, app store, and music platforms",
"url": "/",
"potentialAction": {
"@type": "SearchAction",
"target": "/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23000'/><text x='50' y='70' font-size='58' font-weight='bold' fill='white' text-anchor='middle' font-family='Arial'>G</text></svg)">
<script>
(function(){
var t = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', t);
})();
</script>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#f5f5f7;--text:#1d1d1f;--text-sub:#86868b;--card:#fff;--border:rgba(0,0,0,.06);--radius:20px;--shadow:0 4px 24px rgba(0,0,0,.06);--shadow-hover:0 12px 40px rgba(0,0,0,.12);--form-bg:rgba(255,255,255,0.95);--input-bg:#f9f9f9;--input-border:#e5e5e5;--admin-btn-bg:#1d1d1f;--admin-btn-hover:#000}
[data-theme="dark"]{--bg:#0f0f12;--text:#f5f5f7;--text-sub:#a1a1aa;--card:#1c1c22;--border:rgba(255,255,255,.08);--shadow:0 4px 24px rgba(0,0,0,.3);--shadow-hover:0 12px 40px rgba(0,0,0,.5);--form-bg:rgba(28,28,34,0.95);--input-bg:#27272a;--input-border:#3f3f46;--admin-btn-bg:#f5f5f7;--admin-btn-hover:#fff}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
.wrap{max-width:1120px;margin:0 auto;padding:48px 24px 64px}
.hero{text-align:center;padding:48px 0 56px}
.hero h1{font-size:56px;font-weight:700;letter-spacing:-2px;line-height:1.1;margin-bottom:16px}
.hero h1 span{background:linear-gradient(90deg,#6366f1,#ec4899,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:19px;color:var(--text-sub);max-width:580px;margin:0 auto;line-height:1.5}
.hero-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.pill{padding:6px 16px;border-radius:100px;background:#fff;border:1px solid var(--border);font-size:13px;color:var(--text-sub);font-weight:500}
[data-theme="dark"] .pill{background:#27272a}
.pill b{color:var(--text)}
.sec{margin-bottom:56px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.sec-head h2{font-size:28px;font-weight:700;letter-spacing:-.5px}
.sec-head .sub{font-size:14px;color:var(--text-sub)}
.sec-line{flex:1;height:1px;background:var(--border)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.item{background:var(--card);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .35s cubic-bezier(.25,.46,.45,.94);text-decoration:none;color:inherit;position:relative;display:block;box-shadow:var(--shadow)}
.item:hover{box-shadow:var(--shadow-hover);transform:translateY(-6px)}
.item-banner{height:160px;position:relative;display:flex;align-items:flex-end;padding:16px;overflow:hidden}
.item-banner .glow{position:absolute;inset:0;opacity:.9}
.item-banner .pattern{position:absolute;inset:0;opacity:.15;background-image:radial-gradient(circle at 25% 25%,#fff 2px,transparent 2px),radial-gradient(circle at 75% 75%,#fff 2px,transparent 2px);background-size:24px 24px}
.item-tag{position:relative;z-index:1;font-size:12px;font-weight:600;padding:4px 12px;border-radius:100px;backdrop-filter:blur(10px);background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3)}
.item-body{padding:18px 20px}
.item-title{font-size:17px;font-weight:600;margin-bottom:4px;letter-spacing:-.2px}
.item-desc{font-size:13px;color:var(--text-sub);line-height:1.4}
.item-go{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;opacity:0;transform:scale(.8);transition:all .3s}
.item:hover .item-go{opacity:1;transform:scale(1)}
.g-enterprise .glow{background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 40%,#60a5fa 100%)}
.g-shop .glow{background:linear-gradient(135deg,#991b1b 0%,#ef4444 40%,#fb923c 100%)}
.g-food .glow{background:linear-gradient(135deg,#92400e 0%,#f59e0b 40%,#fde047 100%)}
.g-game .glow{background:linear-gradient(135deg,#0c0a09 0%,#7c3aed 40%,#d946ef 100%)}
.g-app .glow{background:linear-gradient(135deg,#0c4a6e 0%,#0ea5e9 40%,#7dd3fc 100%)}
.g-music .glow{background:linear-gradient(135deg,#312e81 0%,#7c3aed 40%,#f472b6 100%)}
.g-appshow .glow{background:linear-gradient(135deg,#0f766e 0%,#14b8a6 40%,#5eead4 100%)}
.g-bizsys .glow{background:linear-gradient(135deg,#1e3a5f 0%,#3b82f6 40%,#93c5fd 100%)}
.admin-row{display:flex;justify-content:center;margin-top:56px}
.admin-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:100px;background:var(--admin-btn-bg);color:var(--text);text-decoration:none;font-size:15px;font-weight:600;transition:all .25s}
.admin-btn:hover{background:var(--admin-btn-hover);transform:scale(1.03)}
.admin-btn svg{width:18px;height:18px}
.theme-toggle{position:fixed;top:24px;right:24px;z-index:100;width:48px;height:48px;border-radius:50%;border:2px solid var(--border);background:var(--card);box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.theme-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow-hover)}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{position:absolute;transition:all .3s;font-size:20px}
.theme-toggle .icon-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.theme-toggle .icon-moon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="dark"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="dark"] .theme-toggle .icon-moon{opacity:0;transform:rotate(90deg) scale(.5)}
/* Lang switcher */
.lang-toggle{position:fixed;top:24px;right:80px;z-index:100;width:48px;height:48px;border-radius:50%;border:2px solid var(--border);background:var(--card);box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;font-size:13px;font-weight:700;color:var(--text)}
.lang-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow-hover)}
.foot{text-align:center;padding:32px 0 0;color:var(--text-sub);font-size:12px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
.item{animation:up .6s ease both}
.item:nth-child(1){animation-delay:.05s}.item:nth-child(2){animation-delay:.12s}.item:nth-child(3){animation-delay:.19s}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.consult-section{max-width:680px;margin:64px auto 0;padding:40px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:24px;box-shadow:0 20px 60px rgba(102,126,234,0.3)}
.consult-header{text-align:center;margin-bottom:32px}
.consult-header h2{font-size:32px;font-weight:700;color:#fff;margin-bottom:8px}
.consult-header p{font-size:16px;color:rgba(255,255,255,0.9)}
.consult-form{background:var(--form-bg);padding:32px;border-radius:16px;backdrop-filter:blur(10px);transition:background .3s}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;padding:12px 16px;border:2px solid var(--input-border);border-radius:12px;font-size:15px;transition:all .3s;background:var(--input-bg);color:var(--text);-webkit-appearance:none;appearance:none}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-sub)}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea;background:var(--card);box-shadow:0 0 0 4px rgba(102,126,234,0.1)}
.form-group textarea{resize:vertical;min-height:100px}
.submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s;margin-top:8px}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,0.4)}
.submit-btn:active{transform:translateY(0)}
.consult-success{text-align:center;padding:40px;background:var(--form-bg);border-radius:16px;transition:background .3s}
.success-icon{width:64px;height:64px;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:32px;color:#fff}
.consult-success h3{font-size:24px;font-weight:700;color:var(--text);margin-bottom:8px}
.consult-success p{font-size:16px;color:var(--text-sub)}
@media(max-width:600px){
.wrap{padding:24px 16px 48px}
.hero{padding:24px 0 32px}
.hero h1{font-size:28px;letter-spacing:-1px}
.hero p{font-size:15px}
.hero-pills{gap:6px;margin-top:20px}
.pill{padding:5px 12px;font-size:12px}
.sec{margin-bottom:36px}
.sec-head{gap:8px;margin-bottom:16px}
.sec-head h2{font-size:20px}
.sec-head .sub{font-size:12px}
.grid{grid-template-columns:1fr !important;gap:14px}
.item-banner{height:120px}
.item-body{padding:14px 16px}
.item-title{font-size:15px}
.item-desc{font-size:12px}
.item-go{opacity:1;transform:scale(1)}
.theme-toggle{width:40px;height:40px;top:16px;right:16px}
.lang-toggle{width:40px;height:40px;top:16px;right:64px;font-size:11px}
.consult-section{margin:36px 0 0;padding:0;border-radius:0;box-shadow:none;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.consult-header{padding:24px 20px 0;margin-bottom:20px}
.consult-header h2{font-size:22px}
.consult-header p{font-size:14px}
.consult-form{padding:20px;border-radius:0;margin:0 16px 16px}
.form-row{grid-template-columns:1fr;gap:0}
.form-group{margin-bottom:12px}
.form-group label{font-size:13px;margin-bottom:4px}
.form-group input,.form-group textarea{padding:10px 14px;font-size:14px;border-width:1px}
.submit-btn{padding:14px;font-size:16px;margin-top:4px}
.admin-row{margin-top:36px}
.admin-btn{padding:12px 24px;font-size:14px}
.foot{padding:24px 16px 0;font-size:11px}
}
</style>
</head>
<body>
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
<span class="icon-sun">☀️</span>
<span class="icon-moon">🌙</span>
</button>
<button class="lang-toggle" id="langToggle" onclick="cycleLang()">EN</button>
<div class="wrap">
<div class="hero">
<h1><span id="s_hero_title">Gotest</span> <span id="s_hero_highlight" data-i18n="hero_highlight">Template Gallery</span></h1>
<p id="s_hero_desc" data-i18n="hero_desc">6 industries, 19 beautifully designed website templates. Switch instantly, preview now</p>
<div class="hero-pills">
<span class="pill"><b>19</b> <span data-i18n="pill_templates">Templates</span></span>
<span class="pill"><b>6</b> <span data-i18n="pill_lines">Industries</span></span>
<span class="pill"><b>3</b> <span data-i18n="pill_per">/ Industry</span></span>
<span class="pill" data-i18n="pill_responsive">Responsive</span>
</div>
</div>
<!-- Enterprise -->
<div class="sec">
<div class="sec-head"><h2 data-i18n="sec_enterprise">Enterprise</h2><span class="sub" data-i18n="sec_enterprise_sub">3 Styles</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/site1" target="_blank"><div class="item-banner g-enterprise"><div class="glow"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_tech_blue">Tech Blue</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">Tech Enterprise · site1</div><div class="item-desc" data-i18n="desc_site1">Modern tech company style, blue theme</div></div></a>
<a class="item" href="/site2" target="_blank"><div class="item-banner g-enterprise"><div class="glow" style="background:linear-gradient(135deg,#1c1917 0%,#b45309 40%,#fbbf24 100%)"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_mfg_gold">Mfg Gold</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">Manufacturing · site2</div><div class="item-desc" data-i18n="desc_site2">Industrial manufacturing style, dark gold</div></div></a>
<a class="item" href="/site3" target="_blank"><div class="item-banner g-enterprise"><div class="glow" style="background:linear-gradient(135deg,#064e3b 0%,#10b981 40%,#6ee7b7 100%)"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_consult_green">Consult Green</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">Consulting · site3</div><div class="item-desc" data-i18n="desc_site3">Professional consulting style, fresh green</div></div></a>
</div>
</div>
<!-- E-commerce -->
<div class="sec">
<div class="sec-head"><h2 data-i18n="sec_shop">E-Commerce</h2><span class="sub" data-i18n="sec_shop_sub">4 Styles</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/shop" target="_blank"><div class="item-banner g-shop"><div class="glow"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_red_classic">Red Classic</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">Classic Shop · shop</div><div class="item-desc" data-i18n="desc_shop">Classic e-commerce red, sale style</div></div></a>
<a class="item" href="/shop2" target="_blank"><div class="item-banner g-shop"><div class="glow" style="background:linear-gradient(135deg,#18181b 0%,#3f3f46 40%,#71717a 100%)"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_dark">Dark Mode</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">Dark Shop · shop2</div><div class="item-desc" data-i18n="desc_shop2">Premium dark, minimalist noir</div></div></a>
<a class="item" href="/shop3" target="_blank"><div class="item-banner g-shop"><div class="glow" style="background:linear-gradient(135deg,#f5f5f0 0%,#d6d3d1 40%,#a8a29e 100%)"></div><div class="pattern" style="opacity:.08"></div><span class="item-tag" style="background:rgba(0,0,0,.1);color:#1c1917;border-color:rgba(0,0,0,.1)" data-i18n="tag_nordic">Nordic</span><div class="item-go" style="color:#1c1917">→</div></div><div class="item-body"><div class="item-title">Nordic · shop3</div><div class="item-desc" data-i18n="desc_shop3">NORDI style, natural and soft</div></div></a>
<a class="item" href="/shop4" target="_blank"><div class="item-banner g-shop"><div class="glow" style="background:linear-gradient(135deg,#0f172a 0%,#1a3a2a 50%,#2d5a1f 100%)"></div><div class="pattern" style="opacity:.06"></div><span class="item-tag" data-i18n="tag_ancient">Ancient Tree</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">Tree Mall · shop4</div><div class="item-desc" data-i18n="desc_shop4">Ancient tree wallpaper, ray-traced vitality</div></div></a>
</div>
</div>
<!-- Food Delivery -->
<div class="sec">
<div class="sec-head"><h2 data-i18n="sec_food">Food Delivery</h2><span class="sub" data-i18n="sec_food_sub">3 Styles</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/food1" target="_blank"><div class="item-banner g-food"><div class="glow"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_orange">Orange Energy</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">YummyGo · food1</div><div class="item-desc" data-i18n="desc_food1">Warm orange appetite style</div></div></a>
<a class="item" href="/food2" target="_blank"><div class="item-banner g-food"><div class="glow" style="background:linear-gradient(135deg,#18181b 0%,#44403c 40%,#78716c 100%)"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_dark_mode">Dark Mode</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">GOURMET · food2</div><div class="item-desc" data-i18n="desc_food2">Premium dark food platform</div></div></a>
<a class="item" href="/food3" target="_blank"><div class="item-banner g-food"><div class="glow" style="background:linear-gradient(135deg,#14532d 0%,#22c55e 40%,#86efac 100%)"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_fresh">Fresh Natural</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">GreenFresh · food3</div><div class="item-desc" data-i18n="desc_food3">Green and healthy, fresh natural</div></div></a>
</div>
</div>
<!-- Gaming -->
<div class="sec">
<div class="sec-head"><h2 data-i18n="sec_game">Gaming</h2><span class="sub" data-i18n="sec_game_sub">3 Styles</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/game1" target="_blank"><div class="item-banner g-game"><div class="glow"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_cyber">Cyberpunk</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">NEON ARCADE · game1</div><div class="item-desc" data-i18n="desc_game1">Neon future, cyberpunk style</div></div></a>
<a class="item" href="/game2" target="_blank"><div class="item-banner g-game"><div class="glow" style="background:linear-gradient(135deg,#052e16 0%,#16a34a 40%,#4ade80 100%)"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_pixel">Pixel Retro</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">PIXEL GAMES · game2</div><div class="item-desc" data-i18n="desc_game2">8-bit pixel retro gaming</div></div></a>
<a class="item" href="/game3" target="_blank"><div class="item-banner g-game"><div class="glow" style="background:linear-gradient(135deg,#083344 0%,#06b6d4 40%,#67e8f9 100%)"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_cloud">Cloud Gaming</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">CloudPlay · game3</div><div class="item-desc" data-i18n="desc_game3">Streamlined tech, cloud gaming</div></div></a>
</div>
</div>
<!-- App Store -->
<div class="sec">
<div class="sec-head"><h2 data-i18n="sec_app">App Store</h2><span class="sub" data-i18n="sec_app_sub">3 Styles</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/app1" target="_blank"><div class="item-banner g-app"><div class="glow" style="background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 40%,#cbd5e1 100%)"></div><div class="pattern" style="opacity:.06"></div><span class="item-tag" style="background:rgba(0,0,0,.08);color:#1e293b;border-color:rgba(0,0,0,.08)" data-i18n="tag_minimal">Minimal White</span><div class="item-go" style="color:#1e293b">→</div></div><div class="item-body"><div class="item-title">Minimal · app1</div><div class="item-desc" data-i18n="desc_app1">Apple style, clean and simple</div></div></a>
<a class="item" href="/app2" target="_blank"><div class="item-banner g-app"><div class="glow" style="background:linear-gradient(135deg,#052e16 0%,#10b981 40%,#34d399 100%)"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_dark_neon">Dark Neon</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">APP HUB · app2</div><div class="item-desc" data-i18n="desc_app2">Neon green dark, high-tech</div></div></a>
<a class="item" href="/app3" target="_blank"><div class="item-banner g-app"><div class="glow"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_fresh_blue">Fresh Blue</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">Fresh Blue · app3</div><div class="item-desc" data-i18n="desc_app3">Bright colors, lively modern</div></div></a>
</div>
</div>
<!-- Music -->
<div class="sec">
<div class="sec-head"><h2 data-i18n="sec_music">Music</h2><span class="sub" data-i18n="sec_music_sub">3 Styles</span><div class="sec-line"></div></div>
<div class="grid">
<a class="item" href="/music1" target="_blank"><div class="item-banner g-music"><div class="glow" style="background:linear-gradient(135deg,#1e1b4b 0%,#4f46e5 40%,#818cf8 100%)"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_dark_player">Dark Player</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">CloudMusic · music1</div><div class="item-desc" data-i18n="desc_music1">Dark immersive music player</div></div></a>
<a class="item" href="/music2" target="_blank"><div class="item-banner g-music"><div class="glow" style="background:linear-gradient(135deg,#451a03 0%,#92400e 40%,#d97706 100%)"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_vinyl">Vinyl Retro</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">Vinyl · music2</div><div class="item-desc" data-i18n="desc_music2">Vinyl record retro style</div></div></a>
<a class="item" href="/music3" target="_blank"><div class="item-banner g-music"><div class="glow"></div><div class="pattern"></div><span class="item-tag" data-i18n="tag_gradient">Gradient Stream</span><div class="item-go">→</div></div><div class="item-body"><div class="item-title">Stream · music3</div><div class="item-desc" data-i18n="desc_music3">Purple-pink gradient, modern streaming</div></div></a>
</div>
</div>
<!-- App Showcase -->
<div class="sec" id="sec-apps" style="display:none">
<div class="sec-head"><h2 data-i18n="sec_appshow">App Showcase</h2><span class="sub" data-i18n="sec_appshow_sub">Featured Apps</span><div class="sec-line"></div></div>
<div class="grid" id="appShowGrid"></div>
</div>
<!-- Biz Systems -->
<div class="sec" id="sec-systems" style="display:none">
<div class="sec-head"><h2 data-i18n="sec_bizsys">Business Systems</h2><span class="sub" data-i18n="sec_bizsys_sub">Custom / Annual</span><div class="sec-line"></div></div>
<div class="grid" id="bizSysGrid"></div>
</div>
<!-- Admin -->
<div class="admin-row">
<a class="admin-btn" href="/admin">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
<span data-i18n="admin_btn">Admin Panel</span>
</a>
</div>
<!-- Consultation Form -->
<div class="consult-section">
<div class="consult-header">
<h2 data-i18n="consult_title">Need a Custom Website?</h2>
<p data-i18n="consult_desc">Get a beautiful site like these for just a few hundred! Leave your info and we'll contact you soon</p>
</div>
<form class="consult-form" id="consultForm">
<div class="form-row">
<div class="form-group">
<label for="name" data-i18n="label_name">Name *</label>
<input type="text" id="name" name="name" data-i18n-placeholder="ph_name" placeholder="Your name" required>
</div>
<div class="form-group">
<label for="phone" data-i18n="label_phone">Phone *</label>
<input type="tel" id="phone" name="phone" data-i18n-placeholder="ph_phone" placeholder="Your phone number" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="company" data-i18n="label_company">Company</label>
<input type="text" id="company" name="company" data-i18n-placeholder="ph_company" placeholder="Company name (optional)">
</div>
<div class="form-group">
<label for="email" data-i18n="label_email">Email</label>
<input type="email" id="email" name="email" data-i18n-placeholder="ph_email" placeholder="Email (optional)">
</div>
</div>
<div class="form-group">
<label for="needs" data-i18n="label_needs">Requirements *</label>
<textarea id="needs" name="needs" rows="4" data-i18n-placeholder="ph_needs" placeholder="Describe your needs, e.g.: I want a tech-style enterprise website..." required></textarea>
</div>
<button type="submit" class="submit-btn" id="submitBtn">
<span class="btn-text" data-i18n="btn_submit">Submit Inquiry</span>
<span class="btn-loading" style="display:none" data-i18n="btn_loading">Submitting...</span>
</button>
</form>
<div class="consult-success" id="consultSuccess" style="display:none">
<div class="success-icon">✓</div>
<h3 data-i18n="consult_success">Submitted!</h3>
<p data-i18n="consult_success_desc">We'll contact you soon. Please keep your phone available</p>
</div>
</div>
<div class="foot" data-i18n="footer">Gotest · Multi-Industry Website Templates · Click a card to preview</div>
<div class="foot" id="s_company" style="margin-top:4px;font-size:11px;opacity:.6"></div>
</div>
<script>
/* =========================================================
i18n Engine
========================================================= */
var I18N_NAV = {
'en': {
hero_highlight: 'Template Gallery',
hero_desc: '6 industries, 19 beautifully designed website templates. Switch instantly, preview now',
pill_templates: 'Templates',
pill_lines: 'Industries',
pill_per: '/ Industry',
pill_responsive: 'Responsive',
sec_enterprise: 'Enterprise',
sec_enterprise_sub: '3 Styles',
sec_shop: 'E-Commerce',
sec_shop_sub: '4 Styles',
sec_food: 'Food Delivery',
sec_food_sub: '3 Styles',
sec_game: 'Gaming',
sec_game_sub: '3 Styles',
sec_app: 'App Store',
sec_app_sub: '3 Styles',
sec_music: 'Music',
sec_music_sub: '3 Styles',
sec_appshow: 'App Showcase',
sec_appshow_sub: 'Featured Apps',
sec_bizsys: 'Business Systems',
sec_bizsys_sub: 'Custom / Annual',
admin_btn: 'Admin Panel',
consult_title: 'Need a Custom Website?',
consult_desc: 'Get a beautiful site like these for just a few hundred! Leave your info and we\'ll contact you soon',
label_name: 'Name *',
label_phone: 'Phone *',
label_company: 'Company',
label_email: 'Email',
label_needs: 'Requirements *',
ph_name: 'Your name',
ph_phone: 'Your phone number',
ph_company: 'Company name (optional)',
ph_email: 'Email (optional)',
ph_needs: 'Describe your needs, e.g.: I want a tech-style enterprise website...',
btn_submit: 'Submit Inquiry',
btn_loading: 'Submitting...',
consult_success: 'Submitted!',
consult_success_desc: 'We\'ll contact you soon. Please keep your phone available',
footer: 'Gotest · Multi-Industry Website Templates · Click a card to preview',
tag_tech_blue: 'Tech Blue',
tag_mfg_gold: 'Mfg Gold',
tag_consult_green: 'Consult Green',
tag_red_classic: 'Red Classic',
tag_dark: 'Dark Mode',
tag_nordic: 'Nordic',
tag_ancient: 'Ancient Tree',
tag_orange: 'Orange Energy',
tag_dark_mode: 'Dark Mode',
tag_fresh: 'Fresh Natural',
tag_cyber: 'Cyberpunk',
tag_pixel: 'Pixel Retro',
tag_cloud: 'Cloud Gaming',
tag_minimal: 'Minimal White',
tag_dark_neon: 'Dark Neon',
tag_fresh_blue: 'Fresh Blue',
tag_dark_player: 'Dark Player',
tag_vinyl: 'Vinyl Retro',
tag_gradient: 'Gradient Stream',
desc_site1: 'Modern tech company style, blue theme',
desc_site2: 'Industrial manufacturing style, dark gold',
desc_site3: 'Professional consulting style, fresh green',
desc_shop: 'Classic e-commerce red, sale style',
desc_shop2: 'Premium dark, minimalist noir',
desc_shop3: 'NORDI style, natural and soft',
desc_shop4: 'Ancient tree wallpaper, ray-traced vitality',
desc_food1: 'Warm orange appetite style',
desc_food2: 'Premium dark food platform',
desc_food3: 'Green and healthy, fresh natural',
desc_game1: 'Neon future, cyberpunk style',
desc_game2: '8-bit pixel retro gaming',
desc_game3: 'Streamlined tech, cloud gaming',
desc_app1: 'Apple style, clean and simple',
desc_app2: 'Neon green dark, high-tech',
desc_app3: 'Bright colors, lively modern',
desc_music1: 'Dark immersive music player',
desc_music2: 'Vinyl record retro style',
desc_music3: 'Purple-pink gradient, modern streaming',
err_submit: 'Submission failed, please try again later',
err_network: 'Network error, please try again later'
},
'zh-CN': {
hero_highlight: '模板导航',
hero_desc: '6 大行业,19 套精心设计的网站模板,一键切换,即刻预览',
pill_templates: '套模板',
pill_lines: '大行业',
pill_per: '套 / 行业',
pill_responsive: '响应式设计',
sec_enterprise: '企业官网',
sec_enterprise_sub: '3 套风格',
sec_shop: '跨境电商',
sec_shop_sub: '4 套风格',
sec_food: '外卖平台',
sec_food_sub: '3 套风格',
sec_game: '游戏平台',
sec_game_sub: '3 套风格',
sec_app: '应用商店',
sec_app_sub: '3 套风格',
sec_music: '音乐平台',
sec_music_sub: '3 套风格',
sec_appshow: 'App 候选码',
sec_appshow_sub: '精选应用',
sec_bizsys: '业务系统',
sec_bizsys_sub: '定制 / 年付',
admin_btn: '管理后台',
consult_title: '需要定制网站?',
consult_desc: '只需几百块,即可拥有同款精美站点!留下您的信息,我们尽快联系您',
label_name: '姓名 *',
label_phone: '联系电话 *',
label_company: '公司名称',
label_email: '邮箱',
label_needs: '需求描述 *',
ph_name: '请输入您的姓名',
ph_phone: '请输入您的手机号',
ph_company: '请输入公司名称(选填)',
ph_email: '请输入邮箱(选填)',
ph_needs: '请描述您的需求,比如:想要一个企业官网,类似科技风格...',
btn_submit: '立即咨询',
btn_loading: '提交中...',
consult_success: '提交成功!',
consult_success_desc: '我们会尽快联系您,请保持电话畅通',
footer: 'Gotest · 多行业网站模板集合 · 点击卡片进入对应模板',
tag_tech_blue: '科技蓝',
tag_mfg_gold: '制造金',
tag_consult_green: '咨询绿',
tag_red_classic: '红色经典',
tag_dark: '暗黑模式',
tag_nordic: '北欧极简',
tag_ancient: '古树生机',
tag_orange: '橙黄活力',
tag_dark_mode: '深色模式',
tag_fresh: '清新自然',
tag_cyber: '赛博朋克',
tag_pixel: '像素复古',
tag_cloud: '云游戏',
tag_minimal: '极简白',
tag_dark_neon: '暗黑模式',
tag_fresh_blue: '清新蓝',
tag_dark_player: '暗黑播放器',
tag_vinyl: '黑胶复古',
tag_gradient: '渐变流媒体',
desc_site1: '现代科技公司风格,蓝色主调',
desc_site2: '工业制造风格,深色金调',
desc_site3: '专业咨询风格,绿色清新',
desc_shop: '经典电商红,大促风格',
desc_shop2: '黑色高端,极简暗色',
desc_shop3: 'NORDI 风格,自然柔和',
desc_shop4: '古树壁纸,光追生命力',
desc_food1: '暖橙食欲风格,活力满满',
desc_food2: '暗色高端外卖平台',
desc_food3: '绿色健康,清新自然',
desc_game1: '霓虹未来,赛博朋克风格',
desc_game2: '8-bit 像素复古游戏风',
desc_game3: '流线科技,云游戏风格',
desc_app1: 'Apple 风格,简洁清爽',
desc_app2: '霓虹绿暗色,科技感十足',
desc_app3: '明亮配色,活泼现代',
desc_music1: '暗夜沉浸式音乐播放器',
desc_music2: '黑胶唱片复古风格',
desc_music3: '紫粉渐变,现代流媒体',
err_submit: '提交失败,请稍后重试',
err_network: '网络错误,请稍后重试'
},
'zh-TW': {
hero_highlight: '模板導航',
hero_desc: '6 大行業,19 套精心設計的網站模板,一切換,即刻預覽',
pill_templates: '套模板',
pill_lines: '大行業',
pill_per: '套 / 行業',
pill_responsive: '響應式設計',
sec_enterprise: '企業官網',
sec_enterprise_sub: '3 套風格',
sec_shop: '跨境電商',
sec_shop_sub: '4 套風格',
sec_food: '外賣平台',
sec_food_sub: '3 套風格',
sec_game: '遊戲平台',
sec_game_sub: '3 套風格',
sec_app: '應用商店',
sec_app_sub: '3 套風格',
sec_music: '音樂平台',
sec_music_sub: '3 套風格',
sec_appshow: 'App 候選碼',
sec_appshow_sub: '精選應用',
sec_bizsys: '業務系統',
sec_bizsys_sub: '定制 / 年付',
admin_btn: '管理後台',
consult_title: '需要定制網站?',
consult_desc: '只需幾百塊,即可擁有同款精美站點!留下您的資訊,我們盡快聯繫您',
label_name: '姓名 *',
label_phone: '聯繫電話 *',
label_company: '公司名稱',
label_email: '信箱',
label_needs: '需求描述 *',
ph_name: '請輸入您的姓名',
ph_phone: '請輸入您的手機號',
ph_company: '請輸入公司名稱(選填)',
ph_email: '請輸入信箱(選填)',
ph_needs: '請描述您的需求,比如:想要一個企業官網,類似科技風格...',
btn_submit: '立即諮詢',
btn_loading: '提交中...',
consult_success: '提交成功!',
consult_success_desc: '我們會盡快聯繫您,請保持電話暢通',
footer: 'Gotest · 多行業網站模板集合 · 點擊卡片進入對應模板',
tag_tech_blue: '科技藍',
tag_mfg_gold: '製造金',
tag_consult_green: '諮詢綠',
tag_red_classic: '紅色經典',
tag_dark: '暗黑模式',
tag_nordic: '北歐極簡',
tag_ancient: '古樹生機',
tag_orange: '橙黃活力',
tag_dark_mode: '深色模式',
tag_fresh: '清新自然',
tag_cyber: '賽博朋克',
tag_pixel: '像素復古',
tag_cloud: '雲遊戲',
tag_minimal: '極簡白',
tag_dark_neon: '暗黑模式',
tag_fresh_blue: '清新藍',
tag_dark_player: '暗黑播放器',
tag_vinyl: '黑膠復古',
tag_gradient: '漸變流媒體',
desc_site1: '現代科技公司風格,藍色主調',
desc_site2: '工業製造風格,深色金調',
desc_site3: '專業諮詢風格,綠色清新',
desc_shop: '經典電商紅,大促風格',
desc_shop2: '黑色高端,極簡暗色',
desc_shop3: 'NORDI 風格,自然柔和',
desc_shop4: '古樹壁紙,光追生命力',
desc_food1: '暖橙食慾風格,活力滿滿',
desc_food2: '暗色高端外賣平台',
desc_food3: '綠色健康,清新自然',
desc_game1: '霓虹未來,賽博朋克風格',
desc_game2: '8-bit 像素復古遊戲風',
desc_game3: '流線科技,雲遊戲風格',
desc_app1: 'Apple 風格,簡潔清爽',
desc_app2: '霓虹綠暗色,科技感十足',
desc_app3: '明亮配色,活潑現代',
desc_music1: '暗夜沉浸式音樂播放器',
desc_music2: '黑膠唱片復古風格',
desc_music3: '紫粉漸變,現代流媒體',
err_submit: '提交失敗,請稍後重試',
err_network: '網路錯誤,請稍後重試'
}
};
var currentLang = (function(){
try{
var u=new URLSearchParams(location.search).get('lang');
if(u&&I18N_NAV[u]) return u;
}catch(e){}
try{var s=localStorage.getItem('nav_lang');if(s&&I18N_NAV[s]) return s;}catch(e){}
var b=navigator.language||navigator.userLanguage||'';
if(b.startsWith('zh-TW')||b.startsWith('zh-Hant')) return 'zh-TW';
if(b.startsWith('zh')) return 'zh-CN';
return 'en';
})();
function tNav(key){return (I18N_NAV[currentLang]&&I18N_NAV[currentLang][key])||(I18N_NAV['en'][key])||key;}
function applyNavI18n(){
document.querySelectorAll('[data-i18n]').forEach(function(el){
var key=el.getAttribute('data-i18n');
el.textContent=tNav(key);
});
document.querySelectorAll('[data-i18n-placeholder]').forEach(function(el){
var key=el.getAttribute('data-i18n-placeholder');
el.placeholder=tNav(key);
});
document.documentElement.lang=currentLang==='zh-TW'?'zh-TW':currentLang==='zh-CN'?'zh-CN':'en';
document.getElementById('langToggle').textContent={'zh-CN':'中','en':'EN','zh-TW':'繁'}[currentLang]||'EN';
}
function cycleLang(){
var langs=['en','zh-CN','zh-TW'];
var idx=langs.indexOf(currentLang);
currentLang=langs[(idx+1)%langs.length];
try{localStorage.setItem('nav_lang',currentLang);}catch(e){}
applyNavI18n();
}
// Theme toggle
(function(){
var toggle = document.getElementById('themeToggle');
toggle.addEventListener('click', function(){
var current = document.documentElement.getAttribute('data-theme');
var next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
});
})();
// Load nav settings from backend
(async function(){
try {
var resp = await fetch('/api/v1/nav-settings');
var result = await resp.json();
if (result.code !== 0 || !result.data) return;
var s = result.data;
var map = {
s_hero_title: 'nav_hero_title',
s_hero_highlight: 'nav_hero_highlight',
s_hero_desc: 'nav_hero_desc',
s_consult_title: 'nav_consult_title',
s_consult_desc: 'nav_consult_desc',
s_consult_success: 'nav_consult_success',
s_footer_text: 'nav_footer_text',
s_company_name: 'nav_company_name',
s_sec_enterprise_title: 'nav_sec_enterprise_title',
s_sec_enterprise_sub: 'nav_sec_enterprise_sub',
s_sec_shop_title: 'nav_sec_shop_title',
s_sec_shop_sub: 'nav_sec_shop_sub',
s_sec_food_title: 'nav_sec_food_title',
s_sec_food_sub: 'nav_sec_food_sub',
s_sec_game_title: 'nav_sec_game_title',
s_sec_game_sub: 'nav_sec_game_sub',
s_sec_app_title: 'nav_sec_app_title',
s_sec_app_sub: 'nav_sec_app_sub',
s_sec_music_title: 'nav_sec_music_title',
s_sec_music_sub: 'nav_sec_music_sub',
s_sec_appshow_title: 'nav_sec_appshow_title',
s_sec_appshow_sub: 'nav_sec_appshow_sub',
s_sec_bizsys_title: 'nav_sec_bizsys_title',
s_sec_bizsys_sub: 'nav_sec_bizsys_sub',
};
for (var elId in map) {
var val = s[map[elId]];
if (val) {
var el = document.getElementById(elId);
if (el) el.textContent = val;
}
}
} catch(e) {}
})();
// Load App Showcase
(async function(){
try {
var resp = await fetch('/api/v1/showcase/apps');
var result = await resp.json();
if (result.code !== 0 || !result.data.list || result.data.list.length === 0) return;
var grid = document.getElementById('appShowGrid');
var items = result.data.list;
var gradients = ['#0f766e,#14b8a6,#5eead4','#7c2d12,#ea580c,#fdba74','#1e3a5f,#2563eb,#60a5fa','#581c87,#9333ea,#d8b4fe','#065f46,#10b981,#6ee7b7'];
grid.innerHTML = items.map(function(item, i) {
var g = gradients[i % gradients.length].split(',');
return '<a class="item" href="' + (item.download_url || '#') + '" target="_blank">' +
'<div class="item-banner g-appshow"><div class="glow" style="background:linear-gradient(135deg,' + g[0] + ' 0%,' + g[1] + ' 40%,' + g[2] + ' 100%)"></div><div class="pattern"></div>' +
'<span class="item-tag">' + (item.category || 'App') + '</span><div class="item-go">\u2192</div></div>' +
'<div class="item-body"><div class="item-title">' + item.name + '</div><div class="item-desc">' + (item.description || '') + '</div></div></a>';
}).join('');
document.getElementById('sec-apps').style.display = '';
} catch(e) {}
})();
// Load Biz Systems
(async function(){
try {
var resp = await fetch('/api/v1/showcase/systems');
var result = await resp.json();
if (result.code !== 0 || !result.data.list || result.data.list.length === 0) return;
var grid = document.getElementById('bizSysGrid');
var items = result.data.list;
var gradients = ['#1e3a5f,#3b82f6,#93c5fd','#0f766e,#14b8a6,#5eead4','#7c2d12,#ea580c,#fdba74','#581c87,#9333ea,#d8b4fe','#065f46,#10b981,#6ee7b7'];
grid.innerHTML = items.map(function(item, i) {
var g = gradients[i % gradients.length].split(',');
var priceLabel = item.price_type === 'custom' ? 'Custom Dev' : (item.price || 'Contact');
return '<div class="item">' +
'<div class="item-banner g-bizsys"><div class="glow" style="background:linear-gradient(135deg,' + g[0] + ' 0%,' + g[1] + ' 40%,' + g[2] + ' 100%)"></div><div class="pattern"></div>' +
'<span class="item-tag">' + (item.category || 'System') + '</span><div class="item-go">\u2192</div></div>' +
'<div class="item-body"><div class="item-title">' + item.name + '</div><div class="item-desc">' + (item.description || '') + '</div>' +
'<div style="margin-top:8px"><span style="display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600;background:rgba(59,130,246,0.1);color:#3b82f6">' + priceLabel + '</span></div></div></div>';
}).join('');
document.getElementById('sec-systems').style.display = '';
} catch(e) {}
})();
// Consult form
document.getElementById('consultForm').addEventListener('submit', async function(e) {
e.preventDefault();
var submitBtn = document.getElementById('submitBtn');
var btnText = submitBtn.querySelector('.btn-text');
var btnLoading = submitBtn.querySelector('.btn-loading');
btnText.style.display = 'none';
btnLoading.style.display = 'inline';
submitBtn.disabled = true;
var formData = {
name: document.getElementById('name').value,
phone: document.getElementById('phone').value,
company: document.getElementById('company').value,
email: document.getElementById('email').value,
needs: document.getElementById('needs').value
};
try {
var response = await fetch('/api/v1/customer/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
var result = await response.json();
if (result.code === 0) {
document.getElementById('consultForm').style.display = 'none';
document.getElementById('consultSuccess').style.display = 'block';
} else {
alert(result.message || tNav('err_submit'));
btnText.style.display = 'inline';
btnLoading.style.display = 'none';
submitBtn.disabled = false;
}
} catch (error) {
console.error('Submit error:', error);
alert(tNav('err_network'));
btnText.style.display = 'inline';
btnLoading.style.display = 'none';
submitBtn.disabled = false;
}
});
// Init
applyNavI18n();
</script>
</body>
</html>