틀:대력계 뉴스: 두 판 사이의 차이
편집 요약 없음 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
{{#css: | {{#css: | ||
.war- | /* 기존 폰트 및 스타일 유지 */ | ||
.war-dashboard { | |||
max-width: 720px; | max-width: 720px; | ||
margin: 1.5em auto; | margin: 1.5em auto; | ||
border-radius: 12px; | border-radius: 12px; | ||
font-family: "Hahmlet", serif; | font-family: "Hahmlet", serif; | ||
border: 3px solid light-dark(#d1c4b6, #696058); | |||
background: radial-gradient(circle at 30% 20%,rgba(255,255,255,0.15),transparent 40%), | |||
linear-gradient(180deg,light-dark(#f5efe3, #2b251e),light-dark(#e4dbc6, #15120e)); | |||
overflow: hidden; | |||
} | } | ||
/* 탭 메뉴 스타일 */ | |||
.war-tabs { | .war-tabs { | ||
display: flex; | display: flex; | ||
background: rgba(0, 0, 0, 0.05); | |||
border-bottom: 2px solid #9c8f81; | |||
} | } | ||
.war-tab { | .war-tab-item { | ||
flex: 1; | |||
text-align: center; | |||
padding: 12px 0; | |||
font-weight: 700; | |||
cursor: pointer; | |||
color: #524940; | |||
transition: 0.3s; | |||
border-right: 1px solid #9c8f81; | |||
} | } | ||
.war-tab: | .war-tab-item:last-child { border-right: none; } | ||
background: light-dark(# | .war-tab-item.active { | ||
background: light-dark(#d1c4b6, #4a423a); | |||
color: #fff; | |||
} | } | ||
.war- | /* 정보창 레이아웃 */ | ||
.war-info-container { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 15px; | |||
padding: 20px; | |||
} | } | ||
. | .info-box { | ||
background: rgba(0, 0, 0, 0.03); | |||
border: 1px solid #9c8f81; | |||
border-radius: 8px; | |||
padding: 12px; | |||
} | } | ||
. | .info-title { | ||
font-size: 0.9em; | |||
font-weight: 700; | |||
color: #8b7d6b; | |||
margin-bottom: 8px; | |||
border-bottom: 1px solid #d1c4b6; | |||
padding-bottom: 4px; | |||
} | } | ||
.monarch-profile { | |||
. | display: flex; | ||
align-items: center; | |||
gap: 12px; | |||
} | } | ||
. | .monarch-img { | ||
width: 60px; | |||
height: 60px; | |||
border-radius: 50%; | |||
width: | background: #ccc; /* 실제 이미지 주소로 대체 가능 */ | ||
border: 2px solid #ac8353; | |||
border-radius: | |||
} | } | ||
.status-item { | |||
display: flex; | |||
justify-content: space-between; | |||
font-size: 0.9em; | |||
margin-bottom: 4px; | |||
} | } | ||
. | .status-val-plus { color: #4c7f55; font-weight: 700; } | ||
.status-val-minus { color: #f5574c; font-weight: 700; } | |||
}} | |||
} | |||
} | |||
<div class="war-dashboard"> | |||
<div class="war-tabs"> | |||
<div class="war-tab-item">국가 정보</div> | |||
<div class="war-tab-item active">외교 상황</div> | |||
<div class="war-tab-item">군사 편제</div> | |||
<div class="war-tab-item">기술 연구</div> | |||
</div> | |||
<div class="war- | <div class="war-info-container"> | ||
<div class="info-box"> | |||
<div class="info-title">현재의 통치자</div> | |||
<div class="monarch-profile"> | |||
<div class="monarch-img"></div> | |||
<div> | |||
<div style="font-weight: 700; font-size: 1.1em;">니콜라이 2세</div> | |||
<div style="font-size: 0.8em; color: #666;">전러시아의 황제</div> | |||
</div> | |||
</div> | |||
<div style="margin-top: 10px; font-size: 0.85em; font-style: italic;"> | |||
"제국은 결코 굴복하지 않을 것이오." | |||
</div> | |||
</div> | |||
<div | <div class="info-box"> | ||
<div class=" | <div class="info-title">국가 역량</div> | ||
<div class="status-item"><span>정치적 안정도</span><span class="status-val-minus">32%</span></div> | |||
<div class=" | <div class="status-item"><span>전쟁 지지율</span><span class="status-val-plus">68%</span></div> | ||
<div class="status-item"><span>산업 동원령</span><span>부분 동원</span></div> | |||
</div> | |||
</div> | |||
</div> | |||
<div | <div class="info-box" style="grid-column: span 2;"> | ||
<div class="info-title">주요 외교 관계</div> | |||
<div style="display: flex; justify-content: space-around; padding: 5px 0;"> | |||
<div style="text-align: center;"> | |||
{{국기|프랑스|25px}}<br><span style="font-size: 0.8em;">동맹 (우호)</span><br><span class="status-val-plus">+150</span> | |||
</div> | |||
</div> | <div style="text-align: center;"> | ||
{{국기|영국|25px}}<br><span style="font-size: 0.8em;">협상 (친선)</span><br><span class="status-val-plus">+85</span> | |||
</div> | |||
<div style="text-align: center;"> | |||
{{국기|독일|25px}}<br><span style="font-size: 0.8em;">경계 (적대)</span><br><span class="status-val-minus">-120</span> | |||
</div> | |||
<div style="text-align: center;"> | |||
{{국기|오헝|25px}}<br><span style="font-size: 0.8em;">긴장 (심각)</span><br><span class="status-val-minus">-195</span> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div | <div class="war-news-headline" style="border-top: 1px solid #9c8f81; padding-top: 20px;">사라예보의 총성</div> | ||
<div class="war-news-meta">1914년 6월 28일</div> | |||
<div class="war-news-body"> | |||
오늘 오전 보스니아 사라예보에서 <span style="color:#546b8f; font-weight: bold;">오스트리아-헝가리 제국</span>의 황태자 프란츠 페르디난트 대공과 그의 부인 조피 대공비가 무장 괴한의 총격으로 사망했습니다... | |||
</div> | |||
</div> | |||
< | <hr role="selection"> | ||
<div class="war-news-button" style="background: linear-gradient(to bottom, #5d6953, #36402d); color: #f6f1e7;"> | |||
<span style="text-shadow: 0px 1px 3px #00000080;">슬라브 형제는 우리의 책임이다.</span><br> | |||
<span style="font-size: 0.86em; opacity: 86%;">{{대력계 아이콘|외교|20px}} 오스트리아-헝가리 <span style="color:#f5574c">-80</span></span> | |||
</div> | |||
</div> | </div> | ||