打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

用户:RedDragon/Test1:修订间差异

来自Rizline中文维基
 
(未显示同一用户的21个中间版本)
第1行: 第1行:
<randomuserswithavatars/>
<html>
<html>
<style>
    .glowing-card {
        width: 120px;
        padding: 10px;
        border-radius: 10px;
        color: #976dff;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
        text-shadow: 0 0 10px #976dff;
        text-shadow: 0 0 5px #976dff;
        transition: all 0.2s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        z-index: 1;
        user-select: none;
    }
    .glowing-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: #5d27e64d;
        border-radius: 10px;
        transition: left 0.1s ease;
        z-index: -1;
    }
    .glowing-card:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #3492ff;
        transform: translate(-1px, -1px);
        text-shadow: 0 0 10px #3492ff;
        text-shadow: 0 0 5px #3492ff;
    }
    .glowing-card:active::before {
        left: 0;
    }
    .glowing-card:active {
        color: white;
        text-shadow: 0 0 10px #fff;
    }
</style>
<body>
    <div class="glowing-card">
        click this
    </div>
</body>
</html>


<table width="100%" style="border:none; border-collapse:collapse;">
<html>
   <tr>
<table class="infobox" cellspacing="3" style="border-collapse:separate;border-spacing:2px;float:right;">
    <td colspan="2" style="text-align:center; background-color:#A9FBFF;">
   <tbody>
      <div id="difficulty" onclick="cycleDifficulty(this)" data-states='["EZ 1", "HD 6", "IN 9"]' data-current="0" style="cursor:pointer;">EZ 1</div>
    <tr class="infobox-below">
    </td>
      <td colspan="2" style="padding:0;background:#6255BA; text-align:center; color:#FFFFFF; border:4px solid #6255BA;">
  </tr>
        <div class="mw-collapsible mw-made-collapsible" style="width: 100%;">
  <tr>
          <button type="button" class="mw-collapsible-toggle mw-collapsible-toggle-default webfonts-changed mw-collapsible-toggle-expanded" aria-expanded="true" tabindex="0">
    <td width="15%" height="300px" style="text-align:center; background-color:#ABCDEF;">
            <span class="mw-collapsible-text">折叠</span>
      <div id="ratio" onclick="cycleRatio(this)" data-states='["4:3", "16:9"]' data-current="0" style="cursor:pointer;">4:3</div>
          </button>
    </td>
          <div style="background:#7D73C6; color:var(--color-emphasized); padding: 8px; font-weight: bold; text-align: center; border:4px solid #7D73C6;">详细信息</div>
    <td>
          <table class="infobox mw-collapsible-content" style="width: 100%; border: none; margin: 0px;">
      <span id="output">111aaa</span>
            <tbody>
     </td>
              <tr>
   </tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">预览时间</th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">49.704s-69.704s</td>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">Riztime时间</th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">50.282s-77.746s</td>
              </tr>
              <tr>
                <th colspan="2" style="background:#7D73C6; color:var(--color-emphasized); padding: 8px; text-align: center; border:4px solid #7D73C6;">主题颜色</th>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">常规主题</th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:0px 4px; border:4px solid var(--color-surface-1);">
                  <span style="display:block; padding:2px 4px; border:4px solid #B3A3EDFF; margin:0 -4px;">#B3A3EDFF</span>
                  <span style="display:block; padding:2px 4px; border:4px solid #5BCFEEFF; margin:0 -4px;">#5BCFEEFF</span>
                  <span style="display:block; padding:2px 4px; border:4px solid #4637AEFF; margin:0 -4px;">#4637AEFF</span>
                </td>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">Riztime主题1</th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:0px 4px; border:4px solid var(--color-surface-1);">
                  <span style="display:block; padding:2px 4px; border:4px solid #594095FF; margin:0 -4px;">#594095FF</span>
                  <span style="display:block; padding:2px 4px; border:4px solid #FF147DFF; margin:0 -4px;">#FF147DFF</span>
                  <span style="display:block; padding:2px 4px; border:4px solid #5BCFEEFF; margin:0 -4px;">#5BCFEEFF</span>
                </td>
              </tr>
              <tr>
                <th colspan="2" style="background:#7D73C6; color:var(--color-emphasized); padding: 8px; text-align: center; border:4px solid #7D73C6;">谱面信息</th>
              </tr>
              <tr>
                <th colspan="2" style="background:#7D73C6; color:var(--color-emphasized); padding: 8px; text-align: center; border:4px solid #7D73C6;">Tap/Drag/Hold</th>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <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 3</span>
                </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">134/54/68</td>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <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 8</span>
                </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">169/222/134</td>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <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 13+</span>
                </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">435/129/98</td>
              </tr>
              <tr>
                <th colspan="2" style="background:#7D73C6; color:var(--color-emphasized); padding: 8px; text-align: center; border:4px solid #7D73C6;">线条数</th>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <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 3</span>
                </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">291</td>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <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 8</span>
                </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">358</td>
              </tr>
              <tr>
                <th scope="row" style="width:90px; background:#B5AFDF; color:#000000; padding:4px 8px; border:4px solid #B5AFDF;">
                  <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 13+</span>
                </th>
                <td style="background:var(--color-surface-1); color:var(--color-base); padding:4px 8px; border:4px solid var(--color-surface-1);">678</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
     </tr>
   </tbody>
</table>
</table>
</html>
<html>
<div id="user-page">
    <p></p>
</div>


<script>
<script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
    //自定义部分
        var profilePageUrl = '/wiki/User_profile:RedDragon'
    const difficultyList = ["EZ 1", "HD 6", "IN 9"];
        var container = document.getElementById('user-page')
    const songName = "Abgrund";


    const difficultyColors = {
        fetch(profilePageUrl)
      "EZ": "#57E4C4",
            .then(function (response) {
    "HD": "#FDBA61",
                if (!response.ok) {
    "IN": "#FE8661",
                    throw new Error('网络响应异常 状态码:' + response.status)
    "AT": "#4C364B"
                }
    };
                return response.text()
            })
            .then(function (htmlString) {
                var parser = new DOMParser()
                var doc = parser.parseFromString(htmlString, 'text/html')


    function cycleDifficulty(element) {
                var leftContent = doc.getElementById('user-page-left')
        const states = difficultyList
                var rightContent = doc.getElementById('user-page-right')
    const current = parseInt(element.getAttribute('data-current'))
    const next = (current + 1) % states.length


    element.textContent = states[next]
                if (!leftContent || !rightContent) {
    element.setAttribute('data-current', next.toString())
                    container.style.display = 'none'
                    return
                }


    const difficultyType = states[next].split(' ')[0]  // 获取难度
                container.innerHTML = ''
    const color = difficultyColors[difficultyType] || '#A9FBFF' // 更新背景色
    element.style.backgroundColor = color
    element.parentElement.style.backgroundColor = color


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


    function cycleRatio(element) {
                var leftClone = leftContent.cloneNode(true)
        const states = ["16:9", "4:3"]
                leftClone.style.cssText = 'width: 35%; float: left;'
    const current = parseInt(element.getAttribute('data-current'))
                wrapper.appendChild(leftClone)
    const next = (current + 1) % states.length


    element.textContent = states[next]
                var rightClone = rightContent.cloneNode(true)
    element.setAttribute('data-current', next.toString())
                rightClone.style.cssText = 'float: right; width: 60%;'
                wrapper.appendChild(rightClone)


    updateOutput()
                container.appendChild(wrapper)
    }


    function updateOutput() {
                var baseUrl = window.location.protocol + '//' + window.location.host
        const difficultyDiv = document.getElementById('difficulty')
    const ratioDiv = document.getElementById('ratio')


    const currentDifficulty = difficultyDiv.textContent.split(' ')[0]  // 获取难度
                var links = container.querySelectorAll('a[href^="/"]')
    const currentRatio = ratioDiv.textContent === "16:9" ? "16-9" : "4-3"
                links.forEach(function (link) {
                    if (link.getAttribute('href').startsWith('/')) {
                        link.href = baseUrl + link.getAttribute('href')
                    }
                })


    const videoUrl = `https://github.com/Rizline-Chinese-Wiki/rizline-song-preview/blob/main/${currentRatio}/${songName}_${currentDifficulty}.mp4`
                var images = container.querySelectorAll('img[src^="/"]')
 
                images.forEach(function (img) {
    document.getElementById('output').innerHTML = `
                    if (img.getAttribute('src').startsWith('/')) {
    <video class="html5media-video" src="${videoUrl}" controls preload="metadata" loading="lazy"></video>
                        img.src = baseUrl + img.getAttribute('src')
    `
                    }
     }
                })
            })
            .catch(function (error) {
                console.error('获取时出错:', error)
                container.style.display = 'none'
            })
     })
</script>
</script>
</html>


</html>
----
[[User:RedDragon/Test]]
[[User:RedDragon/Test1]]
[[User:RedDragon/Test2]]

2025年11月29日 (六) 20:35的最新版本

加入社区

avataravataravataravatar
avataravataravataravatar
avatar

click this

详细信息
预览时间 49.704s-69.704s
Riztime时间 50.282s-77.746s
主题颜色
常规主题 #B3A3EDFF #5BCFEEFF #4637AEFF
Riztime主题1 #594095FF #FF147DFF #5BCFEEFF
谱面信息
Tap/Drag/Hold
EZ 3 134/54/68
HD 8 169/222/134
IN 13+ 435/129/98
线条数
EZ 3 291
HD 8 358
IN 13+ 678


User:RedDragon/Test User:RedDragon/Test1 User:RedDragon/Test2