import html

print("""
6줄을 붙여넣으세요.

형식:
아티스트|앨범명|승|패|득실|사진링크

마지막 줄까지 붙여넣은 뒤 실행하세요.
""")

data = []

# 정확히 6줄 입력
for rank in range(1, 7):

    line = input().strip()

    parts = [x.strip() for x in line.split("|")]

    if len(parts) != 6:
        print(f"{rank}위 입력 형식이 잘못되었습니다.")
        print("아티스트|앨범명|승|패|득실|사진링크")
        quit()

    artist, album, win, loss, diff, image = parts

    data.append({
        "artist": artist,
        "album": album,
        "win": win,
        "loss": loss,
        "diff": diff,
        "image": image
    })


def diff_html(value):

    try:
        number = int(value)

        if number > 0:
            return f'<span class="plus">+{number}</span>'

        if number < 0:
            return f'<span class="minus">{number}</span>'

        return '<span class="zero">0</span>'

    except:
        return html.escape(value)


rows = ""

for index, item in enumerate(data):

    rank = index + 1

    artist = html.escape(item["artist"])
    album = html.escape(item["album"])
    image = html.escape(item["image"], quote=True)
    win = html.escape(item["win"])
    loss = html.escape(item["loss"])

    rows += f"""
    <tr>

        <td class="rank">
            {rank}
        </td>

        <td class="photo">
            <img
                src="{image}"
                class="cover"
                alt=""
            >
        </td>

        <td class="name">
            <div class="artist">{artist}</div>
            <div class="album">{album}</div>
        </td>

        <td>{win}</td>

        <td>{loss}</td>

        <td>
            {diff_html(item["diff"])}
        </td>

    </tr>
    """


result = f"""<!DOCTYPE html>
<html lang="ko">

<head>

<meta charset="UTF-8">

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
>

<title>Ranking</title>

<style>

* {{
    box-sizing: border-box;
}}

body {{
    margin: 0;
    padding: 10px;
    background: #f3f4f6;
    font-family: Arial, "Noto Sans KR", sans-serif;
    color: #191919;
}}

.ranking {{
    width: 100%;
    max-width: 900px;
    margin: auto;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}}

.title {{
    padding: 20px 24px;
    font-size: 24px;
    font-weight: 900;
    border-bottom: 1px solid #eeeeee;
}}

table {{
    width: 100%;
    border-collapse: collapse;
}}

th {{
    padding: 12px 10px;
    background: #fafafa;
    color: #777;
    font-size: 13px;
}}

td {{
    padding: 14px 10px;
    text-align: center;
    border-top: 1px solid #eeeeee;
}}

.rank {{
    width: 55px;
    font-size: 22px;
    font-weight: 900;
}}

.photo {{
    width: 75px;
}}

.cover {{
    display: block;
    width: 58px;
    height: 58px;
    margin: auto;
    object-fit: cover;
    border-radius: 8px;
    background: #eeeeee;
}}

.name {{
    text-align: left;
}}

.artist {{
    font-size: 15px;
    font-weight: 800;
}}

.album {{
    margin-top: 4px;
    font-size: 13px;
    color: #777;
}}

.plus {{
    color: #e53935;
    font-weight: 800;
}}

.minus {{
    color: #2979ff;
    font-weight: 800;
}}

.zero {{
    color: #777;
    font-weight: 800;
}}


@media (max-width: 600px) {{

    body {{
        padding: 5px;
    }}

    .title {{
        padding: 15px;
        font-size: 20px;
    }}

    th,
    td {{
        padding: 9px 4px;
        font-size: 12px;
    }}

    .rank {{
        width: 35px;
        font-size: 18px;
    }}

    .photo {{
        width: 50px;
    }}

    .cover {{
        width: 44px;
        height: 44px;
    }}

    .artist {{
        font-size: 13px;
    }}

    .album {{
        font-size: 11px;
    }}

}}

</style>

</head>


<body>

<div class="ranking">

    <div class="title">
        RANKING
    </div>

    <table>

        <thead>

            <tr>
                <th>순위</th>
                <th>사진</th>
                <th style="text-align:left;">
                    아티스트 - 앨범명
                </th>
                <th>승</th>
                <th>패</th>
                <th>득실</th>
            </tr>

        </thead>

        <tbody>

            {rows}

        </tbody>

    </table>

</div>

</body>

</html>
"""


with open(
    "ranking.html",
    "w",
    encoding="utf-8"
) as f:

    f.write(result)


print("\n완료!")
print("ranking.html 생성됨")

print("\n아래는 생성된 HTML입니다.\n")
print(result)

Embed on website

To embed this project on your website, copy the following code and paste it into your website's HTML: