|
|
@@ -0,0 +1,550 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
+ <meta name="description" content="美浓云印刷油墨智能管理系统 - 专色墨领用、领料单、配方指令书、机台领退料一体化管理">
|
|
|
+ <title>美浓云 · 印刷油墨智能管理系统</title>
|
|
|
+ <style>
|
|
|
+ :root {
|
|
|
+ --bg: #05070a;
|
|
|
+ --bg-card: rgba(255, 255, 255, 0.04);
|
|
|
+ --border: rgba(255, 255, 255, 0.08);
|
|
|
+ --text: #f5f7ff;
|
|
|
+ --muted: #9aa3b2;
|
|
|
+ --primary: #6366f1;
|
|
|
+ --cyan: #06b6d4;
|
|
|
+ --orange: #f97316;
|
|
|
+ --green: #22c55e;
|
|
|
+ --gradient: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
|
|
|
+ --radius: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ * { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
+
|
|
|
+ html { scroll-behavior: smooth; }
|
|
|
+
|
|
|
+ body {
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
|
+ background: var(--bg);
|
|
|
+ color: var(--text);
|
|
|
+ line-height: 1.6;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ body::before {
|
|
|
+ content: "";
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ background:
|
|
|
+ radial-gradient(circle at 20% 10%, rgba(99, 102, 241, 0.18), transparent 35%),
|
|
|
+ radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.12), transparent 30%),
|
|
|
+ radial-gradient(circle at 50% 80%, rgba(249, 115, 22, 0.08), transparent 35%);
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrap { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; }
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 14px 18px;
|
|
|
+ background: rgba(5, 7, 10, 0.85);
|
|
|
+ backdrop-filter: blur(12px);
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-icon {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: var(--gradient);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-btn {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: transparent;
|
|
|
+ color: var(--text);
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-links {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 100%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: rgba(10, 12, 18, 0.98);
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ padding: 12px 18px 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-links.open { display: block; }
|
|
|
+
|
|
|
+ .nav-links a {
|
|
|
+ display: block;
|
|
|
+ color: var(--muted);
|
|
|
+ text-decoration: none;
|
|
|
+ padding: 10px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section { padding: 28px 18px; }
|
|
|
+
|
|
|
+ .badge {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ border-radius: 999px;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ background: rgba(255, 255, 255, 0.03);
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .badge-dot {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: var(--cyan);
|
|
|
+ box-shadow: 0 0 8px var(--cyan);
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: 30px;
|
|
|
+ line-height: 1.25;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gradient-text {
|
|
|
+ background: var(--gradient);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-desc {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ padding: 6px 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ background: rgba(255, 255, 255, 0.03);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag.orange { color: #fdba74; border-color: rgba(249, 115, 22, 0.3); }
|
|
|
+ .tag.green { color: #86efac; border-color: rgba(34, 197, 94, 0.3); }
|
|
|
+ .tag.cyan { color: #67e8f9; border-color: rgba(6, 182, 212, 0.3); }
|
|
|
+
|
|
|
+ .btn-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ padding: 14px 18px;
|
|
|
+ border-radius: 14px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-decoration: none;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: var(--gradient);
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-ghost {
|
|
|
+ background: transparent;
|
|
|
+ color: var(--text);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ }
|
|
|
+
|
|
|
+ .dashboard {
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 20px;
|
|
|
+ background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
|
|
|
+ padding: 16px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dashboard-title {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--muted);
|
|
|
+ margin-bottom: 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stats {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat {
|
|
|
+ background: rgba(0, 0, 0, 0.25);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 10px 8px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat b {
|
|
|
+ display: block;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat span {
|
|
|
+ font-size: 10px;
|
|
|
+ color: var(--muted);
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-item {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-bar {
|
|
|
+ height: 6px;
|
|
|
+ background: rgba(255,255,255,0.08);
|
|
|
+ border-radius: 999px;
|
|
|
+ margin-top: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-bar i {
|
|
|
+ display: block;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: var(--gradient);
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--orange);
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 1.3;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-desc {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: var(--bg-card);
|
|
|
+ padding: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: rgba(99, 102, 241, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card p {
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--muted);
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-num {
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--cyan);
|
|
|
+ margin-bottom: 6px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .compare-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .compare-table th,
|
|
|
+ .compare-table td {
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ padding: 10px 8px;
|
|
|
+ text-align: left;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+
|
|
|
+ .compare-table th {
|
|
|
+ background: rgba(255,255,255,0.04);
|
|
|
+ color: var(--muted);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ok { color: var(--green); }
|
|
|
+ .no { color: #f87171; }
|
|
|
+
|
|
|
+ .cta {
|
|
|
+ text-align: center;
|
|
|
+ padding: 36px 18px 48px;
|
|
|
+ border-top: 1px solid var(--border);
|
|
|
+ background: linear-gradient(180deg, transparent, rgba(99,102,241,0.08));
|
|
|
+ }
|
|
|
+
|
|
|
+ .cta h2 { font-size: 22px; margin-bottom: 10px; }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 18px 30px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 11px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="wrap">
|
|
|
+ <nav class="nav">
|
|
|
+ <div class="logo">
|
|
|
+ <div class="logo-icon">墨</div>
|
|
|
+ <span>美浓云油墨</span>
|
|
|
+ </div>
|
|
|
+ <button class="menu-btn" id="menuBtn" aria-label="菜单">☰</button>
|
|
|
+ <div class="nav-links" id="navLinks">
|
|
|
+ <a href="#pain">管理痛点</a>
|
|
|
+ <a href="#features">核心能力</a>
|
|
|
+ <a href="#compare">对比优势</a>
|
|
|
+ <a href="#cta">联系我们</a>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ <section class="section hero">
|
|
|
+ <div class="badge"><span class="badge-dot"></span>印刷油墨智能管理系统 · 专为烟包印刷车间打造</div>
|
|
|
+ <h1>工单来了,<span class="gradient-text">油墨跟得上吗?</span></h1>
|
|
|
+ <p class="hero-desc">从工单排产到专色墨领用、原墨出库、机台退料,车间每一克油墨都关乎交付与成本。美浓云油墨系统是您车间里的「油墨指挥官」。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span class="tag orange">领料单管理</span>
|
|
|
+ <span class="tag green">指令书打印</span>
|
|
|
+ <span class="tag cyan">机台领退料</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn-row">
|
|
|
+ <a class="btn btn-primary" href="#cta">立即咨询</a>
|
|
|
+ <a class="btn btn-ghost" href="#features">探索能力 →</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dashboard">
|
|
|
+ <div class="dashboard-title">
|
|
|
+ <span>油墨智能看板 · 实时</span>
|
|
|
+ <span>⚡ 在线</span>
|
|
|
+ </div>
|
|
|
+ <div class="stats">
|
|
|
+ <div class="stat">
|
|
|
+ <b>128</b>
|
|
|
+ <span>今日领用批次</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <b>7台</b>
|
|
|
+ <span>机台同步监控</span>
|
|
|
+ </div>
|
|
|
+ <div class="stat">
|
|
|
+ <b>99%</b>
|
|
|
+ <span>配方匹配率</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="progress-item">
|
|
|
+ <div>JY4号机 · 专色墨领用进度</div>
|
|
|
+ <div class="progress-bar"><i style="width:86%"></i></div>
|
|
|
+ </div>
|
|
|
+ <div class="progress-item">
|
|
|
+ <div>今日领料单生成 · 待生产工单</div>
|
|
|
+ <div class="progress-bar"><i style="width:72%"></i></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section" id="pain">
|
|
|
+ <div class="section-label">⚠️ 车间管理的「隐形损耗」</div>
|
|
|
+ <h2>订单接住了,<span class="gradient-text">油墨管住了吗?</span></h2>
|
|
|
+ <p class="section-desc">Excel 记台账、人工对配方、领退料靠经验——专色墨损耗高、追溯难、罚款风险大,是烟包印刷车间的普遍痛点。</p>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon">⏳</div>
|
|
|
+ <h3>领料靠人工,工单对不上</h3>
|
|
|
+ <p>待生产工单与配方脱节,领料单手工汇总,漏领、多领、错领频发,影响开机效率。</p>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon">📋</div>
|
|
|
+ <h3>指令书更新慢,配方对不上</h3>
|
|
|
+ <p>产品代码变更后配方未及时维护,按纸张/按重量两种指令书难以快速生成。</p>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-icon">🏷️</div>
|
|
|
+ <h3>机台领退料难追溯</h3>
|
|
|
+ <p>各机台专色墨、原墨领用与退料分散记录,退料遗漏、批次对不上,成本核算困难。</p>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section" id="features">
|
|
|
+ <div class="section-label">🚀 核心能力</div>
|
|
|
+ <h2>油墨管理的<span class="gradient-text">硬核引擎</span></h2>
|
|
|
+ <p class="section-desc">不是简单进销存,而是贯穿配方、领料、指令书、机台领退料的全流程油墨 MES。</p>
|
|
|
+
|
|
|
+ <div class="card">
|
|
|
+ <div class="feature-num">01</div>
|
|
|
+ <div class="card-icon">⚡</div>
|
|
|
+ <h3>待生产工单 · 一键领料单</h3>
|
|
|
+ <p>对接 MES 工单,按机台筛选待生产任务,勾选后自动生成汇总领料单,支持加急单录入。</p>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="feature-num">02</div>
|
|
|
+ <div class="card-icon">📄</div>
|
|
|
+ <h3>油墨指令书双模式</h3>
|
|
|
+ <p>支持按纸张数、按油墨重量两种指令书生成,配方明细与大小盒消耗自动计算。</p>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="feature-num">03</div>
|
|
|
+ <div class="card-icon">🎨</div>
|
|
|
+ <h3>专色墨领用退还</h3>
|
|
|
+ <p>扫码工单即可领用,专色墨与原墨分账管理,一键出库、一键退库,标签打印无缝对接。</p>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="feature-num">04</div>
|
|
|
+ <div class="card-icon">🏭</div>
|
|
|
+ <h3>各机台领退料看板</h3>
|
|
|
+ <p>7 台印刷机实时展示领用与退料情况,点击专色墨可下钻查看批次明细。</p>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="feature-num">05</div>
|
|
|
+ <div class="card-icon">📦</div>
|
|
|
+ <h3>库存与配方联动</h3>
|
|
|
+ <p>原墨、专色墨库存实时更新,配方消耗与入库明细联动,账实一致。</p>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <div class="feature-num">06</div>
|
|
|
+ <div class="card-icon">📊</div>
|
|
|
+ <h3>报表中心多维统计</h3>
|
|
|
+ <p>每日油墨领用统计、机台消耗分析、领退料汇总,管理决策有据可依。</p>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section" id="compare">
|
|
|
+ <div class="section-label">⚖️ 对比</div>
|
|
|
+ <h2>传统台账 vs <span class="gradient-text">美浓云油墨系统</span></h2>
|
|
|
+ <p class="section-desc">同样是管油墨,智能系统能解决台账管不到的车间细节。</p>
|
|
|
+ <table class="compare-table">
|
|
|
+ <tr>
|
|
|
+ <th>管理维度</th>
|
|
|
+ <th>传统方式</th>
|
|
|
+ <th>美浓云系统</th>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>领料单生成</td>
|
|
|
+ <td class="no">✕ 手工汇总</td>
|
|
|
+ <td class="ok">✓ 工单勾选一键生成</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>配方匹配</td>
|
|
|
+ <td class="no">✕ 人工核对易出错</td>
|
|
|
+ <td class="ok">✓ 产品编码自动关联</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>机台领退料</td>
|
|
|
+ <td class="no">✕ 分散记录难追溯</td>
|
|
|
+ <td class="ok">✓ 机台看板实时可视</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>指令书打印</td>
|
|
|
+ <td class="no">✕ 模板固定、更新慢</td>
|
|
|
+ <td class="ok">✓ 双模式自动生成</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>库存账实</td>
|
|
|
+ <td class="no">✕ 滞后、对账难</td>
|
|
|
+ <td class="ok">✓ 领退料联动即时更新</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="cta" id="cta">
|
|
|
+ <h2>让每一克油墨<br><span class="gradient-text">都可追溯、可管控</span></h2>
|
|
|
+ <p class="section-desc">不再为领料差错焦虑,不再怕配方对不上工单。<br>美浓云油墨智能管理系统,助您掌控车间油墨全流程。</p>
|
|
|
+ <div class="btn-row" style="max-width:320px;margin:0 auto;">
|
|
|
+ <a class="btn btn-primary" href="tel:4000000000">📞 预约专属演示</a>
|
|
|
+ <a class="btn btn-ghost" href="/bKdNvCxlao.php">进入管理系统</a>
|
|
|
+ </div>
|
|
|
+ <p style="font-size:11px;color:var(--muted);margin-top:14px;">* 对接 MES 工单 · 支持扫码领退料 · 快速上线</p>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <div class="footer">
|
|
|
+ <strong>美浓云印刷油墨智能管理系统</strong><br>
|
|
|
+ 浙江美浓世纪集团 · © 2026
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+ document.getElementById('menuBtn').addEventListener('click', function () {
|
|
|
+ document.getElementById('navLinks').classList.toggle('open');
|
|
|
+ });
|
|
|
+ document.querySelectorAll('.nav-links a').forEach(function (link) {
|
|
|
+ link.addEventListener('click', function () {
|
|
|
+ document.getElementById('navLinks').classList.remove('open');
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|