init studio launcher backend
This commit is contained in:
@@ -0,0 +1,531 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Autonomy Studio</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg-deep: #0a0b0e;
|
||||
--bg-sidebar: #0d0f14;
|
||||
--bg-main: #0f1117;
|
||||
--border: rgba(255,255,255,0.06);
|
||||
--accent: #3b7ffa;
|
||||
--accent-glow: rgba(59,127,250,0.35);
|
||||
--text-primary: #e8eaf0;
|
||||
--text-secondary: rgba(200,205,220,0.65);
|
||||
--text-muted: rgba(160,168,185,0.45);
|
||||
--sidebar-width: 280px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%; height: 100%;
|
||||
background: #000;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
|
||||
/* ── Window Shell ── */
|
||||
.window {
|
||||
width: 100vw; height: 100vh;
|
||||
background: var(--bg-deep);
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
display: flex; flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Title Bar ── */
|
||||
.titlebar {
|
||||
height: 38px;
|
||||
background: #080a0f;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 16px 0 20px;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
}
|
||||
.titlebar-title {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.18em;
|
||||
color: rgba(180,188,210,0.7);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.titlebar-logo {
|
||||
height: 18px;
|
||||
width: auto;
|
||||
opacity: 0.9;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.window-controls {
|
||||
display: flex; gap: 8px; align-items: center;
|
||||
}
|
||||
.wc {
|
||||
width: 14px; height: 14px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: filter 0.2s;
|
||||
}
|
||||
.wc:hover { filter: brightness(1.3); }
|
||||
.wc-min { background: #3a3d45; }
|
||||
.wc-max { background: #3a3d45; }
|
||||
.wc-close { background: #3a3d45; }
|
||||
.wc-min::after { content: '─'; font-size: 8px; line-height: 14px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); }
|
||||
.wc-max::after { content: '□'; font-size: 8px; line-height: 14px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); }
|
||||
.wc-close::after { content: '✕'; font-size: 8px; line-height: 14px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); }
|
||||
|
||||
/* ── App Body ── */
|
||||
.app-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Sidebar ── */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
background: var(--bg-sidebar);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex; flex-direction: column;
|
||||
padding: 8px 0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.sidebar::after {
|
||||
content: '';
|
||||
position: absolute; right: 0; top: 0; bottom: 0;
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, transparent, rgba(59,127,250,0.15) 40%, rgba(59,127,250,0.15) 60%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex; align-items: center;
|
||||
padding: 13px 24px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
letter-spacing: 0.01em;
|
||||
transition: color 0.2s, background 0.2s;
|
||||
}
|
||||
.nav-item:hover {
|
||||
color: var(--text-primary);
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
.nav-item.active {
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
background: rgba(59,127,250,0.07);
|
||||
}
|
||||
.nav-item.active::before {
|
||||
content: '';
|
||||
position: absolute; left: 0; top: 8px; bottom: 8px;
|
||||
width: 3px;
|
||||
background: var(--accent);
|
||||
border-radius: 0 3px 3px 0;
|
||||
box-shadow: 0 0 12px var(--accent-glow);
|
||||
}
|
||||
|
||||
/* ── Main Content ── */
|
||||
.main {
|
||||
flex: 1;
|
||||
background: var(--bg-main);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* Subtle background gradient */
|
||||
.main::before {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 65% 50%, rgba(20,25,40,0.9) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 50% 50% at 20% 50%, rgba(15,30,60,0.3) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Top Bar ── */
|
||||
.topbar { display: none; }
|
||||
|
||||
.user-profile {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
cursor: pointer;
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.user-profile:hover { background: rgba(255,255,255,0.04); }
|
||||
.avatar {
|
||||
width: 34px; height: 34px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #2c4faa, #1a3580);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 13px; font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 0.05em;
|
||||
border: 1px solid rgba(59,127,250,0.4);
|
||||
box-shadow: 0 0 12px rgba(59,127,250,0.2);
|
||||
}
|
||||
.user-info { display: flex; flex-direction: column; }
|
||||
.user-name {
|
||||
font-size: 13px; font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.user-email {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.chevron {
|
||||
color: var(--text-muted);
|
||||
font-size: 10px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* ── Hero Content ── */
|
||||
.hero {
|
||||
flex: 1;
|
||||
display: flex; align-items: center;
|
||||
padding: 80px 0 80px 52px; align-items: flex-start;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Car image area - atmospheric background */
|
||||
.car-area {
|
||||
position: absolute; inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.car-bg {
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 90% 70% at 60% 55%, rgba(25,35,70,0.15) 0%, transparent 60%);
|
||||
}
|
||||
/* Car silhouette using CSS art + SVG simulation */
|
||||
.car-image {
|
||||
position: absolute; right: -20px; bottom: 40px;
|
||||
width: 680px; height: 380px;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 50% 50%, rgba(30,40,70,0.2) 0%, transparent 70%);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.car-image img {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: contain;
|
||||
filter: brightness(1.5) contrast(1.05);
|
||||
opacity: 0;
|
||||
animation: carFadeIn 1.2s 0.6s ease forwards;
|
||||
}
|
||||
|
||||
/* Fog/atmosphere layers */
|
||||
.fog-layer {
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 70% 50% at 55% 60%, rgba(15,25,55,0.25) 0%, transparent 65%),
|
||||
radial-gradient(ellipse 60% 40% at 70% 70%, rgba(10,15,40,0.3) 0%, transparent 55%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Left gradient fade for text readability */
|
||||
.left-fade {
|
||||
position: absolute; left: 0; top: 0; bottom: 0;
|
||||
width: 45%;
|
||||
background: linear-gradient(to right, var(--bg-main) 30%, rgba(15,17,23,0.7) 60%, transparent 100%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Floor reflection */
|
||||
.floor-reflection {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
height: 120px;
|
||||
background: linear-gradient(to top, rgba(8,10,18,0.8) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ── Text Content ── */
|
||||
.text-content {
|
||||
position: relative; z-index: 10;
|
||||
max-width: 480px;
|
||||
animation: textReveal 1s 0.2s ease both;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 52px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.0;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 0 60px rgba(59,127,250,0.1);
|
||||
}
|
||||
.brand-title span {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
color: rgba(200,210,230,0.85);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 28px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 40px; height: 2px;
|
||||
background: linear-gradient(to right, var(--accent), transparent);
|
||||
margin-bottom: 22px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 10px var(--accent-glow);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 13.5px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 2.0;
|
||||
letter-spacing: 0.005em;
|
||||
}
|
||||
|
||||
/* ── Version ── */
|
||||
.version {
|
||||
position: absolute; bottom: 16px; right: 24px;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--text-muted);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* ── Animations ── */
|
||||
@keyframes textReveal {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes carFadeIn {
|
||||
from { opacity: 0; transform: translateX(30px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
margin-top: auto;
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.sidebar-footer .user-profile {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.sidebar-footer .user-profile:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
.sidebar-footer .user-name { font-size: 13px; }
|
||||
.sidebar-footer .user-email { font-size: 11px; }
|
||||
|
||||
/* Blue accent line at top of sidebar active item area */
|
||||
.sidebar-header {
|
||||
padding: 16px 24px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sidebar-logo {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ── Update Button ── */
|
||||
.update-btn-wrap {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
right: 82px;
|
||||
z-index: 10;
|
||||
}
|
||||
.update-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 22px;
|
||||
background: var(--accent);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
|
||||
box-shadow: 0 4px 20px rgba(59,127,250,0.35);
|
||||
}
|
||||
.update-btn:hover {
|
||||
background: #5592ff;
|
||||
box-shadow: 0 6px 28px rgba(59,127,250,0.55);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.update-btn:active { transform: translateY(0); }
|
||||
.update-btn svg {
|
||||
width: 14px; height: 14px;
|
||||
stroke: #fff;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Car Video ── */
|
||||
.car-video {
|
||||
position: absolute;
|
||||
right: 0; bottom: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center bottom;
|
||||
opacity: 0;
|
||||
animation: carFadeIn 1.4s 0.5s ease forwards;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Natural shadow vignette over video */
|
||||
.car-video-shadow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(to right, var(--bg-main) 0%, var(--bg-main) 14%, rgba(15,17,23,0.45) 32%, transparent 52%),
|
||||
linear-gradient(to top, rgba(5,7,12,0.9) 0%, transparent 45%),
|
||||
radial-gradient(ellipse 100% 100% at 80% 40%, transparent 40%, rgba(5,7,12,0.5) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="window">
|
||||
<!-- Title Bar -->
|
||||
<div class="titlebar">
|
||||
<div style="display:flex;align-items:center;">
|
||||
<img src="https://autonomystudio.net/static/logo/autonomy.png" class="titlebar-logo" alt="logo">
|
||||
<span class="titlebar-title">Autonomy Studio</span>
|
||||
</div>
|
||||
<div class="window-controls">
|
||||
<div class="wc wc-min"></div>
|
||||
<div class="wc wc-max"></div>
|
||||
<div class="wc wc-close"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App Body -->
|
||||
<div class="app-body">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-logo"></div>
|
||||
</div>
|
||||
<div class="nav-item active">ADS IDE</div>
|
||||
<div class="nav-item">Data Management</div>
|
||||
<div class="nav-item">HMI</div>
|
||||
<div class="nav-item">FMS</div>
|
||||
<div class="nav-item">ADS Education</div>
|
||||
<div class="nav-item">AI Benchmark</div>
|
||||
<div class="nav-item">Calibration</div>
|
||||
<div class="nav-item">IP Repository</div>
|
||||
<div class="nav-item">HDMAP Builder</div>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-profile">
|
||||
<div class="avatar">C</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">changhoon yoo</span>
|
||||
<span class="user-email">chyoo@futuredrive.net</span>
|
||||
</div>
|
||||
<span class="chevron">▾</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main">
|
||||
|
||||
|
||||
|
||||
<!-- Update Button -->
|
||||
<div class="update-btn-wrap">
|
||||
<button class="update-btn">
|
||||
업데이트
|
||||
</button>
|
||||
</div>
|
||||
<!-- Hero -->
|
||||
<div class="hero">
|
||||
<!-- Car visual area -->
|
||||
<div class="car-area">
|
||||
<div class="car-bg"></div>
|
||||
<video class="car-video" src="car_move.mp4" autoplay loop muted playsinline></video>
|
||||
<div class="car-video-shadow"></div>
|
||||
<div class="floor-reflection"></div>
|
||||
</div>
|
||||
|
||||
<!-- Text Content -->
|
||||
<div class="text-content">
|
||||
<h1 class="brand-title">Autonomy<br><span>Studio</span></h1>
|
||||
<p class="subtitle">클라우드 기반 자율주행 모빌리티<br>소프트웨어 개발, 검증 및 운영 환경</p>
|
||||
<div class="divider"></div>
|
||||
<p class="description">
|
||||
충분히 검증된 오픈소스 기반의 레퍼런스<br>
|
||||
자율주행 소프트웨어(ADS)를 통해 실차 수준에서 다양한 시뮬레이션과 검증,<br>
|
||||
AI 기능 성능 평가까지 가능한 통합 DevOps 플랫폼을 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version -->
|
||||
<div class="version">v1.0.0</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Nav item click interaction
|
||||
document.querySelectorAll('.nav-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||||
item.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Window control interactions
|
||||
document.querySelector('.wc-close').addEventListener('click', () => {
|
||||
document.querySelector('.window').style.opacity = '0';
|
||||
document.querySelector('.window').style.transform = 'scale(0.97)';
|
||||
document.querySelector('.window').style.transition = 'opacity 0.3s, transform 0.3s';
|
||||
setTimeout(() => {
|
||||
document.querySelector('.window').style.opacity = '1';
|
||||
document.querySelector('.window').style.transform = 'scale(1)';
|
||||
}, 600);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user