Codex
587 lines
17 KiB
HTML
587 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Eversolo Home Recognition Section - 5 Concepts</title>
|
||
<style>
|
||
:root {
|
||
--ink: #151719;
|
||
--muted: #69707a;
|
||
--line: rgba(18, 24, 31, 0.1);
|
||
--soft: #f4f6f5;
|
||
--surface: #ffffff;
|
||
--cold: #dfe7e5;
|
||
--sage: #7f928d;
|
||
--steel: #56616b;
|
||
--gold: #b49a65;
|
||
--blue: #45616f;
|
||
--green: #60786d;
|
||
font-family:
|
||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
color: var(--ink);
|
||
background: #f7f8f7;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
}
|
||
|
||
main {
|
||
display: grid;
|
||
gap: 48px;
|
||
padding: 48px 32px 72px;
|
||
}
|
||
|
||
.intro {
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.intro p,
|
||
.note {
|
||
color: var(--muted);
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.variant {
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
background: var(--surface);
|
||
}
|
||
|
||
.variant > header {
|
||
display: flex;
|
||
align-items: end;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
border-bottom: 1px solid var(--line);
|
||
padding: 26px 30px;
|
||
}
|
||
|
||
.variant h2 {
|
||
margin: 0;
|
||
font-size: 24px;
|
||
font-weight: 620;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.variant header span {
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.canvas {
|
||
padding: 34px;
|
||
}
|
||
|
||
.eyebrow {
|
||
color: var(--steel);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.section-title {
|
||
margin: 8px 0 0;
|
||
font-size: 34px;
|
||
font-weight: 620;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.subcopy {
|
||
max-width: 620px;
|
||
margin: 12px 0 0;
|
||
color: var(--muted);
|
||
font-size: 15px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.award {
|
||
display: grid;
|
||
gap: 8px;
|
||
min-height: 98px;
|
||
align-content: center;
|
||
border: 1px solid var(--line);
|
||
background: rgba(255, 255, 255, 0.74);
|
||
padding: 18px;
|
||
}
|
||
|
||
.award strong {
|
||
font-size: 15px;
|
||
font-weight: 620;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.award small,
|
||
.source {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
width: max-content;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--steel);
|
||
font-size: 12px;
|
||
font-weight: 650;
|
||
}
|
||
|
||
.badge::before {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1px solid rgba(86, 97, 107, 0.24);
|
||
background: linear-gradient(180deg, #f8faf9, #e9eeec);
|
||
content: "";
|
||
}
|
||
|
||
.quote {
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.quote p {
|
||
margin: 0;
|
||
}
|
||
|
||
.v1 .canvas {
|
||
background: linear-gradient(180deg, #f8f9f8 0%, #eef2f1 100%);
|
||
}
|
||
|
||
.v1 .award-strip {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.v1 .award {
|
||
border-right: 0;
|
||
}
|
||
|
||
.v1 .award:last-child {
|
||
border-right: 1px solid var(--line);
|
||
}
|
||
|
||
.v1 .voices {
|
||
display: grid;
|
||
grid-template-columns: 1.25fr repeat(2, 1fr);
|
||
gap: 1px;
|
||
margin-top: 14px;
|
||
background: var(--line);
|
||
}
|
||
|
||
.v1 .quote {
|
||
min-height: 184px;
|
||
background: white;
|
||
padding: 24px;
|
||
}
|
||
|
||
.v1 .quote:first-child {
|
||
background: #151719;
|
||
color: white;
|
||
}
|
||
|
||
.v1 .quote:first-child .source {
|
||
color: rgba(255, 255, 255, 0.65);
|
||
}
|
||
|
||
.v2 .canvas {
|
||
display: grid;
|
||
grid-template-columns: 0.9fr 1.1fr;
|
||
gap: 28px;
|
||
background: #fbfbfa;
|
||
}
|
||
|
||
.v2 .left {
|
||
display: grid;
|
||
align-content: space-between;
|
||
min-height: 440px;
|
||
border-right: 1px solid var(--line);
|
||
padding-right: 28px;
|
||
}
|
||
|
||
.v2 .hero-quote {
|
||
margin-top: 44px;
|
||
font-size: 30px;
|
||
font-weight: 540;
|
||
line-height: 1.42;
|
||
}
|
||
|
||
.v2 .awards {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.v2 .voice-list {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.v2 .voice-row {
|
||
display: grid;
|
||
grid-template-columns: 150px 1fr;
|
||
gap: 18px;
|
||
border-bottom: 1px solid var(--line);
|
||
padding: 18px 0;
|
||
}
|
||
|
||
.v3 .canvas {
|
||
background: #f3f6f5;
|
||
}
|
||
|
||
.v3 .matrix {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 12px;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.v3 .metric {
|
||
grid-column: span 3;
|
||
min-height: 154px;
|
||
border: 1px solid var(--line);
|
||
background: #ffffff;
|
||
padding: 20px;
|
||
}
|
||
|
||
.v3 .metric .number {
|
||
color: var(--green);
|
||
font-size: 44px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.v3 .quote-band {
|
||
grid-column: span 8;
|
||
display: grid;
|
||
align-content: center;
|
||
min-height: 220px;
|
||
background: #202629;
|
||
color: white;
|
||
padding: 28px;
|
||
}
|
||
|
||
.v3 .quote-band p {
|
||
max-width: 650px;
|
||
margin: 0;
|
||
font-size: 24px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.v3 .side-voices {
|
||
grid-column: span 4;
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.v3 .side-voices .quote {
|
||
border: 1px solid var(--line);
|
||
background: white;
|
||
padding: 18px;
|
||
}
|
||
|
||
.v4 .canvas {
|
||
background: #121618;
|
||
color: #f5f6f4;
|
||
}
|
||
|
||
.v4 .subcopy,
|
||
.v4 .source,
|
||
.v4 .eyebrow {
|
||
color: rgba(245, 246, 244, 0.66);
|
||
}
|
||
|
||
.v4 .stage {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.v4 .award-wall,
|
||
.v4 .voice-wall {
|
||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||
background: rgba(255, 255, 255, 0.045);
|
||
padding: 22px;
|
||
}
|
||
|
||
.v4 .award-wall {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.v4 .award {
|
||
border-color: rgba(255, 255, 255, 0.12);
|
||
background: rgba(255, 255, 255, 0.055);
|
||
}
|
||
|
||
.v4 .voice-wall {
|
||
display: grid;
|
||
gap: 18px;
|
||
}
|
||
|
||
.v4 .quote p {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.v5 .canvas {
|
||
background: #f7f8f8;
|
||
}
|
||
|
||
.v5 .board {
|
||
display: grid;
|
||
grid-template-columns: 320px 1fr;
|
||
gap: 18px;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.v5 .index {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.v5 .index-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid var(--line);
|
||
padding: 14px 0;
|
||
color: var(--steel);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.v5 .cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.v5 .quote-card {
|
||
min-height: 210px;
|
||
border: 1px solid var(--line);
|
||
background: white;
|
||
padding: 20px;
|
||
}
|
||
|
||
.v5 .quote-card.featured {
|
||
grid-column: span 2;
|
||
background: #e8efed;
|
||
}
|
||
|
||
.v5 .quote-card.featured p {
|
||
max-width: 520px;
|
||
font-size: 24px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
main {
|
||
padding: 24px 16px 48px;
|
||
}
|
||
|
||
.variant > header,
|
||
.canvas,
|
||
.v2 .canvas {
|
||
padding: 22px;
|
||
}
|
||
|
||
.v1 .award-strip,
|
||
.v1 .voices,
|
||
.v2 .canvas,
|
||
.v2 .awards,
|
||
.v3 .matrix,
|
||
.v4 .stage,
|
||
.v4 .award-wall,
|
||
.v5 .board,
|
||
.v5 .cards {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.v2 .left {
|
||
min-height: auto;
|
||
border-right: 0;
|
||
border-bottom: 1px solid var(--line);
|
||
padding-right: 0;
|
||
padding-bottom: 24px;
|
||
}
|
||
|
||
.v2 .voice-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.v3 .metric,
|
||
.v3 .quote-band,
|
||
.v3 .side-voices,
|
||
.v5 .quote-card.featured {
|
||
grid-column: span 1;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<section class="intro">
|
||
<div class="eyebrow">Eversolo homepage section exploration</div>
|
||
<h1>首页 Award 与媒体声音区 - 五版设计方向</h1>
|
||
<p>
|
||
同一批奖项与媒体评价内容，分别探索权威背书、编辑化叙事、指标化扫描、深色听音室、媒体看板五种方向。
|
||
这些方案保留 Eversolo 当前的克制、理性和音频产品质感，避免营销页式大卡堆叠。
|
||
</p>
|
||
</section>
|
||
|
||
<section class="variant v1">
|
||
<header>
|
||
<h2>01 Authority Strip</h2>
|
||
<span>最稳妥：保留现有双层结构，但提升信息层级</span>
|
||
</header>
|
||
<div class="canvas">
|
||
<div class="eyebrow">Awards & Press</div>
|
||
<h3 class="section-title">被专业机构和真实聆听者持续验证</h3>
|
||
<p class="subcopy">奖项先建立可信度，媒体声音再解释这种可信度来自哪里。</p>
|
||
<div class="award-strip">
|
||
<div class="award"><span class="badge">IF</span><strong>2026 iF 设计奖</strong><small>2026</small></div>
|
||
<div class="award"><span class="badge">EISA</span><strong>年度超值流媒体功放</strong><small>2025-2026</small></div>
|
||
<div class="award"><span class="badge">EISA</span><strong>年度高端流媒体播放器</strong><small>2025-2026</small></div>
|
||
<div class="award"><span class="badge">HFN</span><strong>Hi-Fi News Outstanding Product</strong><small>2025</small></div>
|
||
</div>
|
||
<div class="voices">
|
||
<div class="quote">
|
||
<div class="source">EISA</div>
|
||
<p>“However you use Eversolo’s streamer, your music will sound and look great.”</p>
|
||
</div>
|
||
<div class="quote">
|
||
<div class="source">Darko Audio</div>
|
||
<p>“I have yet to experience one that nails everything quite like Eversolo does.”</p>
|
||
</div>
|
||
<div class="quote">
|
||
<div class="source">AVForums</div>
|
||
<p>“It combines sound quality and complete functionality into a truly outstanding all-rounder.”</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="variant v2">
|
||
<header>
|
||
<h2>02 Editorial Lead</h2>
|
||
<span>偏官网叙事：一句主评价带出奖项和媒体列表</span>
|
||
</header>
|
||
<div class="canvas">
|
||
<div class="left">
|
||
<div>
|
||
<div class="eyebrow">Recognition</div>
|
||
<h3 class="section-title">声音、设计与完整体验的共同认可</h3>
|
||
<p class="hero-quote">“I have yet to experience one that nails everything quite like Eversolo does.”</p>
|
||
<div class="source">John Grandberg · Darko Audio</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="awards">
|
||
<div class="award"><span class="badge">IF</span><strong>iF Design Award</strong><small>2026</small></div>
|
||
<div class="award"><span class="badge">EISA</span><strong>Best Streaming Amplifier</strong><small>2025</small></div>
|
||
<div class="award"><span class="badge">EISA</span><strong>High-End Streamer</strong><small>2025</small></div>
|
||
<div class="award"><span class="badge">HFN</span><strong>Outstanding Product</strong><small>2025</small></div>
|
||
</div>
|
||
<div class="voice-list">
|
||
<div class="voice-row"><strong>EISA</strong><span>Music will sound and look great.</span></div>
|
||
<div class="voice-row"><strong>AVForums</strong><span>Sound quality that is hard to touch at this price.</span></div>
|
||
<div class="voice-row"><strong>Audio Science Review</strong><span>Happy to add the DMP-A6 to the recommended list.</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="variant v3">
|
||
<header>
|
||
<h2>03 Signal Matrix</h2>
|
||
<span>偏产品能力：奖项像参数一样可扫描，评价作为声音证据</span>
|
||
</header>
|
||
<div class="canvas">
|
||
<div class="eyebrow">Verified by design, press, and listening</div>
|
||
<h3 class="section-title">从设计奖到声音评价，形成连续信号</h3>
|
||
<div class="matrix">
|
||
<div class="metric"><div class="number">04</div><strong>Major awards</strong><small>Design, amplifier, streamer, product recognition</small></div>
|
||
<div class="metric"><div class="number">05</div><strong>Press voices</strong><small>EISA, Darko, AVForums, ASR, Hi-Fi News</small></div>
|
||
<div class="metric"><div class="number">26</div><strong>iF Design</strong><small>Industrial design recognition</small></div>
|
||
<div class="metric"><div class="number">25</div><strong>EISA season</strong><small>Two product categories</small></div>
|
||
<div class="quote-band">
|
||
<div class="source">Featured voice · AVForums</div>
|
||
<p>“It combines this with a sound quality that is pretty much untouchable for under a grand.”</p>
|
||
</div>
|
||
<div class="side-voices">
|
||
<div class="quote"><div class="source">EISA</div><p>Music will sound and look great.</p></div>
|
||
<div class="quote"><div class="source">Hi-Fi News</div><p>A rare balance between price, completeness, and sound.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="variant v4">
|
||
<header>
|
||
<h2>04 Listening Room Dark</h2>
|
||
<span>偏高端音频：深色空间，奖项和声音像展柜信息</span>
|
||
</header>
|
||
<div class="canvas">
|
||
<div class="eyebrow">Recognition in the listening room</div>
|
||
<h3 class="section-title">Every award points back to the listening experience</h3>
|
||
<p class="subcopy">适合首页整体如果向更高端、更沉浸的产品质感推进。</p>
|
||
<div class="stage">
|
||
<div class="award-wall">
|
||
<div class="award"><span class="badge">IF</span><strong>iF Design Award</strong><small>2026</small></div>
|
||
<div class="award"><span class="badge">EISA</span><strong>Best Streaming Amplifier</strong><small>2025</small></div>
|
||
<div class="award"><span class="badge">EISA</span><strong>High-End Streamer</strong><small>2025</small></div>
|
||
<div class="award"><span class="badge">HFN</span><strong>Outstanding Product</strong><small>2025</small></div>
|
||
</div>
|
||
<div class="voice-wall">
|
||
<div class="quote"><div class="source">Darko Audio</div><p>“Nails everything quite like Eversolo does.”</p></div>
|
||
<div class="quote"><div class="source">Audio Science Review</div><p>“Happy to add the Eversolo DMP-A6 to my recommended list.”</p></div>
|
||
<div class="quote"><div class="source">Hi-Fi News</div><p>“A rare balance between price, completeness, and sound.”</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="variant v5">
|
||
<header>
|
||
<h2>05 Press Board</h2>
|
||
<span>偏媒体中心：奖项作为索引，评价作为可扩展内容板</span>
|
||
</header>
|
||
<div class="canvas">
|
||
<div class="eyebrow">Awards index / Media board</div>
|
||
<h3 class="section-title">快速浏览所有背书，展开真正有力的声音</h3>
|
||
<div class="board">
|
||
<div class="index">
|
||
<div class="index-item"><span>iF Design Award</span><strong>2026</strong></div>
|
||
<div class="index-item"><span>EISA Amplifier</span><strong>2025</strong></div>
|
||
<div class="index-item"><span>EISA Streamer</span><strong>2025</strong></div>
|
||
<div class="index-item"><span>Hi-Fi News</span><strong>2025</strong></div>
|
||
</div>
|
||
<div class="cards">
|
||
<div class="quote-card featured"><div class="source">Darko Audio</div><p>“I have yet to experience one that nails everything quite like Eversolo does.”</p></div>
|
||
<div class="quote-card"><div class="source">EISA</div><p>Music will sound and look great.</p></div>
|
||
<div class="quote-card"><div class="source">AVForums</div><p>Sound quality that is hard to touch under a grand.</p></div>
|
||
<div class="quote-card"><div class="source">ASR</div><p>Recommended list.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="intro note">
|
||
<strong>推荐落地顺序：</strong>如果只想稳妥升级，选 01；如果想让首页更有官网质感，选 02；
|
||
如果希望强调产品能力和“专业验证”，选 03；如果首页后续整体改成更高端沉浸，选 04；
|
||
如果后续奖项和媒体数量会持续增加，选 05。
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|