-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
157 lines (152 loc) · 7.92 KB
/
Copy pathindex.html
File metadata and controls
157 lines (152 loc) · 7.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字转图片样式</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles/themes.css">
<link rel="stylesheet" href="styles/marked-note.css">
<script src="lib/html2canvas.min.js"></script>
<script src="https://cdn.tiny.cloud/1/jqt84z5ffzl048t0shtk8n1oz5uqx8lwmetkmtlh8mm0fks4/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script type="module" src="js/main.js"></script>
<script>
function handleTab(e) {
if (e.key == 'Tab') {
e.preventDefault();
var start = e.target.selectionStart;
var end = e.target.selectionEnd;
var value = e.target.value;
if (start === end) {
// 如果没有选中文本，插入4个空格
e.target.value = value.substring(0, start) + " " + value.substring(end);
e.target.selectionStart = e.target.selectionEnd = start + 4;
} else {
// 如果选中了文本，处理选中的每一行
var selectedText = value.substring(start, end);
var lines = selectedText.split('\n');
if (e.shiftKey) {
// Shift+Tab 减少缩进
var modifiedLines = lines.map(line => {
if (line.startsWith(' ')) return line.substring(4);
if (line.startsWith('\t')) return line.substring(1);
return line;
});
} else {
// Tab 增加缩进
var modifiedLines = lines.map(line => ' ' + line);
}
var modifiedText = modifiedLines.join('\n');
e.target.value = value.substring(0, start) + modifiedText + value.substring(end);
// 保持选区
e.target.selectionStart = start;
e.target.selectionEnd = start + modifiedText.length;
}
}
}
</script>
</head>
<body>
<div class="container">
<div class="input-section">
<h2>输入文字</h2>
<div class="style-selector">
<button class="style-btn active" data-style="note">普通笔记</button>
<button class="style-btn" data-style="marked-note">标记笔记</button>
<button class="style-btn" data-style="rich-note">富文本笔记</button>
<button class="style-btn" data-style="poetry">古诗词</button>
</div>
<div class="guide-toggle-wrapper">
<label class="toggle-btn">
<input type="checkbox" id="showGuide">
<span class="toggle-label">
<svg viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05.02.01.03.03.04.04 1.14.83 1.93 1.94 1.93 3.41V18c0 .35-.07.69-.18 1H22c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
引导关注
</span>
</label>
</div>
<div class="marked-note-tools">
<button class="help-btn" title="查看标记使用说明">
<svg viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
</svg>
使用说明
</button>
</div>
<div id="markedNoteGuide" class="marked-note-guide" style="display: none;">
<div class="guide-header">
<h3>标记笔记说明</h3>
<button class="close-guide">×</button>
</div>
<div class="guide-content">
<p>在文本中使用以下标记来设置不同的样式：</p>
<div class="guide-examples">
<div class="example">
<code><u>文字</u></code>
<span>添加下划线</span>
</div>
<div class="example">
<code><important>文字</important></code>
<span>重点标记</span>
</div>
</div>
<div class="guide-prompt">
<h4>AI提示词</h4>
<p>当使用AI助手时，可以使用以下提示词让AI帮助添加标记：</p>
<pre>请帮我为以下文本添加标记：
- 使用<important>标记重要内容和核心观点
- 使用<u>标记需要记忆的内容
[在这里粘贴你的文本]</pre>
</div>
</div>
</div>
<div class="theme-selector">
<h3>主题风格</h3>
<div class="theme-options">
<label class="theme-option active">
<input type="radio" name="theme" value="elegant" checked>
<span class="theme-preview" data-theme="elegant"></span>
<span class="theme-name">典雅米色</span>
</label>
<label class="theme-option">
<input type="radio" name="theme" value="fresh">
<span class="theme-preview" data-theme="fresh"></span>
<span class="theme-name">清新蓝调</span>
</label>
<label class="theme-option">
<input type="radio" name="theme" value="dark">
<span class="theme-preview" data-theme="dark"></span>
<span class="theme-name">暗夜模式</span>
</label>
</div>
</div>
<textarea id="textInput" rows="10" placeholder="请输入要转换的文字..." onkeydown="handleTab(event)"></textarea>
<div id="richTextEditor" style="display: none;">
<textarea id="richTextArea"></textarea>
</div>
<div class="poetry-insight-wrapper" style="display: none;">
<h3>古诗感悟</h3>
<textarea id="insightInput" rows="6" placeholder="请输入对这首诗的感悟..." onkeydown="handleTab(event)"></textarea>
</div>
</div>
<div class="preview-section">
<div class="preview-header">
<h2>预览效果</h2>
<div class="preview-controls">
<div class="width-control">
<label for="previewWidth">当前宽度:</label>
<input type="number" id="previewWidth" value="515" min="300" max="1000" step="5">
<span>px</span>
</div>
<button id="exportBtn" class="export-btn">导出图片</button>
</div>
</div>
<div id="previewArea" class="preview-area">
<div id="textPreview" class="text-preview"></div>
</div>
</div>
</div>
</body>
</html>