AMAZEHOME/TypeWords
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create home.html

Browse Source
This commit is contained in:
Zyronon
2025-11-04 19:34:23 +08:00
committed by GitHub
parent f448f507b2
commit d220d73b8b
1 changed files with 488 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

488
home.html Normal file
View File

@@ -0,0 +1,488 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/favicon.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Type Words - 词文记 | 单词跟打 · 文章跟打</title>
<!-- 搜索引擎描述 -->
<meta name="description"
content="Type Words：在线英语练习平台，支持单词、文章跟打练习，提升打字与语言能力。Practice English, one keystroke at a time.">
<!-- 关键词（可选，搜索引擎基本不用，但能补充信息） -->
<meta name="keywords"
content="Type Words, Typing Word, 英语打字练习, 单词跟打, 文章跟打, 键盘练习, 英语学习, 文章学习">
<!-- Open Graph（用于社交媒体分享，微信/QQ/知乎/Facebook 等） -->
<meta property="og:title" content="Type Words - 英语打字练习平台">
<meta property="og:description"
content="在线英语打字练习平台，支持单词跟打与文章跟打，帮助提升打字速度与英语学习效率。">
<meta property="og:type" content="website">
<meta property="og:url" content="https://2study.top/">
<meta property="og:image" content="https://2study.top/favicon.png">
<!-- Twitter Card（用于 Twitter 分享） -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Type Words - 英语打字练习平台">
<meta name="twitter:description"
content="Type Words：在线英语练习平台，支持单词跟打、文章练习，提升打字速度与英语水平。">
<meta name="twitter:image" content="https://2study.top/favicon.png">
<!--用于百度站长验证 -->
<meta name="baidu-site-verification" content="codeva-Kw33xFT3p2"/>
<script>
;(function () {
var src = '//cdn.jsdelivr.net/npm/eruda';
if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
</script>
<script>
if (!location.href.includes('localhost')
&& !location.href.includes('192.168')
&& !location.href.includes('172.16')
&& !location.href.includes('10.0')
) {
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?3dae52fcd5375a19905462e4ad3eb54e";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
(function () {
var umami = document.createElement("script");
umami.src = 'https://2study.top/s.js'
if (location.href.includes('vercel') || location.href.includes('tw')) {
umami.setAttribute("data-website-id", "f630eefc-8b91-4e20-b890-106e6c7bcc10");
} else {
umami.setAttribute("data-website-id", "160308c9-7900-4b1d-a0b1-c3b25a9530f6");
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(umami, s);
})();
(function () {
var umami2 = document.createElement("script");
umami2.src = 'https://stat.2study.top/script.js'
umami2.setAttribute("data-website-id", "4d728ae3-5393-4efe-81dc-30dcb4f33c00");
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(umami2, s);
})();
}
</script>
<script>
function nav(url) {
history.pushState(null, "", url);
}
function toggleEl(val, close = false) {
let le = document.querySelector(val)
if (le) {
if (['none', ''].includes(le.style.display) && !close) {
le.style.display = 'block';
setTimeout(function () {
le.style.opacity = 1;
}, 10)
} else {
le.style.opacity = 0;
setTimeout(function () {
le.style.display = 'none';
}, 300)
}
}
}
function toggleWechatDialog() {
toggleEl('.mask')
toggleEl('#wechatDialog')
}
function toggleXhsDialog() {
toggleEl('.mask')
toggleEl('#xhsDialog')
}
function closeDialog() {
toggleEl('.mask')
toggleEl('#wechatDialog', true)
toggleEl('#xhsDialog', true)
}
</script>
<!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.0/dist/tailwind.min.css" rel="stylesheet">-->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background: rgb(231, 232, 235);
}
h1 {
font-size: 6rem !important;
background: linear-gradient(120deg, #bd34fe 30%, #41d1ff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
h2 {
font-size: 1.6rem !important;
font-weight: bold !important;
color: rgb(91, 91, 91);
margin: 0;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.card {
position: relative;
border-radius: 1rem;
padding: 1rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0;
width: 25%;
background: rgb(247, 247, 247);
.emoji {
display: inline-block;
background: rgb(226 232 240 / 1);
padding: 0.3rem .6rem;
border-radius: 0.4rem;
font-size: 1.5rem;
}
.title {
font-weight: bold;
}
ul {
margin: 0;
padding-left: 1.2rem;
}
}
.bottom {
width: 100%;
padding-top: 2rem;
border-top: 1px solid #c4c4c4;
}
a {
color: dodgerblue !important;
}
.w-60vw {
width: 60%;
}
.gap-space {
gap: 1rem;
}
.base-button {
cursor: pointer;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
outline: none;
text-align: center;
transition: 0.1s;
user-select: none;
vertical-align: middle;
white-space: nowrap;
border-radius: 0.3rem;
color: white;
background: rgb(75, 85, 99);
padding: 0 1.3rem;
height: 2.4rem;
font-size: 0.9rem;
}
.base-button + .base-button {
margin-left: 2rem;
}
.base-button:hover {
opacity: 0.8;
}
.icon {
cursor: pointer;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: .3rem;
background: transparent;
transition: all .3s;
color: dimgray;
}
.icon:hover {
background: rgb(12, 140, 233);
color: white;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.3);
display: none;
opacity: 0;
transition: all .3s;
}
.dialog {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgb(247, 247, 247);
width: 30rem;
border-radius: 1rem;
display: none;
opacity: 0;
transition: all .3s;
}
.dialog header {
padding: 1rem;
display: flex;
justify-content: space-between;
}
.dialog header .title {
font-size: 1.4rem;
}
.dialog-body {
padding: 0 1.2rem 1.2rem 1.2rem;
}
</style>
</head>
<body>
<div class="flex flex-col justify-between min-h-screen">
<div class="center flex-col gap-8 mt-8">
<h1>Type Words</h1>
<div class="text-center">
<h2>学习英语，一次敲击，一点进步</h2>
<h2>记忆不再盲目，学习更高效，开源单词与文章练习工具</h2>
</div>
<div class="flex">
<div class="base-button" onclick="nav('/words')">单词练习</div>
<div class="base-button" onclick="nav('/articles')">文章练习</div>
</div>
<div class="center justify-center flex-col gap-2 w-full mb-4">
<a href="https://skywork.ai/p/GrXQb4" class="w-60vw" target="_blank">
<img src="https://2study.top/skywork-ai.png"
alt="Skywork.AI"
class="w-full rounded-lg"></a>
<span>Skywork.AI:<a href="https://skywork.ai/p/GrXQb4" class="color-blue!" target="_blank">10 tasks in 1 hour, not 10 hours →Limited free spots: 127 left</a></span>
</div>
<div class="w-60vw">
<div class="flex mb-5 gap-space">
<div class="card">
<div class="emoji">📚</div>
<div class="title">单词练习</div>
<div class="desc">
<ul>
<li>三种输入模式：跟打 / 复习 / 默写</li>
<li>智能模式：智能规划复习与默写</li>
<li>自由模式：不受限制，自行规划</li>
</ul>
</div>
</div>
<div class="card">
<div class="emoji">✍️</div>
<div class="title">文章练习</div>
<div class="desc">
<ul>
<li>内置常见书籍，也可自行添加文章</li>
<li>跟打 + 默写双模式，让背诵更高效</li>
<li>支持边听边默写，强化记忆</li>
</ul>
</div>
</div>
<div class="card">
<div class="emoji">📕</div>
<div class="title">收藏、错词本、已掌握</div>
<div class="desc">
<ul>
<li>输入错误自动添加到错词本</li>
<li>主动添加到已掌握，后续自动跳过</li>
<li>主动添加到收藏中，以便巩固复习</li>
</ul>
</div>
</div>
<div class="card">
<div class="emoji">🌐</div>
<div class="title">海量词库</div>
<div class="desc">
内置小学、初中、高中、四六级、考研、雅思、托福、GRE、GMAT、SAT、BEC、专四、专八等词库
</div>
</div>
</div>
<div class="flex gap-space">
<div class="card">
<div class="emoji">🆓</div>
<div class="title">免费开源</div>
<div class="desc">
<ul>
<li>完全开源，可审查、可修改</li>
<li>免费使用</li>
<li>私有部署</li>
</ul>
</div>
</div>
<div class="card">
<div class="emoji">⚙️</div>
<div class="title">高度自由</div>
<div class="desc">
<ul>
<li>丰富的键盘音效</li>
<li>可自定义快捷键</li>
<li>高度定制化的设置选项</li>
</ul>
</div>
</div>
<div class="card">
<div class="emoji">🎨</div>
<div class="title">简洁高效</div>
<div class="desc">
<ul>
<li>简洁设计，现代化UI，无广告</li>
<li>界面清爽，操作简单</li>
<li>不强制关注任何平台</li>
</ul>
</div>
</div>
<div class="card">
<div class="emoji">🎯</div>
<div class="title">个性学习</div>
<div class="desc">
<ul>
<li>自由添加词典与文章</li>
<li>定制个性学习计划</li>
<li>多种学习复习策略</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="center gap-space my-10 bottom">
<div class="center gap-2">
<a
href="https://github.com/zyronon/TypeWords"
target="_blank"
rel="noreferrer"
aria-label="Github Address">
<div class="icon">
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em">
<path fill="currentColor"
d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
</svg>
</div>
</a>
<div class="icon" onclick="toggleWechatDialog()">
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em">
<path fill="currentColor"
d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213c0 .163.13.295.29.295a.33.33 0 0 0 .167-.054l1.903-1.114a.86.86 0 0 1 .717-.098a10.2 10.2 0 0 0 2.837.403c.276 0 .543-.027.811-.05c-.857-2.578.157-4.972 1.932-6.446c1.703-1.415 3.882-1.98 5.853-1.838c-.576-3.583-4.196-6.348-8.596-6.348M5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178a1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18m5.34 2.867c-1.797-.052-3.746.512-5.28 1.786c-1.72 1.428-2.687 3.72-1.78 6.22c.942 2.453 3.666 4.229 6.884 4.229c.826 0 1.622-.12 2.361-.336a.72.72 0 0 1 .598.082l1.584.926a.3.3 0 0 0 .14.047c.134 0 .24-.111.24-.247c0-.06-.023-.12-.038-.177l-.327-1.233a.6.6 0 0 1-.023-.156a.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983a.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983a.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982"></path>
</svg>
</div>
<div class="icon" onclick="toggleXhsDialog()">
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em">
<path fill="currentColor"
d="M22.405 9.879c.002.016.01.02.07.019h.725a.797.797 0 0 0 .78-.972a.794.794 0 0 0-.884-.618a.795.795 0 0 0-.692.794c0 .101-.002.666.001.777m-11.509 4.808c-.203.001-1.353.004-1.685.003a2.5 2.5 0 0 1-.766-.126a.025.025 0 0 0-.03.014L7.7 16.127a.025.025 0 0 0 .01.032c.111.06.336.124.495.124c.66.01 1.32.002 1.981 0q.017 0 .023-.015l.712-1.545a.025.025 0 0 0-.024-.036zM.477 9.91c-.071 0-.076.002-.076.01l-.01.08c-.027.397-.038.495-.234 3.06c-.012.24-.034.389-.135.607c-.026.057-.033.042.003.112c.046.092.681 1.523.787 1.74c.008.015.011.02.017.02c.008 0 .033-.026.047-.044q.219-.282.371-.606c.306-.635.44-1.325.486-1.706c.014-.11.021-.22.03-.33l.204-2.616l.022-.293c.003-.029 0-.033-.03-.034zm7.203 3.757a1.4 1.4 0 0 1-.135-.607c-.004-.084-.031-.39-.235-3.06a.4.4 0 0 0-.01-.082c-.004-.011-.052-.008-.076-.008h-1.48c-.03.001-.034.005-.03.034l.021.293q.114 1.473.233 2.946c.05.4.186 1.085.487 1.706c.103.215.223.419.37.606c.015.018.037.051.048.049c.02-.003.742-1.642.804-1.765c.036-.07.03-.055.003-.112m3.861-.913h-.872a.126.126 0 0 1-.116-.178l1.178-2.625a.025.025 0 0 0-.023-.035l-1.318-.003a.148.148 0 0 1-.135-.21l.876-1.954a.025.025 0 0 0-.023-.035h-1.56q-.017 0-.024.015l-.926 2.068c-.085.169-.314.634-.399.938a.5.5 0 0 0-.02.191a.46.46 0 0 0 .23.378a1 1 0 0 0 .46.119h.59c.041 0-.688 1.482-.834 1.972a.5.5 0 0 0-.023.172a.47.47 0 0 0 .23.398c.15.092.342.12.475.12l1.66-.001q.017 0 .023-.015l.575-1.28a.025.025 0 0 0-.024-.035m-6.93-4.937H3.1a.032.032 0 0 0-.034.033c0 1.048-.01 2.795-.01 6.829c0 .288-.269.262-.28.262h-.74c-.04.001-.044.004-.04.047c.001.037.465 1.064.555 1.263c.01.02.03.033.051.033c.157.003.767.009.938-.014c.153-.02.3-.06.438-.132c.3-.156.49-.419.595-.765c.052-.172.075-.353.075-.533q.003-3.495-.007-6.991a.03.03 0 0 0-.032-.032zm11.784 6.896q-.002-.02-.024-.022h-1.465c-.048-.001-.049-.002-.05-.049v-4.66c0-.072-.005-.07.07-.07h.863c.08 0 .075.004.075-.074V8.393c0-.082.006-.076-.08-.076h-3.5c-.064 0-.075-.006-.075.073v1.445c0 .083-.006.077.08.077h.854c.075 0 .07-.004.07.07v4.624c0 .095.008.084-.085.084c-.37 0-1.11-.002-1.304 0c-.048.001-.06.03-.06.03l-.697 1.519s-.014.025-.008.036s.013.008.058.008q2.622.003 5.243.002c.03-.001.034-.006.035-.033zm4.177-3.43q0 .021-.02.024c-.346.006-.692.004-1.037.004q-.021-.003-.022-.024q-.006-.651-.01-1.303c0-.072-.006-.071.07-.07l.733-.003c.041 0 .081.002.12.015c.093.025.16.107.165.204c.006.431.002 1.153.001 1.153m2.67.244a1.95 1.95 0 0 0-.883-.222h-.18c-.04-.001-.04-.003-.042-.04V10.21q.001-.198-.025-.394a1.8 1.8 0 0 0-.153-.53a1.53 1.53 0 0 0-.677-.71a2.2 2.2 0 0 0-1-.258c-.153-.003-.567 0-.72 0c-.07 0-.068.004-.068-.065V7.76c0-.031-.01-.041-.046-.039H17.93s-.016 0-.023.007q-.008.008-.008.023v.546c-.008.036-.057.015-.082.022h-.95c-.022.002-.028.008-.03.032v1.481c0 .09-.004.082.082.082h.913c.082 0 .072.128.072.128v1.148s.003.117-.06.117h-1.482c-.068 0-.06.082-.06.082v1.445s-.01.068.064.068h1.457c.082 0 .076-.006.076.079v3.225c0 .088-.007.081.082.081h1.43c.09 0 .082.007.082-.08v-3.27c0-.029.006-.035.033-.035l2.323-.003a.7.7 0 0 1 .28.061a.46.46 0 0 1 .274.407c.008.395.003.79.003 1.185c0 .259-.107.367-.33.367h-1.218c-.023.002-.029.008-.028.033q.276.655.57 1.303a.05.05 0 0 0 .04.026c.17.005.34.002.51.003c.15-.002.517.004.666-.01a2 2 0 0 0 .408-.075c.59-.18.975-.698.976-1.313v-1.981q.001-.191-.034-.38c0 .078-.029-.641-.724-.998"></path>
</svg>
</div>
<a
href="https://x.com/typewords2"
target="_blank"
rel="noreferrer"
aria-label="关注我的 X 账户 typewords2">
<div class="icon">
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em">
<path fill="currentColor"
d="M22.213 5.656a8.4 8.4 0 0 1-2.402.658A4.2 4.2 0 0 0 21.649 4c-.82.488-1.719.83-2.655 1.015a4.182 4.182 0 0 0-7.126 3.814a11.87 11.87 0 0 1-8.621-4.37a4.17 4.17 0 0 0-.566 2.103c0 1.45.739 2.731 1.86 3.481a4.2 4.2 0 0 1-1.894-.523v.051a4.185 4.185 0 0 0 3.355 4.102a4.2 4.2 0 0 1-1.89.072A4.185 4.185 0 0 0 8.02 16.65a8.4 8.4 0 0 1-6.192 1.732a11.83 11.83 0 0 0 6.41 1.88c7.694 0 11.9-6.373 11.9-11.9q0-.271-.012-.541a8.5 8.5 0 0 0 2.086-2.164"></path>
</svg>
</div>
</a>
<a
href="mailto:zyronon@163.com"
target="_blank"
rel="noreferrer"
aria-label="发送邮件到 zyronon@163.com">
<div class="icon">
<svg viewBox="0 0 24 24" width="1.4em" height="1.4em">
<path fill="currentColor"
d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z"></path>
</svg>
</div>
</a>
</div>
<div>蜀ICP备2025157466号</div>
</div>
<div class="mask" onclick="closeDialog()"></div>
<div class="dialog" id="wechatDialog">
<header>
<div class="title">Type Words 交流群</div>
<svg
onclick="toggleWechatDialog()"
viewBox="0 0 20 20" width="24" height="1.2em" class="cursor-pointer">
<path fill="currentColor"
d="m4.089 4.216l.057-.07a.5.5 0 0 1 .638-.057l.07.057L10 9.293l5.146-5.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 .057.638l-.057.07L10.707 10l5.147 5.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L10 10.707l-5.146 5.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1-.057-.638l.057-.07L9.293 10L4.146 4.854a.5.5 0 0 1-.057-.638l.057-.07z"></path>
</svg>
</header>
<div class="dialog-body">
<span>
加入我们的用户社群后，您可以与我们的开发团队进行沟通，分享您的使用体验和建议，帮助我们改进产品，同时也能够及时了解我们的最新动态和更新内容。
</span>
<div class="center mt-4">
<img src="https://2study.top/wechat.png" alt="微信群二维码" class="w-60 rounded-lg">
</div>
</div>
</div>
<div class="dialog" id="xhsDialog">
<header>
<div class="title">小红书</div>
<svg
onclick="toggleXhsDialog()"
viewBox="0 0 20 20" width="24" height="1.2em" class="cursor-pointer">
<path fill="currentColor"
d="m4.089 4.216l.057-.07a.5.5 0 0 1 .638-.057l.07.057L10 9.293l5.146-5.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 .057.638l-.057.07L10.707 10l5.147 5.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L10 10.707l-5.146 5.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1-.057-.638l.057-.07L9.293 10L4.146 4.854a.5.5 0 0 1-.057-.638l.057-.07z"></path>
</svg>
</header>
<div class="dialog-body">
<span>关注小红书后，您可以获得开发团队的最新动态和更新内容，反馈您的使用体验和建议，帮助我们改进产品，同时也能够及时了解我们的最新动态和更新内容。</span>
<div class="center mt-4">
<img src="https://2study.top/xhs.png" alt="小红书二维码" class="w-60 rounded-lg">
</div>
</div>
</div>
</div>
</body>
</html>