Fix layout errors in main templates and modernize login/registration screens

This commit is contained in:
sanjeok77
2026-06-23 09:22:40 +09:00
parent 8c87fba54c
commit b7ae8f291e
4 changed files with 216 additions and 243 deletions
+69 -146
View File
@@ -22,170 +22,93 @@ $help_i = "./html/Help_i.html"; # 사용설명서[MV]
# 以下処理 基本的にこれ以下はいじらないように。
&get_time; # 日時取得
&axs_check; # アクセスチェック
&read_data_index; # ログデータ読み込み
print "Content-type: text/html; charset=UTF-8\n\n" ;
# メニュー表示
($mv_mode eq 'mv') ? &html_top_mv : &html_top_pc ;
# 削除・移動・変更不可
&copyright;
exit;
#-------------------------------------------------------------------------------
# html生成(PC)
sub html_top_pc{
&read_data_index; # ログデータ読みsub html_top_pc{
print <<"EOM";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$titleh</title>
<style type="text/css">
<!--
.button1{
font-family: "MS Pゴシック", "Osaka"; font-size: 12px; font-weight: 400; color: #bbbbcc;
border: 2px #666699 ridge; cursor: hand; background-color: #222244;
width:100px;
}
body,td { font-size: 10px; color: #aaaab9; background-color: #000000; cursor: crosshair}
.bar {
scrollbar-face-color: #333333;
scrollbar-highlight-color: #333333;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #000000;
scrollbar-3d-light-color: #ffffff;
scrollbar-dark-shadow-color: #000000
}
-->
</style>
<link rel="stylesheet" type="text/css" href="$css">
</head>
<body bgcolor="#000000" text="#aaaaaa" link="#b5a7cF" vlink="#b5a7cF" alink="#b5a7cF" class="bar">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" align="center">
<tr>
<td align="center" valign="middle">
<body class="modern-ui">
<div class="game-container">
<div class="card" style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
<div class="title-images" style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
<img src="$imgs/title_text.png" style="max-height: 56px;">
<img src="$imgs/title_game.png" style="max-height: 52px;">
</div>
<img src="$imgs/fairy2_la.jpg" style="border-radius: 8px; max-height: 120px; border: 1px solid var(--border-color);">
</div>
<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr>
<td align="center" valign="top"><img src="$imgs/title_text.png" width="166" height="56"></td>
<td rowspan="2"><img src="$imgs/fairy2_la.jpg" width="110" height="160"></td>
</tr>
<tr>
<td align="center" valign="top"><img src="$imgs/title_game.png" width="220" height="52"></td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<form method="$method" action="$script" name="ore_">
<td align="left" valign="top">
<tt>
<span style="font-size:12px">유구한 대지로</span><br>
<div class="game-layout">
<!-- 로그인 폼 및 링크 -->
<div style="display: flex; flex-direction: column; gap: 20px;">
<div class="card">
<div class="card-title">유구한 대지로 로그인</div>
EOM
if($now_nm_cnt>=$play_limit){
print qq|<br><span style="color:#dddd00;font-size:12px">현재 로그인 제한 중</span><br><br>|;
}
else{
print qq|<div style="color:#ffdd00; font-weight:bold; margin-bottom:15px;">현재 로그인 제한 중</div>|;
} else {
print <<"EOM";
유저 ID:<input type="text" name="id" value="" class="button1" style="width:95px">
<br>
비밀번호:<input type="password" name="pw" value="" class="button1" style="width:60px" maxlength="8">
<input type="submit" value="IN" class="button1" style="width:30px">
<input type="hidden" name="mode" value="1">
<form method="$method" action="$script" name="ore_" style="display: flex; flex-direction: column; gap: 15px;">
<input type="hidden" name="mode" value="1">
<div>
<label style="display:block; margin-bottom:5px; color:var(--text-secondary); font-size:12px;">유저 ID</label>
<input type="text" name="id" value="" class="button1" style="width:100%; text-align:left; padding-left:12px; margin-bottom:0;">
</div>
<div>
<label style="display:block; margin-bottom:5px; color:var(--text-secondary); font-size:12px;">비밀번호</label>
<input type="password" name="pw" value="" class="button1" style="width:100%; text-align:left; padding-left:12px; margin-bottom:0;" maxlength="8">
</div>
<input type="submit" value="시작하기 (IN)" class="button1" style="width:100%; margin-top:5px;">
</form>
EOM
}
}
print <<"EOM";
</tt>
</td>
</form>
<td rowspan=4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td rowspan=2 align="left" valign="top" nowrap style="font-size:12px;">
&gt;&gt; 플레이 중인 참가자 [ $now_nm_cnt 명]
<hr size=1 style="color:bbbbcc">
<div style="height:140px; overflow-y:auto; padding:2; background-color:#292929" class="bar">
$now_nm
</div>
<!-- 네비게이션 및 메뉴 링크 -->
<div class="card">
<div class="card-title">메인 메뉴</div>
<div style="display: flex; flex-direction: column; gap: 12px;">
<div>
<a href="$ore_reg" class="button1" style="width:100%; text-decoration:none; display:block; box-sizing:border-box;">신규 등록</a>
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px; margin-left:5px;">등록하기 전에 반드시 설명서를 정독해주세요.</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<a href="$help" class="button1" style="text-decoration:none; padding:8px 5px; display:block; box-sizing:border-box;">사용 설명서</a>
<a href="$hist?mode=guest" class="button1" style="text-decoration:none; padding:8px 5px; display:block; box-sizing:border-box;">과거의 영광</a>
<a href="$home" class="button1" style="text-decoration:none; padding:8px 5px; display:block; box-sizing:border-box;">본관 이동</a>
<a href="$hist_hasya" class="button1" style="text-decoration:none; padding:8px 5px; display:block; box-sizing:border-box;">죄와 벌의 석비</a>
</div>
</div>
</div>
</div>
<!-- 플레이어 상태 및 정보 -->
<div style="display: flex; flex-direction: column; gap: 20px;">
<div class="card" style="height: 100%; display: flex; flex-direction: column; box-sizing: border-box;">
<div class="card-title">현재 접속자 [$now_nm_cnt명]</div>
<div style="flex:1; min-height:180px; max-height:220px; overflow-y:auto; padding:10px; background: rgba(0,0,0,0.25); border-radius: 8px; border: 1px solid var(--border-color); line-height: 1.6;" class="bar">
$now_nm
</div>
<div style="margin-top:15px; font-size:12px; color:var(--text-secondary); line-height: 1.7;">
• 현재 등록 인원: <b>$now_sanka명</b> / 최대 <b>$sanka명</b><br>
• 방치 삭제 기간: <b>$del_limit일</b><br>
• 플레이 제한 시간: <b>$safe_time</b>
</div>
</div>
</div>
</div>
</div>
<td>
</tr>
<tr>
<td align="left" valign="top">
<tt>
<br>
<br>
<span style="font-size:12px"><a href="$ore_reg">신규 등록</a></span><br>
등록하기 전에 반드시 ↓ 내용을 읽어주세요.
</tt>
</td>
</tr>
<tr>
<td align="left" valign="top">
<tt>
<br>
<br>
<span style="font-size:12px"><a href="$help">사용 설명서</a></span><br>
안 읽으면 도통 이해하기 힘들걸요?
</tt>
</td>
<td align="left">
<tt>
<br>
<br>
<span style="font-size:12px"><a href="$hist?mode=guest">과거의 영광</a></span><br>
유구한 대지의 역사를 돌아보다
</tt>
</td>
</tr>
<tr>
<td align="left" valign="top">
<tt>
<br>
<br>
<span style="font-size:12px"><a href="$home">본관으로 돌아가기</a></span><br>
</tt>
</td>
<td align="left">
<tt>
<br>
<br>
<span style="font-size:12px"><a href="$hist_hasya">죄와 벌++의 석비</a></span><br>
유구한 대지에서 패권을 쥔 자의 이름
</tt>
</td>
</tr>
<tt>
<td align="left" valign="top" colspan="3">
<tt>
<br>
<br>
<span style="font-size:12px"><br>
  &gt;&gt; 현재 등록 인원 [ $now_sanka 명] 최대 등록 인원 [ $sanka 명]<br>
    삭제 방치 기간 [ $del_limit 일] 플레이 제한 시간대 [ $safe_time ]
</span>
<br><br>
<span style="font-size:12px"><br>
  모바일(i-mode, J-Sky) 완벽 대응, ezweb 대응. PC가 필요 없습니다.<br>
  모바일에서 PC와 동일한 URL로 접속하시면 됩니다.
</span>
</tt>
</td>
</tr>
</table>
</td>
</tr>
</table>
EOM
}
#-------------------------------------------------------------------------------
#-------------------------------------------------------------------------------
# html生成(モバイル)
sub html_top_mv{