html首页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<!-- 引入 highlight.js 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<!-- <link rel="stylesheet" href="分页共享的shared.css"> -->
<!-- <link rel="stylesheet" href="登录界面样式.css"> -->
<!-- <link rel="stylesheet" href="头部的样式.css"> -->
<!-- <link rel="stylesheet" href="网站页面的样式.css"> -->
<!-- <link rel="stylesheet" href="倒计时页面的样式.css"> -->
<!-- <script src="分页共享的js.js"></script> -->
<!-- <script src="网站收藏js.js" defer></script> -->
<style>
* {
/* 禁止文本选中 */
user-select: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 登录界面样式 开始 ---------------------------------------*/
html,
body {
height: 100%;
}
body {
display: flex;
}
.wrapper {
/* display: none; */
width: 100%;
background-image: url('file:///D:/img/开门.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
transform: scale(1.5);
width: 525px;
height: 300px;
display: flex;
position: relative;
border-radius: 8px;
margin: 19% auto;
border: 1px solid rgba(255, 255, 255, 6);
background-image: linear-gradient(to top left,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 30%,
rgba(255, 255, 255, 0));
backdrop-filter: blur(4px);
box-shadow:
inset 4px 4px 3px rgba(255, 255, 255, 0.6),
inset -4px -4px 3px rgba(0, 0, 0, 0.6);
}
.welcome-box {
width: calc(525px / 2);
height: 100%;
left: 0;
top: 0;
position: absolute;
border: 5px;
transition: 0.5s ease-in-out;
border-radius: 8px 0 0 8px;
background-image: url('file:///D:/img/左.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
z-index: 9;
}
p,
h1 {
color: rgb(255, 255, 255);
}
.welcome-box h1 {
margin-top: 45px;
text-align: center;
letter-spacing: 5px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.welcome-box p {
height: 25px;
line-height: 25px;
text-align: center;
margin: 10px 0;
font-weight: bold;
text-shadow: 2px 2px 2px #100000;
}
.image-container {
width: 100px;
height: 100px;
margin: 10px auto;
border-radius: 50%;
overflow: hidden;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
}
.image-container img {
width: 100%;
height: 100%;
}
.form-container {
margin: 120px auto;
}
.form-container,
.registration-container {
flex: 1;
height: 100%;
margin: 40px auto;
}
.title-container {
height: 50px;
line-height: 4px;
}
.title-container h1 {
text-align: center;
letter-spacing: 5px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
}
.input-group {
display: flex;
flex-direction: column;
align-items: center;
}
.input-group input {
width: 60%;
height: 25px;
margin-bottom: 20px;
text-indent: 4px;
border-radius: 3px;
box-shadow: 0px 0px 5px 5px #f7c750;
}
.input-group input::placeholder {
color: rgb(36, 192, 127);
letter-spacing: 25px;
font-size: 15px;
}
.form-container input[type="password"] {
transform: translateY(20px);
}
.input-group input:focus {
color: rgb(61, 185, 71);
}
.button-container {
display: flex;
justify-content: center;
}
.form-container .button-container {
margin-top: 45px;
}
.button-container button {
width: 100px;
height: 30px;
margin: 0 3px;
border: none;
border-radius: 3px;
color: #fff;
background-color: #2196F3;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
}
.register-btn {
background-color: #4CAF50;
}
.button-container p {
height: 30px;
line-height: 30px;
padding: 0 10px;
font-size: 14px;
background-color: #f56c6c;
border-radius: 3px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #d3bfbf;
}
.button-container button:hover,
.button-container p:hover {
cursor: pointer;
/* opacity: 0.6; */
background-color: rgb(251, 16, 16);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.button-container p:active,
.button-container button:active {
box-shadow:
inset -2px -2px 3px rgba(255, 255, 255, 0.6),
inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
/* 登录界面样式 结束 */
/* 登录后的样式 ------------------------------------------------------*/
#mask {
display: none;
width: 100%;
transition: background-color 0.3s, color 0.3s;
background: #0b1b2c;
/* 默认背景色 */
color: #ffffff;
/* 分页设置 */
.content {
/* 没有选择链接的分页内容 */
display: none;
}
.active {
/* 选择链接的分页内容 */
display: block;
}
.content p {
background-color: #144756;
color: #f56c6c;
text-shadow: 1px 1px 1px #000000;
}
/* 分页设置结束 */
}
/* 头部 */
header {
width: 100vw;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #cbcbcb;
/* logo */
.logoBox {
width: 110px;
margin: 0 10px;
}
figure .logo {
width: 202px;
height: 50px;
/* 缩小 */
transform: scale(0.8);
margin-top: 2px;
margin-left: -22px;
border-radius: 3px;
background: #f30303;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 5px rgba(0, 0, 0, 0.6);
z-index: 99;
figcaption {
background: hsl(0, 0%, 0%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
box-shadow: inset 4px 4px 4px rgb(216 216 216 / 55%), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
letter-spacing: -3px;
line-height: 46px;
border-radius: 3px;
font-size: 31px;
width: 118px;
}
.my_name1 {
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
transform: translate(35%, 0%);
}
.my_name2 {
text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
transform: translate(35%, -93%);
}
img {
width: 60px;
transition: transform 0.3s ease;
position: absolute;
}
.kong {
margin-top: -10px;
margin-left: 148px;
transform: scale(0.8);
&:hover {
transform: scale(1.3);
filter: drop-shadow(0 0 0.3em #ff0202);
}
}
.ying {
top: 0px;
margin-left: -8px;
transform: scale(1.6);
&:hover {
transform: scale(2.3);
filter: drop-shadow(0 0 0.3em #ff0202);
}
}
}
/* 时间 */
#dateTime1 {
background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.5rem;
font-weight: 900;
text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
sub {
-webkit-text-fill-color: #cfd601;
text-shadow: 1px 1px 1px #100000;
font-size: 1rem;
}
}
/* 显示复选框10秒倒计时 */
.countdownWithZero {
color: rgb(255, 255, 255);
background-color: black;
}
}
/* 导航栏 */
nav {
background-color: #cbcbcb;
padding: 5px;
}
nav a {
color: #007bff;
padding: 6px 16px;
text-decoration: none;
transition: background-color 0.3s;
}
nav a:hover {
background: #0b1b2c8e;
color: white;
backdrop-filter: blur(5px);
}
.nav-active {
display: inline-block;
transform: scale(1.6);
transform-origin: center;
margin-left: 10px;
padding: 0 3px 5px 3px;
border-radius: 1px;
background: #0b1b2c;
color: white;
text-shadow: 1px 1px 1px #000000;
}
header button {
font-size: 22px;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
#showCheckboxesButton {
background-color: #ffbb66;
color: white;
text-shadow: 1px 1px 1px #000000;
}
.logout-btn {
background-color: #ff0909b8;
color: rgb(248, 227, 2);
text-shadow: 1px 1px 1px #000000;
}
/* 导航栏 结束*/
/* 头部 结束 */
/* <!-- ------------分页共享样式---------------------------------------- --> */
/* 中间留言区 */
table {
width: 100%;
margin: 0;
padding: 0;
.titleBtn {
display: flex;
text-align: center;
td {
height: 24px;
width: 100%;
}
.displayBtn {
color: #67C23A;
background: #0bb811c9;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
/* width: 30vw; */
cursor: pointer;
font-weight: bold;
&:hover {
background-color: #f3d303;
color: #e6a23c;
}
}
marquee {
background: linear-gradient(to right, #4caf4fed, #dc0000cf);
color: #f3d303;
margin: 0;
padding: 0;
/* width: 26vw; */
height: 24px;
}
/* 删除按钮 */
.deleteBtn {
color: #f3d303;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
background: #ff0000;
font-weight: bold;
cursor: pointer;
/* width: 30vw; */
&:hover {
background-color: #f3d303;
color: #ff0505;
}
}
}
}
/* 隐藏的输入框*/
.myDialog {
position: fixed;
top: 6vw;
left: 10vw;
background: #2c3e50;
box-shadow: 0 0 10px rgba(255, 254, 254, 0.5);
border-radius: 8px;
border: 0;
z-index: 999;
opacity: 0.9;
.dialog-form {
box-shadow: 0 0 1px rgba(255, 254, 254, 0.5);
display: flex;
justify-content: space-between;
padding: 5px;
cursor: move;
h2 {
color: #ffffffaf;
text-shadow: 1px 1px 1px #030303;
}
/* 关闭按钮 */
span {
background: #456e7d;
border: none;
font-size: 28px;
/* 放大镜效果 */
transform: translate(20%, 5%) scale(1.6);
/* 粗字体 */
font-weight: bold;
margin: 1px 9px;
width: 28px;
padding: 0;
height: 28px;
border-top-right-radius: 5px;
color: #fea501;
/* 行高 */
line-height: 28px;
&:hover {
background-color: #f30303;
color: #fafe01;
}
}
}
.textarea-form {
background-color: #144756;
/* 修改数据器按钮 */
#readFolder {
font-size: 18px;
color: #67c23a;
text-shadow: 1px 1px 1px #070707;
cursor: pointer;
}
/* 编辑文本按钮 */
#toolbar {
margin: 0 5px 5px 5px;
button {
font-size: 18px;
/* background-color: hsla(160, 100%, 37%, 0.63); */
/* border: 1PX solid #909399; */
padding: 1PX;
border-radius: 2PX;
&:hover {
cursor: pointer;
background-color: rgb(0, 0, 0);
color: #ffffff;
}
}
/* 编辑文本输入框 */
#editor {
background-color: #ffffff;
border: #f9d400 2px solid;
margin: 5px;
padding: 10px;
border-radius: 5px;
/* 最大高度 */
max-height: 500px;
/* 滚动条 */
overflow-y: auto;
color: #000000;
text-shadow: 0px 0px 0px #070707;
}
}
input[type="file"] {
box-shadow: 0 0 2px rgba(253, 3, 3, 0.991);
margin: 5px;
}
sub {
color: #67C23A;
text-shadow: 1px 1px 1px #0a0000;
user-select: text;
}
section {
display: flex;
input,
button {
color: #fffcfc;
text-shadow: 1px 1px 1px #000;
background: #0bb81186;
/* 文本竖排 */
writing-mode: vertical-rl;
/* 文字间距 */
letter-spacing: 20px;
font-size: 25px;
padding-right: 10px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
textarea {
background: #0b1b2c;
/* color: hsla(160, 100%, 37%, 0.63); */
color: #ffffff;
text-shadow: 2px 2px 1px #0a0000;
/* background: #144756bd; */
font-size: 1.2rem;
background-image: url('file:///D:/img/开门.png');
/* 替换为你的图片路径 */
background-size: cover;
/* 使背景图片覆盖整个元素 */
background-position: center;
/* 设置背景图片的位置为中心 */
&::placeholder {
text-align: center;
/* color: #67C23A; */
color: #e1ff00;
text-shadow: 1px 1px 1px #0a0000;
}
}
}
}
}
/* 隐藏的输入框 结束 */
/* 留言内容布局 */
@keyframes backgroundChange {
0% {
background-image: url('file:///D:/img/706.png');
}
20% {
background-image: url('file:///D:/img/771.png');
}
40% {
background-image: url('file:///D:/img/772.png');
}
60% {
background-image: url('file:///D:/img/773.png');
}
80% {
background-image: url('file:///D:/img/774.png');
}
100% {
background-image: url('file:///D:/img/706.png');
}
}
output {
/* 你原本的样式 */
opacity: 0.8;
border: 2px solid rgb(134, 133, 133);
background-color: #144756;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
width: 99vw;
height: 91vh;
margin: 1px 5px;
border-radius: 10px;
display: flex;
align-content: flex-start;
font-size: 20px;
flex-wrap: wrap;
overflow-x: hidden;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
animation: backgroundChange 10s infinite;
/* 设置动画，时间可以根据需要调整 */
/* 留言内容布局 结束*/
/* 留言内容字体样式 */
.Success {
input[type="checkbox"] {
display: none;
}
.Message {
color: #67c23a;
text-shadow: 1px 1px 1px #000;
margin: 10px;
padding: 0 5px;
border-radius: 5px;
text-align: center;
user-select: text;
* {
user-select: text;
}
&:hover {
background-color: rgb(191, 210, 255);
color: rgb(255, 250, 250);
text-shadow: 1px 1px 1px #030303;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
}
pre:hover {
background-color: rgb(191, 210, 255);
color: rgb(255, 250, 250);
text-shadow: 1px 1px 1px #030303;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.href {
box-shadow: 1px 1px 2px 2px rgba(255, 251, 251, 0.5);
padding: 2px;
border-radius: 3px;
}
.finish {
background-color: rgb(191, 210, 255);
color: rgb(255, 250, 250);
text-shadow: 1px 1px 1px #030303;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
/* 删除线 */
text-decoration: line-through;
text-decoration-color: #c23a3a;
text-decoration-thickness: 2px;
}
a {
text-decoration: none;
/* 去掉下划线 */
transform: translate(2px, 2px);
border-radius: 4px;
background-color: rgba(255, 0, 0, 0.831);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
backdrop-filter: blur(5px);
width: fit-content;
font-size: 22px;
color: #ebf704;
text-shadow: 1px 1px 1px #100000;
padding: 5px;
box-shadow:
inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 5px rgba(0, 0, 0, 0.6);
}
}
}
/* <!-- ------------分页共享样式 结束---------------------------------------- --> */
/* 网页页面布局 */
#memo3 {
width: auto;
height: 10vh;
}
.webPageTit {
border: #f39703 solid 5px;
padding: 2px;
.Success {
margin-top: 8px;
}
}
.webList,
.localList {
display: flex;
}
.webList li,
.localList li {
margin: 5px;
height: 50px;
display: inline-block;
background-color: #00000055;
padding: 2px 5px;
border-radius: 3px;
backdrop-filter: blur(2px);
width: fit-content;
cursor: pointer;
&::before {
content: "";
display: block;
height: 100%;
width: 50%;
position: absolute;
top: 0;
left: 50%;
z-index: -1;
transition: all 0.3s ease-in-out;
background-color: #ffbb66;
filter: blur(15px);
}
&::after {
content: "";
display: block;
height: 100%;
width: 50%;
position: absolute;
font-size: 30px;
top: 0;
left: 0%;
z-index: -1;
transition: all 0.3s ease-in-out;
background-color: #ff2233;
filter: blur(15px);
}
&:hover {
background-color: #f3d303;
}
a {
background-color: #00000055;
backdrop-filter: blur(5px);
width: fit-content;
font-size: 25px;
color: rgb(254, 254, 254);
text-shadow: 1px 1px 1px #100000;
/* 去掉下划线 */
text-decoration: none;
margin: 0px;
padding: 5px;
}
}
/* 网页页面布局 结束*/
/* 倒计时页面布局 */
#memo4 {
width: auto;
height: 10vh;
}
.countdownTit {
border: #f39703 solid 5px;
padding: 2px;
}
.countdownContainer {
width: 100%;
display: flex;
/* flex-direction: column; */
align-items: center;
margin: 1px;
padding: 1px;
border: #e6a23c solid 2px;
font-size: 1.5rem;
}
/* 默认倒计时 */
#defaultCountdownContainer {
/* width: 100%; */
display: flex;
flex-direction: column;
border: #e6a23c solid 2px;
margin: 2px 10px;
padding: 2px 10px;
}
div[id^="countdown-"] {
background: rgba(29, 29, 29, 0.708);
border-radius: 2px;
backdrop-filter: blur(1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.982);
text-shadow: 1px 1px 1px #000000;
font-weight: 500;
border: 2px solid #fff;
}
div[id^="countdown-"]::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 2px;
/* background: #141111; */
/* 底部分割线 */
background-image: url('file:///D:/img/42.png');
/* 替换为你的图片路径 */
background-size: cover;
/* 使背景图像覆盖整个元素 */
background-position: center;
/* 使背景图像居中 */
background-repeat: no-repeat;
/* 不重复背景图像 */
}
/* 添加的倒计时 */
#uniqueCountdowns {
/* width: 100%; */
display: flex;
flex-direction: column;
align-items: center;
margin: 1px;
padding: 1px;
border: #ffffff solid 1px;
}
.actionButtons {
width: 100%;
display: flex;
flex-direction: row;
}
.actionButtons button {
width: 100%;
}
.uniqueDeleteButton {
/* 删除按钮 */
color: red;
}
.operativeFunction {
/* height: 100%; */
color: #fffcfc;
text-shadow: 1px 1px 1px #000;
background: #0bb81186;
/* 文本竖排 */
writing-mode: vertical-rl;
/* 文字间距 */
letter-spacing: 20px;
font-size: 25px;
padding-right: 10px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
}
.countdown-Buttons {
display: flex;
border: #e6a23c solid 2px;
}
.countdown-container form {
width: 100%;
display: flex;
}
.full-width {
width: 100%;
}
.countdown-container,
#uniqueCountdowns p {
width: 100%;
}
#uniqueCountdowns b {
border: #ffffff solid 2px;
color: hsla(160, 100%, 37%, 0.63);
text-shadow: 1px 1px 1px #000000;
border-radius: 4px;
margin: 2px;
padding: 2px;
font-size: 1.5rem;
background: #141111b7;
}
#uniqueCountdowns p label {
width: 100%;
margin: 2px;
border-radius: 2px;
backdrop-filter: blur(1px);
display: flex;
justify-content: space-between;
}
#uniqueCountdowns p label::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 2px;
background: #141111b7;
}
.countdown-container,
.uniqueCountdownCheckbox,
.uniqueEditButton,
.uniqueDeleteButton,
.finishButton {
/* 隐藏 */
display: none;
}
.uniqueCountdownCheckbox {
/* 复选框 */
transform: scale(1.8);
margin: 0 8px;
}
#uniqueCountdowns p.FinishTask {
position: relative;
/* 使子元素基于这个元素定位 */
text-decoration: line-through;
text-decoration-color: rgba(0, 0, 0, 0.103);
text-decoration-thickness: 2px;
color: transparent;
/* 将文本颜色设置为透明 */
}
/* 倒计时页面布局 结束*/
/* 登录后的结束 */
/* 白天 模式切换链接样式 */
#mask.day-mode {
background-color: #f0f0f0;
/* 白天模式背景颜色 */
color: #000000;
/* 白天模式文字颜色 */
}
nav.day-mode {
background-color: #cccccc;
/* 白天模式导航栏颜色 */
}
/* 简单的文本编辑器 */
#addReadFolderArea {
#addReadFolder {
display: flex;
#fileContent {
white-space: pre-wrap;
border: 1px solid #ccc;
padding: 5px;
height: 865px;
overflow: auto;
}
}
}
</style>
</head>
<body>
<!-- 登录界面.wrapper -->
<div class="wrapper">
<div class="container">
<div class="welcome-box">
<h1>欢迎</h1>
<p>加入我们！</p>
<div class="image-container">
<img src="file:///D:/img/空.png" alt="正方形图片">
</div>
</div>
<div class="registration-container">
<div class="title-container">
<h1>注册</h1>
</div>
<div class="input-group">
<input type="text" id="reg-username" placeholder="用户名">
<input type="password" id="reg-password" placeholder="密码">
<input type="password" id="reg-confirm-password" placeholder="确认密码">
</div>
<div class="button-container">
<button class="register-btn" onclick="register()">注册</button>
<p onclick="mySwitch()">已有账号？去登录</p>
</div>
</div>
<div class="form-container">
<div class="title-container">
<h1>登录</h1>
</div>
<div class="input-group">
<input type="text" id="login-username" placeholder="用户名">
<input type="password" id="login-password" placeholder="密码">
</div>
<div class="button-container">
<button onclick="login()">登录</button>
<p onclick="mySwitch()">没有账号?去注册</p>
</div>
</div>
</div>
</div>
<!-- 登录界面.wrapper结束 -->
<!-- 登录后受保护的内容#mask -->
<div id="mask">
<!-- 头部 -->
<header>
<figure class="logoBox">
<div class="logo">
<a href="https://blog.****.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻****博客"
target="_blank">
<img class="kong" src="file:///D:/img/空.png" alt="与妖为邻">
</a>
<figcaption class="my_name1">与妖为邻</figcaption>
<figcaption class="my_name2">与妖为邻</figcaption>
<a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" class="home_page"
title="首页" target="_blank">
<img class="ying" src="file:///D:/img/荧.png" alt="与妖为邻" />
</a>
</div>
</figure>
<!-- 导航栏 nav-->
<nav>
<!-- 导航栏链接 -->
<a href="#" onclick="showPage('home')">首页</a>
<a href="#" onclick="showPage('writeDown')">笔记</a>
<a href="#" onclick="showPage('webPage')">网页</a>
<a href="#" onclick="showPage('countdown')">倒计时</a>
<a href="#" onclick="showPage('about')">关于</a>
</nav>
<time datetime="2024-07-10" title="2024-07-10" id="dateTime1">2024-07-10</time>
<iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"
src="https://i.tianqi.com/?c=code&id=99">
</iframe>
<button id="showCheckboxesButton">显示复选框10秒</button>
<button onclick="logout()" class="logout-btn"> 退出登录 </button>
<!-- 添加白天模式切换链接 -->
<a href="#" class="toggle-day-mode" onclick="toggledayMode()">白天模式</a>
</header>
<!-- 内容区 首页----------------------------------------------------------------------------->
<div id="home" class="content active">
<table>
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog.show()">编辑按钮 </td>
<td>
<marquee behavior="alternate" direction="right">欢迎来到首页 </marquee>
</td>
<td id="delete1" class="deleteBtn">删除按钮 </td>
</tr>
<tr>
<td>
<dialog id="myDialog" class="myDialog">
<article class="dialog-form" id="Drag">
<h2>文本操作</h2>
<span onclick="myDialog.close()">×</span>
</article>
<form class="textarea-form">
<input type="file" name="file1"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<sub><a class="href" href=" " target="_blank"></a>
&lt; &gt; &nbsp;
<span
style="color: red;user-select: text;">^\s*(?=\r?$)\n</span></sub>
<button type="button" id="readFolder" onclick="addReadFolderArea.show()">修改数据器</button>
<menu id="toolbar">
<button type="button" id="btnBold">加粗</button>
<button type="button" id="btnItalic">斜体</button>
<button type="button" id="btnUnderline">下划线</button>
<button type="button" id="btnStrikeThrough">删除线</button>
<button type="button" id="btnInsertOrderedList">有序列表</button>
<button type="button" id="btnInsertUnorderedList">无序列表</button>
<button type="button" id="btnJustifyLeft">左对齐</button>
<button type="button" id="btnJustifyCenter">居中对齐</button>
<button type="button" id="btnJustifyRight">右对齐</button>
<button type="button" id="btnJustifyFull">两端对齐</button>
<button type="button" id="btnCreateLink">创建链接</button>
<button type="button" id="btnUnlink">取消链接</button>
<button type="button" id="btnInsertImage">插入图片</button>
<button type="button" id="btnForeColor">文字颜色</button>
<button type="button" id="btnBackground">背景颜色</button>
<button type="button" id="btnUndo">撤销</button>
<button type="button" id="btnRedo">重做</button>
<button type="button" id="btnExportHtml">导出HTML</button>
<button type="button" id="btnReset">重置</button>
<p id="editor" contenteditable="true" data-placeholder="在此输入需要编辑的文本"></p>
</menu>
<section>
<input type="reset" value="重置">
<textarea id="textareaHTML" class="textarea1" name="textarea1" rows="28" cols="125"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取,简陋版编辑器按钮是javascript操作文件内容,修改文件内容后,请快捷键ctrl+s保存"></textarea>
<button type="button" class="abb-text1">添加</button>
</section>
</form>
</dialog>
<output id="memo1">
<dialog id="addReadFolderArea"></dialog>
</output>
</td>
</tr>
</table>
</div>
<!-- 内容区 笔记----------------------------------------------------------------------------->
<div id="writeDown" class="content">
<table>
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog2.show()">编辑按钮 </td>
<td>
<marquee behavior="alternate" direction="right">欢迎来到笔记页面 </marquee>
</td>
<td id="delete2" class="deleteBtn">删除按钮 </td>
</tr>
<tr>
<td>
<dialog id="myDialog2" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag2">
<h2>这是一个弹窗留言输入框</h2> <span onclick="myDialog2.close()">×</span>
</form>
<form class="textarea-form">
<input type="file" name="file2"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<sub><a
class="href" href=" " target="_blank"></a>
&lt;
&gt;
&nbsp;
<span
style="color: red;user-select: text;">^\s*(?=\r?$)\n</span>
</sub>
<section>
<input type="reset" value="重置">
<textarea class="textarea2" name="textarea2" rows="18" cols="90%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text2">添加</button>
</section>
</form>
</dialog>
<output id="memo2"></output>
</td>
</tr>
</table>
</div>
<!-- 内容区 网页----------------------------------------------------------------------------->
<div id="webPage" class="content">
<h3> 常用网页</h3>
<table class="webPageTit">
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog3.show()">编辑按钮 </td>
<td>
<marquee behavior="alternate" direction="right">欢迎来到网页页面 </marquee>
</td>
<td id="delete3" class="deleteBtn">删除按钮</td>
</tr>
<tr>
<td>
<output id="memo3"></output>
</td>
</tr>
</table>
<table>
<tr>
<td>
<dialog id="myDialog3" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag3">
<h2>这是一个弹窗留言输入框</h2> <span onclick="myDialog3.close()">×</span>
</form>
<form class="textarea-form">
<input type="file" name="file3"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<sub><a
class="href" href=" " target="_blank"></a>
&lt;
&gt;
&nbsp;
<span
style="color: red;user-select: text;">^\s*(?=\r?$)\n</span>
</sub>
<section>
<input type="reset" value="重置">
<textarea class="textarea3" name="textarea3" rows="10" cols="90%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text3">添加</button>
</section>
</form>
</dialog>
<h3> 收藏列表</h3>
<div class="webList">
</div>
<h3>
本地列表
</h3>
<div class="localList">
</div>
</td>
</tr>
</table>
</div>
<!-- 内容区 倒计时----------------------------------------------------------------------------->
<div id="countdown" class="content">
<h3>倒计时计划</h3>
<table class="countdownTit">
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog4.show()">编辑按钮 </td>
<td>
<marquee behavior="alternate" direction="right">欢迎来到倒计时页面 </marquee>
</td>
<td id="delete4" class="deleteBtn">删除按钮</td>
<td>
<dialog id="myDialog4" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag4">
<h2>这是一个弹窗留言输入框</h2> <span onclick="myDialog4.close()">×</span>
</form>
<form class="textarea-form">
<input type="file" name="file4"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<sub><a
class="href" href=" " target="_blank"></a>
&lt;
&gt;
&nbsp;
<span
style="color: red;user-select: text;">^\s*(?=\r?$)\n</span>
</sub>
<section>
<input type="reset" value="重置">
<textarea class="textarea4" name="textarea4" rows="18" cols="90%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text4">添加</button>
</section>
</form>
</dialog>
</td>
</tr>
<tr>
<td>
<output id="memo4"></output>
</td>
</tr>
</table>
<div class="countdownContainer">
<div id="defaultCountdownContainer"></div> <!-- 默认倒计时容器 -->
<div class="countdown-Buttons">
<button id="operativeFunction" class="operativeFunction">操作</button>
<div id="uniqueCountdowns"> <!-- 用户添加的倒计时容器 -->
<div class="actionButtons">
<button class="uniqueEditButton" onclick="editSelectedCountdown()">修改</button>
<button class="uniqueDeleteButton" onclick="deleteSelectedCountdown()">删除</button>
</div>
<div class="countdown-container">
<form>
<input type="text" id="uniquePromptInput" class="full-width" placeholder="提示信息">
<input type="datetime-local" id="uniqueDatetimeInput" class="full-width">
<button id="uniqueSaveButton" class="full-width" onclick="saveCountdown()">保存</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 内容区 关于----------------------------------------------------------------------------->
<div id="about" class="content">
<h1>关于</h1>
<p>1.项目初始创建时间---2024年10月09日 </p>
<p>2.成功登录后，“存储登录”，推出登录删除“存储登录”功能。添加收藏网站,添加倒计时功能。---2024年10月22日 </p>
<p>
</div>
</div>
<!-- 登录后受保护的内容#mask结束 -->
</body>
<!-- 登录界面滑动引入的js文件 src="http://code.jquery.com/jquery-latest.js"-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 修改数据器引入 highlight.js 的 JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="网站收藏.js"></script>
<script>
// 切换白天模式函数
function toggledayMode() {
document.getElementById("mask").classList.toggle('day-mode');
document.querySelector('nav').classList.toggle('day-mode');
}
/* 现在时间 */
(s = el => { d = new Date, f = n => ("0" + n).slice(-2), w = "日一二三四五六"; el.innerHTML = `${d.getFullYear()}-${f(d.getMonth() + 1)}-${f(d.getDate())}<sub>星期${w[d.getDay()]}</sub>${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}` })(setInterval(() => ["dateTime1",].forEach(id => s(document.getElementById(id))), 1000));
/* 现在时间 结束 */
// 存储用户信息的数组
const users = [
{ username: "admin", password: "admin123" }, // 添加管理员账户
{ username: "我", password: "w" } // 添加管理员测试账户
];
const register = () => {
const username = document.getElementById("reg-username").value;
const password = document.getElementById("reg-password").value;
const confirmPassword = document.getElementById("reg-confirm-password").value;
// 检查账号和密码是否为空
if (!username || !password) {
alert("账号和密码不能为空！");
return;
}
if (password !== confirmPassword) {
alert("密码不匹配！");
return;
}
// 检查用户名是否已存在
const userExists = users.some(user => user.username === username);
if (userExists) {
alert("用户名已存在，请选择其他用户名！");
return;
}
// 注册用户
users.push({ username, password });
alert("注册成功，请登录！");
mySwitch(); // 切换到登录界面
}
const login = () => {
const username = document.getElementById("login-username").value;
const password = document.getElementById("login-password").value;
// 验证用户信息
const user = users.find(user => user.username === username && user.password === password);
if (user) {
alert("登录成功！");
localStorage.setItem("loggedInUser", JSON.stringify(user)); // 储存用户信息
// 显示受保护的页面
document.getElementById("mask").style.display = "block"; // 显示内容
document.querySelector('.wrapper').style.display = "none"; // 隐藏注册和登录盒子
} else {
alert("用户名或密码错误！");
}
}
const logout = () => {
localStorage.removeItem("loggedInUser"); // 移除用户信息
document.getElementById("mask").style.display = "none"; // 隐藏受保护的内容
document.querySelector('.wrapper').style.display = "block"; // 显示注册和登录盒子
document.getElementById("login-username").value = ""; // 清空登录用户名输入框
document.getElementById("login-password").value = ""; // 清空登录密码输入框
}
let flag = true;
const mySwitch = () => {
if (flag) {
$(".welcome-box").css({
"transform": "translateX(100%)",
"background-image": "url('file:///D:/img/右.png')",
"border-radius": "0 8px 8px 0" // 添加边框圆角
});
$("img").css("transform", "scale(1.3)"); // 这个图片有点小了,添加缩放效果
$("img").attr("src", "file:///D:/img/荧.png");
} else {
$(".welcome-box").css({
"transform": "translateX(0%)",
"background-image": "url('file:///D:/img/左.png')",
"border-radius": "8px 0 0 8px" // 添加圆角效果
});
$("img").css("transform", "scale(1)"); // 这个图片返回原大小,添加缩放效果
$("img").attr("src", "file:///D:/img/空.png");
}
flag = !flag;
}
function loadCountdowns() {
const countdowns = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key.startsWith('uniqueCountdown_')) {
const data = JSON.parse(localStorage.getItem(key));
const timestamp = key.split('_')[1];
countdowns.push({ timestamp, data });
}
}
countdowns.sort((a, b) => a.timestamp - b.timestamp); // 按时间戳排序
countdowns.forEach(({ timestamp, data }) => {
const countdownDiv = document.getElementById('uniqueCountdowns');
const checkboxId = `uniqueCheckbox_${timestamp}`; // 生成唯一的 checkbox id
const countdownElement = document.createElement('div');
countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
countdownElement.innerHTML = `<label for="${checkboxId}"><strong>${data.prompt}</strong>:<span id="uniqueCountdown_${timestamp}"></span></label><button class="finishButton">${data.finished ? '取消' : '完成'}</button>`;
countdownDiv.appendChild(countdownElement);
// 更新倒计时
const datetime = data.datetime;
updateCountdown(`uniqueCountdown_${timestamp}`, new Date(datetime.slice(0, 4), datetime.slice(4, 6) - 1, datetime.slice(6, 8), datetime.slice(8, 10), datetime.slice(10, 12)));
// 根据 localStorage 中的状态设置类名
if (data.finished) {
countdownElement.classList.add('FinishTask');
}
// 添加“完成”按钮的点击事件监听器
const finishButton = countdownElement.querySelector('.finishButton');
finishButton.addEventListener('click', () => {
const isFinished = countdownElement.classList.toggle('FinishTask');
finishButton.textContent = isFinished ? '取消' : '完成';
// 更新 localStorage 中的状态
data.finished = isFinished;
localStorage.setItem(`uniqueCountdown_${timestamp}`, JSON.stringify(data));
});
});
}
// 导航页面切换函数
function showPage(page) {
// 隐藏所有内容并移除激活样式
document.querySelectorAll('.content').forEach(content => content.classList.remove('active'));
document.querySelectorAll('nav a').forEach(link => link.classList.remove('nav-active'));
// 显示当前选择的内容
const selectedContent = document.getElementById(page);
selectedContent.classList.add('active');
document.querySelector(`nav a[onclick="showPage('${page}')"]`).classList.add('nav-active');
}
// 在页面加载时显示首页并激活相应的样式
document.addEventListener('DOMContentLoaded', function () {
showPage('home');
});
/* 通用的拖动功能 */
const initDragAndDisplay = (hiddenElementId, dragElementId) => {
const hiddenElement = document.querySelector(hiddenElementId);
document.querySelector(dragElementId).addEventListener("mousedown", (e) => {
const x = e.pageX - hiddenElement.offsetLeft;
const y = e.pageY - hiddenElement.offsetTop;
const move = (e) => {
hiddenElement.style.left = e.pageX - x + "px";
hiddenElement.style.top = e.pageY - y + "px";
};
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", move);
}, { once: true });
});
};
/* 初始化所有的拖动按钮 */
const initAllDragsAndDisplays = () => {
["", "2", "3", "4"].forEach((num) => {
initDragAndDisplay(`#myDialog${num}`, `#Drag${num}`);
});
};
initAllDragsAndDisplays();
/* 4个拖动按钮的实现结束*/
/*编辑文本输入框的占位符*/
document.addEventListener('DOMContentLoaded', function () {
const editor = document.getElementById('editor');
const placeholder = editor.getAttribute('data-placeholder');
editor.addEventListener('focus', function () {
if (editor.textContent === placeholder) {
editor.textContent = '';
editor.style.color = ''; // 恢复默认颜色
}
});
editor.addEventListener('blur', function () {
if (editor.textContent === '') {
editor.textContent = placeholder;
editor.style.color = 'gray'; // 设置占位符颜色
}
});
// 初始化时检查内容
if (editor.textContent === '') {
editor.textContent = placeholder;
editor.style.color = 'gray'; // 设置占位符颜色
}
});
/*编辑文本输入框的占位符 结束*/
/* 编辑文本输入框的清空按钮 */
document.getElementById('btnReset').addEventListener('click', function () {
document.getElementById('editor').innerText = '';
});
/* 简单的文本编辑器 */
document.addEventListener('DOMContentLoaded', () => {
const editor = document.getElementById('editor');
const exportedHtml = document.getElementById('textareaHTML');
function execCmd(command, value = null) {
document.execCommand(command, false, value);
}
function exportHtml() {
// 获取编辑器内容
let htmlContent = editor.innerHTML;
// 使用正则表达式查找所有 <a> 标签并添加 target="_blank"
htmlContent = htmlContent.replace(/<a\s+/g, '<a target="_blank" ');
// 设置导出的 HTML 内容
exportedHtml.value = htmlContent;
}
document.getElementById('toolbar').addEventListener('click', (event) => {
const target = event.target;
const command = target.id.replace('btn', '');
switch (command) {
case 'Bold':
case 'Italic':
case 'Underline':
case 'StrikeThrough':
case 'InsertOrderedList':
case 'InsertUnorderedList':
case 'JustifyLeft':
case 'JustifyCenter':
case 'JustifyRight':
case 'JustifyFull':
case 'Unlink':
case 'Undo':
case 'Redo':
execCmd(command);
break;
case 'CreateLink':
case 'InsertImage':
case 'ForeColor':
case 'Background':
const value = prompt(`输入${command === 'CreateLink' ? '链接地址' : command === 'InsertImage' ? '图片地址' : command === 'ForeColor' ? '文字颜色' : '背景颜色'}`, comman