Add files via upload

pinsoftstudio · Sep 26, 2023 · 55567a0 · 55567a0
1 parent fa9eebc
commit 55567a0
Show file tree

Hide file tree

Showing 10 changed files with 417 additions and 0 deletions.
diff --git a/wtd/1.jpg b/wtd/1.jpg
diff --git a/wtd/2.jpg b/wtd/2.jpg
diff --git a/wtd/3.jpg b/wtd/3.jpg
diff --git a/wtd/4.jpg b/wtd/4.jpg
diff --git a/wtd/base.css b/wtd/base.css
@@ -0,0 +1,173 @@
+:root {
+    --text: #000;
+    --bg: #ffffff;
+    --bg50: #ffffff80;
+    --bg70: #ffffff80;
+    --sd: #00000080;
+    --card: #efefef55;
+    --hover: #ffffff65;
+    --hover-half: #ffffff40;
+    --hover-b: #1111110f;
+    --bggrey: #ddd;
+    --fill:#d3d3d370;
+    --bgul: url('bg.svg');
+    --mm: #ffffffc0;
+    --cm: #fafafabb;
+    --bar: #efefef37;
+    --hr:#00000013;
+    --unfoc:#e6e6e6;
+    --theme-1:#ad6eca;
+    --theme-2:#3b91d8;
+    --href:#2983cc;
+    --bd:#8f8f8f30;
+    --s3d:#99999940;
+}
+
+body {
+    margin: 0;
+    font-family: system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    text-align: left;
+    background-color: #fff;
+}
+
+*, ::after, ::before {
+    box-sizing: border-box;
+}
+
+html {
+    touch-action: none;
+    font-family: sans-serif;
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html * {
+    touch-action: auto;
+}
+
+pre {
+    font-family: monospace;
+}
+
+
+hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+    unicode-bidi: isolate;
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    border: 0;
+    border-top: 1px solid rgba(0,0,0,.1);
+}
+
+[type=button], [type=reset], [type=submit], button {
+    -webkit-appearance: button;
+    appearance: button;
+}
+button, select {
+    text-transform: none;
+}
+button, input {
+    overflow: visible;
+}
+button, input, optgroup, select, textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+button {
+    appearance: auto;
+    writing-mode: horizontal-tb !important;
+    text-rendering: auto;
+    letter-spacing: normal;
+    word-spacing: normal;
+    line-height: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    display: inline-block;
+    text-align: center;
+    align-items: flex-start;
+    cursor: default;
+    box-sizing: border-box;
+    background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
+    margin: 0em;
+    padding: 1px 6px;
+    border-width: 2px;
+    border-style: outset;
+    border-color: buttonborder;
+    border-image: initial;
+}
+
+a:-webkit-any-link {
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.btn{
+    background: var(--cm);
+    border-radius: 8px;
+    padding: 7px 12px;
+    transition: 80ms;
+    user-select: none;
+    display: inline-block;
+    margin: 2px 5px;
+    box-shadow: 0 1px 2px var(--s3d);
+}
+
+.btn:hover{
+    filter: brightness(1.3);
+}
+
+.btn:active{
+    opacity: 0.6;
+}
+
+.a {
+    color: var(--text);
+    text-decoration: none !important;
+    cursor: pointer;
+}
+
+a.jump {
+    /* text-decoration: underline; */
+    color: unset;
+}
+
+a.jump:hover {
+    color: var(--href);
+}
+
+a.jump:active {
+    color: #666;
+}
+
+
+::-webkit-scrollbar {
+    width: 14px;
+}
+
+::-webkit-scrollbar:hover {
+    background-color: #7f7f7f30;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #7f7f7f70;
+    background-clip: padding-box;
+    border: 6px solid transparent;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    border: 4px solid transparent;
+}
diff --git a/wtd/examp.css b/wtd/examp.css
@@ -0,0 +1,125 @@
+@import url('base.css');
+
+#tit{
+    width: calc(100% + 40px);
+    background-color: #ececec90;
+    position: fixed;
+    height: 90px;
+    backdrop-filter: blur(20px) saturate(1.3);
+    display: block;
+    margin-top: -20px;
+    margin-left: -20px;
+    padding: 30px 20px 0 40px;
+    border-bottom: 2px solid #7f7f7f50;
+    box-shadow: 0 3px 18px #66666650;
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+}
+
+#tit>.title{
+    font-size: 30px;
+    margin: 0;
+}
+
+#musctrl{
+    display: flex;
+    align-items: center;
+}
+
+#musctrl>.btn{
+    background-color: #fcfcfcbc;
+}
+
+#footer{
+    position: relative;
+    bottom: 0;
+    width: calc(100% - 50px);
+    background-color: #222;
+    color: #eee;
+    padding: 25px 30px 20px 20px;
+    margin: 10px 25px;
+    border-radius: 10px;
+    box-shadow: 0 1px 6px var(--sd);
+}
+
+#content{
+    display: flex;
+    /* flex-wrap: wrap; */
+    flex-direction: column;
+    align-items: center;
+    padding-top: 200px;
+    padding-bottom: 50px;
+}
+
+#music{
+    text-align: center;
+    border-radius: 10px;
+    box-shadow: 0 2px 20px #00000050;
+    background-color: #efefef;
+    padding: 40px 10px;
+    width: 50%;
+    max-width: 600px;
+    min-width: 450px;
+    margin-bottom: calc(var(--ph) / 2);
+}
+
+:root.mobile #music{
+    width: calc(100% - 30px);
+    min-width: 200px;
+}
+
+#music>.ti{
+    font-size: 100px;
+    margin: 0;
+}
+
+:root.mobile #music>.ti{
+    font-size: 50px;
+}
+
+#content>.pic{
+    width: calc(100% - 50px);
+    max-width: 1100px;
+    margin: 0;
+    transition: 200ms;
+    margin-bottom: calc(var(--ph) / 2);
+}
+
+#content>.pic.bf{
+    transform: translateY(-100%);
+}
+
+#content>.pic.af{
+    transform: translateY(100%);
+}
+
+#content>.pic>.pic{
+    width: 100%;
+    border-radius: 10px;
+    box-shadow: 0 2px 15px var(--sd);
+    position: relative;
+    top: -40px;
+}
+
+#content>.pic>p{
+    width: 100%;
+    border-radius: 10px;
+    /* position: relative; */
+    height: 40px;
+    padding: 10px;
+    text-align: center;
+    margin:0;
+    /* top: 40px; */
+    z-index: -1;
+}
+
+#content>.pic>.desp{
+    font-size: 20px;
+    margin: 0;
+    position: relative;
+    top: -100px;
+    z-index: 5;
+    color: #fff;
+    text-shadow: #000 0 1px 7px;
+}
diff --git a/wtd/example.html b/wtd/example.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="title">Title</title>
+    <link rel="stylesheet" href="examp.css">
+    <base target="_blank">
+</head>
+<body>
+	<script src="jq.min.js"></script>
+    <audio src="music.m4a" id="audio" preload="auto"></audio>
+    <div id="tit">
+        <p class="title">运动会</p>
+        <!-- <p>若某些图片加载失败，请右键图片点击加载映像以重新加载</p> -->
+        <div id="musctrl">
+            <p>音乐: 运动员进行曲</p>
+            <a onclick="if($(this).hasClass('play')){
+                    document.getElementById('audio').play();
+                    played=true;
+                    $('#musctrl>.btn').text('暂停');
+                    $('#musctrl>.btn').removeClass('play');
+                    $('#music>.tip').text('我们已开始播放音乐');
+                    $('#music>.btn').remove();
+                }else{
+                    document.getElementById('audio').pause();
+                    this.innerText='播放';
+                    $(this).addClass('play')
+                }" class="play a btn" style="margin: 0 15px;">播放</a>
+        </div>
+    </div>
+    <div id="content">
+        <div id="music">
+            <p class="ti">音乐起~</p>
+            <p class="tip">下滑即意味着我们会趁浏览器不注意时播放</p>
+            <a onclick="document.getElementById('audio').play();
+            played=true;
+            $('#musctrl>.btn').text('暂停');
+            $('#musctrl>.btn').removeClass('play');
+            $('#music>.tip').text('我们已开始播放音乐');
+            $('#music>.btn.noplay').remove();
+            $(this).remove();" class="play a btn">播放</a>
+            <a class="a btn noplay" onclick="playm=false;$('#musctrl').remove();$('#music>.btn').remove();$('#music>.tip').text('我们不会播放音乐')">不播放音乐</a>
+        </div>
+        <div class="pic af">
+            <p>加载中...</p>
+            <img src="1.jpg" class="pic" loading="lazy">
+            <p class="desp">杭州西湖</p>
+        </div>
+        <div class="pic af">
+            <p>加载中...</p>
+            <img src="4.jpg" class="pic" loading="lazy">
+            <p class="desp">群山云海</p>
+        </div>
+        <div class="pic af">
+            <p>加载中...</p>
+            <img src="2.jpg" class="pic" loading="lazy">
+            <p class="desp">安徽黄山</p>
+        </div>
+        <div class="pic af">
+            <p>加载中...</p>
+            <img src="3.jpg" class="pic" loading="lazy">
+            <p class="desp">星空</p>
+        </div>
+    </div>
+    <div id="footer">
+        网站制作：<a class="a jump">星源</a><br>
+        策划方：<a class="a jump">水滴实验室</a>
+    </div>
+    <script src="index.js"></script>
+</body>
+</html>