- 导航页(index.html)添加完整i18n引擎,支持zh-CN/zh-TW/en - 导航页添加语言切换按钮(EN/中/繁) - 所有20个前端模板默认语言从zh-CN改为en - 导航页SEO meta标签改为英文
733 lines
44 KiB
HTML
733 lines
44 KiB
HTML
<!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>
|