@lf_maple/koishi-plugin-phi-plugin-full 0.1.80

package/core/resources/html/list/list.css

@@ -0,0 +1,259 @@
+@import "../common/common.css";
+
+body {
+    flex-direction: column;
+    display: flex;
+    width: 800px;
+    height: fit-content;
+    font-family: 'PHI', 'HIMALAYA', '吞弥恰俊';
+    align-items: center;
+    color: white;
+    margin: 0px;
+    position: relative;
+}
+
+body p {
+    color: white;
+    margin: 0px;
+    margin-block: 0;
+    margin-inline: 0;
+}
+
+.head_title {
+    display: flex;
+    width: 94%;
+    margin: 20px;
+    justify-content: center;
+    align-items: center;
+}
+
+.head_title p {
+    font-size: 50px;
+    text-shadow: 0 0 20px rgb(0 186 255);
+    font-family: 'Aldrich', 'PHI';
+    color: white;
+}
+
+.background img {
+    height: 100%;
+    min-width: 100%;
+    /* filter: blur(100px) brightness(75%); */
+}
+
+.num,
+.title,
+.dif,
+.left,
+.right,
+.rks {
+    backdrop-filter: blur(30px);
+}
+
+.list_box {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+    z-index: 1;
+    overflow: auto;
+    flex-wrap: wrap;
+    align-content: center;
+    /* margin-top: 100px; */
+    margin-bottom: 100px;
+}
+
+.line {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    FONT-VARIANT: JIS04;
+    width: 29%;
+    height: 60px;
+    margin-bottom: 2.5%;
+    background-color: #00151d54;
+    backdrop-filter: blur(10px);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.song_name {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 20%;
+    color: white;
+    font-size: 10px;
+    white-space: nowrap;
+    position: absolute;
+    backdrop-filter: blur(10px);
+    z-index: 1;
+}
+
+.num,
+.song,
+.dif {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.num {
+    text-align: center;
+    width: 10%;
+    background-color: #4a7aa1cc;
+}
+
+.song {
+    width: 80%;
+    background-color: #00000088;
+}
+
+.dif {
+    width: 10%;
+}
+
+.LEGACY {
+    background: #7700ff88;
+}
+
+.AT {
+    background: color-mix(in srgb, var(--phi-theme-AT, #9c9c9c) 53.33%, transparent);
+}
+
+.IN {
+    background: color-mix(in srgb, var(--phi-theme-IN, #ff6161) 53.33%, transparent);
+}
+
+.HD {
+    background: color-mix(in srgb, var(--phi-theme-HD, #009dff) 53.33%, transparent);
+}
+
+.EZ {
+    background: color-mix(in srgb, var(--phi-theme-EZ, #7ae07a) 53.33%, transparent);
+}
+
+.ill_box {
+    height: 100%;
+}
+
+.ill_box img {
+    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
+}
+
+.info_box {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    width: 51%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+}
+
+
+.down {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 80%;
+    width: 97%;
+}
+
+.acc {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    height: 40%;
+    position: relative;
+    background: #87ceeb69;
+    overflow: hidden;
+    border-radius: 2px;
+    /* border: skyblue 1px solid; */
+    font-size: 9px;
+    box-sizing: border-box;
+}
+
+.suggest {
+    color: greenyellow;
+}
+
+.score_rating {
+    display: flex;
+    height: 40%;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+}
+
+.score {
+    width: 70%;
+    overflow: hidden;
+    border-radius: 2px;
+    /* border: skyblue 1px solid; */
+    height: 100%;
+    font-size: 15px;
+    display: flex;
+    background: #87ceeb69;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+}
+
+.rating {
+    display: flex;
+    height: 100%;
+    width: 30%;
+    justify-content: center;
+}
+
+.rating img {
+    height: 100%;
+}
+
+.createdbox {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    writing-mode: horizontal-tb;
+    justify-content: center;
+    position: absolute;
+    bottom: 45px;
+}
+
+.createdbox p {
+    color: white;
+    font-size: 70px;
+    font-family: 'Aldrich', 'PHI';
+}
+
+.phi-plugin {
+    display: flex;
+    z-index: 1;
+    justify-content: center;
+    align-items: center;
+}
+
+.ver {
+    display: flex;
+    z-index: 1;
+}
+
+.phi-plugin p {
+    font-size: 30px;
+    text-shadow: 0 0 20px rgb(0 186 255);
+}
+
+.ver p {
+    font-size: 16px;
+    text-shadow: 0 0 20px #fff700;
+}

package/core/resources/html/lvsco/lvsco-orz.html

@@ -0,0 +1,334 @@
+<head>
+    <link rel="stylesheet" href="./lvsco.css">
+
+</head>
+
+<body>
+    <div class="demo">
+        <img src="./demo.jpg" alt="233">
+    </div>
+    <div class="full-box">
+        <div class="left">
+            <div class="left-top">
+                <img src="https://img.moegirl.org.cn/common/8/81/Class_Memories_Phigros.png" alt="{{illustration}}">
+            </div>
+            <div class="left-content">
+                <div class="left-content-left">
+                </div>
+                <div class="left-content-right"></div>
+            </div>
+            <div class="left-mid">
+                <div class="left-mid-box-true">
+                    <div class="rank-left">
+                        <p>AT</p>
+                    </div>
+                    <div class="rank-right">
+                        <p>250 charts</p>
+                    </div>
+                </div>
+                <div class="left-mid-box-false">
+                    <div class="rank-left">
+                        <p>IN</p>
+                    </div>
+                    <!-- <div class="rank-right">
+                        <p>250 charts</p>
+                    </div> -->
+                </div>
+                <div class="left-mid-box-true">
+                    <div class="rank-left">
+                        <p>HD</p>
+                    </div>
+                    <div class="rank-right">
+                        <p>250 charts</p>
+                    </div>
+                </div>
+                <div class="left-mid-box-false">
+                    <div class="rank-left">
+                        <p>EZ</p>
+                    </div>
+                    <!-- <div class="rank-right">
+                        <p>250 charts</p>
+                    </div> -->
+                </div>
+            </div>
+            <div class="left-mid-bottom"></div>
+            <div class="createdbox">
+                <div class="phi-plugin">
+                    <p>{{_plugin}}</p>
+                </div>
+                <div class="ver">
+                    <p>{{Version.ver}}</p>
+                </div>
+            </div>
+        </div>
+        <div class="left-up">
+            <div class="left-top">
+                <div class="illustration">
+                    <img src="https://img.moegirl.org.cn/common/8/81/Class_Memories_Phigros.png" alt="{{illustration}}">
+                </div>
+                <div class="user_info">
+                    <div class="info_up">
+                        <div class="avatar">
+                            <img src="../avatar/Aphasia.png" alt="{{avatar}}">
+                        </div>
+                        <div class="basic_info">
+                            <div class="user_name">
+                                <p name="pvis" id="user-name">就是不会告诉你就是不会告诉你就是不会告诉你就是不会告诉你就是不会告诉你就是不会告诉你就是不会告诉你就是不会告诉你</p>
+                            </div>
+                            <div class="user_rks">
+                                <div class="player_rks">
+                                    <p>14.5678</p>
+                                </div>
+                                <div class="Challenge">
+                                    <img src="../otherimg/5.png" alt="Challenge">
+                                    <p>54</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="user_info_right"></div>
+                    </div>
+                </div>
+                <div class="difficulty_box">
+                    <div class="difficulty_box_p">
+                        <p>已选定数区间</p>
+                    </div>
+                    <div class="difficulty_value" style="margin-left: 25%;">
+                        <p>1.8</p>
+                    </div>
+                    <div class="difficulty_bar-out">
+                        <div class="difficulty_bar-in" style="margin-left: 25%;width: 10%;"></div>
+                    </div>
+                    <div class="difficulty_value" style="margin-left: 35%;">
+                        <p>2.8</p>
+                    </div>
+                </div>
+            </div>
+            <div class="left-content">
+                <div class="left-content-left">
+                    <p>CONTENT</p>
+                </div>
+                <div class="left-content-right"></div>
+            </div>
+            <div class="left-mid">
+                <div class="left-up-mid-box-true">
+                    <div class="rank-left">
+                        <p>AT</p>
+                    </div>
+                    <div class="rank-right">
+                        <p>250 charts</p>
+                    </div>
+                </div>
+                <div class="left-up-mid-box-false">
+                    <div class="rank-left">
+                        <p>IN</p>
+                    </div>
+                    <!-- <div class="rank-right">
+                        <p>250 charts</p>
+                    </div> -->
+                </div>
+                <div class="left-up-mid-box-true">
+                    <div class="rank-left">
+                        <p>HD</p>
+                    </div>
+                    <div class="rank-right">
+                        <p>250 charts</p>
+                    </div>
+                </div>
+                <div class="left-up-mid-box-false">
+                    <div class="rank-left">
+                        <p>EZ</p>
+                    </div>
+                    <!-- <div class="rank-right">
+                        <p>250 charts</p>
+                    </div> -->
+                </div>
+            </div>
+            <div class="left-up-mid-bottom"></div>
+        </div>
+
+        <div class="right" id="phi">
+            <div class="file-content">
+                <div class="file-content-left">
+                    <p>FILE_CONTENT</p>
+                </div>
+                <div class="progress_bar-out">
+                    <!-- <div class="progress_bar-in-phi" style="width: 20%;"> -->
+                    <div class="progress_bar-in-phi">
+                        <p>29% PHI.</p>
+                    </div>
+                    <div class="progress_bar-in-fc">
+                        <p>32% FullCombo.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="right_title">
+                <p>Total</p>
+                <div class="title_group">
+                    <div class="title_group-real">
+                        <p>255</p>
+                    </div>
+                    <div class="title_group-tot">
+                        <p>/360 songs</p>
+                    </div>
+                </div>
+                <div class="title_group">
+                    <div class="title_group-real">
+                        <p>255</p>
+                    </div>
+                    <div class="title_group-tot">
+                        <p>/360 charts</p>
+                    </div>
+                </div>
+            </div>
+            <div class="right_content">
+                <div class="right_content-title">
+                    <p>收集日期</p>
+                </div>
+                <p>2023/8/26 23:14</p>
+                <div class="right_content-title">
+                    <p>保管单位</p>
+                </div>
+                <p>胡桃世界第一可爱</p>
+                <div class="right_content-title">
+                    <p>等级</p>
+                </div>
+                <p>{{rks.toFixed(8)}}</p>
+            </div>
+            <div class="tot_Rating">
+                <img src="../otherimg/phi.png" alt="{{tot_Rating}}">
+            </div>
+            <div class="title_group" id="score">
+                <div class="title_group-real" id="real-score">
+                    <p>105569861</p>
+                </div>
+                <div class="title_group-tot" id="tot-score">
+                    <p>/113000000</p>
+                </div>
+            </div>
+            <div class="title_group" id="highest">
+                <div class="title_group-real" id="real-highlow">
+                    <p>14.0000</p>
+                </div>
+                <div class="title_group-tot" id="tot-highlow">
+                    <p>Highest</p>
+                </div>
+            </div>
+            <div class="title_group" id="lowest">
+                <div class="title_group-real" id="real-highlow">
+                    <p>14.0000</p>
+                </div>
+                <div class="title_group-tot" id="tot-highlow">
+                    <p>Lowest</p>
+                </div>
+            </div>
+            <div class="tot_acc-box">
+                <div class="tot_acc-left">
+                    <span style="color: rgb(0, 132, 255);">100</span>
+                </div>
+                <div class="tot_acc-right">
+                    <span id="acc_word">ACC</span>
+                    <span style="color: rgb(0, 132, 255);">.9999%</span>
+                </div>
+            </div>
+            <div class="stats-rating-group">
+                <div class="rating-group">
+                    <div class="rating-value">
+                        <p>189</p>
+                    </div>
+                    <div class="rating-tatle">
+                        <p>Cleared</p>
+                    </div>
+                </div>
+                <div class="rating-group">
+                    <div class="rating-value">
+                        <p>189</p>
+                    </div>
+                    <div class="rating-tatle">
+                        <p>FC</p>
+                    </div>
+                </div>
+                <div class="rating-group">
+                    <div class="rating-value">
+                        <p>189</p>
+                    </div>
+                    <div class="rating-tatle">
+                        <p>PHI</p>
+                    </div>
+                </div>
+            </div>
+            <div class="rating_stats">
+                <div class="rating_stats_group">
+                    <img src="../otherimg/phi.png" alt="phi">
+                    <p>20</p>
+                    <div class="rating_stats_bar" style="height: 50%;"></div>
+                </div>
+                <div class="rating_stats_group">
+                    <img src="../otherimg/FC.png" alt="FC">
+                    <div class="rating_stats_bar" style="height: 50%;"></div>
+                </div>
+                <div class="rating_stats_group">
+                    <img src="../otherimg/V.png" alt="V">
+                    <div class="rating_stats_bar" style="height: 50%;"></div>
+                </div>
+                <div class="rating_stats_group">
+                    <img src="../otherimg/S.png" alt="S">
+                    <div class="rating_stats_bar" style="height: 50%;"></div>
+                </div>
+                <div class="rating_stats_group">
+                    <img src="../otherimg/A.png" alt="A">
+                    <div class="rating_stats_bar" style="height: 50%;"></div>
+                </div>
+                <div class="rating_stats_group">
+                    <img src="../otherimg/B.png" alt="B">
+                    <div class="rating_stats_bar" style="height: 50%;"></div>
+                </div>
+                <div class="rating_stats_group">
+                    <img src="../otherimg/C.png" alt="C">
+                    <div class="rating_stats_bar" style="height: 50%;"></div>
+                </div>
+                <div class="rating_stats_group">
+                    <img src="../otherimg/F.png" alt="F">
+                    <div class="rating_stats_bar" style="height: 50%;"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        function isBiggerThanParent(songName, parentElement) {
+            return songName.scrollWidth > parentElement.offsetWidth || songName.scrollHeight > parentElement.offsetHeight
+        }
+        function adjustFontSize() {
+            //获取p元素
+            let a = document.getElementsByName('pvis')
+            for (let i = 0; i < a.length; ++i) {
+
+                let songName = a[i]
+
+                if (!songName) continue
+
+
+                /*调整曲目名称字体大小*/
+                let parentElement = songName.parentElement
+
+                if (!isBiggerThanParent(songName, parentElement)) continue
+
+                let fontSize = Number(window.getComputedStyle(songName, null).getPropertyValue('font-size').replace("px", ""));
+
+                let l = 0, r = fontSize;
+                while (l < r) {
+                    let mid = Math.floor((l + r + 1) / 2);
+                    songName.style.fontSize = mid + "px";
+                    if (isBiggerThanParent(songName, parentElement)) {
+                        r = mid - 1;
+                    } else {
+                        l = mid;
+                    }
+                }
+                songName.style.fontSize = l + "px";
+            }
+
+        }
+        window.onload = adjustFontSize
+        window.onresize = adjustFontSize
+    </script>
+</body>