728/ismism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ismism/ismism.ts/ui/index.html

708 lines
15 KiB
HTML
Raw Normal View History

init
2022-08-11 13:01:30 +08:00
<!DOCTYPE html>
<html>
<head>
<title>主义主义 活动公示</title>
apply template
2022-08-19 11:41:35 +08:00
<meta charset="utf-8">
re-init
2022-08-19 09:53:32 +08:00
<meta name="viewport" content="width=device-width, initial-scale=1">
fg bg
2022-08-24 13:02:58 +08:00
<!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
<link rel="stylesheet" href="../dep/w3.css">
init
2022-08-11 13:01:30 +08:00
</head>
<style>
header
2022-08-24 15:26:37 +08:00
* {
--cl-white: #fff;
--cl-light-gray: #f1f1f1;
stat
2022-08-27 19:14:40 +08:00
--cl-gray: #9e9e9e;
header
2022-08-24 15:26:37 +08:00
--cl-dark-gray: #616161;
--cl-black: #000;
stat
2022-08-27 19:14:40 +08:00
--cl-pale-red: #ffdddd;
header
2022-08-24 15:26:37 +08:00
--cl-red: #f44336;
stat
2022-08-27 19:14:40 +08:00
--cl-amber: #ffc107;
avatar
2022-08-29 20:05:55 +08:00
--cl-purple: #673ab7;
header
2022-08-24 15:26:37 +08:00
--small: 12px;
--normal: 15px;
--large: 18px;
}
.light-gray {
color: var(--cl-black) !important;
border-color: var(--cl-black) !important;
background-color: var(--cl-light-gray) !important;
}
.dark-gray {
color: var(--cl-white) !important;
border-color: var(--cl-dark-gray) !important;
background-color: var(--cl-dark-gray) !important;
}
html {
box-sizing: border-box;
overflow-x: hidden;
}
body {
margin: 0;
font-family: Verdana, sans-serif;
font-size: var(--normal);
line-height: 1.5;
}
h1 {
font-size: 36px
}
h2 {
font-size: 30px
}
h3 {
font-size: 24px
}
h4 {
font-size: 20px
}
h5 {
font-size: 18px
}
h6 {
font-size: 16px
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
code {
article title
2022-08-25 16:38:16 +08:00
font-family: monospace;
header
2022-08-24 15:26:37 +08:00
font-size: 1em;
}
tag
2022-08-21 13:04:24 +08:00
a {
text-decoration: none;
}
header
2022-08-24 15:26:37 +08:00
header {
padding-top: 32px;
padding-bottom: 16px;
article title
2022-08-25 16:38:16 +08:00
max-width: 1400px;
content
2022-08-25 15:20:02 +08:00
margin-left: auto;
margin-right: auto;
header
2022-08-24 15:26:37 +08:00
text-align: center;
}
header .tag {
margin: 16px 32px;
}
.tag a {
border-width: 1px;
border-style: solid;
border-radius: 6px;
margin-right: 6px;
margin-bottom: 6px;
article title
2022-08-25 16:38:16 +08:00
color: var(--cl-black);
border-color: var(--cl-black);
background-color: var(--cl-light-gray);
}
.tag span {
display: inline-block;
tab
2022-08-28 21:46:52 +08:00
padding: 0.1em 8px;
article title
2022-08-25 16:38:16 +08:00
margin-left: 0.75ch;
text-align: center;
border-radius: 50%;
font-size: var(--small);
color: var(--cl-white);
background-color: var(--cl-black);
header
2022-08-24 15:26:37 +08:00
}
.tag a,
button {
display: inline-block;
padding: 5px 10px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
text-align: center;
cursor: pointer;
white-space: nowrap;
user-select: none;
color: inherit;
background-color: inherit;
}
button {
border: none;
}
button:hover,
.tag a:hover {
color: var(--cl-white) !important;
border-color: var(--cl-dark-gray) !important;
background-color: var(--cl-dark-gray) !important;
opacity: 0.7;
}
.banner {
position: relative;
padding: 0.01em 16px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}
.banner button {
stat
2022-08-27 19:14:40 +08:00
font-size: var(--large);
header
2022-08-24 15:26:37 +08:00
}
.topright {
position: absolute;
right: 0;
top: 0
}
content
2022-08-25 15:20:02 +08:00
.content {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin-left: auto;
margin-right: auto;
max-width: 1400px;
min-width: 320px;
}
side
2022-08-30 12:51:17 +08:00
@media (max-width: 960px) {
.content-main,
.content-side {
width: 100%;
}
content
2022-08-25 15:20:02 +08:00
}
side
2022-08-30 12:51:17 +08:00
@media (min-width: 960px) {
.content-main {
flex-basis: 720px;
flex-grow: 1;
}
.content-side {
flex-basis: 320px;
flex-grow: 1;
}
content
2022-08-25 15:20:02 +08:00
}
article title
2022-08-25 16:38:16 +08:00
.content-main>article {
margin: 16px !important;
color: var(--cl-black);
background: var(--cl-white);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
.content-main>article>section {
padding: 0.01em 16px;
}
.title {
display: inline-block;
font-size: 24px;
font-weight: bold;
margin: 10px 0;
}
.title code {
font-weight: normal;
color: var(--cl-light-gray);
background-color: var(--cl-dark-gray);
padding: 0.1em 8px;
border-radius: 4px;
text-align: center
}
.date {
color: var(--cl-dark-gray);
font-size: 12px;
font-family: monospace;
font-style: italic;
margin: 10px 0;
}
photo
2022-08-26 16:29:48 +08:00
.photo {
color: var(--cl-dark-gray);
text-align: center;
width: auto;
}
.photo>div {
display: flex;
flex-flow: row wrap;
align-items: center;
text-align: center;
border-top: 1px dotted var(--cl-dark-gray);
padding: 10px 0;
}
@media (max-width: 720px) {
.photo>div>span {
width: 100%;
}
}
@media (min-width: 720px) {
.photo>div>span {
flex-basis: 180px;
flex-grow: 1;
}
.photo>div>span:nth-child(1) {
text-align: left;
}
.photo>div>span:nth-child(2) {
text-align: center;
}
.photo>div>span:nth-child(3) {
text-align: right;
}
}
.photo button {
padding: 0;
}
.photo img {
width: 100%;
}
stat
2022-08-27 19:14:40 +08:00
.stat {
tab
2022-08-28 21:46:52 +08:00
margin-top: 24px;
stat
2022-08-27 19:14:40 +08:00
}
.stat>.label {
overflow: auto;
}
.stat>.label>*:nth-child(1) {
float: left;
}
.stat>.label>*:nth-child(2) {
float: right;
}
.stat>.label>a {
text-decoration: underline;
}
.stat>.label>a:hover {
color: var(--cl-amber);
}
bar
2022-08-28 13:27:27 +08:00
.stat>.bar {
margin: 5px 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}
.stat>.bar>.progress {
stat
2022-08-27 19:14:40 +08:00
position: relative;
width: 100%;
color: var(--cl-black);
background-color: var(--cl-light-gray);
font-family: monospace;
}
bar
2022-08-28 13:27:27 +08:00
.stat>.bar>.progress>span {
stat
2022-08-27 19:14:40 +08:00
display: inline-block;
position: absolute;
padding: 0.25em 8px;
left: 0;
width: 100%;
}
bar
2022-08-28 13:27:27 +08:00
.stat>.bar>.progress>span:nth-child(1) {
stat
2022-08-27 19:14:40 +08:00
position: relative;
min-width: 1em;
background-color: var(--cl-gray);
}
bar
2022-08-28 13:27:27 +08:00
.stat>.bar>.progress>span:nth-child(2) {
stat
2022-08-27 19:14:40 +08:00
text-align: center;
background: none;
}
bar
2022-08-28 13:27:27 +08:00
.stat>.bar>.progress>span:nth-child(3) {
stat
2022-08-27 19:14:40 +08:00
text-align: right;
background: none;
}
circle
2022-08-28 14:55:20 +08:00
.circle {
display: flex;
flex-flow: row wrap;
justify-content: center;
text-align: center;
}
.circle>div {
flex-basis: 1px;
flex-grow: 1;
display: flex;
flex-flow: column nowrap;
align-items: center;
margin: 10px;
font-size: var(--large);
}
.circle>div>.progress {
--size: 4em;
width: var(--size);
height: var(--size);
margin-bottom: 10px;
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(closest-side, var(--cl-white) 66%, transparent 0 100%),
conic-gradient(var(--cl-gray) calc(var(--value) * 1%), var(--cl-light-gray) 0);
font-family: monospace;
font-size: calc(var(--size) / 2);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
color: var(--cl-amber);
text-shadow: 0 2px 2px var(--cl-light-gray);
}
tab
2022-08-28 21:46:52 +08:00
.tab {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 16px 0;
}
.tab>button {
margin: 0 3px;
}
.tab>button>span {
display: inline-block;
background: var(--cl-black);
color: var(--cl-white);
padding: 0.1em 8px;
text-align: center
}
log
2022-08-29 14:28:07 +08:00
.log {
background: var(--cl-light-gray);
border-radius: 16px;
padding: 16px 8px;
margin-bottom: 16px;
max-height: 480px;
overflow-y: scroll;
}
.log>span {
display: block;
width: 100%;
margin: 8px 0;
color: var(--cl-gray);
text-align: center;
}
.log>div {
display: flex;
flex-flow: row nowrap;
margin: 16px 0;
}
.log>div>.avatar {
flex-shrink: 0;
width: 48px;
height: 48px;
avatar
2022-08-29 20:05:55 +08:00
background: var(--cl-gray);
log
2022-08-29 14:28:07 +08:00
border-radius: 50%;
}
.log>div>div:nth-child(2) {
display: flex;
flex-flow: column nowrap;
margin-left: 16px;
margin-right: 8px;
}
.log>div>div>.label {
font-size: var(--small);
margin-bottom: 6px;
}
.log>div>div>.msg {
min-width: 120px;
padding: 0.5em 16px;
background-color: var(--cl-light-gray);
border-radius: 0 8px 8px 8px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
footer
2022-08-30 12:30:27 +08:00
footer {
padding: 32px 16px;
margin-top: 16px;
color: var(--cl-gray);
background: var(--cl-dark-gray);
text-align: center;
}
footer>a {
display: inline-flex;
align-items: center;
justify-content: center;
}
footer>a>img {
height: 1.2em;
margin-right: 0.2em;
}
footer>span {
display: block;
margin-top: 8px;
font-size: var(--small);
font-family: monospace;
}
header
2022-08-24 15:26:37 +08:00
.animate-left {
position: relative;
animation: animateleft 0.4s
}
@keyframes animateleft {
from {
left: -300px;
opacity: 0
}
to {
left: 0;
opacity: 1
}
}
.animate-right {
position: relative;
animation: animateright 0.4s
}
@keyframes animateright {
from {
right: -300px;
opacity: 0
}
to {
right: 0;
opacity: 1
}
}
init
2022-08-11 13:01:30 +08:00
</style>
tst data #2
2022-08-13 13:44:37 +08:00
<script>
</script>
header
2022-08-24 15:26:37 +08:00
<body class="light-gray">
<div class="dark-gray banner animate-right">
<button onclick="this.parentElement.style.display='none'" class="dark-gray topright">&times;</button>
apply w3
2022-08-19 10:12:07 +08:00
<h3>提示!</h3>
apply template
2022-08-19 11:41:35 +08:00
<p>网站开发中。当前页面皆为测试内容。</p>
</div>
header
2022-08-24 15:26:37 +08:00
<header class="animate-left">
<a href="">
<h1><b>主义主义 <span style="color: var(--cl-red)">活动</span>公示</b></h1>
tag
2022-08-21 13:04:24 +08:00
</a>
<hr>
header
2022-08-24 15:26:37 +08:00
<div class="tag">
article title
2022-08-25 16:38:16 +08:00
<a class="dark-gray" href="#全部公示">全部公示<span>2</span></a><a href="#进行中">进行中<span>2</span></a><a
href="#已结束">已结束<span>0</span></a><a href="#设施建设">设施建设<span>1</span></a><a
href="#设施建设">物资配给<span>1</span></a><a href="#软件开发">软件开发<span>1</span></a><a
href="#苏州">苏州<span>1</span></a><a href="#成都">成都<span>1</span></a><a
href="#星星家园">星星家园<span>1</span></a><a href="#主义主义网站">主义主义网站<span>1</span></a>
tag
2022-08-21 13:04:24 +08:00
</div>
apply template
2022-08-19 11:41:35 +08:00
</header>
content
2022-08-25 15:20:02 +08:00
<div class="content animate-right">
<div class="content-main">
article title
2022-08-25 16:38:16 +08:00
<article>
<section>
<a href="#1" class="title"><code>#123</code> 星星家园扩建</a>
<div class="tag">
<a href="#进行中">进行中</a><a href="#已结束">已结束</a><a href="#设施建设">设施建设</a><a href="#设施建设">物资配给</a><a
href="#软件开发">软件开发</a><a href="#苏州">苏州</a><a href="#成都">成都</a><a href="#星星家园">星星家园</a><a
href="#主义主义网站">主义主义网站</a>
content
2022-08-25 15:20:02 +08:00
</div>
article title
2022-08-25 16:38:16 +08:00
<div class="date">公示时间：2022-08-12 12:32<br>更新时间：2022-08-12 12:32</div>
</section>
apply template
2022-08-19 11:41:35 +08:00
photo
2022-08-26 16:29:48 +08:00
<section class="photo">
<div>
<span>图片标题xxxx标题标题图片标题xxxx</span>
<span><button>上一张</button> / <button>下一张</button></span>
<span>第12张 / 共43张</span>
</div>
<img src="https://www.w3schools.com/w3css/img_nature_wide.jpg">
</section>
content
2022-08-25 15:20:02 +08:00
stat
2022-08-27 19:14:40 +08:00
<section>
<div class="stat">
<div class="label">
<span>收到支持</span>
<span>预算(元)</span>
</div>
bar
2022-08-28 13:27:27 +08:00
<div class="bar">
<div class="progress">
<span style="width: 50%">123456</span>
<span>50%</span>
<span>123456</span>
</div>
<div class="progress">
<span style="width: 25%;">12345</span>
<span>25%</span>
</div>
stat
2022-08-27 19:14:40 +08:00
</div>
<div class="label">
<span>当前支出</span>
detail
2022-08-30 11:31:42 +08:00
<a target="_blank" rel="noopener"
href="https://docs.qq.com/sheet/DZU1qaWRsUnJJU1Z1?tab=BB08J2">查看明细</a>
stat
2022-08-27 19:14:40 +08:00
</div>
</div>
circle
2022-08-28 14:55:20 +08:00
<br>活动目标：
<div class="circle">
<div>
<div class="progress" style="--value: 65">65%</div>
<span>雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建</span>
</div>
<div>
<div class="progress" style="--value: 65">65%</div>
<span>雨棚扩建雨棚扩建</span>
</div>
<div>
<div class="progress" style="--value: 100; color: var(--cl-gray)">完成</div>
<span>雨棚扩建雨棚扩建</span>
</div>
<div>
<div class="progress" style="--value: 0; color: var(--cl-gray)">0%</div>
<span>雨棚扩建</span>
</div>
</div>
stat
2022-08-27 19:14:40 +08:00
</section>
tab
2022-08-28 21:46:52 +08:00
<section>
<div class="tab">
<button><span>332</span> 条活动日志 ❯</button>
<button><span>32</span> 名参与者 ❯</button>
<button><span>3212</span> 位支持者 ❯</button>
apply template
2022-08-19 11:41:35 +08:00
</div>
log
2022-08-29 14:28:07 +08:00
<div class="log">
<span>322 条活动日志</span>
<div>
<div class="avatar"></div>
<div>
<div class="label">username, icons <span>timestamp</span></div>
<div class="msg">msg</div>
</div>
</div>
<div>
<div class="avatar"></div>
<div>
<div class="label">username, icons <span>timestamp</span></div>
<div class="msg">Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed
mattis nunc id lorem
euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at.
Phasellus sed
ultricies mi non congue ullam corper. Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue
gravida
diam non fringilla</div>
</div>
</div>
<div>
<div class="avatar"></div>
<div>
<div class="label">username, icons <span>timestamp</span></div>
<div class="msg">Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed
mattis nunc id lorem
euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at.
Phasellus sed
ultricies mi non congue ullam corper. Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue
gravida
diam non fringilla</div>
</div>
</div>
<span>322 条活动日志</span>
</div>
tab
2022-08-28 21:46:52 +08:00
</section>
article title
2022-08-25 16:38:16 +08:00
</article>
content
2022-08-25 15:20:02 +08:00
<hr>
</div>
apply template
2022-08-19 11:41:35 +08:00
content
2022-08-25 15:20:02 +08:00
<div class="content-side">
side
2022-08-30 12:51:17 +08:00
<div class="log">
<span>322 条活动日志</span>
<div>
<div class="avatar"></div>
<div>
<div class="label">username, icons <span>timestamp</span></div>
<div class="msg">msg</div>
</div>
</div>
<div>
<div class="avatar"></div>
<div>
<div class="label">username, icons <span>timestamp</span></div>
<div class="msg">Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed
mattis nunc id lorem
euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at.
Phasellus sed
ultricies mi non congue ullam corper. Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue
gravida
diam non fringilla</div>
</div>
</div>
<div>
<div class="avatar"></div>
<div>
<div class="label">username, icons <span>timestamp</span></div>
<div class="msg">Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed
mattis nunc id lorem
euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at.
Phasellus sed
ultricies mi non congue ullam corper. Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue
gravida
diam non fringilla</div>
</div>
apply template
2022-08-19 11:41:35 +08:00
</div>
side
2022-08-30 12:51:17 +08:00
<span>322 条活动日志</span>
apply template
2022-08-19 11:41:35 +08:00
</div>
</div>
apply w3
2022-08-19 10:12:07 +08:00
</div>
apply template
2022-08-19 11:41:35 +08:00
footer
2022-08-30 12:30:27 +08:00
<footer class="animate-left">
<a href="https://space.bilibili.com/23191782" target="_blank" rel="noopener"><img
src="https://www.bilibili.com/favicon.ico">未明子</a> ·
<a href="https://space.bilibili.com/19147010" target="_blank" rel="noopener"><img
src="https://www.bilibili.com/favicon.ico">张正午</a>
<span>网站维护：seven.two.eight@outlook.com</span>
apply template
2022-08-19 11:41:35 +08:00
</footer>
init
2022-08-11 13:01:30 +08:00
</body>
<script src="bind.js"></script>
</html>
Reference in New Issue Copy Permalink