feat(frontend): restore legacy gateway and hall styling
This commit is contained in:
@@ -39,10 +39,22 @@ const props = defineProps<{
|
||||
|
||||
const BASE_MAP_WIDTH = 700;
|
||||
const BASE_MAP_HEIGHT = 500;
|
||||
const MAP_SCALE = 0.45;
|
||||
|
||||
const mapWidth = computed(() => `${BASE_MAP_WIDTH * MAP_SCALE}px`);
|
||||
const mapHeight = computed(() => `${BASE_MAP_HEIGHT * MAP_SCALE}px`);
|
||||
const assetBase = computed(() => (import.meta.env.VITE_GAME_ASSET_URL ?? '/image').replace(/\/+$/, ''));
|
||||
const season = computed(() => {
|
||||
if (props.mapData.month <= 3) return 'spring';
|
||||
if (props.mapData.month <= 6) return 'summer';
|
||||
if (props.mapData.month <= 9) return 'fall';
|
||||
return 'winter';
|
||||
});
|
||||
const mapBackground = computed(() => {
|
||||
const theme = props.mapLayout.mapName;
|
||||
if (theme === 'ludo_rathowm') return `${assetBase.value}/game/map/ludo_rathowm/back.jpg`;
|
||||
if (theme === 'chess') return `${assetBase.value}/game/map/chess/chessboard.png`;
|
||||
if (theme === 'pokemon_v1') return `${assetBase.value}/game/map/pokemon_v1/back_pal8.png`;
|
||||
if (theme === 'cr') return `${assetBase.value}/game/map/cr/bg-fs8.png`;
|
||||
return `${assetBase.value}/game/map/che/bg_${season.value}.jpg`;
|
||||
});
|
||||
|
||||
const nationById = computed(() => {
|
||||
const map = new Map<number, { name: string; color: string; capitalCityId: number }>();
|
||||
@@ -74,8 +86,8 @@ const cityDots = computed<CityDot[]>(() => {
|
||||
return {
|
||||
id: layoutCity.id,
|
||||
name: layoutCity.name,
|
||||
x: layoutCity.x * MAP_SCALE,
|
||||
y: layoutCity.y * MAP_SCALE,
|
||||
x: (layoutCity.x / BASE_MAP_WIDTH) * 100,
|
||||
y: (layoutCity.y / BASE_MAP_HEIGHT) * 100,
|
||||
color: nation?.color ?? '#666666',
|
||||
isCapital: nation?.capitalCityId === layoutCity.id,
|
||||
};
|
||||
@@ -89,14 +101,14 @@ const cityDots = computed<CityDot[]>(() => {
|
||||
<span class="map-preview-title">{{ props.mapLayout.mapName }}</span>
|
||||
<span class="map-preview-date">{{ props.mapData.year }}년 {{ props.mapData.month }}월</span>
|
||||
</div>
|
||||
<div class="map-preview-body" :style="{ width: mapWidth, height: mapHeight }">
|
||||
<div class="map-preview-body" :style="{ backgroundImage: `url('${mapBackground}')` }">
|
||||
<div
|
||||
v-for="city in cityDots"
|
||||
:key="city.id"
|
||||
class="city-dot"
|
||||
:class="{ capital: city.isCapital }"
|
||||
:title="city.name"
|
||||
:style="{ left: `${city.x}px`, top: `${city.y}px`, backgroundColor: city.color }"
|
||||
:style="{ left: `${city.x}%`, top: `${city.y}%`, backgroundColor: city.color }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,6 +117,7 @@ const cityDots = computed<CityDot[]>(() => {
|
||||
<style scoped>
|
||||
.map-preview {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
@@ -122,8 +135,13 @@ const cityDots = computed<CityDot[]>(() => {
|
||||
|
||||
.map-preview-body {
|
||||
position: relative;
|
||||
border: 1px dashed rgba(201, 164, 90, 0.4);
|
||||
background: rgba(8, 8, 8, 0.7);
|
||||
width: 100%;
|
||||
aspect-ratio: 7 / 5;
|
||||
overflow: hidden;
|
||||
border: 1px solid #444;
|
||||
background-color: #080808;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.city-dot {
|
||||
|
||||
Vendored
+1
@@ -10,6 +10,7 @@ interface ImportMetaEnv {
|
||||
readonly VITE_APP_BASE_PATH?: string;
|
||||
readonly VITE_GATEWAY_API_URL?: string;
|
||||
readonly VITE_GAME_API_URL_TEMPLATE?: string;
|
||||
readonly VITE_GAME_ASSET_URL?: string;
|
||||
readonly VITE_GAME_WEB_URL?: string;
|
||||
readonly VITE_GAME_WEB_URL_TEMPLATE?: string;
|
||||
}
|
||||
|
||||
@@ -1,44 +1,170 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const menuOpen = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col bg-black text-gray-200">
|
||||
<!-- Header / Navigation -->
|
||||
<header class="bg-zinc-900 border-b border-zinc-800 py-2 px-4">
|
||||
<div class="max-w-6xl mx-auto flex justify-between items-center">
|
||||
<div class="flex items-center space-x-6">
|
||||
<h1 class="text-xl font-bold text-white">삼국지 모의전투 HiDCHe</h1>
|
||||
<nav class="hidden md:flex space-x-4 text-sm">
|
||||
<a href="#" class="hover:text-white">공지사항</a>
|
||||
<a href="#" class="hover:text-white">커뮤니티</a>
|
||||
<a href="#" class="hover:text-white">건의/제안/개발</a>
|
||||
<a href="#" class="hover:text-white">신고/문의</a>
|
||||
<a href="#" class="hover:text-white">자주 묻는 질문</a>
|
||||
<a href="#" class="hover:text-white">패치 내역</a>
|
||||
<a href="#" class="hover:text-white">Git Repo.</a>
|
||||
<a href="#" class="hover:text-white">위키</a>
|
||||
<RouterLink to="/admin" class="hover:text-white">관리자</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex space-x-4 text-sm">
|
||||
<a href="#" class="hover:text-white">공식 오픈 톡</a>
|
||||
<a href="#" class="hover:text-white">잡담 오픈 톡</a>
|
||||
</div>
|
||||
<div class="gateway-layout">
|
||||
<header class="gateway-navbar">
|
||||
<div class="navbar-inner">
|
||||
<RouterLink class="navbar-brand" to="/">삼국지 모의전투 HiDCHe</RouterLink>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
:aria-expanded="menuOpen"
|
||||
aria-controls="gateway-navigation"
|
||||
aria-label="메뉴 열기"
|
||||
@click="menuOpen = !menuOpen"
|
||||
>
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
<nav id="gateway-navigation" :class="{ open: menuOpen }">
|
||||
<a href="/bbs/board" target="_blank" rel="noreferrer">삼모게시판</a>
|
||||
<a href="/bbs/tip" target="_blank" rel="noreferrer">팁/강좌</a>
|
||||
<a href="/bbs/news" target="_blank" rel="noreferrer">삼국 일보</a>
|
||||
<a href="/bbs/history2" target="_blank" rel="noreferrer">개인 열전</a>
|
||||
<a href="/bbs/history3" target="_blank" rel="noreferrer">국가 열전</a>
|
||||
<a href="/bbs/patch" target="_blank" rel="noreferrer">패치 내역</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-grow">
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-zinc-900 border-t border-zinc-800 py-6 px-4 text-center text-xs text-zinc-500">
|
||||
<div class="space-x-4 mb-2">
|
||||
<a href="#" class="hover:text-zinc-300">개인정보처리방침</a>
|
||||
<a href="#" class="hover:text-zinc-300">이용약관</a>
|
||||
</div>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="./terms.2.html">개인정보처리방침</a>
|
||||
&
|
||||
<a href="./terms.1.html">이용약관</a>
|
||||
</p>
|
||||
<p>© 2023 • HideD</p>
|
||||
<p class="mt-1">크롬, 엣지, 파이어폭스에 최적화되어있습니다.</p>
|
||||
<p>크롬, 엣지, 파이어폭스에 최적화되어있습니다.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.gateway-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.gateway-layout > main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gateway-navbar {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
min-height: 56px;
|
||||
border-bottom: 1px solid #222;
|
||||
background: #303030;
|
||||
}
|
||||
|
||||
.navbar-inner {
|
||||
display: flex;
|
||||
min-height: 56px;
|
||||
align-items: center;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
margin-right: 16px;
|
||||
padding: 5px 0;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: rgb(255 255 255 / 55%);
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
nav a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
width: 56px;
|
||||
height: 42px;
|
||||
margin-left: auto;
|
||||
border: 1px solid rgb(255 255 255 / 15%);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.navbar-toggler span {
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin: 5px 0;
|
||||
background: rgb(255 255 255 / 55%);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #303030;
|
||||
background: #171719;
|
||||
padding: 24px 16px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@media (max-width: 759px) {
|
||||
.navbar-inner {
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 1px;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
nav.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav a {
|
||||
width: 100%;
|
||||
padding: 7px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,130 +1,330 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import type { inferRouterOutputs } from '@trpc/server';
|
||||
import type { AppRouter } from '@sammo-ts/gateway-api';
|
||||
|
||||
import MapPreview from '../components/MapPreview.vue';
|
||||
import DefaultLayout from '../layouts/DefaultLayout.vue';
|
||||
import { createGameTrpc, type GameRouter } from '../utils/gameTrpc';
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type GatewayOutput = inferRouterOutputs<AppRouter>;
|
||||
type GameOutput = inferRouterOutputs<GameRouter>;
|
||||
type LobbyProfile = GatewayOutput['lobby']['profiles'][number];
|
||||
type LobbyInfo = GameOutput['lobby']['info'];
|
||||
type PublicMap = GameOutput['public']['getCachedMap'];
|
||||
type PublicMapLayout = GameOutput['public']['getMapLayout'];
|
||||
|
||||
const router = useRouter();
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const loginError = ref('');
|
||||
const loginLoading = ref(false);
|
||||
const statusLoading = ref(false);
|
||||
const statusError = ref('');
|
||||
const profile = ref<LobbyProfile | null>(null);
|
||||
const info = ref<LobbyInfo | null>(null);
|
||||
const mapData = ref<PublicMap | null>(null);
|
||||
const mapLayout = ref<PublicMapLayout | null>(null);
|
||||
|
||||
const statusTitle = computed(() => `${profile.value?.korName ?? '체'} 현황`);
|
||||
const dateText = computed(() => {
|
||||
if (!info.value) {
|
||||
return '';
|
||||
}
|
||||
return `西紀 ${info.value.year}年 ${info.value.month}月`;
|
||||
});
|
||||
|
||||
const loadPublicStatus = async (): Promise<void> => {
|
||||
statusLoading.value = true;
|
||||
statusError.value = '';
|
||||
try {
|
||||
const profiles = await trpc.lobby.profiles.query();
|
||||
profile.value =
|
||||
profiles.find((entry) => entry.status === 'RUNNING') ??
|
||||
profiles.find((entry) => entry.status === 'PREOPEN') ??
|
||||
profiles[0] ??
|
||||
null;
|
||||
if (!profile.value) {
|
||||
statusError.value = '공개 중인 서버가 없습니다.';
|
||||
return;
|
||||
}
|
||||
const game = createGameTrpc(profile.value.profile, profile.value.apiPort);
|
||||
const [nextInfo, nextLayout, nextMap] = await Promise.all([
|
||||
game.lobby.info.query(),
|
||||
game.public.getMapLayout.query(),
|
||||
game.public.getCachedMap.query(),
|
||||
]);
|
||||
info.value = nextInfo;
|
||||
mapLayout.value = nextLayout;
|
||||
mapData.value = nextMap;
|
||||
} catch (error) {
|
||||
statusError.value = error instanceof Error ? error.message : '서버 현황을 불러오지 못했습니다.';
|
||||
} finally {
|
||||
statusLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const me = await trpc.me.query();
|
||||
if (me) {
|
||||
await router.push('/lobby');
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
// Not logged in or error
|
||||
} catch {
|
||||
// 공개 로그인 화면은 API 상태 메시지와 함께 계속 표시한다.
|
||||
}
|
||||
await loadPublicStatus();
|
||||
});
|
||||
|
||||
const handleLogin = async () => {
|
||||
const handleLogin = async (): Promise<void> => {
|
||||
loginError.value = '';
|
||||
loginLoading.value = true;
|
||||
try {
|
||||
// TODO: Implement login mutation
|
||||
// const result = await trpc.auth.login.mutation({ username: username.value, password: password.value });
|
||||
// if (result.success) router.push('/lobby');
|
||||
console.log('Login attempt:', username.value);
|
||||
} catch (e) {
|
||||
alert('로그인 실패');
|
||||
const result = await trpc.auth.login.mutate({
|
||||
username: username.value,
|
||||
password: password.value,
|
||||
});
|
||||
window.localStorage.setItem('sammo-session-token', result.sessionToken);
|
||||
await router.push('/lobby');
|
||||
} catch (error) {
|
||||
loginError.value = error instanceof Error ? error.message : '로그인에 실패했습니다.';
|
||||
} finally {
|
||||
loginLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleJoin = () => {
|
||||
console.log('Join attempt');
|
||||
const handleKakao = async (): Promise<void> => {
|
||||
loginError.value = '';
|
||||
try {
|
||||
const result = await trpc.auth.kakaoStart.query({ mode: 'login' });
|
||||
window.location.assign(result.authUrl);
|
||||
} catch (error) {
|
||||
loginError.value = error instanceof Error ? error.message : '카카오 로그인을 시작하지 못했습니다.';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefaultLayout>
|
||||
<div class="max-w-4xl mx-auto py-12 px-4 flex flex-col items-center space-y-12">
|
||||
<!-- Logo / Title -->
|
||||
<div class="text-center">
|
||||
<h2 class="text-4xl font-serif font-bold text-white tracking-widest">삼국지 모의전투 HiDCHe</h2>
|
||||
</div>
|
||||
<div class="gateway-home">
|
||||
<h2>삼국지 모의전투 HiDCHe</h2>
|
||||
|
||||
<!-- Login Box -->
|
||||
<div class="w-full max-w-md bg-zinc-800 border border-zinc-700 rounded shadow-2xl overflow-hidden">
|
||||
<div class="bg-zinc-700 px-6 py-2 text-center font-bold text-white border-b border-zinc-600">
|
||||
로그인
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<label class="w-20 text-sm font-medium">계정명</label>
|
||||
<input
|
||||
v-model="username"
|
||||
type="text"
|
||||
class="flex-grow bg-zinc-900 border border-zinc-600 rounded px-3 py-1.5 text-white focus:outline-none focus:border-blue-500"
|
||||
placeholder="계정명"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<label class="w-20 text-sm font-medium">비밀번호</label>
|
||||
<input
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="flex-grow bg-zinc-900 border border-zinc-600 rounded px-3 py-1.5 text-white focus:outline-none focus:border-blue-500"
|
||||
placeholder="비밀번호"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex space-x-2 pt-2">
|
||||
<button
|
||||
class="flex-1 bg-yellow-600 hover:bg-yellow-500 text-black font-bold py-2 rounded transition-colors flex items-center justify-center space-x-2"
|
||||
@click="handleJoin"
|
||||
>
|
||||
<span>가입 & 로그인</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex-[2] bg-blue-700 hover:bg-blue-600 text-white font-bold py-2 rounded transition-colors"
|
||||
@click="handleLogin"
|
||||
>
|
||||
로그인
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section id="login_card" class="login-card">
|
||||
<h3>로그인</h3>
|
||||
<form id="main_form" @submit.prevent="handleLogin">
|
||||
<label for="username">계정명</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
autocomplete="username"
|
||||
type="text"
|
||||
placeholder="계정명"
|
||||
autofocus
|
||||
required
|
||||
/>
|
||||
<label for="password">비밀번호</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
autocomplete="current-password"
|
||||
type="password"
|
||||
placeholder="비밀번호"
|
||||
required
|
||||
/>
|
||||
<button id="btn_kakao_login" class="kakao-button" type="button" @click="handleKakao">
|
||||
가입&<br />로그인
|
||||
</button>
|
||||
<button class="login-button" type="submit" :disabled="loginLoading">
|
||||
{{ loginLoading ? '로그인 중…' : '로그인' }}
|
||||
</button>
|
||||
</form>
|
||||
<p v-if="loginError" class="login-error" role="alert">{{ loginError }}</p>
|
||||
</section>
|
||||
|
||||
<!-- Server Status Placeholder -->
|
||||
<div class="w-full max-w-2xl bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden shadow-xl">
|
||||
<div class="bg-zinc-800 px-4 py-2 border-b border-zinc-700 flex justify-between items-center">
|
||||
<span class="font-bold text-sm">체 현황</span>
|
||||
<span class="text-xs text-zinc-400">西紀 197年 7月 秋</span>
|
||||
<section id="map-subframe" class="status-card">
|
||||
<header>
|
||||
<strong>{{ statusTitle }}</strong>
|
||||
<span>{{ dateText }}</span>
|
||||
</header>
|
||||
<div v-if="mapData && mapLayout" class="map-frame">
|
||||
<MapPreview :map-data="mapData" :map-layout="mapLayout" />
|
||||
</div>
|
||||
<div class="aspect-video bg-zinc-950 relative flex items-center justify-center">
|
||||
<!-- Map Placeholder -->
|
||||
<div class="text-zinc-700 text-lg italic">지도 이미지 및 현황 데이터 영역</div>
|
||||
|
||||
<!-- Example of a city dot if we wanted to mock it -->
|
||||
<div class="absolute bottom-4 right-4 text-[10px] text-blue-400">도시명 표기 끄기</div>
|
||||
<div v-else class="status-message">
|
||||
{{ statusLoading ? '현황을 불러오는 중…' : statusError }}
|
||||
</div>
|
||||
<div class="p-4 bg-black text-xs space-y-1 font-mono">
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-blue-400">◆</span>
|
||||
<span
|
||||
>197년 7월: [대회] 황제 수장의 명으로 전력전 대회가 개최됩니다! 천하의 영웅들을 모집하고
|
||||
있습니다!</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-cyan-400">●</span>
|
||||
<span>197년 7월: [재난] 탐라 호토에 메뚜기 떼가 발생하여 도시가 황폐해지고 있습니다.</span>
|
||||
</div>
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-green-400">●</span>
|
||||
<span>197년 7월: [자금] 가을이 되어 봉록에 따라 군량이 지급됩니다.</span>
|
||||
</div>
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-red-400">●</span>
|
||||
<span>197년 4월: [재난] 남피, 무안에 홍수로 인해 피해가 급증하고 있습니다.</span>
|
||||
</div>
|
||||
<!-- ... more logs ... -->
|
||||
<div class="text-zinc-600 pt-2 italic text-center">최근 진행 상황 로그 (Placeholder)</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-if="info" class="status-summary">
|
||||
<li>서버: {{ profile?.korName }} / 시나리오: {{ profile?.scenario }}</li>
|
||||
<li>유저 {{ info.userCnt }}명 · NPC {{ info.npcCnt }}명 · {{ info.nationCnt }}국 경쟁중</li>
|
||||
<li>{{ info.turnTerm }}분 턴 서버</li>
|
||||
</ul>
|
||||
<button type="button" class="refresh-button" :disabled="statusLoading" @click="loadPublicStatus">
|
||||
현황 새로고침
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Custom styles for the home view */
|
||||
.gateway-home {
|
||||
display: flex;
|
||||
width: min(100% - 24px, 700px);
|
||||
margin: 120px auto 30px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.gateway-home h2 {
|
||||
margin: 0 0 2px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: min(100%, 450px);
|
||||
overflow: hidden;
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
background: #303030;
|
||||
}
|
||||
|
||||
.login-card h3 {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #555;
|
||||
background: #444;
|
||||
padding: 6px 12px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login-card form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.8fr;
|
||||
gap: 12px 10px;
|
||||
align-items: center;
|
||||
padding: 18px 14px;
|
||||
}
|
||||
|
||||
.login-card label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-card input {
|
||||
min-width: 0;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 4px;
|
||||
background: #ddd;
|
||||
color: #303030;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.login-card input:focus {
|
||||
border-color: #8bb8e5;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 3px rgb(55 90 127 / 35%);
|
||||
}
|
||||
|
||||
.kakao-button,
|
||||
.login-button {
|
||||
min-height: 40px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.kakao-button {
|
||||
background: #fee500;
|
||||
color: #191919;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
background: #375a7f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-button:hover,
|
||||
.login-button:focus {
|
||||
background: #2f4d6c;
|
||||
}
|
||||
|
||||
.login-button:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
margin: 0 14px 14px;
|
||||
color: #ff8a80;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
width: min(100%, 700px);
|
||||
overflow: hidden;
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.status-card > header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #555;
|
||||
background: #444;
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
.map-frame {
|
||||
width: 100%;
|
||||
min-height: 320px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
display: grid;
|
||||
min-height: 320px;
|
||||
place-items: center;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.status-summary {
|
||||
margin: 0;
|
||||
padding: 8px 18px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
float: right;
|
||||
margin: 0 8px 8px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 519px) {
|
||||
.gateway-home {
|
||||
width: calc(100% - 16px);
|
||||
margin-top: 110px;
|
||||
}
|
||||
|
||||
.login-card form {
|
||||
grid-template-columns: 0.85fr 1.35fr;
|
||||
}
|
||||
|
||||
.map-frame,
|
||||
.status-message {
|
||||
min-height: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user