205 lines
11 KiB
HTML
205 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>VoidRaft - An elegant text snippet recording tool designed for developers.</title>
|
||
<link rel="stylesheet" href="./css/styles.css">
|
||
<link rel="icon" href="./img/favicon.ico" type="image/x-icon">
|
||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
</head>
|
||
<body class="theme-dark">
|
||
<div class="container">
|
||
<!-- 主卡片 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h1 class="card-title">VoidRaft</h1>
|
||
<div class="card-controls">
|
||
<button id="theme-toggle" class="btn btn-secondary" title="切换主题">
|
||
<i class="fas fa-sun"></i> 主题
|
||
</button>
|
||
<button id="lang-toggle" class="btn btn-secondary">
|
||
<i class="fas fa-language"></i> 中/EN
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-content">
|
||
<!-- Logo和介绍 -->
|
||
<div class="logo-container">
|
||
<div class="logo-frame">
|
||
<img src="img/logo.png" alt="VoidRaft Logo" class="logo-image">
|
||
</div>
|
||
<h2 class="logo-text" data-en="VoidRaft" data-zh="VoidRaft">VoidRaft</h2>
|
||
<p class="tagline" data-en="An elegant text snippet recording tool" data-zh="优雅的文本片段记录工具">优雅的文本片段记录工具</p>
|
||
</div>
|
||
|
||
<div class="intro-box">
|
||
<p class="intro-text" data-en="Designed for developers to record, organize, and manage various text snippets anytime, anywhere." data-zh="专为开发者打造，随时随地记录、整理和管理各种文本片段。">专为开发者打造，随时随地记录、整理和管理各种文本片段。</p>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<a href="https://github.com/landaiqing/voidraft/releases" class="btn" data-en="Download" data-zh="下载">
|
||
<i class="fas fa-download"></i> 下载
|
||
</a>
|
||
<a href="https://github.com/landaiqing/voidraft" class="btn btn-secondary" data-en="Source Code" data-zh="源代码">
|
||
<i class="fab fa-github"></i> 源代码
|
||
</a>
|
||
<a href="changelog.html" class="btn btn-secondary" data-en="Changelog" data-zh="更新日志">
|
||
<i class="fas fa-history"></i> 更新日志
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 特性部分 -->
|
||
<h2 data-en="Core Features" data-zh="核心特性">核心特性</h2>
|
||
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-code"></i>
|
||
</div>
|
||
<h3 class="feature-title" data-en="Developer-Friendly" data-zh="开发者友好">开发者友好</h3>
|
||
<p class="feature-desc" data-en="Multi-language code blocks with syntax highlighting for 30+ programming languages" data-zh="多语言代码块支持，为30+种编程语言提供语法高亮">多语言代码块支持，为30+种编程语言提供语法高亮</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-magic"></i>
|
||
</div>
|
||
<h3 class="feature-title" data-en="Code Formatting" data-zh="代码格式化">代码格式化</h3>
|
||
<p class="feature-desc" data-en="Built-in Prettier support for one-click code beautification" data-zh="内置Prettier支持，一键美化代码">内置Prettier支持，一键美化代码</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-palette"></i>
|
||
</div>
|
||
<h3 class="feature-title" data-en="Custom Themes" data-zh="自定义主题">自定义主题</h3>
|
||
<p class="feature-desc" data-en="Dark/Light themes with full customization options" data-zh="深色/浅色主题，支持完全自定义">深色/浅色主题，支持完全自定义</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-clone"></i>
|
||
</div>
|
||
<h3 class="feature-title" data-en="Multi-Window" data-zh="多窗口支持">多窗口支持</h3>
|
||
<p class="feature-desc" data-en="Edit multiple documents simultaneously" data-zh="同时编辑多个文档">同时编辑多个文档</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-layer-group"></i>
|
||
</div>
|
||
<h3 class="feature-title" data-en="Block Editing" data-zh="块状编辑">块状编辑</h3>
|
||
<p class="feature-desc" data-en="Split content into independent code blocks with different language settings" data-zh="将内容分割为独立的代码块，每个块可设置不同语言">将内容分割为独立的代码块，每个块可设置不同语言</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-puzzle-piece"></i>
|
||
</div>
|
||
<h3 class="feature-title" data-en="Extensions" data-zh="丰富扩展">丰富扩展</h3>
|
||
<p class="feature-desc" data-en="Rainbow brackets, VSCode-style search, color picker, translation tool, and more" data-zh="彩虹括号、VSCode风格搜索、颜色选择器、翻译工具等多种扩展">彩虹括号、VSCode风格搜索、颜色选择器、翻译工具等多种扩展</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 预览部分 -->
|
||
<h2 data-en="Preview" data-zh="预览">预览</h2>
|
||
|
||
<div class="preview-container">
|
||
<div class="preview-window">
|
||
<div class="preview-header">
|
||
<div class="preview-controls">
|
||
<span class="preview-btn"></span>
|
||
<span class="preview-btn"></span>
|
||
<span class="preview-btn"></span>
|
||
</div>
|
||
<div class="preview-title">voidraft</div>
|
||
</div>
|
||
<div class="preview-content">
|
||
<div class="code-block-wrapper">
|
||
<div class="block-header">
|
||
<div class="block-language">javascript</div>
|
||
</div>
|
||
<pre class="code-block">
|
||
<span class="keyword">function</span> <span class="function">createDocument</span>() {
|
||
<span class="keyword">const</span> <span class="variable">doc</span> = <span class="keyword">new</span> <span class="class">Document</span>();
|
||
|
||
<span class="variable">doc</span>.<span class="function">addCodeBlock</span>(<span class="string">'javascript'</span>, <span class="string">`
|
||
<span class="keyword">function</span> <span class="function">greeting</span>(<span class="parameter">name</span>) {
|
||
<span class="keyword">return</span> <span class="string">`Hello, </span>${<span class="parameter">name</span>}<span class="string">!`</span>;
|
||
}
|
||
|
||
<span class="built-in">console</span>.<span class="function">log</span>(<span class="function">greeting</span>(<span class="string">'World'</span>));
|
||
`</span>);
|
||
|
||
<span class="keyword">return</span> <span class="variable">doc</span>;
|
||
}</pre>
|
||
</div>
|
||
|
||
<div class="code-block-wrapper" style="margin-top: 10px;">
|
||
<div class="block-header">
|
||
<div class="block-language">text</div>
|
||
</div>
|
||
<pre class="code-block">
|
||
<span class="comment">// VoidRaft - An elegant text snippet recording tool</span>
|
||
<span class="comment">// Multi-language support | Code formatting | Custom themes</span>
|
||
<span class="comment">// A modern text editor designed for developers</span></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="preview-window">
|
||
<img src="img/screenshot-dark.png" alt="VoidRaft 界面预览" class="preview-image dark-theme-img">
|
||
<img src="img/screenshot-light.png" alt="VoidRaft 界面预览" class="preview-image light-theme-img" style="display: none;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 技术栈部分 -->
|
||
<h2 data-en="Technical Stack" data-zh="技术栈">技术栈</h2>
|
||
|
||
<ul class="tech-list">
|
||
<li class="tech-item">
|
||
<div class="tech-icon"><i class="fas fa-desktop"></i></div>
|
||
<span class="tech-name">Wails3</span>
|
||
<span class="tech-desc" data-en="Cross-platform desktop application framework" data-zh="跨平台桌面应用框架">跨平台桌面应用框架</span>
|
||
</li>
|
||
<li class="tech-item">
|
||
<div class="tech-icon"><i class="fas fa-cogs"></i></div>
|
||
<span class="tech-name">Go 1.21+</span>
|
||
<span class="tech-desc" data-en="Fast and efficient backend language" data-zh="快速高效的后端语言">快速高效的后端语言</span>
|
||
</li>
|
||
<li class="tech-item">
|
||
<div class="tech-icon"><i class="fab fa-vuejs"></i></div>
|
||
<span class="tech-name">Vue 3 + TypeScript</span>
|
||
<span class="tech-desc" data-en="Modern frontend framework" data-zh="现代化前端框架">现代化前端框架</span>
|
||
</li>
|
||
<li class="tech-item">
|
||
<div class="tech-icon"><i class="fas fa-edit"></i></div>
|
||
<span class="tech-name">CodeMirror 6</span>
|
||
<span class="tech-desc" data-en="Modern code editor with extension support" data-zh="支持扩展的现代化代码编辑器">支持扩展的现代化代码编辑器</span>
|
||
</li>
|
||
<li class="tech-item">
|
||
<div class="tech-icon"><i class="fas fa-database"></i></div>
|
||
<span class="tech-name">SQLite</span>
|
||
<span class="tech-desc" data-en="Lightweight database for document storage" data-zh="轻量级文档存储数据库">轻量级文档存储数据库</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<p class="footer-text" data-en="© 2023-2024 VoidRaft - An elegant text snippet recording tool designed for developers" data-zh="© 2023-2024 VoidRaft - 专为开发者打造的优雅文本片段记录工具">© 2023-2024 VoidRaft - 专为开发者打造的优雅文本片段记录工具</p>
|
||
<div class="footer-links">
|
||
<a href="https://github.com/landaiqing/voidraft" target="_blank" class="footer-link">GitHub</a>
|
||
<a href="https://github.com/landaiqing/voidraft/issues" target="_blank" class="footer-link" data-en="Issues" data-zh="问题反馈">问题反馈</a>
|
||
<a href="https://github.com/landaiqing/voidraft/releases" target="_blank" class="footer-link" data-en="Releases" data-zh="版本发布">版本发布</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/script.js"></script>
|
||
</body>
|
||
</html> |