查看“︁用户:RedDragon/Test1”︁的源代码

<randomuserswithavatars/>

<html>
<table class="infobox" cellspacing="3" style="border-collapse:separate;border-spacing:2px;float:right;">
    <tbody>
        <tr class="infobox-below">
            <td colspan="2" style="padding:0.5em;background:#796CD5; text-align:center; color:#FFFFFF;;">
                <b>Rizline Original</b><sup id="cite_ref-1" class="reference"><a href="#cite_note-1" title=""><span
                            class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>
                <div class="mw-collapsible mw-made-collapsible" style="width: 100%; text-align: left;"><button
                        type="button"
                        class="mw-collapsible-toggle mw-collapsible-toggle-default mw-collapsible-toggle-expanded"
                        aria-expanded="true" tabindex="0"><span class="mw-collapsible-text">折叠</span></button>
                    <div class="mw-collapsible-content" style="">
                        <div
                            style="background:#9286DC; color:var(--color-emphasized); padding: 8px; font-weight: bold; text-align: center;">
                            详细信息</div>
                        <table class="infobox" style="width:100%; border:none; margin:0;">
                            <tbody>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        Riztime时间</th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        112.29s-142.29s</td>
                                </tr>
                                <tr>
                                    <th colspan="2"
                                        style="background:#9286DC; color:var(--color-emphasized); padding: 8px;">主题颜色
                                    </th>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        常规主题</th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        #D2CDDDFF<br>#A2BFD8FF<br>#A29BCDFF</td>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        Riztime主题1</th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        #ADB9D4FF<br>#9F84B7FF<br>#6574ABFF</td>
                                </tr>
                                <tr>
                                    <th colspan="2"
                                        style="background:#9286DC; color:var(--color-emphasized); padding: 8px;">谱面信息
                                    </th>
                                </tr>
                                <tr>
                                    <th colspan="2"
                                        style="background:#9286DC; color:var(--color-emphasized); padding: 8px;">
                                        Tap/Drag/Hold</th>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#57E4C4;padding:0 0.80em;margin:0.1em 0.50em;">EZ
                                            4</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        70/43/43</td>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FDBA61;padding:0 0.80em;margin:0.1em 0.50em;">HD
                                            6</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        203/164/48</td>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FE8661;padding:0 0.80em;margin:0.1em 0.50em;">IN
                                            12</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        393/233/84</td>
                                </tr>
                                <tr>
                                    <th colspan="2"
                                        style="background:#9286DC; color:var(--color-emphasized); padding: 8px;">线条数
                                    </th>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#57E4C4;padding:0 0.80em;margin:0.1em 0.50em;">EZ
                                            4</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        197</td>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FDBA61;padding:0 0.80em;margin:0.1em 0.50em;">HD
                                            6</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        222</td>
                                </tr>
                                <tr>
                                    <th scope="row"
                                        style="width:90px; background:#C0BAEA; color:var(--color-base); padding:4px 8px;">
                                        <span
                                            style="width: max-content;text-align:center;display:inline-block;border-radius:1em;color:white;background-color:#FE8661;padding:0 0.80em;margin:0.1em 0.50em;">IN
                                            12</span>
                                    </th>
                                    <td
                                        style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px;">
                                        1020</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

<script>
    document.addEventListener('DOMContentLoaded', addColorBorders)

    const hexColorRegex = /#([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})\b/g

    function addColorBorders() {
        const walker = document.createTreeWalker(
            document.body,
            NodeFilter.SHOW_TEXT,
            null,
            false
        )

        const nodesToProcess = []
        let node

        while (node = walker.nextNode()) {
            if (node.parentNode.nodeName === 'SCRIPT' || node.parentNode.nodeName === 'STYLE') continue

            const testRegex = new RegExp(hexColorRegex.source, 'g')
            if (testRegex.test(node.textContent)) {
                nodesToProcess.push(node)
            }
        }

        nodesToProcess.forEach(textNode => {
            const parent = textNode.parentNode
            const text = textNode.textContent
            const matches = [...text.matchAll(hexColorRegex)]

            const fragment = document.createDocumentFragment()
            let lastIndex = 0

            matches.forEach(match => {
                const [hexColor, index] = [match[0], match.index]

                if (index > lastIndex) {
                    fragment.appendChild(document.createTextNode(text.substring(lastIndex, index)))
                }

                const colorSpan = document.createElement('span')
                Object.assign(colorSpan.style, {
                    display: 'inline-block',
                    padding: '0',
                    margin: '0',
                    border: '4px solid',
                    borderRadius: '0',
                    fontWeight: 'bold',
                    background: 'transparent',
                    lineHeight: '1',
                    verticalAlign: 'baseline',
                    boxSizing: 'border-box',
                    width: 'fit-content',
                    letterSpacing: '0'
                })
                colorSpan.textContent = hexColor
                colorSpan.style.borderColor = hexColor

                fragment.appendChild(colorSpan)
                lastIndex = index + hexColor.length
            })

            if (lastIndex < text.length) {
                fragment.appendChild(document.createTextNode(text.substring(lastIndex)))
            }

            parent.replaceChild(fragment, textNode)

            let tdParent = parent
            while (tdParent) {
                if (tdParent.nodeType === Node.ELEMENT_NODE) {
                    if (tdParent.tagName === 'TD') {
                        if (new RegExp(hexColorRegex.source, 'g').test(tdParent.textContent)) {
                            tdParent.style.padding = '0'
                            break
                        }
                    }
                }
                tdParent = tdParent.parentNode
            }
        })
    }
</script>
</html>

<html>
<div id="user-page">
    <p></p>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var profilePageUrl = '/wiki/User_profile:RedDragon'
        var container = document.getElementById('user-page')

        fetch(profilePageUrl)
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('网络响应异常 状态码：' + response.status)
                }
                return response.text()
            })
            .then(function (htmlString) {
                var parser = new DOMParser()
                var doc = parser.parseFromString(htmlString, 'text/html')

                var leftContent = doc.getElementById('user-page-left')
                var rightContent = doc.getElementById('user-page-right')

                if (!leftContent || !rightContent) {
                    container.style.display = 'none'
                    return
                }

                container.innerHTML = ''

                var wrapper = document.createElement('div')
                wrapper.className = 'clearfix'
                wrapper.style.cssText = 'display: inline-block; width: 100%;'

                var leftClone = leftContent.cloneNode(true)
                leftClone.style.cssText = 'width: 35%; float: left;'
                wrapper.appendChild(leftClone)

                var rightClone = rightContent.cloneNode(true)
                rightClone.style.cssText = 'float: right; width: 60%;'
                wrapper.appendChild(rightClone)

                container.appendChild(wrapper)

                var baseUrl = window.location.protocol + '//' + window.location.host

                var links = container.querySelectorAll('a[href^="/"]')
                links.forEach(function (link) {
                    if (link.getAttribute('href').startsWith('/')) {
                        link.href = baseUrl + link.getAttribute('href')
                    }
                })

                var images = container.querySelectorAll('img[src^="/"]')
                images.forEach(function (img) {
                    if (img.getAttribute('src').startsWith('/')) {
                        img.src = baseUrl + img.getAttribute('src')
                    }
                })
            })
            .catch(function (error) {
                console.error('获取时出错：', error)
                container.style.display = 'none'
            })
    })
</script>
</html>

----
[[User:RedDragon/Test]]
[[User:RedDragon/Test1]]
[[User:RedDragon/Test2]]