Skip to content
GitLab
Commit 507f5ee7 authored by HSX's avatar HSX
Browse files

add .css

parent 9030374d
Hide whitespace changes
Inline Side-by-side
index.css
View file @ 507f5ee7
body {
background-image: linear-gradient(100deg, #c8e8fc, #fbceda);
transition: 0.3s linear;
overflow: auto;
}
.todo-app {
/* 使用 margin: auto 实现这个元素的水平居中（但内容仍然是左对齐） */
width: 1200px;
margin: 100px auto;
}
/* 标题字体样式设置 */
#title {
font-family: 'Times New Roman', Times, serif;
font-size: 5rem;
white-space: pre;
overflow: hidden;
letter-spacing: 0.30rem;
margin: 25px auto;
width: 25rem;
}
/* 时间样式设计 */
.todo-time {
width: 10rem;
margin: 0 auto;
}
#datetime {
font-family: 'Work Sans', sans-serif;
font-size: 1rem;
min-height: 10vh;
width: 100%;
}
div.todo-header {
width: 800px;
margin: 0 auto;
}
.todo-body {
margin: 5px auto;
margin-top: 0px;
}
.todo-record {
width: 56rem;
font-size: 1.2rem;
padding:1rem 1rem;
margin:1rem auto;
transition:all 500ms ease;
color:#41403E;
letter-spacing:1px;
outline:none;
box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
border:solid 0.2rem #41403E;
border-left: none;
border-right: none;
border-bottom: none;
background: transparent;
background-image: url('img/wave.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.todo-record:nth-child(1) {
margin-top: 0px;
}
.todo-record:hover {
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
}
.todo-record .todo-record-title, .todo-record span {
font-family: Gabriola;
font-size: 2rem;
letter-spacing: 0.2rem;
font-weight: bold;
}
.todo-record .todo-record-content {
font-family: 'Lucida Handwriting';
font-size: 1.8rem;
text-indent: 1rem;
margin-top: 0;
margin-bottom: 1rem;
}
.todo-record .todo-record-content::first-letter {
text-transform: uppercase;
font-size: 2rem;
}
.todo-record .todo-record-duedate {
font-family: 'Work Sans', sans-serif;
font-size: 1rem;
min-height: 10vh;
width: 100%;
}
.todo-record[x-resolved="1"] .todo-record-title,
.todo-record[x-resolved="1"] span,
.todo-record[x-resolved="1"] .todo-record-content,
.todo-record[x-resolved="1"] .todo-record-duedate {
color: gray;
text-decoration: line-through;
}
/* 输入框 */
.todo-header-input {
padding: 10px;
font-size: 17px;
border: none;
outline: none;
text-indent: 5px;
border-radius: 17px;
transition: background-color 300ms ease-in-out;
width: 800px;
background-color: #c2c6c9;
color: #1a150e;
}
.todo-header-input::placeholder {
color: #1a150e;
/* 设置不透明度 */
opacity: 0.7;
}
.todo-header-input:hover {
background-color: #919699;
}
\ No newline at end of file
index.html
View file @ 507f5ee7
...@@ -11,20 +11,32 @@ ...@@ -11,20 +11,32 @@
</head> </head>
<body> <body>
<!-- shell command input part --> <div class="todo-app">
<div> <h1 id="title">Todo List.<div id="border"></div></h1>
<input id="input-todo" placeholder="Title Content DueDate"></input> <!-- shell command input part -->
</div> <div class="todo-header">
<input class="todo-header-input" id="input-todo" placeholder="Title Content DueDate"></input>
</div>
<!-- current login time -->
<div class="todo-time">
<p><span id="datetime"></span></p>
<script>
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleString();
</script>
</div>
<!-- todo card display part --> <!-- todo card display part -->
<div id="list-todo"> <div class="todo-body" id="list-todo">
<div id="todo-00" x-resolved="1"> <div class="todo-record" id="todo-00" x-resolved="0">
<strong>title</strong> <strong class="todo-record-title">title</strong>
<span>&nbsp;(id=0)</span> <span>&nbsp;(id=0)</span>
<p> <p class="todo-record-content">
content content
</p> </p>
<i>Remaining time: ???</i> <i class="todo-record-duedate">Remaining time: ???</i>
</div>
</div> </div>
</div> </div>
</body> </body>
......
index.js
View file @ 507f5ee7
...@@ -36,11 +36,16 @@ function addTodoToDOM(id, title, content, deadline, resolve = 0) { ...@@ -36,11 +36,16 @@ function addTodoToDOM(id, title, content, deadline, resolve = 0) {
const todoContentElem = document.createElement("p"); const todoContentElem = document.createElement("p");
const todoDeadlineElem = document.createElement("i"); const todoDeadlineElem = document.createElement("i");
todoElem.setAttribute("class", "todo-record");
todoTitleElem.setAttribute("class", "todo-record-title");
todoContentElem.setAttribute("class", "todo-record-content");
todoDeadlineElem.setAttribute("class", "todo-record-duedate");
todoElem.id = newId; todoElem.id = newId;
todoTitleElem.textContent = title; todoTitleElem.textContent = title;
todoIdElem.textContent = "(id=" + id + ")"; todoIdElem.textContent = " (id=" + id + ")";
todoContentElem.textContent = content; todoContentElem.textContent = content;
const formatdate = format(deadline, 'yyyy/MM/dd'); const formatdate = format(deadline, 'yyyy/MM/dd');
todoDeadlineElem.textContent = formatdate; todoDeadlineElem.textContent = formatdate;
todoElem.appendChild(todoTitleElem); todoElem.appendChild(todoTitleElem);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment