417 lines
13 KiB
HTML
417 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Editor Demo Page</title>
|
||
<script defer src="/editor-bridge-snippet.js"></script>
|
||
<style>
|
||
:root {
|
||
color-scheme: light;
|
||
--bg: #f8fafc;
|
||
--card: rgba(255, 255, 255, 0.9);
|
||
--border: rgba(15, 23, 42, 0.08);
|
||
--text: #0f172a;
|
||
--muted: #475569;
|
||
--accent: #0f766e;
|
||
--accent-soft: rgba(15, 118, 110, 0.12);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
|
||
color: var(--text);
|
||
background:
|
||
radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 32%),
|
||
linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
|
||
}
|
||
|
||
.shell {
|
||
width: min(1400px, calc(100% - 32px));
|
||
margin: 0 auto;
|
||
padding: 18px 0 72px;
|
||
}
|
||
|
||
.demo-guide {
|
||
display: none;
|
||
}
|
||
|
||
.demo-guide h2 {
|
||
margin: 0;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.demo-guide p {
|
||
margin: 10px 0 0;
|
||
color: var(--muted);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.demo-guide-steps {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.demo-guide-step {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
padding: 12px 14px;
|
||
border-radius: 18px;
|
||
background: rgba(255, 255, 255, 0.72);
|
||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||
}
|
||
|
||
.demo-guide-step-index {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 999px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #0f172a;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.demo-guide-step strong {
|
||
display: block;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.demo-guide-step span {
|
||
display: block;
|
||
margin-top: 4px;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.hero {
|
||
display: grid;
|
||
grid-template-columns: 1.15fr 0.85fr;
|
||
gap: 24px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.card {
|
||
background: var(--card);
|
||
backdrop-filter: blur(16px);
|
||
border: 1px solid var(--border);
|
||
border-radius: 28px;
|
||
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
|
||
}
|
||
|
||
.hero-copy {
|
||
padding: 36px;
|
||
}
|
||
|
||
.hero-kicker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 14px;
|
||
border-radius: 999px;
|
||
background: var(--accent-soft);
|
||
color: var(--accent);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hero-title {
|
||
margin: 20px 0 12px;
|
||
font-size: clamp(38px, 5vw, 64px);
|
||
line-height: 1.04;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.hero-copy-text {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
line-height: 1.8;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.cta-button,
|
||
.ghost-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 148px;
|
||
padding: 14px 18px;
|
||
border-radius: 999px;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
transition: transform 160ms ease, box-shadow 160ms ease;
|
||
}
|
||
|
||
.cta-button {
|
||
background: #0f172a;
|
||
color: #fff;
|
||
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
|
||
}
|
||
|
||
.ghost-button {
|
||
border: 1px solid rgba(15, 23, 42, 0.14);
|
||
color: var(--text);
|
||
background: rgba(255, 255, 255, 0.86);
|
||
}
|
||
|
||
.hero-visual {
|
||
padding: 22px;
|
||
}
|
||
|
||
.hero-visual img {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 420px;
|
||
object-fit: cover;
|
||
border-radius: 22px;
|
||
}
|
||
|
||
.section-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 18px;
|
||
margin-top: 26px;
|
||
}
|
||
|
||
.feature-card {
|
||
padding: 24px;
|
||
}
|
||
|
||
.feature-card h3,
|
||
.offer-title,
|
||
.testimonial-title {
|
||
margin: 0;
|
||
font-size: 22px;
|
||
}
|
||
|
||
.feature-card p,
|
||
.offer-copy,
|
||
.testimonial-copy {
|
||
margin: 12px 0 0;
|
||
line-height: 1.8;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.offer-section {
|
||
display: grid;
|
||
grid-template-columns: 1fr 0.95fr;
|
||
gap: 24px;
|
||
margin-top: 26px;
|
||
}
|
||
|
||
.offer-content {
|
||
padding: 30px;
|
||
}
|
||
|
||
.offer-badge {
|
||
display: inline-flex;
|
||
padding: 8px 14px;
|
||
border-radius: 999px;
|
||
background: rgba(244, 114, 182, 0.12);
|
||
color: #be185d;
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.offer-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.offer-gallery {
|
||
display: grid;
|
||
gap: 14px;
|
||
}
|
||
|
||
.offer-gallery img {
|
||
width: 100%;
|
||
height: 200px;
|
||
object-fit: cover;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.testimonial-section {
|
||
margin-top: 26px;
|
||
padding: 30px;
|
||
}
|
||
|
||
.testimonial-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 16px;
|
||
margin-top: 22px;
|
||
}
|
||
|
||
.testimonial-card {
|
||
padding: 18px;
|
||
border-radius: 20px;
|
||
background: rgba(248, 250, 252, 0.92);
|
||
border: 1px solid rgba(148, 163, 184, 0.15);
|
||
}
|
||
|
||
.testimonial-name {
|
||
margin-top: 14px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.demo-guide,
|
||
.hero,
|
||
.offer-section,
|
||
.section-grid,
|
||
.testimonial-list {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.hero-visual img {
|
||
min-height: 280px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="shell">
|
||
<section class="card demo-guide" data-mkt-selector=".demo-guide">
|
||
<div>
|
||
<div class="hero-kicker" data-mkt-selector=".demo-guide-kicker">Visual Editor 示範頁</div>
|
||
<h2 data-mkt-selector=".demo-guide-title">這頁是專門讓你檢查目前同頁編輯進度的示範畫面</h2>
|
||
<p data-mkt-selector=".demo-guide-copy">
|
||
目前已經可以選區塊、檢查區塊、開始修改文字，並把頁面上的文字變化同步回右側編輯草稿。這不是最終 UI，但已經是 visual editor 真正的前進路線。
|
||
</p>
|
||
</div>
|
||
<div class="demo-guide-steps">
|
||
<div class="demo-guide-step" data-mkt-selector=".demo-guide-step-1">
|
||
<span class="demo-guide-step-index">1</span>
|
||
<div>
|
||
<strong>先滑過或點一下畫面區塊</strong>
|
||
<span>你會看到高亮框、頁面檢查面板、貼著區塊的操作入口。</span>
|
||
</div>
|
||
</div>
|
||
<div class="demo-guide-step" data-mkt-selector=".demo-guide-step-2">
|
||
<span class="demo-guide-step-index">2</span>
|
||
<div>
|
||
<strong>按「改文字」或「開始修改這個區塊」</strong>
|
||
<span>如果是文字區塊，畫面會進入頁內文字編輯狀態，不只右側有 Draft。</span>
|
||
</div>
|
||
</div>
|
||
<div class="demo-guide-step" data-mkt-selector=".demo-guide-step-3">
|
||
<span class="demo-guide-step-index">3</span>
|
||
<div>
|
||
<strong>直接在畫面上改字</strong>
|
||
<span>你輸入的新文案會同步回 editor 的文字草稿，這是現在最明顯的可見進度。</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="hero">
|
||
<article class="card hero-copy" data-mkt-selector=".hero-copy">
|
||
<div class="hero-kicker" data-mkt-selector=".hero-kicker">春季成長活動</div>
|
||
<h1 class="hero-title" data-mkt-selector=".hero-title">讓你的活動頁從曝光直接走到轉換</h1>
|
||
<p class="hero-copy-text" data-mkt-selector=".hero-copy-text">
|
||
用更直覺的同頁編輯流程，快速調整主標題、按鈕文案、圖片與優惠資訊，讓行銷人員不用來回找工程也能完成優化。
|
||
</p>
|
||
<div class="hero-actions" data-mkt-selector=".hero-actions">
|
||
<a class="cta-button" href="https://ose.tw/demo-signup" data-mkt-selector="a.cta-button">立即預約示範</a>
|
||
<a class="ghost-button" href="https://ose.tw/demo-case" data-mkt-selector="a.ghost-button">先看案例</a>
|
||
</div>
|
||
</article>
|
||
|
||
<aside class="card hero-visual" data-mkt-selector=".hero-visual">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80"
|
||
alt="行銷活動示意圖"
|
||
data-mkt-selector=".hero-visual img"
|
||
/>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="section-grid">
|
||
<article class="card feature-card" data-mkt-selector=".feature-card:nth-of-type(1)">
|
||
<h3 data-mkt-selector=".feature-card:nth-of-type(1) h3">即時看見頁面效果</h3>
|
||
<p data-mkt-selector=".feature-card:nth-of-type(1) p">
|
||
不用切來切去比對稿件，直接在頁面上檢查你想改的區塊。
|
||
</p>
|
||
</article>
|
||
<article class="card feature-card" data-mkt-selector=".feature-card:nth-of-type(2)">
|
||
<h3 data-mkt-selector=".feature-card:nth-of-type(2) h3">一步一步帶你完成</h3>
|
||
<p data-mkt-selector=".feature-card:nth-of-type(2) p">
|
||
從選區塊、調整文案、建立預覽到回畫面確認，流程清楚不迷路。
|
||
</p>
|
||
</article>
|
||
<article class="card feature-card" data-mkt-selector=".feature-card:nth-of-type(3)">
|
||
<h3 data-mkt-selector=".feature-card:nth-of-type(3) h3">把成功經驗複製到更多活動</h3>
|
||
<p data-mkt-selector=".feature-card:nth-of-type(3) p">
|
||
後續可把同一套優化流程延伸到變體、版本與更多銷售實驗。
|
||
</p>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="offer-section">
|
||
<article class="card offer-content" data-mkt-selector=".offer-content">
|
||
<div class="offer-badge" data-mkt-selector=".offer-badge">限時活動優惠</div>
|
||
<h2 class="offer-title" data-mkt-selector=".offer-title">本月完成第一個銷售實驗，即可獲得顧問陪跑一次</h2>
|
||
<p class="offer-copy" data-mkt-selector=".offer-copy">
|
||
如果你想先從主視覺、按鈕文案或優惠區塊開始，這個示範頁會很適合拿來測試目前的 visual editor 流程。
|
||
</p>
|
||
<div class="offer-actions" data-mkt-selector=".offer-actions">
|
||
<a class="cta-button" href="https://ose.tw/offer" data-mkt-selector="a.offer-primary">立即領取優惠</a>
|
||
<a class="ghost-button" href="https://ose.tw/contact" data-mkt-selector="a.offer-secondary">詢問顧問</a>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="offer-gallery">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=900&q=80"
|
||
alt="優惠圖一"
|
||
data-mkt-selector=".offer-gallery img:nth-of-type(1)"
|
||
/>
|
||
<img
|
||
src="https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?auto=format&fit=crop&w=900&q=80"
|
||
alt="優惠圖二"
|
||
data-mkt-selector=".offer-gallery img:nth-of-type(2)"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card testimonial-section" data-mkt-selector=".testimonial-section">
|
||
<h2 class="testimonial-title" data-mkt-selector=".testimonial-title">行銷團隊實際使用回饋</h2>
|
||
<p class="testimonial-copy" data-mkt-selector=".testimonial-copy">
|
||
這些區塊很適合測試：改文字、改按鈕、換圖片、改樣式，以及未來更完整的同頁編輯能力。
|
||
</p>
|
||
<div class="testimonial-list">
|
||
<article class="testimonial-card" data-mkt-selector=".testimonial-card:nth-of-type(1)">
|
||
<p>「以前改 landing page 要排隊等工程，現在至少方向已經能先自己看見。」</p>
|
||
<div class="testimonial-name">品牌行銷經理</div>
|
||
</article>
|
||
<article class="testimonial-card" data-mkt-selector=".testimonial-card:nth-of-type(2)">
|
||
<p>「最有感的是可以直接看哪個區塊在改，不會再迷失在設定頁裡。」</p>
|
||
<div class="testimonial-name">電商營運主管</div>
|
||
</article>
|
||
<article class="testimonial-card" data-mkt-selector=".testimonial-card:nth-of-type(3)">
|
||
<p>「希望後面能直接在頁面上改圖片和文案，這樣整體就很完整了。」</p>
|
||
<div class="testimonial-name">成長行銷</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</body>
|
||
</html>
|