모듈:푸른 저편의 포리듬/ 캐릭터 프로필 문서 원본 보기

local p = {}

function p.main(frame)
    local args = frame:getParent().args

    local function F(x)
        return (args[x] and args[x] ~= "") and args[x] or "정보 없음"
    end

    return string.format([[
<div class="profile-container" style="border:2px solid %s; padding:10px;">

    <div class="profile-left">
        <div class="tab-buttons">
            <button class="tab-btn active">애니</button>
            <button class="tab-btn">VN</button>
        </div>

        <div class="profile-image-tabs">
            <div class="tab-content active">
                %s
            </div>
            <div class="tab-content">
                %s
            </div>
        </div>
    </div>

    <div class="profile-right">
        <h2>%s</h2>
        <span>%s / %s</span>

        <table class="profile-table">
            <tr><th>성별</th><td>%s</td></tr>
            <tr><th>나이</th><td>애니: %s / VN: %s</td></tr>
            <tr><th>생일</th><td>%s</td></tr>
            <tr><th>신장</th><td>%s</td></tr>
            <tr><th>체중</th><td>%s</td></tr>
            <tr><th>머리색</th><td>%s</td></tr>
            <tr><th>눈색</th><td>%s</td></tr>
        </table>
    </div>
</div>

<style>
.profile-container{display:flex; gap:10px;}
.profile-left{width:250px; text-align:center;}
.profile-right{flex:1;}

.tab-buttons{display:flex; gap:5px; margin-bottom:5px;}
.tab-btn{flex:1; padding:5px; cursor:pointer; background:#ddd; border:none;}
.tab-btn.active{background:#999; font-weight:bold;}

.tab-content{display:none;}
.tab-content.active{display:block;}

@media(max-width:720px){
    .profile-container{flex-direction:column;}
    .profile-left{width:100%;}
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function(){
    const buttons = document.querySelectorAll(".tab-btn");
    const tabs = document.querySelectorAll(".tab-content");

    buttons.forEach((btn,i)=>{
        btn.onclick=function(){
            buttons.forEach(b=>b.classList.remove("active"));
            tabs.forEach(t=>t.classList.remove("active"));
            btn.classList.add("active");
            tabs[i].classList.add("active");
        }
    });
});
</script>
]], 
args["색상"] or "black",
args["이미지_애니"] and ("[[파일:"..args["이미지_애니"].."|200px]]") or "이미지 없음",
args["이미지_VN"] and ("[[파일:"..args["이미지_VN"].."|200px]]") or "이미지 없음",
F("이름"), F("이름_일어"), F("이름_영어"),
F("성별"), F("나이_애니"), F("나이_VN"),
F("생일"), F("신장"), F("체중"),
F("머리색"), F("눈색")
)
end

return p