design: preserve approved tpl-a v1.0.0
This commit is contained in:
hellcat
parent
54438581f9
commit
8b78424a18
2
frontends/tpl-a/.gitignore
vendored
Normal file
2
frontends/tpl-a/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/dist/
|
||||
/node_modules/
|
||||
10
frontends/tpl-a/ASSETS.md
Normal file
10
frontends/tpl-a/ASSETS.md
Normal file
@ -0,0 +1,10 @@
|
||||
# tpl-a 机房主视觉素材
|
||||
|
||||
- 方式：内置 imagegen 工具。
|
||||
- 用途：本地纯前端设计预览首页；属于 AI 生成示意素材，不是 hn 实际机房照片。
|
||||
- 项目素材：[datacenter-hero-v1.png](public/datacenter-hero-v1.png)。原始文件另保留在 Codex generated_images，未覆盖或删除。
|
||||
- 消费位置：`src/operator.css` 中的 `.dc-hero`。
|
||||
|
||||
## 最终生成提示词
|
||||
|
||||
Use case: ads-marketing. Asset type: wide website hero background for a serious data-center network operator, HARDNERD. Primary request: architectural photograph of a modern working data center, real physical infrastructure and professional scale. Long rows of black enterprise server cabinets, fine perforated metal doors, neatly installed network equipment, restrained blue and amber status lights, overhead cable trays, clean cold aisle, polished dark floor. Photorealistic commercial architectural photography, realistic materials, strong depth and precise perspective, natural cool-white ceiling lighting, subtle cool blue reflections, no sci-fi. Composition: wide horizontal 16:9, server cabinets most prominent in right two-thirds, left third darker and less detailed to support white HTML headline overlay. Camera at human eye level, sophisticated industrial documentary mood. No people, no logos, no text, no watermark, no drawn diagrams, no cartoons, no neon laser trails. This is illustrative stock-style imagery, not an identified actual facility.
|
||||
28
frontends/tpl-a/README.md
Normal file
28
frontends/tpl-a/README.md
Normal file
@ -0,0 +1,28 @@
|
||||
# tpl-a
|
||||
|
||||
版本：1.0.0。用户于 2026-10-14 确认当前效果可作为定稿方案保留，命名为 `tpl-a`，不限定用于 hn。
|
||||
|
||||
这是独立的机房网络运营商前端设计方案：写实机房首页、明暗主题、接入方案、服务控制台、网络资源、账单、文档、技术工单和账户页。设计已批准保存；业务代码接入与生产发布尚未完成。不得把设计定稿解释为可以直接上传到 Xboard 后台使用的完整主题包。
|
||||
|
||||
## 运行
|
||||
|
||||
依赖使用父级 `frontends/package.json` / lockfile 中的 Vue、Vite 与插件。父级依赖安装完成后：
|
||||
|
||||
```bash
|
||||
npm --prefix frontends/tpl-a run dev
|
||||
npm --prefix frontends/tpl-a run build
|
||||
```
|
||||
|
||||
预览地址 `http://127.0.0.1:8591/#/home`，只监听本机，构建输出 `dist/` 不纳入 Git。构建不会调用 Laravel，也不会发布到任何业务站点。
|
||||
|
||||
## 品牌与绑定
|
||||
|
||||
`template.json` 登记方案名、版本与批准状态，`site_binding:null` 表示尚未绑定 hn 或其他实例。当前 hardnerd.net / HN 文案为保留视觉效果的演示品牌；替换 `src/brand.mjs` 和 `public/logo.svg` 即可使用其他品牌。实例启动配置、数据库与 `SITE_THEME` 没有因保存本设计而切换。
|
||||
|
||||
所有价格、节点、流量和订单为演示；年付按演示月价 × 12 展示，不提交任何业务数据。AI 机房图为示意素材，生成来源与完整提示词见 [ASSETS](ASSETS.md)。
|
||||
|
||||
## 定稿保护
|
||||
|
||||
- 当前视觉作为 `tpl-a` v1.0.0 保存。新方向另建方案或版本，避免直接覆盖本定稿。
|
||||
- `approved-files.sha256.json` 记录本次运行源码与素材摘要，供恢复和核对；这不是业务测试或生产验收。
|
||||
- 本地 Git 提交保存源文件和素材；未推送、未部署。其他功能草稿与运行中的 dpl 独立保留。
|
||||
18
frontends/tpl-a/approved-files.sha256.json
Normal file
18
frontends/tpl-a/approved-files.sha256.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"template": "tpl-a",
|
||||
"version": "1.0.0",
|
||||
"approved_on": "2026-10-14",
|
||||
"sha256": {
|
||||
"index.html": "78eb443588cd1913b307132c77b3d75c1760b160a86538f565caa7e466796a25",
|
||||
"vite.config.mjs": "12553e80844906567b9494b54c74f9711a5e4cbd8474b6ac4e98d945513f0411",
|
||||
"package.json": "16c48a0e420149ae3068b477ed519e5056eedaed16ddf5eb297d2ce9bfd3c2dc",
|
||||
"template.json": "c964ca32de98070e6a6271dc4764bde0dbd863456eb52cfdb72a0ce64812220a",
|
||||
"src/App.vue": "a3eede460b8bb5af3a866c4b969d5a6e33b918e21ea51c24eb8945cf64a59c50",
|
||||
"src/NetworkLanding.vue": "9583744cb19ac97a47352536dcdf05ad1b626dcfb94ad663a74d20a639f8c212",
|
||||
"src/brand.mjs": "5929fc76144d3f638db021f097d9cfedfcb9637a4f20558cff178d0a519fb48c",
|
||||
"src/main.js": "c47b1a723188ca2ad18ab33f4b2c982b3113cc8a616772eb206196ed133d311d",
|
||||
"src/operator.css": "1037e5edbb19be5db3fb66a9f1efdc09f5da800fc63f088294472632eb8d7d3d",
|
||||
"public/datacenter-hero-v1.png": "0294026e45c0a3eff894c67e27bc8e2a393cb2ce6c6a15668c167ab93eda07ca",
|
||||
"public/logo.svg": "a5412a612aab7bb416e63dea3d1a636a6b307adf73e89ec961d45f958f652711"
|
||||
}
|
||||
}
|
||||
1
frontends/tpl-a/index.html
Normal file
1
frontends/tpl-a/index.html
Normal file
@ -0,0 +1 @@
|
||||
<!doctype html><html lang="zh-CN" data-theme="dark" data-template="tpl-a"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="color-scheme" content="dark light"><title>hardnerd / 全球连接</title><link rel="icon" href="/logo.svg"></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body></html>
|
||||
9
frontends/tpl-a/package.json
Normal file
9
frontends/tpl-a/package.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "tpl-a",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite --config vite.config.mjs",
|
||||
"build": "vite build --config vite.config.mjs"
|
||||
}
|
||||
}
|
||||
BIN
frontends/tpl-a/public/datacenter-hero-v1.png
Normal file
BIN
frontends/tpl-a/public/datacenter-hero-v1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
1
frontends/tpl-a/public/logo.svg
Normal file
1
frontends/tpl-a/public/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M0 0h52l12 12v52H0z" fill="#f29656"/><text x="32" y="42" text-anchor="middle" font-family="Arial,sans-serif" font-weight="900" font-size="29" letter-spacing="-2" fill="#101d29">HN</text></svg>
|
||||
|
After Width: | Height: | Size: 262 B |
67
frontends/tpl-a/src/App.vue
Normal file
67
frontends/tpl-a/src/App.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<script setup>
|
||||
import {ref,computed,onMounted,onBeforeUnmount,watch} from 'vue';
|
||||
import NetworkLanding from './NetworkLanding.vue';
|
||||
import brand from './brand.mjs';
|
||||
const menu=[['dashboard','控制台'],['shop','接入方案'],['nodes','网络资源'],['orders','订单账单'],['docs','接入指南'],['tickets','技术工单'],['profile','账户设置']];
|
||||
const getView=()=>{const v=location.hash.replace(/^#\/?/,'');return menu.some(item=>item[0]===v)?v:'home';};
|
||||
const page=ref(getView()),theme=ref('dark'),mobileMenu=ref(false),notice=ref(''),selected=ref('STANDARD'),period=ref('month'),saved=ref(false),question=ref('');
|
||||
const title=computed(()=>menu.find(item=>item[0]===page.value)?.[1]||'机房网络运营商');
|
||||
const plans=[{id:'ENTRY',title:'基础接入',price:12,quota:60,speed:100,devices:2},{id:'STANDARD',title:'标准接入',price:24,quota:200,speed:300,devices:3},{id:'EXTENDED',title:'专业接入',price:48,quota:500,speed:500,devices:5}];
|
||||
const nodes=[['日本 · 东京','JP-TYO','AnyTLS','1.0×'],['新加坡','SG-SIN','Trojan','1.0×'],['美国 · 西海岸','US-WEST','AnyTLS','1.5×']];
|
||||
let timer;
|
||||
function sync(){page.value=getView();mobileMenu.value=false;window.scrollTo(0,0);}
|
||||
function changeTheme(){theme.value=theme.value==='dark'?'light':'dark';document.documentElement.dataset.theme=theme.value;}
|
||||
function inform(message='演示页面，不执行实际操作。'){notice.value=message;clearTimeout(timer);timer=setTimeout(()=>notice.value='',4000);}
|
||||
watch(page,()=>document.title=`${brand.name} / ${title.value}`,{immediate:true});
|
||||
onMounted(()=>{document.documentElement.dataset.theme='dark';window.addEventListener('hashchange',sync);});
|
||||
onBeforeUnmount(()=>{window.removeEventListener('hashchange',sync);clearTimeout(timer);});
|
||||
</script>
|
||||
<template>
|
||||
<div class="preview-notice"><div class="content-width">设计预览 · 机房影像与方案数据均为示意</div></div>
|
||||
<header class="site-header"><div class="content-width header-inner">
|
||||
<a href="#/home" class="brand" :aria-label="brand.domain+' 首页'"><span class="brand-symbol">{{brand.symbol}}</span><span class="brand-text"><strong>{{brand.name}}<span>{{brand.domainSuffix}}</span></strong><small>{{brand.description}}</small></span></a>
|
||||
<button class="mobile-menu" aria-label="网站菜单" :aria-expanded="mobileMenu" @click="mobileMenu=!mobileMenu">{{mobileMenu?'关闭 ×':'菜单 ☰'}}</button>
|
||||
<nav class="public-nav" :class="{expanded:mobileMenu}" aria-label="主导航"><a href="#/home" :class="{active:page==='home'}">首页</a><a href="#/nodes" :class="{active:page==='nodes'}">网络服务</a><a href="#/shop" :class="{active:page==='shop'}">接入方案</a><a href="#/docs" :class="{active:page==='docs'}">服务文档</a><a href="#/dashboard" class="mobile-console">控制台 →</a></nav>
|
||||
<div class="header-tools"><button class="theme-button" :aria-label="theme==='dark'?'切换浅色主题':'切换暗色主题'" @click="changeTheme">{{theme==='dark'?'☼':'☾'}}</button><a class="console-link" href="#/dashboard">控制台 <span>→</span></a></div>
|
||||
</div></header>
|
||||
<main>
|
||||
<NetworkLanding v-if="page==='home'" :plans="plans"/>
|
||||
<template v-else>
|
||||
<div class="portal-top"><div class="content-width"><h1>{{title}}</h1><p>{{page==='shop'?'比较接入规格，选择适合的使用规模。':page==='nodes'?'节点、协议与接入配置。':page==='profile'?'管理账户信息与登录安全。':'服务、资源与账户的统一管理入口。'}}</p></div></div>
|
||||
<div class="portal-layout content-width">
|
||||
<aside class="portal-nav" aria-label="账户导航"><a v-for="item in menu" :key="item[0]" :href="'#/'+item[0]" :class="{active:page===item[0]}">{{item[1]}}<span>→</span></a></aside>
|
||||
<div class="portal-content">
|
||||
<template v-if="page==='dashboard'">
|
||||
<div class="metrics-grid"><section><span>剩余流量</span><strong>132.6 <small>GB</small></strong><p>本期总额 200 GB</p></section><section><span>套餐到期</span><strong class="date-value">2026.11.14</strong><p>标准接入 · 月付</p></section><section><span>账户余额</span><strong><small>¥</small> 24.00</strong><a href="#/orders">查看账单 →</a></section></div>
|
||||
<section class="panel"><header><h2>接入服务</h2><a href="#/shop">管理方案 →</a></header><div class="service-detail"><div><span class="service-badge">标准接入</span><h3>网络接入服务</h3><p>200 GB / 月 · 300 Mbps · 3 台设备</p></div><button class="button primary" @click="inform()">复制订阅配置</button></div><div class="usage-detail"><div><span>本期已用 67.4 GB</span><b>34%</b></div><div class="usage-track" role="img" aria-label="演示流量用量 34%"><span></span></div></div></section>
|
||||
<section class="panel"><header><h2>常用操作</h2></header><div class="action-grid"><a href="#/nodes"><b>网络资源</b><span>选择节点与查看协议 →</span></a><a href="#/docs"><b>接入指南</b><span>客户端与配置步骤 →</span></a><a href="#/tickets"><b>技术工单</b><span>提交问题与跟进处理 →</span></a></div></section>
|
||||
</template>
|
||||
<template v-else-if="page==='shop'">
|
||||
<div class="plan-toolbar"><h2>流量接入方案</h2><div class="period-control" aria-label="计费周期"><button :class="{active:period==='month'}" @click="period='month'" :aria-pressed="period==='month'">月付</button><button :class="{active:period==='year'}" @click="period='year'" :aria-pressed="period==='year'">年付</button></div></div>
|
||||
<div class="portal-plan-grid"><article v-for="plan in plans" :key="plan.id" :class="{selected:selected===plan.id}"><h2>{{plan.title}}</h2><div class="price"><span>¥</span><strong>{{plan.price*(period==='year'?12:1)}}</strong><small>/ {{period==='year'?'年':'月'}}</small></div><dl><div><dt>每月流量</dt><dd>{{plan.quota}} GB</dd></div><div><dt>速率规格</dt><dd>{{plan.speed}} Mbps</dd></div><div><dt>设备额度</dt><dd>{{plan.devices}} 台</dd></div></dl><button class="button" :class="selected===plan.id?'primary':'secondary'" @click="selected=plan.id;inform('已选择方案（演示），未创建订单。')">{{selected===plan.id?'已选择此方案':'选择方案'}}</button></article></div>
|
||||
<section class="panel configuration-note"><h3>选择方案前</h3><p>确认月流量、计费周期和设备额度。具体节点协议与倍率可在网络资源中查看。</p><a class="text-link" href="#/nodes">查看网络资源 →</a></section>
|
||||
</template>
|
||||
<template v-else-if="page==='nodes'">
|
||||
<section class="panel"><header><h2>订阅配置</h2></header><div class="service-detail"><div><h3>导入配置，连接网络。</h3><p>将订阅配置导入客户端后选择接入节点。</p></div><button class="button primary" @click="inform()">复制订阅配置</button></div></section>
|
||||
<section class="panel"><header><h2>网络资源</h2><span class="resource-count">3 个节点</span></header><div class="resource-table"><div class="resource-row table-heading"><span>地区</span><span>节点</span><span>协议</span><span>倍率</span></div><div class="resource-row" v-for="node in nodes" :key="node[1]"><b>{{node[0]}}</b><span>{{node[1]}}</span><span class="protocol">{{node[2]}}</span><span>{{node[3]}}</span></div></div></section>
|
||||
</template>
|
||||
<template v-else-if="page==='orders'">
|
||||
<section class="panel"><header><h2>订单记录</h2></header><div class="billing-row table-heading"><span>方案 / 订单</span><span>金额</span><span>日期</span><span>详情</span></div><div class="billing-row" v-for="(plan,index) in plans.slice(0,2)" :key="plan.id"><div><b>{{plan.title}}</b><small>HN-SAMPLE-000{{index+1}}</small></div><b>¥ {{plan.price.toFixed(2)}}</b><span>2026.10.14</span><button class="text-link" @click="inform()">查看 →</button></div></section>
|
||||
</template>
|
||||
<template v-else-if="page==='profile'">
|
||||
<section class="panel"><header><h2>账户信息</h2></header><form class="account-form" @submit.prevent="saved=true;inform('已保存（演示），不会提交数据。')"><div class="form-grid"><label>显示名称<input value="nerd_0001"/></label><label>邮箱地址<input type="email" value="demo@hardnerd.test"/></label></div><div class="check-row"><label><input type="checkbox" checked/>套餐到期提醒</label><label><input type="checkbox" checked/>流量不足提醒</label></div><button class="button primary">{{saved?'已保存':'保存设置'}}</button></form></section>
|
||||
<section class="panel"><header><h2>登录安全</h2></header><div class="service-detail"><div><h3>密码与登录设备</h3><p>管理账户凭据和设备访问。</p></div><button class="button secondary" @click="inform()">安全设置</button></div></section>
|
||||
</template>
|
||||
<template v-else-if="page==='docs'">
|
||||
<section class="panel guide-panel"><header><h2>客户端接入指南</h2></header><ol><li><h3>选择接入方案</h3><p>确认月流量、使用周期与设备需求。</p></li><li><h3>导入订阅配置</h3><p>在客户端订阅管理中添加配置，更新节点列表。</p></li><li><h3>选择节点连接</h3><p>核对地区与协议后发起连接；遇到问题可提交技术工单。</p></li></ol><a class="text-link" href="#/tickets">联系技术支持 →</a></section>
|
||||
</template>
|
||||
<template v-else-if="page==='tickets'">
|
||||
<section class="panel"><header><h2>提交技术工单</h2></header><form class="ticket-form" @submit.prevent="inform('已展示提交效果，未发送工单。')"><label>问题标题<input placeholder="概述需要协助的问题" required/></label><label>详细描述<textarea v-model="question" rows="6" placeholder="客户端、错误提示、发生时间及已尝试的操作" required/></label><button class="button primary">提交工单</button></form></section>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</main>
|
||||
<footer class="site-footer"><div class="content-width"><div class="footer-brand"><strong>{{brand.domain}}</strong><span>{{brand.description}}</span></div><div class="footer-links"><a href="#/nodes">网络服务</a><a href="#/docs">服务文档</a><a href="#/tickets">技术支持</a></div><span class="copyright">© 2026 {{brand.copyrightName}}</span></div></footer>
|
||||
<div class="toast" v-if="notice" role="status"><span>{{notice}}</span><button aria-label="关闭提示" @click="notice=''">×</button></div>
|
||||
</template>
|
||||
27
frontends/tpl-a/src/NetworkLanding.vue
Normal file
27
frontends/tpl-a/src/NetworkLanding.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
defineProps({plans:{type:Array,required:true}});
|
||||
const coverage=[['亚太','东京 · 香港 · 新加坡'],['美洲','洛杉矶 · 西雅图'],['欧洲','法兰克福 · 伦敦']];
|
||||
</script>
|
||||
<template>
|
||||
<section class="dc-hero">
|
||||
<div class="content-width dc-hero-content">
|
||||
<h1>机房网络。<br/>连接业务的底座。</h1>
|
||||
<p>线路接入、流量管理、技术支持。<br/>从选择方案到日常管理，在一个平台完成。</p>
|
||||
<div class="hero-actions"><a class="button primary" href="#/shop">查看接入方案 <span>→</span></a><a class="button hero-secondary" href="#/dashboard">进入控制台</a></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="service-overview content-width" aria-label="服务入口">
|
||||
<a href="#/nodes"><span class="service-icon">↗</span><div><h2>网络接入</h2><p>地区、节点与连接协议</p></div><span class="service-arrow">→</span></a>
|
||||
<a href="#/shop"><span class="service-icon">▤</span><div><h2>套餐与规格</h2><p>流量、周期与设备额度</p></div><span class="service-arrow">→</span></a>
|
||||
<a href="#/tickets"><span class="service-icon">＋</span><div><h2>技术服务</h2><p>接入指南与工单支持</p></div><span class="service-arrow">→</span></a>
|
||||
</section>
|
||||
<section class="dc-section content-width">
|
||||
<header class="section-heading"><div><h2>连接网络，管理每一项资源。</h2><p>接入信息集中呈现，日常操作清晰可控。</p></div><a href="#/nodes">查看网络资源 →</a></header>
|
||||
<div class="coverage-layout"><div class="coverage-intro"><h3>跨区域网络接入</h3><p>按地区选择节点，查看协议与计费倍率，把连接配置带入你的客户端。</p><a class="text-link" href="#/docs">阅读接入指南 →</a></div><div class="coverage-list"><a v-for="region in coverage" :key="region[0]" href="#/nodes"><h3>{{region[0]}}</h3><p>{{region[1]}}</p><span>→</span></a></div></div>
|
||||
</section>
|
||||
<section class="dc-section dc-plan-section"><div class="content-width">
|
||||
<header class="section-heading"><div><h2>按需求选择接入方案。</h2><p>统一规格，直接比较。适配不同规模的网络使用。</p></div><a href="#/shop">查看所有方案 →</a></header>
|
||||
<div class="dc-plan-grid"><article v-for="plan in plans" :key="plan.id" :class="{featured:plan.id==='STANDARD'}"><h3>{{plan.title}}</h3><div class="price"><span>¥</span><strong>{{plan.price}}</strong><small>/ 月</small></div><dl><div><dt>月流量</dt><dd>{{plan.quota}} GB</dd></div><div><dt>速率规格</dt><dd>{{plan.speed}} Mbps</dd></div><div><dt>设备数量</dt><dd>{{plan.devices}} 台</dd></div></dl><a class="button" :class="plan.id==='STANDARD'?'primary':'secondary'" href="#/shop">查看方案 →</a></article></div>
|
||||
</div></section>
|
||||
<section class="dc-section content-width operational-section"><div><h2>服务交付之后，<br/>管理同样重要。</h2><p>订阅配置、流量使用、订单账单与技术工单，<br/>在统一控制台里完成。</p><a class="button primary" href="#/dashboard">打开控制台 →</a></div><div class="operations-panel"><a href="#/dashboard"><b>服务与流量</b><span>查看套餐周期与剩余额度</span><i>→</i></a><a href="#/orders"><b>订单与账单</b><span>核对购买记录和订单详情</span><i>→</i></a><a href="#/tickets"><b>技术支持</b><span>提交问题与跟进处理记录</span><i>→</i></a></div></section>
|
||||
</template>
|
||||
1
frontends/tpl-a/src/brand.mjs
Normal file
1
frontends/tpl-a/src/brand.mjs
Normal file
@ -0,0 +1 @@
|
||||
export default {name:'hardnerd',domain:'hardnerd.net',domainSuffix:'.net',symbol:'HN',description:'机房网络运营商',copyrightName:'Hardnerd'};
|
||||
4
frontends/tpl-a/src/main.js
vendored
Normal file
4
frontends/tpl-a/src/main.js
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
import {createApp} from 'vue';
|
||||
import App from './App.vue';
|
||||
import './operator.css';
|
||||
createApp(App).mount('#app');
|
||||
20
frontends/tpl-a/src/operator.css
vendored
Normal file
20
frontends/tpl-a/src/operator.css
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
:root{color-scheme:dark;--bg:#0b1420;--surface:#111f2e;--panel:#152536;--raised:#1c3042;--ink:#e9eef4;--muted:#9bacbe;--line:#293d50;--accent:#f29759;--primary:#ef914e;--primary-ink:#121c26;--input:#101c2a;--soft:#15283b;--shadow:0 12px 40px #02071133;font-family:'Helvetica Neue','PingFang SC','Microsoft YaHei',Arial,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
|
||||
html[data-theme=light]{color-scheme:light;--bg:#f4f7fa;--surface:#fff;--panel:#fff;--raised:#edf3f8;--ink:#142a40;--muted:#617489;--line:#dce5ec;--accent:#bd4e19;--primary:#c1531c;--primary-ink:#fff;--input:#f8fafc;--soft:#edf3f8;--shadow:0 12px 40px #163a6110}
|
||||
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}h1,h2,h3,p{margin:0}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}::selection{background:var(--primary);color:var(--primary-ink)}.content-width{width:calc(100% - 96px);max-width:1320px;margin-inline:auto}.preview-notice{background:var(--bg);color:var(--muted);font-size:11px;padding-block:9px;border-bottom:1px solid var(--line)}
|
||||
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;gap:38px;min-height:98px}.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}.brand-symbol{display:flex;align-items:center;justify-content:center;width:49px;height:49px;border-radius:4px;background:var(--primary);color:var(--primary-ink);font-family:Arial,sans-serif;font-size:21px;letter-spacing:-1px;font-weight:900;clip-path:polygon(0 0,85% 0,100% 15%,100% 100%,0 100%)}.brand-text{display:flex;flex-direction:column;gap:7px}.brand-text strong{font-size:28px;letter-spacing:-1px;font-weight:800;line-height:1}.brand-text strong>span{font-size:15px;font-weight:600;letter-spacing:-.2px}.brand-text small{font-size:11px;letter-spacing:1px;color:var(--muted)}.public-nav{margin-left:auto;display:flex;align-items:center;gap:33px}.public-nav>a{font-size:14px;font-weight:500;color:var(--muted);padding-block:16px;white-space:nowrap;border-bottom:2px solid transparent}.public-nav>a:hover,.public-nav>a.active{color:var(--ink);border-bottom-color:var(--accent)}.header-tools{display:flex;align-items:center;gap:22px}.theme-button{width:28px;height:32px;font-size:23px;line-height:1;color:var(--muted);padding:0}.console-link{display:flex;align-items:center;gap:24px;white-space:nowrap;background:var(--soft);border:1px solid var(--line);padding:13px 18px;border-radius:5px;font-size:13px;font-weight:600}.mobile-menu,.mobile-console{display:none}
|
||||
.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;border:1px solid transparent;border-radius:5px;min-height:49px;padding:14px 23px;font-size:14px;font-weight:600;line-height:1.4;transition:filter .15s,background .15s}.button:hover{filter:brightness(1.1)}.button.primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}.button.secondary{background:var(--soft);border-color:var(--line);color:var(--ink)}.text-link{color:var(--accent);font-size:13px;line-height:1.7;padding:0}
|
||||
.dc-hero{position:relative;background:#091422;background-image:linear-gradient(90deg,#061321ec 0%,#061321c2 35%,#06132130 76%,#0613210a 100%),linear-gradient(0deg,#071420dd 0%,transparent 45%),url('/datacenter-hero-v1.png');background-size:cover;background-position:center 52%;color:#fff;min-height:620px;display:flex;align-items:center}.dc-hero-content{padding-block:80px 100px}.dc-hero h1{font-size:clamp(44px,4.5vw,68px);font-weight:650;line-height:1.32;letter-spacing:-1.8px;max-width:760px}.dc-hero p{font-size:17px;line-height:1.9;color:#c4d1df;margin-block:28px 33px}.hero-actions{display:flex;align-items:center;gap:17px;flex-wrap:wrap}.hero-actions .primary{background:#f29656;border-color:#f29656;color:#101d29}.hero-secondary{background:#ffffff0d;border-color:#ffffff61;color:#fff}.hero-secondary:hover{background:#ffffff16}
|
||||
.service-overview{position:relative;margin-top:-36px;display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--line);border-radius:7px;box-shadow:var(--shadow);z-index:1}.service-overview>a{display:flex;align-items:center;gap:21px;padding:33px 28px;border-right:1px solid var(--line)}.service-overview>a:last-child{border:0}.service-overview>a:hover{background:var(--raised)}.service-icon{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border:1px solid var(--line);color:var(--accent);font-size:25px;border-radius:6px;flex-shrink:0}.service-overview h2{font-size:21px;font-weight:600;margin-bottom:10px}.service-overview p{font-size:12px;color:var(--muted);line-height:1.5}.service-arrow{margin-left:auto;font-size:20px;color:var(--muted)}
|
||||
.dc-section{padding-block:90px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:38px}.section-heading h2{font-size:34px;line-height:1.45;letter-spacing:-.7px;font-weight:600}.section-heading p{font-size:14px;color:var(--muted);line-height:1.9;margin-top:16px}.section-heading>a{font-size:13px;color:var(--accent);white-space:nowrap;padding-bottom:5px}.coverage-layout{display:grid;grid-template-columns:1fr 1.4fr;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface)}.coverage-intro{padding:40px 37px;background:linear-gradient(135deg,var(--panel),var(--surface));border-right:1px solid var(--line)}.coverage-intro h3{font-size:26px;font-weight:600;margin-bottom:19px}.coverage-intro p{font-size:14px;color:var(--muted);line-height:2;max-width:355px;margin-bottom:26px}.coverage-list{display:grid;grid-template-columns:1fr}.coverage-list>a{display:grid;grid-template-columns:100px 1fr 20px;align-items:center;gap:25px;padding:27px 35px;border-bottom:1px solid var(--line)}.coverage-list>a:last-child{border:0}.coverage-list>a:hover{background:var(--raised)}.coverage-list h3{font-size:20px;font-weight:600}.coverage-list p{font-size:13px;color:var(--muted);line-height:1.8}.coverage-list span{color:var(--accent);font-size:19px}
|
||||
.dc-plan-section{background:var(--surface);border-block:1px solid var(--line)}.dc-plan-grid,.portal-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.dc-plan-grid>article,.portal-plan-grid>article{padding:35px 31px;background:var(--panel);border:1px solid var(--line);border-radius:7px;position:relative}.dc-plan-grid>article.featured,.portal-plan-grid>article.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.dc-plan-grid h3,.portal-plan-grid h2{font-size:23px;font-weight:600}.price{display:flex;align-items:baseline;gap:8px;margin-block:30px;color:var(--ink)}.price>span{font-size:20px}.price strong{font-family:Arial,sans-serif;font-size:58px;line-height:1;letter-spacing:-2px;font-weight:600}.price small{font-size:12px;color:var(--muted);margin-left:4px}.dc-plan-grid dl,.portal-plan-grid dl{margin:0 0 28px}.dc-plan-grid dl>div,.portal-plan-grid dl>div{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-top:1px solid var(--line);font-size:13px}.dc-plan-grid dt,.portal-plan-grid dt{color:var(--muted)}.dc-plan-grid dd,.portal-plan-grid dd{margin:0;font-weight:500}.dc-plan-grid .button,.portal-plan-grid .button{width:100%}
|
||||
.operational-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:100px}.operational-section h2{font-size:34px;line-height:1.5;font-weight:600;letter-spacing:-.5px}.operational-section p{font-size:14px;line-height:2;color:var(--muted);margin-block:22px 28px}.operations-panel{border:1px solid var(--line);background:var(--surface);border-radius:7px;overflow:hidden}.operations-panel>a{display:grid;grid-template-columns:1fr 20px;gap:14px 25px;padding:27px 30px;border-bottom:1px solid var(--line)}.operations-panel>a:last-child{border:0}.operations-panel>a:hover{background:var(--raised)}.operations-panel b{font-size:19px;font-weight:600}.operations-panel span{font-size:13px;color:var(--muted);grid-column:1}.operations-panel i{grid-column:2;grid-row:1 / span 2;align-self:center;font-style:normal;color:var(--accent);font-size:20px}
|
||||
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding-block:42px}.site-footer>.content-width{display:flex;align-items:center;justify-content:space-between;gap:35px}.footer-brand{display:flex;flex-direction:column;gap:12px}.footer-brand strong{font-size:23px;font-weight:700;letter-spacing:-.5px}.footer-brand span{font-size:12px;color:var(--muted)}.footer-links{display:flex;align-items:center;gap:30px;font-size:13px;color:var(--muted)}.copyright{font-size:11px;color:var(--muted)}
|
||||
|
||||
/* Unified service portal. */
|
||||
.portal-top{background:var(--surface);border-bottom:1px solid var(--line);padding-block:38px 32px}.portal-top h1{font-size:32px;line-height:1.4;font-weight:600;letter-spacing:-.5px}.portal-top p{font-size:13px;color:var(--muted);line-height:1.8;margin-top:12px}.portal-layout{display:grid;grid-template-columns:198px minmax(0,1fr);gap:32px;padding-block:35px 70px;min-height:620px;align-items:start}.portal-nav{border:1px solid var(--line);background:var(--surface);border-radius:6px;overflow:hidden}.portal-nav>a{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:19px 22px;font-size:14px;color:var(--muted);border-left:3px solid transparent}.portal-nav>a span{font-size:13px;opacity:0}.portal-nav>a.active{color:var(--accent);border-left-color:var(--accent);background:var(--soft);font-weight:600}.portal-nav>a.active span{opacity:1}.portal-nav>a:hover{background:var(--raised)}.portal-content{min-width:0}.panel{border:1px solid var(--line);background:var(--panel);border-radius:7px;overflow:hidden;margin-bottom:26px}.panel:last-child{margin-bottom:0}.panel>header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:22px 27px;border-bottom:1px solid var(--line)}.panel>header h2{font-size:18px;font-weight:600}.panel>header a{font-size:12px;color:var(--accent)}.resource-count{font-size:12px;color:var(--muted)}.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:26px}.metrics-grid>section{padding:25px;border:1px solid var(--line);border-radius:7px;background:var(--panel)}.metrics-grid>section>span{font-size:12px;color:var(--muted)}.metrics-grid strong{display:block;font-family:Arial,sans-serif;font-size:34px;font-weight:600;line-height:1.3;letter-spacing:-.8px;margin-block:18px 13px;white-space:nowrap}.metrics-grid strong small{font-size:15px;letter-spacing:0;font-weight:400;color:var(--muted)}.metrics-grid .date-value{font-size:24px;letter-spacing:-.7px;margin-block:25px 17px}.metrics-grid p,.metrics-grid a{font-size:11px;color:var(--muted)}.metrics-grid a{color:var(--accent)}.service-detail{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px 27px}.service-detail h3{font-size:22px;line-height:1.5;font-weight:600}.service-detail p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:12px}.service-detail .button{font-size:13px;white-space:nowrap}.service-badge{font-size:11px;display:inline-block;background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:6px 9px;color:var(--accent);margin-bottom:14px}.usage-detail{padding:0 27px 28px}.usage-detail>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-bottom:12px}.usage-detail b{font-weight:500}.usage-track{height:7px;border-radius:4px;background:var(--raised);overflow:hidden}.usage-track span{display:block;width:34%;height:100%;background:var(--accent)}.action-grid{display:grid;grid-template-columns:repeat(3,1fr)}.action-grid>a{padding:28px 22px;border-right:1px solid var(--line)}.action-grid>a:last-child{border:0}.action-grid b{font-size:15px;font-weight:600;display:block;margin-bottom:15px}.action-grid span{font-size:11px;color:var(--muted);line-height:1.8}.action-grid a:hover{background:var(--raised)}
|
||||
.plan-toolbar{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:26px}.plan-toolbar h2{font-size:19px;font-weight:600}.period-control{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:4px;gap:3px}.period-control button{padding:9px 20px;font-size:12px;border-radius:3px;color:var(--muted)}.period-control button.active{background:var(--primary);color:var(--primary-ink);font-weight:600}.portal-plan-grid{gap:18px;margin-bottom:28px}.portal-plan-grid>article{padding:29px 23px}.portal-plan-grid h2{font-size:21px}.portal-plan-grid .price strong{font-size:49px}.portal-plan-grid .price>span{font-size:16px}.portal-plan-grid .price small{font-size:11px}.portal-plan-grid dl>div{font-size:12px;gap:15px}.portal-plan-grid .button{font-size:12px;padding-inline:12px}.configuration-note{padding:27px}.configuration-note h3{font-size:16px;font-weight:600}.configuration-note p{font-size:13px;color:var(--muted);line-height:1.9;margin-block:13px}.resource-row{display:grid;grid-template-columns:1.5fr 1fr 1fr .5fr;align-items:center;gap:25px;padding:24px 27px;border-bottom:1px solid var(--line);font-size:13px}.resource-row:last-child{border:0}.resource-row b{font-weight:500}.resource-row>span:nth-child(2){font-size:12px;color:var(--muted)}.resource-row .protocol{font-size:12px;color:var(--ink)}.table-heading{background:var(--soft);font-size:11px!important;color:var(--muted);padding-block:14px!important}.billing-row{display:grid;grid-template-columns:1.8fr .8fr 1fr .5fr;align-items:center;gap:25px;padding:24px 27px;border-bottom:1px solid var(--line);font-size:12px}.billing-row:last-child{border:0}.billing-row b{font-size:13px;font-weight:500}.billing-row small{display:block;font-size:10px;color:var(--muted);margin-top:9px}.account-form,.ticket-form{padding:30px 27px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}label{display:block;font-size:13px;line-height:1.7}input,textarea{display:block;width:100%;min-width:0;padding:13px 14px;border:1px solid var(--line);background:var(--input);border-radius:5px;margin-top:11px;font-size:14px}input::placeholder,textarea::placeholder{color:var(--muted)}textarea{resize:vertical;line-height:1.9}.check-row{display:flex;align-items:center;gap:35px;margin-block:29px}.check-row label{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.check-row input{width:14px;height:14px;padding:0;margin:0;accent-color:var(--primary)}.ticket-form label{margin-bottom:25px}.guide-panel ol{margin:0;padding:30px 35px 5px 54px}.guide-panel li{padding-left:12px;margin-bottom:28px;color:var(--accent)}.guide-panel li h3{color:var(--ink);font-size:17px;font-weight:600}.guide-panel li p{color:var(--muted);font-size:13px;line-height:2;margin-top:11px}.guide-panel>.text-link{display:inline-block;margin:0 27px 30px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 40px);background:var(--surface);border:1px solid var(--accent);border-radius:6px;box-shadow:var(--shadow);padding:16px 20px;display:flex;align-items:center;gap:25px;font-size:13px;line-height:1.7;z-index:10}.toast button{font-size:23px;color:var(--muted);padding:0}
|
||||
@media(max-width:1180px){.content-width{width:calc(100% - 64px)}.header-inner{gap:26px}.public-nav{gap:24px}.brand-text strong{font-size:25px}.brand-symbol{width:43px;height:43px;font-size:19px}.header-tools{gap:16px}.console-link{padding-inline:14px;gap:18px}.dc-hero{min-height:590px}.dc-hero h1{font-size:5.3vw}.service-overview>a{padding:28px 22px;gap:16px}.service-overview h2{font-size:19px}.service-overview p{font-size:11px}.service-icon{width:36px;height:36px;font-size:23px}.service-arrow{font-size:16px}.operational-section{gap:55px}.portal-layout{grid-template-columns:175px minmax(0,1fr);gap:25px}.metrics-grid{gap:17px}.metrics-grid>section{padding:23px 18px}.metrics-grid strong{font-size:29px}.metrics-grid .date-value{font-size:22px}.portal-plan-grid{gap:15px}.portal-plan-grid>article{padding:28px 19px}.portal-plan-grid .price strong{font-size:44px}.portal-plan-grid .price small{margin-left:0}}
|
||||
@media(max-width:960px){.header-inner{flex-wrap:wrap;padding-block:21px 15px;gap:19px}.public-nav{order:3;width:100%;margin:0;gap:34px}.public-nav>a{padding-block:9px;font-size:13px}.header-tools{margin-left:auto}.dc-hero{min-height:550px;background-position:60% center}.dc-hero-content{padding-block:68px 88px}.dc-hero h1{font-size:5.6vw;max-width:650px}.dc-hero p{font-size:15px}.service-overview>a{padding:26px 20px;gap:14px}.service-overview h2{font-size:18px}.service-arrow{display:none}.service-icon{width:31px;height:35px;font-size:21px}.dc-section{padding-block:70px}.section-heading h2{font-size:29px}.section-heading p{font-size:13px}.coverage-layout{grid-template-columns:1fr 1.3fr}.coverage-intro{padding:31px 27px}.coverage-intro h3{font-size:23px}.coverage-list>a{grid-template-columns:65px 1fr 15px;gap:18px;padding:26px}.coverage-list h3{font-size:19px}.coverage-list p{font-size:12px}.dc-plan-grid{gap:18px}.dc-plan-grid>article{padding:29px 23px}.dc-plan-grid h3{font-size:21px}.price strong{font-size:50px}.dc-plan-grid dl>div{font-size:12px;gap:13px}.operational-section{gap:35px}.operational-section h2{font-size:29px}.operations-panel>a{padding:25px}.operations-panel span{font-size:12px}.footer-links{gap:22px;font-size:12px}.copyright{font-size:10px}.portal-layout{grid-template-columns:150px minmax(0,1fr);gap:22px}.portal-nav>a{font-size:13px;padding:18px 17px}.metrics-grid{grid-template-columns:1fr;gap:15px}.metrics-grid>section{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;padding:22px}.metrics-grid>section>span{align-self:center}.metrics-grid strong{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;margin:0;font-size:34px}.metrics-grid .date-value{margin:0;font-size:26px}.service-detail{flex-wrap:wrap;padding:27px}.action-grid{grid-template-columns:1fr}.action-grid>a{border-right:0;border-bottom:1px solid var(--line);padding:24px 27px}.action-grid b{margin-bottom:11px}.portal-plan-grid{grid-template-columns:1fr}.portal-plan-grid>article{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;padding:29px}.portal-plan-grid h2{grid-column:1}.portal-plan-grid .price{grid-column:1;margin-block:25px}.portal-plan-grid .price strong{font-size:48px}.portal-plan-grid dl{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0}.portal-plan-grid .button{grid-column:1 / span 2;margin-top:20px}.form-grid{grid-template-columns:1fr}.check-row{flex-direction:column;align-items:flex-start;gap:18px}.resource-row{grid-template-columns:1.2fr 1fr;gap:15px;padding:23px 25px}.resource-row.table-heading{display:none}.billing-row{grid-template-columns:1.5fr 1fr;gap:20px}.billing-row.table-heading{display:none}.resource-row>span:last-child{font-size:12px;color:var(--muted)}}
|
||||
@media(max-width:680px){.content-width{width:calc(100% - 40px)}.preview-notice{font-size:9px;padding-block:8px}.header-inner{padding-block:20px;min-height:84px;gap:15px}.brand{gap:10px}.brand-symbol{width:39px;height:39px;font-size:18px}.brand-text strong{font-size:26px}.brand-text small{font-size:10px;letter-spacing:.5px}.brand-text strong>span{font-size:13px}.header-tools{margin-left:0}.theme-button{font-size:21px;width:23px}.console-link{display:none}.mobile-menu{display:block;order:2;margin-left:auto;font-size:12px;color:var(--muted);padding:0;white-space:nowrap}.header-tools{order:1;margin-left:auto}.public-nav{display:none;order:3;gap:15px;padding-top:5px}.public-nav.expanded{display:grid;grid-template-columns:repeat(4,1fr)}.public-nav>a{font-size:12px;padding:8px 0}.public-nav .mobile-console{display:block;grid-column:1 / span 4;border-top:1px solid var(--line);padding-top:15px;color:var(--accent)}.dc-hero{min-height:535px;background-position:65% center;background-image:linear-gradient(90deg,#061321e3,#0613218f),linear-gradient(0deg,#061321c9,transparent),url('/datacenter-hero-v1.png')}.dc-hero-content{padding-block:55px 80px}.dc-hero h1{font-size:clamp(36px,9vw,55px);letter-spacing:-1px;line-height:1.4;max-width:100%}.dc-hero p{font-size:14px;line-height:1.9;margin-block:23px 28px}.hero-actions{gap:13px}.hero-actions .button{font-size:13px;padding:14px 17px;gap:18px}.service-overview{grid-template-columns:1fr;margin-top:-28px}.service-overview>a{padding:24px;border-right:0;border-bottom:1px solid var(--line);gap:19px}.service-overview h2{font-size:19px;margin-bottom:8px}.service-overview p{font-size:12px}.service-icon{width:38px;height:38px;font-size:23px}.service-arrow{display:block;font-size:18px}.dc-section{padding-block:50px}.section-heading{display:block;margin-bottom:28px}.section-heading h2{font-size:27px;line-height:1.5;letter-spacing:-.5px}.section-heading p{font-size:13px;margin-top:13px}.section-heading>a{display:inline-block;margin-top:20px;padding:0;font-size:12px}.coverage-layout{grid-template-columns:1fr}.coverage-intro{padding:29px;border-right:0;border-bottom:1px solid var(--line)}.coverage-intro h3{font-size:23px}.coverage-intro p{font-size:13px;line-height:2;max-width:100%;margin-bottom:21px}.coverage-list>a{padding:23px 27px;grid-template-columns:63px 1fr 15px;gap:17px}.coverage-list h3{font-size:19px}.coverage-list p{font-size:12px}.dc-plan-grid{grid-template-columns:1fr;gap:22px}.dc-plan-grid>article{padding:31px}.dc-plan-grid h3{font-size:24px}.price strong{font-size:58px}.dc-plan-grid dl>div{font-size:14px}.operational-section{display:block}.operational-section h2{font-size:28px}.operational-section p{font-size:13px}.operations-panel{margin-top:32px}.operations-panel>a{padding:25px 27px}.operations-panel b{font-size:19px}.operations-panel span{font-size:13px}.site-footer{padding-block:33px}.site-footer>.content-width{flex-wrap:wrap;gap:30px}.footer-brand{width:100%}.footer-links{gap:25px;font-size:12px}.copyright{font-size:10px}.portal-top{padding-block:29px 25px}.portal-top h1{font-size:29px}.portal-top p{font-size:12px;margin-top:10px}.portal-layout{display:block;padding-block:24px 45px;min-height:0}.portal-nav{display:flex;overflow:auto;border:0;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:25px;padding-bottom:13px;gap:24px;background:none}.portal-nav>a{padding:6px 0;white-space:nowrap;border:0!important;font-size:13px;color:var(--muted)}.portal-nav>a.active{background:none}.portal-nav>a span{display:none}.panel{margin-bottom:23px}.panel>header{padding:20px 23px;gap:18px}.panel>header h2{font-size:17px}.metrics-grid>section{padding:23px}.metrics-grid strong{font-size:33px}.metrics-grid .date-value{font-size:25px}.service-detail{padding:26px 23px;gap:25px}.service-detail h3{font-size:22px}.service-detail p{font-size:13px;line-height:1.9}.service-detail .button{font-size:13px}.usage-detail{padding:0 23px 27px}.action-grid>a{padding:25px 23px}.action-grid b{font-size:16px}.action-grid span{font-size:12px}.plan-toolbar{gap:20px;flex-wrap:wrap}.plan-toolbar h2{font-size:18px}.period-control button{padding:9px 18px;font-size:12px}.portal-plan-grid>article{display:block;padding:30px}.portal-plan-grid h2{font-size:24px}.portal-plan-grid .price strong{font-size:55px}.portal-plan-grid .price{margin-block:29px}.portal-plan-grid dl{margin-bottom:25px}.portal-plan-grid dl>div{font-size:14px}.portal-plan-grid .button{font-size:14px;margin:0}.configuration-note{padding:25px}.configuration-note p{font-size:13px}.resource-row{padding:24px;gap:17px;font-size:12px}.billing-row{padding:24px;gap:18px;font-size:12px}.account-form,.ticket-form{padding:26px 23px}.form-grid{gap:24px}label{font-size:13px}.check-row label{font-size:12px}.guide-panel ol{padding:28px 25px 0 40px}.guide-panel li{padding-left:9px}.guide-panel li h3{font-size:17px}.guide-panel li p{font-size:13px}.toast{width:calc(100vw - 40px);font-size:12px;padding:15px 18px;gap:18px}}
|
||||
@media(max-width:370px){.content-width{width:calc(100% - 32px)}.brand-text strong{font-size:23px}.brand-text small{font-size:9px}.brand-symbol{width:35px;height:35px;font-size:17px}.header-inner{gap:11px}.brand{gap:8px}.mobile-menu{font-size:11px}.theme-button{width:21px;font-size:19px}.dc-hero h1{font-size:32px;letter-spacing:-.8px}.dc-hero p{font-size:13px}.hero-actions .button{font-size:12px;padding-inline:15px}.public-nav.expanded{gap:12px}.public-nav>a{font-size:11px}.section-heading h2{font-size:25px}.coverage-list>a{padding-inline:22px;gap:13px}.coverage-list p{font-size:11px}.footer-links{gap:19px}}
|
||||
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
|
||||
15
frontends/tpl-a/template.json
Normal file
15
frontends/tpl-a/template.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "tpl-a",
|
||||
"version": "1.0.0",
|
||||
"design_status": "approved",
|
||||
"approved_on": "2026-10-14",
|
||||
"scope": "frontend design prototype",
|
||||
"site_binding": null,
|
||||
"demo_brand": "hardnerd.net",
|
||||
"default_color_mode": "dark",
|
||||
"color_modes": [
|
||||
"dark",
|
||||
"light"
|
||||
],
|
||||
"business_integration": false
|
||||
}
|
||||
6
frontends/tpl-a/vite.config.mjs
Normal file
6
frontends/tpl-a/vite.config.mjs
Normal file
@ -0,0 +1,6 @@
|
||||
import {defineConfig} from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import path from 'node:path';
|
||||
import {fileURLToPath} from 'node:url';
|
||||
const root=path.dirname(fileURLToPath(import.meta.url));
|
||||
export default defineConfig({root,envDir:false,plugins:[vue()],build:{outDir:'dist',emptyOutDir:true,sourcemap:false},server:{host:'127.0.0.1',port:8591,strictPort:true,fs:{allow:[root,path.resolve(root,'../node_modules')],deny:['**/.env','**/.env.*','**/.git','**/.git/**','**/.npmrc']}}});
|
||||
Loading…
Reference in New Issue
Block a user