MdToEvery/index.html at main · RiverXue/MdToEvery · GitHub

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="AI内容分享工具 - 将ChatGPT/Claude生成的Markdown转换为Word/TXT，解决分享格式问题。完全免费，无需注册，支持手机和电脑。">
    <meta name="keywords" content="markdown转word,markdown转txt,chatgpt内容分享,ai内容转换,去除markdown语法,markdown转换器,word转换工具">
    <title>Markdown转换工具 - AI内容分享神器 | ChatGPT内容转换</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Markdown转换工具</h1>
            <p class="subtitle">将AI生成的Markdown转换为TXT、Word等格式，方便分享</p>
        </header>

        <div class="tool-nav" style="margin-bottom: var(--spacing-lg); padding: var(--spacing-md); background: var(--apple-bg-secondary); border-radius: var(--radius-md); display: flex; gap: var(--spacing-sm); flex-wrap: wrap;">
            <a href="index.html" style="padding: var(--spacing-sm) var(--spacing-md); background: var(--apple-blue-light); color: var(--apple-blue); border: 1px solid var(--apple-blue); border-radius: var(--radius-sm); text-decoration: none; font-size: 14px;">📝 Markdown转换</a>
            <a href="prompt-manager.html" style="padding: var(--spacing-sm) var(--spacing-md); background: var(--apple-bg-primary); border: 1px solid var(--apple-border); border-radius: var(--radius-sm); text-decoration: none; color: var(--apple-text-primary); font-size: 14px; transition: all 0.2s var(--ease-out);">💡 提示词管理</a>
        </div>

        <main>
            <div class="input-section">
                <div class="section-header">
                    <h2>输入Markdown内容</h2>
                    <div class="action-buttons">
                        <button id="pasteBtn" class="btn btn-secondary" aria-label="粘贴剪贴板内容">
                            <span>📋 粘贴</span>
                        </button>
                        <label for="fileInput" class="btn btn-secondary" aria-label="上传文件">
                            <span>📁 上传</span>
                        </label>
                        <input type="file" id="fileInput" accept=".md,.markdown,.txt" style="display: none;" aria-label="选择文件">
                        <button id="exampleBtn" class="btn btn-secondary" aria-label="加载示例内容">
                            <span>📝 示例</span>
                        </button>
                        <button id="clearBtn" class="btn btn-secondary" aria-label="清空内容">
                            <span>🗑️ 清空</span>
                        </button>
                    </div>
                </div>
                <textarea id="markdownInput" placeholder="在这里粘贴或输入Markdown内容...&#10;&#10;例如：&#10;# 标题&#10;**粗体文本**&#10;- 列表项1&#10;- 列表项2"></textarea>
            </div>

            <div class="output-section">
                <div class="section-header">
                    <h2>转换结果</h2>
                    <div class="format-buttons">
                        <button id="convertTxt" class="btn btn-primary" aria-label="转换为TXT格式">
                            <span>转TXT</span>
                        </button>
                        <button id="convertWord" class="btn btn-primary" aria-label="转换为Word格式">
                            <span>转Word</span>
                        </button>
                        <button id="convertHtml" class="btn btn-primary" aria-label="转换为HTML格式">
                            <span>转HTML</span>
                        </button>
                    </div>
                </div>
                <div class="output-container">
                    <div id="outputPreview" class="output-preview"></div>
                    <textarea id="outputText" class="output-text" readonly placeholder="转换结果将显示在这里..."></textarea>
                </div>
                <div class="download-section">
                    <div class="action-buttons-group" style="display: none;" id="actionButtonsGroup">
                        <button id="copyBtn" class="btn btn-secondary" aria-label="复制转换结果">
                            <span>📋 复制</span>
                        </button>
                        <button id="downloadBtn" class="btn btn-success" aria-label="下载转换后的文件">
                            <span>⬇️ 下载</span>
                        </button>
                    </div>
                </div>
            </div>
        </main>

        <footer>
            <p>提示：支持粘贴Markdown内容或上传.md文件，转换后可直接下载分享</p>
        </footer>
    </div>

    <!-- 引入必要的库 -->
    <!-- 使用 unpkg.com CDN，国内访问更快更稳定 -->
    <script src="https://unpkg.com/marked@11.1.1/marked.min.js"></script>
    <script src="https://unpkg.com/docx@8.5.0/build/index.js"></script>
    <script src="https://unpkg.com/file-saver@2.0.5/dist/FileSaver.min.js"></script>
    <script src="script.js"></script>
</body>
</html>