Redesign UI to be modern responsive and implement dynamic sub-menu illustration mapping
This commit is contained in:
+94
-117
@@ -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);"> </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> </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">
|
||||
제 $goal_no 기<br>
|
||||
통일 기한까지 남은 시간: $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%">
|
||||
제 $goal_no 기<br>
|
||||
통일 기한까지 남은 시간: $reset_time_out일
|
||||
<div class="card">
|
||||
<div class="card-title">접속자 정보</div>
|
||||
<div class="moji2">
|
||||
참가 총수: $all_mem명 / 정원 $sanka명<br>
|
||||
통일 국력: $data_reset 난이도: $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 난이도: $reset_point
|
||||
<hr size="2" noshade color="#9999bb"width=160>
|
||||
이전 패자: $hasya [$cmp[$hcamp]]
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
EOM
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user