Stackedit/static/landing/index.html
2022-05-27 07:55:37 +08:00

463 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<title>StackEdit中文版 浏览器内 Markdown 编辑器</title>
<link rel="canonical" href="https://edit.qicoder.com/">
<link rel="icon" href="static/landing/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="static/landing/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="description"
content="Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.">
<meta name="author" content="Benoit Schweblin">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612">
<meta name="google-site-verification" content="iWDn0T2r2_bDQWp_nW23MGePbO9X0M8wQSzbOU70pFQ" />
<link rel="stylesheet" href="https://edit.qicoder.com/style.css">
<style>
body {
background-color: #fbfbfb;
}
* {
box-sizing: border-box;
}
h1 {
font-weight: 400;
text-align: center;
font-size: 2.5em;
margin: 2.5em 0;
}
h3 {
margin: 1em 0;
}
.button {
color: #555;
font-size: 20px;
background-color: transparent;
display: inline-block;
height: auto;
padding: 6px 12px;
margin: 0;
font-weight: 400;
line-height: 1.4;
text-transform: uppercase;
overflow: hidden;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 0;
border-radius: 2px;
text-decoration: none;
}
.button:active,
.button:focus,
.button:hover {
color: #333;
background-color: rgba(0, 0, 0, 0.05);
outline: 0;
text-decoration: none;
}
.icon {
width: 100%;
height: 100%;
display: inline;
}
.icon * {
fill: currentColor;
}
.button .icon {
height: 30px;
width: 30px;
margin: -6px 6px -6px 0;
}
.row {
margin: 8em 0;
}
.row::after {
display: block;
content: '';
clear: both;
}
@media (min-width: 700px) {
.column {
width: 50%;
float: right;
}
}
.landing {
position: absolute;
width: 100%;
height: 100%;
}
.landing__content {
margin-left: auto;
margin-right: auto;
padding-left: 30px;
padding-right: 30px;
max-width: 1000px;
}
.landing__footer {
padding: 1em 0;
text-align: center;
background-color: #007acc;
color: rgba(255, 255, 255, 0.75);
font-size: 0.9em;
}
.landing__footer a {
color: #fff;
}
.navigation-bar {
background-color: #2c2c2c;
position: fixed;
padding: 5px;
text-align: center;
width: 100%;
z-index: 1;
}
.navigation-bar__button {
color: #b9b9b9;
}
.navigation-bar__button:active,
.navigation-bar__button:focus,
.navigation-bar__button:hover {
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
}
.splash-screen {
position: relative;
width: 100%;
height: 100%;
padding: 25px;
}
.splash-screen__logo {
width: 300px;
height: 150px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: no-repeat center url('static/landing/logo.svg');
background-size: contain;
}
@media (min-width: 700px) {
.splash-screen__logo {
width: 600px;
height: 160px;
}
}
.splash-screen__subtitle {
position: absolute;
text-align: center;
color: #777;
top: 95px;
right: 5px;
font-size: 16px;
}
@media (min-width: 700px) {
.splash-screen__subtitle {
text-align: right;
top: 125px;
font-size: 22px;
}
}
.splash-screen__footer {
position: absolute;
bottom: 25px;
left: 0;
width: 100%;
text-align: center;
}
.splash-screen__footer .button {
padding: 10px 20px;
}
.social {
margin: 0 5px;
}
.social a {
color: #555;
text-decoration: none;
}
.social a:active,
.social a:focus,
.social a:hover {
color: #333;
outline: 0;
}
.landing__footer .social a {
color: rgba(255, 255, 255, 0.85);
}
.landing__footer .social a:active,
.landing__footer .social a:focus,
.landing__footer .social a:hover {
color: #fff;
}
.social .icon {
height: 30px;
width: 30px;
}
.feature {
padding: 5px 5px;
border-radius: 2px;
max-width: 350px;
margin: 1em auto;
text-align: center;
}
.image {
display: block;
margin: 1em auto;
border: 1px solid #eee;
border-radius: 2px;
background-color: #fff;
}
.image img {
display: block;
margin: 0.5em auto;
}
</style>
<script>
function scrollTo(selector) {
$('html,body').animate({scrollTop: $(selector).offset().top}, 500);
}
</script>
</head>
<body>
<div class="landing">
<div class="navigation-bar">
<a class="navigation-bar__button button" href="app" title="The app">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M 16.8363,2.73375C 16.45,2.73375 16.0688,2.88125 15.7712,3.17375L 13.6525,5.2925L 18.955,10.5962L 21.0737,8.47625C 21.665,7.89 21.665,6.94375 21.0737,6.3575L 17.895,3.17375C 17.6025,2.88125 17.2163,2.73375 16.8363,2.73375 Z M 12.9437,6.00125L 4.84375,14.1062L 7.4025,14.39L 7.57875,16.675L 9.85875,16.85L 10.1462,19.4088L 18.2475,11.3038M 4.2475,15.0437L 2.515,21.7337L 9.19875,19.9412L 8.955,17.7838L 6.645,17.6075L 6.465,15.2925"></path></svg>
开始写作
</a>
</div>
<div class="splash-screen">
<div class="splash-screen__logo">
<div class="splash-screen__subtitle">
浏览器内 Markdown 编辑器
<div class="social">
<a href="https://gitee.com/mafgwo/stackedit" target="_blank">
<svg t="1652950823759" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2991" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs><style type="text/css"></style></defs>
<path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="2992"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="splash-screen__footer">
<a class="button" href="javascript:scrollTo($('.anchor'))">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M 11,4L 13,4L 13,16.0104L 18.5052,10.5052L 19.9194,11.9194L 12,19.8388L 4.08058,11.9194L 5.49479,10.5052L 11,16.0104L 11,4 Z "/></path></svg>
阅读更多
</a>
</div>
</div>
<div class="anchor"></div>
<div class="landing__content">
<h1>无与伦比的写作体验</h1>
<div class="row">
<div class="column">
<div class="feature">
<h3>丰富的 Markdown 编辑器</h3>
<p>StackEdit 的 Markdown 语法高亮是独一无二的。 编辑器的精致文本格式可帮助您可视化文件的最终呈现。</p>
</div>
</div>
<div class="column">
<div class="image" style="width: 260px">
<img width="230" src="static/landing/syntax-highlighting.gif">
</div>
</div>
</div>
<div class="row">
<img class="image" width="410" src="static/landing/navigation-bar.png">
<div class="feature">
<h3>所见即所得控件</h3>
<p>StackEdit 提供了非常方便的格式化按钮和快捷方式,这要归功于 Stack Overflow 使用的所见即所得式 Markdown 编辑器 PageDown。</p>
</div>
</div>
<div class="row">
<div class="column">
<div class="feature">
<h3>智能布局</h3>
<p>无论你是写作、阅读还是评论……StackEdit的布局都为你提供了所需的灵活性。</p>
</div>
</div>
<div class="column">
<img class="image" width="360" src="static/landing/smart-layout.png">
</div>
</div>
<div class="row">
<div class="feature">
<h3>滚动同步实时预览</h3>
<p>StackEdit的滚动同步功能精确地绑定了编辑器面板和预览面板的滚动条以确保您在编写时始终关注输出。</p>
</div>
<img class="image" width="485" src="static/landing/scroll-sync.gif">
</div>
<h1>专为网络写手设计</h1>
<div class="row">
<div class="column">
<div class="feature">
<h3>保持同步</h3>
<p>StackEdit 可以将您的文件与 Google Drive、Dropbox 和 GitHub 同步。 它还可以将它们作为博客文章发布到 Blogger、WordPress 和 Zendesk。 您可以选择是以 Markdown 格式、HTML 上传,还是使用 Handlebars 模板引擎格式化输出。</p>
</div>
</div>
<div class="column">
<img class="image" width="300" src="static/landing/providers.png">
</div>
</div>
<div class="row">
<div class="column">
<div class="feature">
<h3>协作</h3>
<p>借助 StackEdit您可以共享协作工作空间这要归功于同步机制。 如果两个协作者同时处理同一个文件StackEdit 会负责合并更改。</p>
</div>
<img class="image" width="300" src="static/landing/workspace.png">
</div>
<div class="column">
<div class="feature">
<h3>评论</h3>
<p>StackEdit 允许您在文件中插入内联评论和嵌入协作者讨论,就像 Microsoft Word 和 Google Docs 一样。</p>
</div>
<img class="image" width="395" src="static/landing/discussion.png">
</div>
</div>
<div class="row">
<div class="feature">
<h3>离线写作!</h3>
<p>即使在旅行时StackEdit 仍然可以访问,让您可以像任何桌面应用程序一样离线编写。 你没有借口再偷懒!</p>
</div>
</div>
<h1>扩展的 Markdown 支持</h1>
<div class="row">
<div class="column">
<br>
<div class="image" style="width: 250px">
<img width="230" src="static/landing/gfm.png">
</div>
</div>
<div class="column">
<div class="feature">
<h3>GitHub 风格的 Markdown</h3>
<p>StackEdit 支持不同的 Markdown 风格,例如 Markdown Extra、GFM 和 CommonMark。 每个 Markdown 功能都可以在您方便的时候启用或禁用。</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<br>
<div class="image" style="width: 270px">
<img width="250" src="static/landing/katex.gif">
</div>
</div>
<div class="column">
<div class="feature">
<h3>LaTeX 数学表达式</h3>
<p>StackEdit 从您的 Markdown 文件中的 LaTeX 表达式呈现数学公式。</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="image" style="width: 300px">
<img width="280" src="static/landing/mermaid.gif">
</div>
</div>
<div class="column">
<div class="feature">
<h3>UML 图</h3>
<p>StackEdit 使您能够使用简单的语法编写序列图和流程图。</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="image" style="width: 280px">
<img width="260" src="static/landing/abc.png">
</div>
</div>
<div class="column">
<div class="feature">
<h3>乐谱</h3>
<p>StackEdit 可以使用 ABC 表示法渲染乐谱。</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="image" style="width: 250px">
<img width="230" src="static/landing/twemoji.png">
</div>
</div>
<div class="column">
<div class="feature">
<h3>Emojis表情</h3>
<p>StackEdit 支持使用 Markdown 表情符号标记在文件中插入表情符号。</p>
</div>
</div>
</div>
</div>
<div class="landing__footer">
<div class="social">
<a href="https://gitee.com/mafgwo/stackedit" target="_blank">
<svg t="1652950823759" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2991" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs><style type="text/css"></style></defs>
<path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="2992"></path>
</svg>
</a>
</div>
<a href="app" title="The app">The app</a> <a href="https://gitee.com/mafgwo/stackedit/issues" target="_blank" title="The app">Community</a><br>
Copyright 2013-2022 <a href="https://gitee.com/mafgwo" target="_blank">豆萁</a><br>
Licensed under an
<a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License</a>
<a href="privacy_policy.html" target="_blank">隐私策略</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</body>
</html>