361 lines
12 KiB
C#
361 lines
12 KiB
C#
namespace TornadoAce_GSShop.Views
|
|
{
|
|
public partial class MainPage : Page
|
|
{
|
|
private WebView2? previewWebView;
|
|
|
|
public MainPage()
|
|
{
|
|
this.InitializeComponent();
|
|
}
|
|
|
|
private void Page_Loaded(object sender, RoutedEventArgs e)
|
|
{
|
|
UpdatedTextBlock.Text = DateTime.Now.ToString("yyyy.MM.dd HH:mm");
|
|
|
|
previewWebView ??= new WebView2
|
|
{
|
|
Margin = new Thickness(1)
|
|
};
|
|
|
|
if (PreviewHost.Children.Count == 1)
|
|
{
|
|
PreviewHost.Children.Add(previewWebView);
|
|
}
|
|
|
|
previewWebView.NavigateToString(BuildPreviewHtml());
|
|
}
|
|
|
|
private static string BuildPreviewHtml() =>
|
|
"""
|
|
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
:root {
|
|
color-scheme: light;
|
|
--ink: #111827;
|
|
--muted: #667085;
|
|
--line: #d8e0ea;
|
|
--blue: #2563eb;
|
|
--mint: #00a884;
|
|
--coral: #f05a4f;
|
|
--amber: #b7791f;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(circle at 16% 18%, rgba(37, 99, 235, .15), transparent 30%),
|
|
linear-gradient(135deg, #f7fafc 0%, #eef4f8 52%, #fbf2ef 100%);
|
|
}
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
padding: 42px;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
gap: 28px;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.mark {
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 14px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
font-weight: 800;
|
|
background: #111827;
|
|
box-shadow: 0 18px 40px rgba(17, 24, 39, .18);
|
|
}
|
|
|
|
.brand h1 {
|
|
margin: 0;
|
|
font-size: 26px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.brand p {
|
|
margin: 2px 0 0;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.chip-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.chip {
|
|
padding: 8px 12px;
|
|
border: 1px solid rgba(17, 24, 39, .08);
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, .78);
|
|
backdrop-filter: blur(18px);
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
main {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 310px;
|
|
gap: 24px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.hero {
|
|
min-height: 430px;
|
|
border: 1px solid rgba(17, 24, 39, .08);
|
|
border-radius: 24px;
|
|
padding: 34px;
|
|
background: rgba(255, 255, 255, .72);
|
|
backdrop-filter: blur(24px);
|
|
box-shadow: 0 24px 70px rgba(28, 38, 55, .14);
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 320px;
|
|
height: 320px;
|
|
right: -110px;
|
|
bottom: -140px;
|
|
background: conic-gradient(from 40deg, rgba(37, 99, 235, .22), rgba(0, 168, 132, .22), rgba(240, 90, 79, .18), rgba(37, 99, 235, .22));
|
|
filter: blur(12px);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.eyebrow {
|
|
color: var(--blue);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero h2 {
|
|
max-width: 720px;
|
|
margin: 12px 0 0;
|
|
font-size: 46px;
|
|
line-height: 1.04;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.hero-copy {
|
|
max-width: 560px;
|
|
margin-top: 16px;
|
|
color: var(--muted);
|
|
font-size: 17px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.tiles {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
align-self: end;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tile {
|
|
min-height: 122px;
|
|
padding: 18px;
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(17, 24, 39, .08);
|
|
background: rgba(255, 255, 255, .82);
|
|
}
|
|
|
|
.tile strong {
|
|
display: block;
|
|
font-size: 26px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.tile span {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
aside {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.panel {
|
|
border: 1px solid rgba(17, 24, 39, .08);
|
|
border-radius: 20px;
|
|
padding: 18px;
|
|
background: rgba(255, 255, 255, .76);
|
|
backdrop-filter: blur(24px);
|
|
box-shadow: 0 18px 44px rgba(28, 38, 55, .10);
|
|
}
|
|
|
|
.panel h3 {
|
|
margin: 0 0 14px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 10px 1fr auto;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--blue);
|
|
}
|
|
|
|
.dot.mint {
|
|
background: var(--mint);
|
|
}
|
|
|
|
.dot.coral {
|
|
background: var(--coral);
|
|
}
|
|
|
|
.row b {
|
|
display: block;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.row small {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.pill {
|
|
padding: 5px 9px;
|
|
border-radius: 999px;
|
|
background: #eef4ff;
|
|
color: var(--blue);
|
|
font-weight: 800;
|
|
font-size: 12px;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.page {
|
|
padding: 24px;
|
|
}
|
|
|
|
header,
|
|
footer {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
main,
|
|
.tiles {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hero h2 {
|
|
font-size: 34px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<header>
|
|
<div class="brand">
|
|
<div class="mark">GS</div>
|
|
<div>
|
|
<h1>GS Shop Studio</h1>
|
|
<p>Live commerce workspace</p>
|
|
</div>
|
|
</div>
|
|
<div class="chip-row">
|
|
<div class="chip">WebView2</div>
|
|
<div class="chip">Preview</div>
|
|
<div class="chip">Ready</div>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<section class="hero">
|
|
<div>
|
|
<div class="eyebrow">Today at a glance</div>
|
|
<h2>빠르게 확인하고 바로 운영하는 쇼핑 콘솔</h2>
|
|
<p class="hero-copy">상품 노출, 주문 흐름, 라이브 배너 상태가 한 화면 안에서 정리되는 샘플 미리보기입니다.</p>
|
|
</div>
|
|
<div></div>
|
|
<div class="tiles">
|
|
<div class="tile"><strong>36</strong><span>방송 상품</span></div>
|
|
<div class="tile"><strong>1.2K</strong><span>오늘 주문</span></div>
|
|
<div class="tile"><strong>98%</strong><span>미리보기 정상</span></div>
|
|
</div>
|
|
</section>
|
|
<aside>
|
|
<section class="panel">
|
|
<h3>운영 상태</h3>
|
|
<div class="list">
|
|
<div class="row"><i class="dot mint"></i><span><b>메인 홈</b><small>게시 준비</small></span><em class="pill">OK</em></div>
|
|
<div class="row"><i class="dot"></i><span><b>상품 상세</b><small>배너 검수</small></span><em class="pill">LIVE</em></div>
|
|
<div class="row"><i class="dot coral"></i><span><b>모바일 뷰</b><small>이미지 교체</small></span><em class="pill">TODO</em></div>
|
|
</div>
|
|
</section>
|
|
<section class="panel">
|
|
<h3>다음 편성</h3>
|
|
<div class="list">
|
|
<div class="row"><i class="dot"></i><span><b>14:40</b><small>프라임 딜</small></span><em class="pill">A-01</em></div>
|
|
<div class="row"><i class="dot mint"></i><span><b>15:00</b><small>리빙 특가</small></span><em class="pill">B-04</em></div>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
<footer>
|
|
<span>TornadoAce GS Shop</span>
|
|
<span>Rendered inside Microsoft Edge WebView2</span>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
""";
|
|
}
|
|
}
|