admin 3: banner preview

<style>
table td:first-child {
    white-space: nowrap;
}

table tr:first-child td {
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    text-align: left;
}
table tr:first-child td b {
    margin: 5px 2px 0 2px;
    display: inline-block;
    font-weight: normal;
    letter-spacing: 0.1px;
}

table .banner-preview {
    display: none;
    position: absolute;
    bottom: 105%;

    writing-mode: horizontal-tb;
    transform: rotate(-180deg) translateX(50%);

    background: white;
    border: 1px solid #888;
    padding: 5px;
}

table .banner-preview span {
    display: inline-block;
    color: black;
    margin-top: 5px;
    font-size: 14px;
}

table a:hover .banner-preview {
    display: block;
}
</style>

<script>
const BASE_FOLDER = "https://st.gsmarena.com/imgroot/static/banners/self/";

window.addEventListener("DOMContentLoaded", function () {
    const links = document.querySelectorAll("table a");
    for (const link of links) {
        const match = link.innerText.match(/\[[^\]]+\](.+)/);
        if (!match) continue;

        const container = document.createElement("div");
        container.classList = "banner-preview";

        const image = document.createElement("img");
        image.src = BASE_FOLDER + match[1];

        const text = document.createElement("span");
        text.innerText = link.innerText;

        container.appendChild(image);
        container.appendChild(text);
        link.appendChild(container);
    }
});
</script>