Alist美化汇总-马春杰杰

<!--开站时间开始-->       
<center>
<br />
<div style="background-color: #eee;width: 400px;border-radius: 20px;">
<script type="text/javascript">
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("6/14/2017 10:28:00");
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒"
    }
    show_runtime();
</script>
<span id="runtime_span"></span>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<br />

function show_runtime() {

window.setTimeout("show_runtime()", 1000);

X = new Date("6/14/2017 10:28:00");

Y = new Date();

T = (Y.getTime() - X.getTime());

M = 24 * 60 * 60 * 1000;

a = T / M;

A = Math.floor(a);

b = (a - A) * 24;

B = Math.floor(b);

c = (b - B) * 60;

C = Math.floor((b - B) * 60);

D = Math.floor((c - C) * 60);

runtime_span.innerHTML = "本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒"

}

show_runtime();

</script>

</div>

/*  整理的随机API图片站点

    樱花：https://www.dmoe.cc
    夏沫：https://cdn.seovx.com
    搏天：https://api.btstu.cn/doc/sjbz.php
    姬长信：https://github.com/insoxin/API
    小歪：https://api.ixiaowai.cn/
    保罗：https://api.paugram.com
    墨天逸：https://api.mtyqx.cn
    岁月小筑：https://img.xjh.me
    东方Project：https://img.paulzzh.com
*/

1

2

3

4

5

6

7

8

9

10

11

12

/* 整理的随机API图片站点

樱花：https://www.dmoe.cc

夏沫：https://cdn.seovx.com

搏天：https://api.btstu.cn/doc/sjbz.php

姬长信：https://github.com/insoxin/API

小歪：https://api.ixiaowai.cn/

保罗：https://api.paugram.com

墨天逸：https://api.mtyqx.cn

岁月小筑：https://img.xjh.me

东方Project：https://img.paulzzh.com

*/

<!--自定义背景-->
<style>
/*白天背景图*/
.hope-ui-light{
  background-image: url("https://ypyssl.machunjie.com/machunjie/20230103152433-458.png_machunjie.png") !important;
  background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;
}

1

2

3

4

5

6

7

<style>

/*白天背景图*/

.hope-ui-light{

background-image: url("https://ypyssl.machunjie.com/machunjie/20230103152433-458.png_machunjie.png") !important;

background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:center;

}

/*主列表夜间模式透明，50%这数值是控制透明度大小的*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css{
background-color:rgb(0 0 0 / 50%) !important;
}
/*readme夜间模式透明，50%这数值是控制透明度大小的*/
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css{
background-color:rgb(0 0 0 / 50%) !important;
}
/*主列表透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
background-color: rgba(255, 255, 255, 0.9) !important;
}
/*readme透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{
background-color: rgba(255, 255, 255, 0.9) !important;
}
/*顶部右上角切换按钮透明*/
.hope-c-ivMHWx-hZistB-cv.hope-icon-button{
background-color: rgba(255, 255, 255, 0.3) !important;
}
/*右下角侧边栏按钮透明*/
.hope-c-PJLV-ijgzmFG-css{
background-color: rgba(255, 255, 255, 0.5) !important;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

/*主列表夜间模式透明，50%这数值是控制透明度大小的*/

.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css{

background-color:rgb(0 0 0 / 50%) !important;

}

/*readme夜间模式透明，50%这数值是控制透明度大小的*/

.hope-c-PJLV.hope-c-PJLV-iiuDLME-css{

background-color:rgb(0 0 0 / 50%) !important;

}

/*主列表透明*/

.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {

background-color: rgba(255, 255, 255, 0.9) !important;

}

/*readme透明*/

.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css{

background-color: rgba(255, 255, 255, 0.9) !important;

}

/*顶部右上角切换按钮透明*/

.hope-c-ivMHWx-hZistB-cv.hope-icon-button{

background-color: rgba(255, 255, 255, 0.3) !important;

}

/*右下角侧边栏按钮透明*/

.hope-c-PJLV-ijgzmFG-css{

background-color: rgba(255, 255, 255, 0.5) !important;

}

// 密码可自行对接其他API
<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js"></script>
<script>
    let password = "39834";
    if (localStorage.getItem('pan_password') == password) {

    } else {
        checkPassword("success", "输入密码进入")
    }

    function checkPassword(ic, ti) {
        swal({
                title: "免责申明",
                text: "\n本站所展示内容均收集于网络\n\n仅供本人学习研究及收藏存档\n如有侵犯权益，敬请联系删除\n公众号：巴拉巴拉(假的)\n回复【验证码】获取密码",
                closeOnConfirm: false,
                closeOnClickOutside: false,
                icon: ic,
                button: {
                    text: "确认",
                },
                content: {
                    element: "input",
                    attributes: {
                        placeholder: "Type your password",
                        type: "password",
                    },
                },
            })
            .then((value) => {
                if (value == '') {
                    checkPassword("warning", "请输入正确的密码");
                } else if (value == password) {
                    swal("欢迎！", {
                        button: false,
                    });
                    localStorage.setItem("pan_password", value);
                } else {
                    checkPassword("warning", "密码错误");
                }
            });

    }
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

// 密码可自行对接其他API

let password = "39834";

if (localStorage.getItem('pan_password') == password) {

} else {

checkPassword("success", "输入密码进入")

}

function checkPassword(ic, ti) {

swal({

title: "免责申明",

text: "\n本站所展示内容均收集于网络\n\n仅供本人学习研究及收藏存档\n如有侵犯权益，敬请联系删除\n公众号：巴拉巴拉(假的)\n回复【验证码】获取密码",

closeOnConfirm: false,

closeOnClickOutside: false,

icon: ic,

button: {

text: "确认",

},

content: {

element: "input",

attributes: {

placeholder: "Type your password",

type: "password",

},

})

.then((value) => {

if (value == '') {

checkPassword("warning", "请输入正确的密码");

} else if (value == password) {

swal("欢迎！", {

button: false,

});

localStorage.setItem("pan_password", value);

} else {

checkPassword("warning", "密码错误");

}

});

}

</script>

<!-- 访问量 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<br />
本站总访问量 <span id="busuanzi_value_site_pv"></span> 次

1

2

3

4

<br />

本站总访问量 <span id="busuanzi_value_site_pv"></span> 次

<script src='https://unpkg.com/valine/dist/Valine.min.js'></script>

/*以下为评论系统专用*/
/*适配大小契合度*/
.newValine{
width: min(96%, 940px);
flex-direction: column;
 row-gap: var(--hope-space-2);
 border-radius: var(--hope-radii-xl);
 padding: var(--hope-space-2);
 box-shadow: var(--hope-shadows-lg);
}
/*评论区 - 白天模式透明度*/
.hope-ui-light .newValine{
background-color: rgba(255, 255, 255, 0.8) !important;
}
/*评论区 - 夜间模式透明度*/
.hope-ui-dark .newValine{
background-color:rgb(0 0 0 / 80%) !important;
}
/*输入栏里面跳舞的小人背景图*/
.vedit{
    background-image:url(https://cdn.jsdelivr.net/gh/anwen-anyi/imgAnwen/images/OuNiJiang.gif); 
    background-size:contain;
    background-repeat:no-repeat;
    background-position:right bottom;
    transition:all 0.25s ease-in-out 0s;
    }
    textarea#comment-textarea:focus{
    background-position-y:120px;
    transition:all 0.25s ease-in-out 0s;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

/*以下为评论系统专用*/

/*适配大小契合度*/

.newValine{

width: min(96%, 940px);

flex-direction: column;

row-gap: var(--hope-space-2);

border-radius: var(--hope-radii-xl);

padding: var(--hope-space-2);

box-shadow: var(--hope-shadows-lg);

}

/*评论区 - 白天模式透明度*/

.hope-ui-light .newValine{

background-color: rgba(255, 255, 255, 0.8) !important;

}

/*评论区 - 夜间模式透明度*/

.hope-ui-dark .newValine{

background-color:rgb(0 0 0 / 80%) !important;

}

/*输入栏里面跳舞的小人背景图*/

.vedit{

background-image:url(https://cdn.jsdelivr.net/gh/anwen-anyi/imgAnwen/images/OuNiJiang.gif);

background-size:contain;

background-repeat:no-repeat;

background-position:right bottom;

transition:all 0.25s ease-in-out 0s;

}

textarea#comment-textarea:focus{

background-position-y:120px;

transition:all 0.25s ease-in-out 0s;

}

    <!--评论模块还有下面的script也是-->
    <center>
        <div class="newValine" id="vcomments"></div>
    </center>
    <script>
    new Valine({
        visitor: true,
        el: '#vcomments',
        avatar: 'wavatar',
        appId: 'DAZ2yym4QtirEi7Bsije4Nso-gzGzo',
        appKey: 'RnltvMoRDO1ycOgkkojLm',
        placeholder: "有什么问题欢迎评论区留言~么么哒"
    })
    </script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

</center>

new Valine({

visitor: true,

el: '#vcomments',

avatar: 'wavatar',

appId: 'DAZ2yym4QtirEi7Bsije4Nso-gzGzo',

appKey: 'RnltvMoRDO1ycOgkkojLm',

placeholder: "有什么问题欢迎评论区留言~么么哒"

})

</script>

<center>
    <br />
    <!--延迟加载-->
    <!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
    <div id="customize" style="display: none;">
    延迟加载内容
    </div>


    <!--延迟加载配套使用JS-->
    <script>
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
    </script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<br />

延迟加载内容

</div>

let interval = setInterval(() => {

if (document.querySelector(".footer")) {

document.querySelector("#customize").style.display = "";

clearInterval(interval);

}

}, 200);

</script>

<!-- head -->

<style>
/*渐变背景CSS */
#canvas-basic {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
}
</style>


<!-- body -->

<!-- 渐变背景初始化 -->
<canvas id="canvas-basic"></canvas> 
<script src="https://npm.elemecdn.com/granim@2.0.0/dist/granim.min.js"></script>
<script>
var granimInstance = new Granim({
    element: '#canvas-basic',
    direction: 'left-right',
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#a18cd1', '#fbc2eb'],
                 ['#fff1eb', '#ace0f9'],
                 ['#d4fc79', '#96e6a1'],
                 ['#a1c4fd', '#c2e9fb'],
                 ['#a8edea', '#fed6e3'],
                 ['#9890e3', '#b1f4cf'],
                 ['#a1c4fd', '#c2e9fb'],
                 ['#fff1eb', '#ace0f9']
           
            ]
        }
    }
});
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<style>

/*渐变背景CSS */

#canvas-basic {

position: fixed;

display: block;

width: 100%;

height: 100%;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: -999;

}

</style>

var granimInstance = new Granim({

element: '#canvas-basic',

direction: 'left-right',

isPausedWhenNotInView: true,

states : {

"default-state": {

gradients: [

['#a18cd1', '#fbc2eb'],

['#fff1eb', '#ace0f9'],

['#d4fc79', '#96e6a1'],

['#a1c4fd', '#c2e9fb'],

['#a8edea', '#fed6e3'],

['#9890e3', '#b1f4cf'],

['#a1c4fd', '#c2e9fb'],

['#fff1eb', '#ace0f9']

]

}

});

</script>

<!-- head -->

<link rel="stylesheet" type="text/css" href="https://fonts.loli.net/css?family=Source+Code+Pro">
<link rel="stylesheet" type="text/css" href="https://fonts.loli.net/css?family=Noto+Serif+SC">
<style type="text/css">
    div{font-family: 'Source Code Pro','Noto Serif SC';}
    span{font-family: 'Source Code Pro','Noto Serif SC';}
    a{font-family: 'Source Code Pro'，'Noto Serif SC';}
</style>

1

2

3

4

5

6

7

8

9

div{font-family: 'Source Code Pro','Noto Serif SC';}

span{font-family: 'Source Code Pro','Noto Serif SC';}

a{font-family: 'Source Code Pro'，'Noto Serif SC';}

</style>

<iframe allowtransparency="true" frameborder="0" width="290" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=290&h=96&align=center"></iframe>

1	<iframe allowtransparency="true" frameborder="0" width="290" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=290&h=96&align=center"></iframe>