Redesign UI to be modern responsive and implement dynamic sub-menu illustration mapping

This commit is contained in:
sanjeok77
2026-06-23 09:16:37 +09:00
parent e521753b3d
commit 8c87fba54c
16 changed files with 383 additions and 262 deletions
+94 -117
View File
@@ -13,133 +13,110 @@
#-------------------------------------------------------------------------------
# 통상 표시용
sub layout_flag_0{
my @metu=('','(멸망)');
my $reset_time_out = int(($set-$time)/(3600*24));
print <<EOM;
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" width="540">
<div class="game-layout">
<!-- 하단 메인 정보 영역 -->
<div style="display: flex; flex-direction: column; gap: 20px;">
EOM
if($log){
print <<"EOM";
<table width="100%" border="0" cellspacing="4" cellpadding="10" height="100" bgcolor="#444466">
<tr>
<td bgcolor="#000000" align="left" valign="top">
<tt class="moji1">
$log
</tt>
</td>
</tr>
</table>
<br>
print <<EOM;
<div class="card">
<div class="card-title">행동 로그</div>
<div class="moji1">$log</div>
</div>
EOM
}
}
my @metu=('','(멸망)');
my $reset_time_out = int(($set-$time)/(3600*24));
print <<"EOM";
<table width="100%" border="0" cellspacing="4" cellpadding="4" bgcolor="#444466">
<tr>
<td bgcolor="#000000" align="center">
<tt class="moji1">
$bmes
</tt>
</td>
</tr>
</table>
print <<EOM;
<div class="card">
<div class="card-title">공지사항</div>
<div class="moji1">$bmes</div>
</div>
<br>
<div class="card" style="overflow-x: auto;">
<div class="card-title">국가 정세</div>
<table class="bar" style="width: 100%; border-collapse: collapse; text-align: center; color: var(--text-primary);">
<thead>
<tr style="background-color: rgba(255,255,255,0.05);">
<th style="padding: 10px; border-bottom: 1px solid var(--border-color);">&nbsp;</th>
<th style="padding: 10px; border-bottom: 1px solid var(--border-color); background-color: $color[1]; color: #fff;">$cmp[1]$metu[$ce1]</th>
<th style="padding: 10px; border-bottom: 1px solid var(--border-color); background-color: $color[2]; color: #fff;">$cmp[2]$metu[$ce2]</th>
<th style="padding: 10px; border-bottom: 1px solid var(--border-color); background-color: $color[3]; color: #fff;">$cmp[3]$metu[$ce3]</th>
<th style="padding: 10px; border-bottom: 1px solid var(--border-color); background-color: $color[4]; color: #fff;">$cmp[4]$metu[$ce4]</th>
<th style="padding: 10px; border-bottom: 1px solid var(--border-color); background-color: $color[5]; color: #fff;">$cmp[5]$metu[$ce5]</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color); font-weight: bold; background-color: rgba(255,255,255,0.02);">총 국력</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cn1</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cn2</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cn3</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cn4</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cn5</td>
</tr>
<tr>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color); font-weight: bold; background-color: rgba(255,255,255,0.02);">국가 예산</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cg1</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cg2</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cg3</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cg4</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cg5</td>
</tr>
<tr>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color); font-weight: bold; background-color: rgba(255,255,255,0.02);">총 군량</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cf1</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cf2</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cf3</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cf4</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cf5</td>
</tr>
<tr>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color); font-weight: bold; background-color: rgba(255,255,255,0.02);">총 병사 수</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cs1</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cs2</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cs3</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cs4</td>
<td style="padding: 8px; border-bottom: 1px solid var(--border-color);">$cs5</td>
</tr>
<tr>
<td style="padding: 8px; font-weight: bold; background-color: rgba(255,255,255,0.02);">소속 인원</td>
<td style="padding: 8px;">$c1/$c1a</td>
<td style="padding: 8px;">$c2/$c2a</td>
<td style="padding: 8px;">$c3/$c3a</td>
<td style="padding: 8px;">$c4/$c4a</td>
<td style="padding: 8px;">$c5/$c5a</td>
</tr>
</tbody>
</table>
</div>
</div>
<table width="100%" border="0" cellspacing="4" cellpadding="0" bgcolor="#444466">
<tr>
<td bgcolor="#000000" align="left" valign="top">
<!-- $rst로 만들었던 표시 -->
<table border=0 cellpadding=2 cellspacing=2 width=100% align=center>
<tr>
<td bgcolor=#CCCCFF width=72>&nbsp;</td>
<td bgcolor=$color[1] align=center width=92>$cmp[1]$metu[$ce1]</td>
<td bgcolor=$color[2] align=center width=92>$cmp[2]$metu[$ce2]</td>
<td bgcolor=$color[3] align=center width=92>$cmp[3]$metu[$ce3]</td>
<td bgcolor=$color[4] align=center width=92>$cmp[4]$metu[$ce4]</td>
<td bgcolor=$color[5] align=center width=92>$cmp[5]$metu[$ce5]</td>
</tr>
<tr>
<td bgcolor=#CCCCFF>총 국력</td>
<td bgcolor=$color[1] align=center>$cn1</td>
<td bgcolor=$color[2] align=center>$cn2</td>
<td bgcolor=$color[3] align=center>$cn3</td>
<td bgcolor=$color[4] align=center>$cn4</td>
<td bgcolor=$color[5] align=center>$cn5</td>
</tr>
<tr>
<td bgcolor=#CCCCFF>국가 예산</td>
<td bgcolor=$color[1] align=center>$cg1</td>
<td bgcolor=$color[2] align=center>$cg2</td>
<td bgcolor=$color[3] align=center>$cg3</td>
<td bgcolor=$color[4] align=center>$cg4</td>
<td bgcolor=$color[5] align=center>$cg5</td>
</tr>
<tr>
<td bgcolor=#CCCCFF>총 군량</td>
<td bgcolor=$color[1] align=center>$cf1</td>
<td bgcolor=$color[2] align=center>$cf2</td>
<td bgcolor=$color[3] align=center>$cf3</td>
<td bgcolor=$color[4] align=center>$cf4</td>
<td bgcolor=$color[5] align=center>$cf5</td>
</tr>
<tr><td bgcolor=#CCCCFF>총 병사 수</td>
<td bgcolor=$color[1] align=center>$cs1</td>
<td bgcolor=$color[2] align=center>$cs2</td>
<td bgcolor=$color[3] align=center>$cs3</td>
<td bgcolor=$color[4] align=center>$cs4</td>
<td bgcolor=$color[5] align=center>$cs5</td>
</tr>
<tr>
<td bgcolor=#CCCCFF>소속 인원</td>
<td bgcolor=$color[1] align=center>$c1/$c1a</td>
<td bgcolor=$color[2] align=center>$c2/$c2a</td>
<td bgcolor=$color[3] align=center>$c3/$c3a</td>
<td bgcolor=$color[4] align=center>$c4/$c4a</td>
<td bgcolor=$color[5] align=center>$c5/$c5a</td>
</tr>
</table>
<!-- 여기까지 -->
</td>
</tr>
</table>
<!-- 하단 사이드 정보 영역 -->
<div style="display: flex; flex-direction: column; gap: 20px;">
<div class="card">
<div class="card-title">시스템 정보</div>
<div class="moji2">
&nbsp;&nbsp;제 $goal_no 기<br>
&nbsp;&nbsp;통일 기한까지 남은 시간: $reset_time_out일
</div>
</div>
</td>
<td align="right" valign="top" width="190">
<table width="190" border="0" cellspacing="4" cellpadding="4" bgcolor="#444466" height="140">
<tr>
<td bgcolor="#000000" align="left" valign="top" class="moji2">
<div align="center">- System Infomation -</div>
<hr size="2" noshade color="#9999bb" width="100%">
&nbsp;&nbsp;제 $goal_no 기<br>
&nbsp;&nbsp;통일 기한까지 남은 시간: $reset_time_out일
<div class="card">
<div class="card-title">접속자 정보</div>
<div class="moji2">
참가 총수: $all_mem명 / 정원 $sanka명<br>
통일 국력: $data_reset&nbsp;&nbsp;난이도: $reset_point
<hr style="margin: 10px 0;">
이전 패자: $hasya [$cmp[$hcamp]]
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<br>
<table width="190" border="0" cellspacing="4" cellpadding="4" bgcolor="#444466">
<tr>
<td bgcolor="#000000" align="left" valign="top" class="moji2">
참가 총수: $all_mem명 / 정원 $sanka명<br>
통일 국력: $data_reset&nbsp;&nbsp;난이도: $reset_point
<hr size="2" noshade color="#9999bb"width=160>
이전 패자: $hasya [$cmp[$hcamp]]
</td>
</tr>
</table>
</td>
</tr>
</table>
EOM
}