sanjeok77/ore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
inc/ore_sub-base-p1_pc.cgi
+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
}
inc/ore_sub-base_pc.cgi
+98 -109
View File
@@ -20,11 +20,24 @@ sub html{
# 마우스 자동 조작 치트 격퇴 전투 시에 4/400 확률로 발동
my $no_mouse = ($no_mouse && $type eq '수행중') ? int(rand(400)) : 100 ;
# 활성화된 이미지 결정 (동적 이미지 매핑)
my $menu_img = "lobby.png";
if ($type eq '수행' || $type eq '수행중' || $cmd == 1) { $menu_img = "training.png"; }
elsif ($type eq '내정' || $cmd == 2) { $menu_img = "politics.png"; }
elsif ($type eq '전쟁' || $type eq '전쟁중' || $cmd == 3) { $menu_img = "war.png"; }
elsif ($type eq '능력' || $cmd == 4) { $menu_img = "ability.png"; }
elsif ($type eq '사관' || $cmd == 5) { $menu_img = "changes.png"; }
elsif ($type eq '정보' || $cmd == 6) { $menu_img = "infomation.png"; }
elsif ($type eq '토벌' || $type eq '토벌 중' || $cmd == 7) { $menu_img = "subdue.png"; }
elsif ($type eq '군사' || $cmd == 8) { $menu_img = "mission.png"; }
elsif ($type eq '쇼핑' || $cmd == 20) { $menu_img = "shop.png"; }
print <<EOM;
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$titleh</title>
<link rel=stylesheet type="text/css" href="$css" title="style">
<link rel="stylesheet" type="text/css" href="$css">
EOM
# Javascript 자동 조작 치트 방어(frame 방어)
@@ -42,137 +55,113 @@ EOM
print <<EOM;
</head>
<body $body class="bar">
<center>
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
$title
</td>
</tr>
</table>
<body>
<div class="game-container">
<div class="card">
<div class="title-section">
<div class="title-images">
<img src="./imgs/title_text.png">
<img src="./imgs/title_game.png">
</div>
</div>
<!-- 하위 메뉴 맞춤형 동적 이미지 영역 -->
<img class="menu-illustration" src="./imgs/$menu_img" alt="Menu Illustration">
</div>
<table width="740" border="0" cellspacing="0" cellpadding="0" height="300">
<tr>
<td align="center" valign="middle" width="500">
<table width="540" border="0" cellspacing="6" cellpadding="6" height="285" bgcolor="#444466">
<tr>
<td bgcolor="#000000" align="left" valign="top">
$log1
</td>
</tr>
</table>
</td>
<td align="right" valign="middle" width="200">
<table border="0" cellspacing="0" cellpadding="5" height="285">
<tr>
<form method="get" action="$index">
<td bgcolor="#000000" valign="middle">
<input type="submit" value="† 타이틀로 돌아가기 †" class="button1">
</td>
</form>
</tr>
<div class="game-layout">
<!-- 메인 콘텐츠 영역 (로그 및 행동 폼) -->
<main class="card">
$log1
</main>
<!-- 사이드바 네비게이션 메뉴 -->
<aside class="card">
<div class="card-title">네비게이션</div>
EOM
# 사이드바 버튼 출력
print <<EOM;
<form method="get" action="$index">
<input type="submit" value="† 타이틀로 돌아가기 †" class="button1">
</form>
EOM
if($no_mouse==0){
print qq|<tr>$log2</tr>|;
# $log2 는 수행 등 커맨드 폼의 셀렉트 및 NEXT 버튼
print $log2;
}
print<<EOM;
<tr>
<form method="$method" action="$park">
<td valilgn="middle">
<input type="hidden" name="id" value="$id">
<input type="hidden" name="pw" value="$pw">
<input type="hidden" name="camp" value="$camp">
<input type="hidden" name="sogo" value="$sogo">
<input type="submit" value="† 국제 교류 광장 †" class="button1">
</td>
</form>
</tr>
print <<EOM;
<form method="$method" action="$park">
<input type="hidden" name="id" value="$id">
<input type="hidden" name="pw" value="$pw">
<input type="hidden" name="camp" value="$camp">
<input type="hidden" name="sogo" value="$sogo">
<input type="submit" value="† 국제 교류 광장 †" class="button1">
</form>
EOM
if($no_mouse==1){
print qq|<tr>$log2</tr>|;
print $log2;
}
print<<EOM;
<tr>
<form method="$method" action="$hist">
<td valilgn="middle">
<input type="hidden" name="id" value="$id">
<input type="hidden" name="pw" value="$pw">
<input type="submit" value="† 과거의 영광 †" class="button1">
</td>
</form>
</tr>
print <<EOM;
<form method="$method" action="$hist">
<input type="hidden" name="id" value="$id">
<input type="hidden" name="pw" value="$pw">
<input type="submit" value="† 과거의 영광 †" class="button1">
</form>
EOM
if(!$type && $cmd<=0){
print <<"EOM";
<tr>
<form method="$method" action="$script">
<td valilgn="middle">
<input type="hidden" name="id" value="$id">
<input type="hidden" name="pw" value="$pw">
<input type="hidden" name="cmd" value="20">
<input type="submit" value="† 쇼핑몰 †" class="button1">
</td>
</form>
</tr>
if(!$type && $cmd<=0){
print <<EOM;
<form method="$method" action="$script">
<input type="hidden" name="id" value="$id">
<input type="hidden" name="pw" value="$pw">
<input type="hidden" name="cmd" value="20">
<input type="submit" value="† 쇼핑몰 †" class="button1">
</form>
EOM
}
print <<"EOM";
<tr>
<form method="$method" action="$public">
<td valilgn="middle">
<input type="hidden" name="id" value="$id">
<input type="hidden" name="pw" value="$pw">
<input type="submit" value="† 공식 조약 †" class="button1">
</td>
</form>
</tr>
}
print <<EOM;
<form method="$method" action="$public">
<input type="hidden" name="id" value="$id">
<input type="hidden" name="pw" value="$pw">
<input type="submit" value="† 공식 조약 †" class="button1">
</form>
EOM
if($no_mouse==2){
print qq|<tr>$log2</tr>|;
print $log2;
}
print<<EOM;
<tr>
<form method="$method" action="$campbbs">
<td>
<input type="hidden" name="id" value="$id">
<input type="hidden" name="pw" value="$pw">
<input type="submit" value="† 국가별 작전 회의실 †" class="button1">
</td>
</form>
</tr>
EOM
if($no_mouse>=3){
print qq|<tr>$log2</tr>|;
}
print<<EOM;
</table>
</td>
</tr>
</table>
<br>
print <<EOM;
<form method="$method" action="$campbbs">
<input type="hidden" name="id" value="$id">
<input type="hidden" name="pw" value="$pw">
<input type="submit" value="† 국가별 작전 회의실 †" class="button1">
</form>
EOM
if($no_mouse>=3){
print $log2;
}
print <<EOM;
</aside>
</div>
EOM
my($uti, $sti, $cuti, $csti) = times();
$uti += $cuti;
$sti += $csti;
my($cpu) = $uti + $sti;
my $disp="CPUs($cpu): User($uti) System($sti)<br>";
my $disp="<div class='moji2'>CPUs($cpu): User($uti) System($sti)</div>";
if($layout_flag==1){
print <<EOM;
<table width="740" border="0" cellspacing="4" cellpadding="4" bgcolor="#444466">
<tr>
<td bgcolor="#000000" align="center" valign="top" height="120">
<tt class="moji1">
$log
</tt>
</td>
</tr>
</table>
<br><br>