15856254f1
增加页面内容 1. 增加欢迎页面内容 2. 增加计划页面内容 end of segment ✨ index(layout): tuning the layout 调整页面内容 1. 添加跳转连接图标 2. 增加计划的跳转 end of segment ✨ help(modal page): add help model page 添加如何使用模态框 1. 添加模态窗口，提示如何使用该功能 end of segment
589 lines
11 KiB
HTML
589 lines
11 KiB
HTML
<!doctype html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>hello</title>
|
||
|
||
<style>
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.markdown-body {
|
||
box-sizing: border-box;
|
||
min-width: 200px;
|
||
max-width: 980px;
|
||
margin: 0 auto;
|
||
padding: 45px;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.markdown-body {
|
||
padding: 15px;
|
||
}
|
||
}
|
||
|
||
.markdown-body {
|
||
-ms-text-size-adjust: 100%;
|
||
-webkit-text-size-adjust: 100%;
|
||
line-height: 1.5;
|
||
color: #24292e;
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
||
;
|
||
font-size: 16px;
|
||
line-height: 1.5;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.markdown-body details {
|
||
display: block;
|
||
}
|
||
|
||
.markdown-body summary {
|
||
display: list-item;
|
||
}
|
||
|
||
.markdown-body a {
|
||
background-color: initial;
|
||
}
|
||
|
||
.markdown-body a:active,
|
||
.markdown-body a:hover {
|
||
outline-width: 0;
|
||
}
|
||
|
||
.markdown-body strong {
|
||
font-weight: inherit;
|
||
font-weight: bolder;
|
||
}
|
||
|
||
.markdown-body h1 {
|
||
font-size: 2em;
|
||
margin: .67em 0;
|
||
}
|
||
|
||
.markdown-body img {
|
||
border-style: none;
|
||
}
|
||
|
||
.markdown-body code,
|
||
.markdown-body kbd,
|
||
.markdown-body pre {
|
||
font-family: monospace, monospace;
|
||
font-size: 1em;
|
||
}
|
||
|
||
.markdown-body hr {
|
||
box-sizing: initial;
|
||
height: 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
.markdown-body input {
|
||
font: inherit;
|
||
margin: 0;
|
||
}
|
||
|
||
.markdown-body input {
|
||
overflow: visible;
|
||
}
|
||
|
||
.markdown-body [type=checkbox] {
|
||
box-sizing: border-box;
|
||
padding: 0;
|
||
}
|
||
|
||
.markdown-body * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.markdown-body input {
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
line-height: inherit;
|
||
}
|
||
|
||
.markdown-body a {
|
||
color: #0366d6;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.markdown-body a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.markdown-body strong {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.markdown-body hr {
|
||
height: 0;
|
||
margin: 15px 0;
|
||
overflow: hidden;
|
||
background: transparent;
|
||
border: 0;
|
||
border-bottom: 1px solid #dfe2e5;
|
||
}
|
||
|
||
.markdown-body hr:after,
|
||
.markdown-body hr:before {
|
||
display: table;
|
||
content: "";
|
||
}
|
||
|
||
.markdown-body hr:after {
|
||
clear: both;
|
||
}
|
||
|
||
.markdown-body table {
|
||
border-spacing: 0;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.markdown-body td,
|
||
.markdown-body th {
|
||
padding: 0;
|
||
}
|
||
|
||
.markdown-body details summary {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.markdown-body kbd {
|
||
display: inline-block;
|
||
padding: 3px 5px;
|
||
font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
|
||
line-height: 10px;
|
||
color: #444d56;
|
||
vertical-align: middle;
|
||
background-color: #fafbfc;
|
||
border: 1px solid #d1d5da;
|
||
border-radius: 3px;
|
||
box-shadow: inset 0 -1px 0 #d1d5da;
|
||
}
|
||
|
||
.markdown-body h1,
|
||
.markdown-body h2,
|
||
.markdown-body h3,
|
||
.markdown-body h4,
|
||
.markdown-body h5,
|
||
.markdown-body h6 {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.markdown-body h1 {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.markdown-body h1,
|
||
.markdown-body h2 {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.markdown-body h2 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.markdown-body h3 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.markdown-body h3,
|
||
.markdown-body h4 {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.markdown-body h4 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.markdown-body h5 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.markdown-body h5,
|
||
.markdown-body h6 {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.markdown-body h6 {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.markdown-body p {
|
||
margin-top: 0;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.markdown-body blockquote {
|
||
margin: 0;
|
||
}
|
||
|
||
.markdown-body ol,
|
||
.markdown-body ul {
|
||
padding-left: 0;
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.markdown-body ol ol,
|
||
.markdown-body ul ol {
|
||
list-style-type: lower-roman;
|
||
}
|
||
|
||
.markdown-body ol ol ol,
|
||
.markdown-body ol ul ol,
|
||
.markdown-body ul ol ol,
|
||
.markdown-body ul ul ol {
|
||
list-style-type: lower-alpha;
|
||
}
|
||
|
||
.markdown-body dd {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.markdown-body code,
|
||
.markdown-body pre {
|
||
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.markdown-body pre {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.markdown-body input::-webkit-inner-spin-button,
|
||
.markdown-body input::-webkit-outer-spin-button {
|
||
margin: 0;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
}
|
||
|
||
.markdown-body :checked+.radio-label {
|
||
position: relative;
|
||
z-index: 1;
|
||
border-color: #0366d6;
|
||
}
|
||
|
||
.markdown-body hr {
|
||
border-bottom-color: #eee;
|
||
}
|
||
|
||
.markdown-body kbd {
|
||
display: inline-block;
|
||
padding: 3px 5px;
|
||
font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
|
||
line-height: 10px;
|
||
color: #444d56;
|
||
vertical-align: middle;
|
||
background-color: #fafbfc;
|
||
border: 1px solid #d1d5da;
|
||
border-radius: 3px;
|
||
box-shadow: inset 0 -1px 0 #d1d5da;
|
||
}
|
||
|
||
.markdown-body:after,
|
||
.markdown-body:before {
|
||
display: table;
|
||
content: "";
|
||
}
|
||
|
||
.markdown-body:after {
|
||
clear: both;
|
||
}
|
||
|
||
.markdown-body>:first-child {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.markdown-body>:last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.markdown-body a:not([href]) {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.markdown-body blockquote,
|
||
.markdown-body details,
|
||
.markdown-body dl,
|
||
.markdown-body ol,
|
||
.markdown-body p,
|
||
.markdown-body pre,
|
||
.markdown-body table,
|
||
.markdown-body ul {
|
||
margin-top: 0;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.markdown-body hr {
|
||
height: .25em;
|
||
padding: 0;
|
||
margin: 24px 0;
|
||
background-color: #e1e4e8;
|
||
border: 0;
|
||
}
|
||
|
||
.markdown-body blockquote {
|
||
padding: 0 1em;
|
||
color: #6a737d;
|
||
border-left: .25em solid #dfe2e5;
|
||
}
|
||
|
||
.markdown-body blockquote>:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.markdown-body blockquote>:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.markdown-body h1,
|
||
.markdown-body h2,
|
||
.markdown-body h3,
|
||
.markdown-body h4,
|
||
.markdown-body h5,
|
||
.markdown-body h6 {
|
||
margin-top: 24px;
|
||
margin-bottom: 16px;
|
||
font-weight: 600;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.markdown-body h1 {
|
||
font-size: 2em;
|
||
}
|
||
|
||
.markdown-body h1,
|
||
.markdown-body h2 {
|
||
padding-bottom: .3em;
|
||
border-bottom: 1px solid #eaecef;
|
||
}
|
||
|
||
.markdown-body h2 {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
.markdown-body h3 {
|
||
font-size: 1.25em;
|
||
}
|
||
|
||
.markdown-body h4 {
|
||
font-size: 1em;
|
||
}
|
||
|
||
.markdown-body h5 {
|
||
font-size: .875em;
|
||
}
|
||
|
||
.markdown-body h6 {
|
||
font-size: .85em;
|
||
color: #6a737d;
|
||
}
|
||
|
||
.markdown-body ol,
|
||
.markdown-body ul {
|
||
padding-left: 2em;
|
||
}
|
||
|
||
.markdown-body ol ol,
|
||
.markdown-body ol ul,
|
||
.markdown-body ul ol,
|
||
.markdown-body ul ul {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.markdown-body li {
|
||
word-wrap: break-all;
|
||
}
|
||
|
||
.markdown-body li>p {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.markdown-body li+li,
|
||
.markdown-body li>ul {
|
||
margin-top: .25em;
|
||
}
|
||
|
||
.markdown-body ul li.task-list-item {
|
||
position: relative;
|
||
appearance: none;
|
||
list-style: none;
|
||
}
|
||
|
||
.markdown-body ul li.task-list-item.checked {
|
||
text-decoration: line-through;
|
||
color: #bdbdbd;
|
||
}
|
||
|
||
.markdown-body ul li.task-list-item::before {
|
||
content: '';
|
||
width: 13px;
|
||
height: 13px;
|
||
background-color: #fff;
|
||
position: absolute;
|
||
left: -28px;
|
||
top: 4px;
|
||
border-radius: 2px;
|
||
border: 2px solid #757575;
|
||
}
|
||
|
||
.markdown-body ul li.task-list-item.checked::before {
|
||
background-color: #1976d2;
|
||
border-color: #1976d2;
|
||
}
|
||
|
||
.markdown-body ul li.task-list-item.checked::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: -22px;
|
||
top: 5px;
|
||
width: 4px;
|
||
height: 10px;
|
||
border: solid #fff;
|
||
border-width: 0 2px 2px 0;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.markdown-body dl {
|
||
padding: 0;
|
||
}
|
||
|
||
.markdown-body dl dt {
|
||
padding: 0;
|
||
margin-top: 16px;
|
||
font-size: 1em;
|
||
font-style: italic;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.markdown-body dl dd {
|
||
padding: 0 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.markdown-body table {
|
||
display: block;
|
||
width: 100%;
|
||
overflow: auto;
|
||
}
|
||
|
||
.markdown-body table th {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.markdown-body table td,
|
||
.markdown-body table th {
|
||
padding: 6px 13px;
|
||
border: 1px solid #dfe2e5;
|
||
}
|
||
|
||
.markdown-body table tr {
|
||
background-color: #fff;
|
||
border-top: 1px solid #c6cbd1;
|
||
}
|
||
|
||
.markdown-body table tr:nth-child(2n) {
|
||
background-color: #f6f8fa;
|
||
}
|
||
|
||
.markdown-body img {
|
||
max-width: 100%;
|
||
box-sizing: initial;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.markdown-body img[align=right] {
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.markdown-body img[align=left] {
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.markdown-body code {
|
||
padding: .2em .4em;
|
||
margin: 0;
|
||
font-size: 85%;
|
||
background-color: rgba(27, 31, 35, .05);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.markdown-body pre {
|
||
word-wrap: normal;
|
||
}
|
||
|
||
.markdown-body pre>code {
|
||
padding: 0;
|
||
margin: 0;
|
||
font-size: 100%;
|
||
word-break: normal;
|
||
white-space: pre;
|
||
background: transparent;
|
||
border: 0;
|
||
}
|
||
|
||
.markdown-body pre {
|
||
padding: 16px;
|
||
overflow: auto;
|
||
font-size: 85%;
|
||
line-height: 1.45;
|
||
background-color: #f6f8fa;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.markdown-body pre code {
|
||
display: inline;
|
||
max-width: auto;
|
||
padding: 0;
|
||
margin: 0;
|
||
overflow: visible;
|
||
line-height: inherit;
|
||
word-wrap: normal;
|
||
background-color: initial;
|
||
border: 0;
|
||
}
|
||
|
||
.markdown-body mark {
|
||
background-color: #fff8c5;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<article class="markdown-body">
|
||
<h1>Hello World</h1>
|
||
<blockquote>
|
||
<p>该工具是我想打造的用来进行一些日常的调试工作的瑞士军刀，会把我的一些工作用的小功能集成进来</p>
|
||
</blockquote>
|
||
<h2>如何使用</h2>
|
||
<ul>
|
||
<li>点击导航栏上的下拉工具</li>
|
||
<li>选择对应的功能即可跳转至相应的页面</li>
|
||
</ul>
|
||
<h2>平台</h2>
|
||
<blockquote>
|
||
<p>因为是打算使用纯JS实现功能，所以应该是全平台通用</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>Linux：OK</li>
|
||
<li>Windows：OK</li>
|
||
<li>MacOS：OK</li>
|
||
</ul>
|
||
|
||
<hr>
|
||
<div style="margin-left: 40%;"><img style="width: 20%;" src="../logo.png" alt=""></div>
|
||
|
||
</article>
|
||
</body>
|
||
|
||
</html> |