Refactor UI components for improved responsiveness and styling
- Updated layout and padding for main page, login, profile, and register pages to enhance mobile responsiveness. - Adjusted text sizes and spacing for better readability across different screen sizes. - Modified button styles and hover effects for a more consistent user experience. - Changed database ID in wrangler configuration for deployment.
This commit is contained in:
parent
bdffa90305
commit
2e3d62aa58
3063
pnpm-lock.yaml
generated
3063
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -324,29 +324,29 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-100 flex items-center justify-center p-4">
|
||||
<div class="max-w-3xl w-full bg-white rounded-2xl shadow-xl p-8" class:opacity-30={isDuplicateLogin} class:pointer-events-none={isDuplicateLogin}>
|
||||
<div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-100 flex items-center justify-center p-2 md:p-4">
|
||||
<div class="max-w-3xl w-full bg-white rounded-2xl shadow-xl p-4 md:p-8" class:opacity-30={isDuplicateLogin} class:pointer-events-none={isDuplicateLogin}>
|
||||
<!-- 로그인 상태 표시 -->
|
||||
{#if data.user}
|
||||
<div class="mb-4 flex justify-between items-center bg-blue-50 p-4 rounded-lg">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">로그인됨</p>
|
||||
<p class="font-semibold text-gray-800">{data.user.nickname} ({data.user.email})</p>
|
||||
<div class="mb-4 flex flex-col md:flex-row justify-between items-center bg-blue-50 p-3 md:p-4 rounded-lg gap-3 md:gap-0">
|
||||
<div class="text-center md:text-left w-full md:w-auto">
|
||||
<p class="text-xs md:text-sm text-gray-600">로그인됨</p>
|
||||
<p class="font-semibold text-gray-800 text-sm md:text-base">{data.user.nickname} <span class="hidden sm:inline">({data.user.email})</span></p>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="px-4 py-2 bg-white text-black border-2 border-black rounded-lg font-semibold flex items-center gap-2">
|
||||
<div class="flex gap-2 items-center w-full md:w-auto justify-center md:justify-end">
|
||||
<div class="px-3 py-1.5 md:px-4 md:py-2 bg-white text-black border-2 border-black rounded-lg font-semibold flex items-center gap-2 text-xs md:text-sm">
|
||||
<div class="w-2 h-2 rounded-full bg-black {isConnected ? 'animate-pulse' : 'opacity-50'}"></div>
|
||||
<span>{online}명 접속</span>
|
||||
<span>{online}명</span>
|
||||
</div>
|
||||
<a
|
||||
href="/profile"
|
||||
class="px-4 py-2 bg-white hover:bg-gray-100 text-black border-2 border-black rounded-lg transition"
|
||||
class="px-3 py-1.5 md:px-4 md:py-2 bg-white hover:bg-gray-100 text-black border-2 border-black rounded-lg transition text-xs md:text-sm whitespace-nowrap"
|
||||
>
|
||||
프로필 수정
|
||||
프로필
|
||||
</a>
|
||||
<button
|
||||
onclick={logout}
|
||||
class="px-4 py-2 bg-white hover:bg-gray-100 text-black border-2 border-black rounded-lg transition"
|
||||
class="px-3 py-1.5 md:px-4 md:py-2 bg-white hover:bg-gray-100 text-black border-2 border-black rounded-lg transition text-xs md:text-sm whitespace-nowrap"
|
||||
>
|
||||
로그아웃
|
||||
</button>
|
||||
@ -368,11 +368,11 @@
|
||||
|
||||
<!-- 주사위 디스플레이 -->
|
||||
{#if dice1 !== null && dice2 !== null && dice3 !== null}
|
||||
<div class="mb-6 p-4 bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl border border-yellow-200">
|
||||
<div class="mb-4 md:mb-6 p-3 md:p-4 bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl border border-yellow-200">
|
||||
<!-- 3개의 주사위 -->
|
||||
<div class="flex justify-center gap-4 mb-4">
|
||||
<div class="flex justify-center gap-3 md:gap-4 mb-2 md:mb-4">
|
||||
{#each [dice1, dice2, dice3] as dice}
|
||||
<div class="relative">
|
||||
<div class="relative transform scale-90 md:scale-100">
|
||||
<div class="w-12 h-12 bg-white rounded-xl shadow-md border-2 border-gray-700 p-1">
|
||||
<div class="grid grid-cols-3 gap-0.5 h-full">
|
||||
{#each getDiceDots(dice) as row}
|
||||
@ -397,29 +397,29 @@
|
||||
{/if}
|
||||
|
||||
<!-- 카운트다운 타이머 -->
|
||||
<div class="mb-6 p-4 bg-white rounded-xl">
|
||||
<div class="flex flex-col items-center justify-center gap-4">
|
||||
<div class="mb-4 md:mb-6 p-3 md:p-4 bg-white rounded-xl shadow-sm border border-gray-100">
|
||||
<div class="flex flex-col items-center justify-center gap-2 md:gap-4">
|
||||
<div class="text-sm font-semibold text-gray-700">
|
||||
{noMoreBet ? '🚫 No more bet' : '✅ Place your bet'}
|
||||
</div>
|
||||
<!-- 카운트다운 숫자 (축소) -->
|
||||
<div class="text-green-700 font-bold" style="font-size:20px;">
|
||||
<div class="text-green-700 font-bold text-2xl md:text-3xl">
|
||||
<NumberFlow value={remainingTime} />s
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- 접속자 수 & 자본금 (2 columns) -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<div class="p-4 rounded-lg bg-green-50 border border-green-200 flex flex-col items-center justify-center">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="w-2.5 h-2.5 rounded-full {isConnected ? 'bg-green-500 animate-pulse' : 'bg-gray-400'}"></div>
|
||||
<div class="grid grid-cols-2 gap-3 md:gap-4 mb-4 md:mb-6">
|
||||
<div class="p-3 md:p-4 rounded-lg bg-green-50 border border-green-200 flex flex-col items-center justify-center">
|
||||
<div class="flex items-center gap-2 mb-1 md:mb-2">
|
||||
<div class="w-2 h-2 md:w-2.5 md:h-2.5 rounded-full {isConnected ? 'bg-green-500 animate-pulse' : 'bg-gray-400'}"></div>
|
||||
<span class="text-xs text-gray-600">{isConnected ? '연결됨' : '연결 대기'}</span>
|
||||
</div>
|
||||
<div class="text-3xl font-bold text-green-600"><NumberFlow value={online} /></div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-green-600"><NumberFlow value={online} /></div>
|
||||
<div class="text-xs text-gray-600 mt-1">실시간 접속자</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-amber-50 border border-amber-200 flex flex-col items-center justify-center">
|
||||
<div class="text-xs text-gray-600 mb-1">{nickname || '---'}</div>
|
||||
<div class="text-3xl font-bold text-amber-700"><NumberFlow value={capital} />원</div>
|
||||
<div class="p-3 md:p-4 rounded-lg bg-amber-50 border border-amber-200 flex flex-col items-center justify-center">
|
||||
<div class="text-xs text-gray-600 mb-1 truncate max-w-full px-2">{nickname || '---'}</div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-amber-700"><NumberFlow value={capital} /></div>
|
||||
<div class="text-xs text-gray-600 mt-1">현재 자본금</div>
|
||||
{#if betInfo && betInfo.length > 0}
|
||||
<div class="text-xs mt-1 text-gray-500">배팅 <NumberFlow value={betInfo.length} />회</div>
|
||||
@ -430,59 +430,59 @@
|
||||
|
||||
|
||||
<!-- 베팅 버튼 -->
|
||||
<div class="mb-6 p-4 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl border border-blue-200">
|
||||
<h2 class="text-xl font-bold text-center mb-4 text-gray-800">
|
||||
배팅 선택 (1000원씩 배팅)
|
||||
<div class="mb-6 p-3 md:p-4 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl border border-blue-200">
|
||||
<h2 class="text-lg md:text-xl font-bold text-center mb-3 md:mb-4 text-gray-800">
|
||||
배팅 선택 (1000원씩)
|
||||
</h2>
|
||||
|
||||
<!-- 홀/짝/대/소 버튼 (4개 컬럼) -->
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
|
||||
<button
|
||||
onclick={betOdd}
|
||||
disabled={!isConnected || noMoreBet || capital < 1000}
|
||||
class="px-4 py-4 bg-blue-500 text-white rounded-xl font-bold text-xl
|
||||
class="px-2 py-3 md:px-4 md:py-4 bg-blue-500 text-white rounded-xl font-bold text-lg md:text-xl
|
||||
hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed
|
||||
transition-all transform hover:scale-105"
|
||||
transition-all transform hover:scale-105 active:scale-95 shadow-md"
|
||||
>
|
||||
홀수
|
||||
{#if oddBet > 0}
|
||||
<div class="text-sm mt-1"><NumberFlow value={oddBet} />원</div>
|
||||
<div class="text-xs md:text-sm mt-1 bg-blue-700 rounded px-1"><NumberFlow value={oddBet} /></div>
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
onclick={betEven}
|
||||
disabled={!isConnected || noMoreBet || capital < 1000}
|
||||
class="px-4 py-4 bg-pink-500 text-white rounded-xl font-bold text-xl
|
||||
class="px-2 py-3 md:px-4 md:py-4 bg-pink-500 text-white rounded-xl font-bold text-lg md:text-xl
|
||||
hover:bg-pink-600 disabled:opacity-50 disabled:cursor-not-allowed
|
||||
transition-all transform hover:scale-105"
|
||||
transition-all transform hover:scale-105 active:scale-95 shadow-md"
|
||||
>
|
||||
짝수
|
||||
{#if evenBet > 0}
|
||||
<div class="text-sm mt-1"><NumberFlow value={evenBet} />원</div>
|
||||
<div class="text-xs md:text-sm mt-1 bg-pink-700 rounded px-1"><NumberFlow value={evenBet} /></div>
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
onclick={betBig}
|
||||
disabled={!isConnected || noMoreBet || capital < 1000}
|
||||
class="px-4 py-4 bg-white text-black border-2 border-black rounded-xl font-bold text-xl
|
||||
class="px-2 py-3 md:px-4 md:py-4 bg-white text-black border-2 border-black rounded-xl font-bold text-lg md:text-xl
|
||||
hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed
|
||||
transition-all transform hover:scale-105"
|
||||
transition-all transform hover:scale-105 active:scale-95 shadow-md"
|
||||
>
|
||||
대 (大)
|
||||
{#if bigBet > 0}
|
||||
<div class="text-sm mt-1"><NumberFlow value={bigBet} />원</div>
|
||||
<div class="text-xs md:text-sm mt-1 bg-gray-200 rounded px-1"><NumberFlow value={bigBet} /></div>
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
onclick={betSmall}
|
||||
disabled={!isConnected || noMoreBet || capital < 1000}
|
||||
class="px-4 py-4 bg-white text-black border-2 border-black rounded-xl font-bold text-xl
|
||||
class="px-2 py-3 md:px-4 md:py-4 bg-white text-black border-2 border-black rounded-xl font-bold text-lg md:text-xl
|
||||
hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed
|
||||
transition-all transform hover:scale-105"
|
||||
transition-all transform hover:scale-105 active:scale-95 shadow-md"
|
||||
>
|
||||
소 (小)
|
||||
{#if smallBet > 0}
|
||||
<div class="text-sm mt-1"><NumberFlow value={smallBet} />원</div>
|
||||
<div class="text-xs md:text-sm mt-1 bg-gray-200 rounded px-1"><NumberFlow value={smallBet} /></div>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
<title>로그인 - DD Game</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-900">
|
||||
<div class="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
|
||||
<h1 class="text-3xl font-bold text-center text-white mb-8">로그인</h1>
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
|
||||
<div class="bg-gray-800 p-4 md:p-8 rounded-lg shadow-xl w-full max-w-md">
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-center text-white mb-6 md:mb-8">로그인</h1>
|
||||
|
||||
<form method="POST" use:enhance class="space-y-6">
|
||||
{#if form?.incorrect}
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
<title>프로필 수정 - DD Game</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-900">
|
||||
<div class="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
|
||||
<h1 class="text-3xl font-bold text-center text-white mb-8">프로필 수정</h1>
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
|
||||
<div class="bg-gray-800 p-4 md:p-8 rounded-lg shadow-xl w-full max-w-md">
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-center text-white mb-6 md:mb-8">프로필 수정</h1>
|
||||
|
||||
<form method="POST" use:enhance class="space-y-6">
|
||||
{#if form?.success}
|
||||
|
||||
@ -23,9 +23,9 @@
|
||||
<title>회원가입 - DD Game</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-900">
|
||||
<div class="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
|
||||
<h1 class="text-3xl font-bold text-center text-white mb-8">회원가입</h1>
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
|
||||
<div class="bg-gray-800 p-4 md:p-8 rounded-lg shadow-xl w-full max-w-md">
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-center text-white mb-6 md:mb-8">회원가입</h1>
|
||||
|
||||
<form method="POST" use:enhance class="space-y-6">
|
||||
{#if form?.exists}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
{
|
||||
"binding": "DB",
|
||||
"database_name": "auth-db",
|
||||
"database_id": "local-db",
|
||||
"database_id": "ce63010b-2d04-4a24-900a-9d890775d09b",
|
||||
"preview_database_id": "local-db"
|
||||
}
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user