Skip to content

Commit 257f1dc

Browse files
QJQAQJQA
authored
Update index.html
1 parent 91af0b8 commit 257f1dc

File tree

1 file changed

+245
-62
lines changed

1 file changed

+245
-62
lines changed

‎index.html

+245-62
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,246 @@
11
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>File Converter Bot for Discord</title>
7-
<style>
8-
/* 这里是所有的 CSS 样式 */
9-
body {
10-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
11-
line-height: 1.6;
12-
color: #333;
13-
max-width: 800px;
14-
margin: 0 auto;
15-
padding: 20px;
16-
background: #f0f0f0;
17-
}
18-
/* ... 其余的 CSS 样式 ... */
19-
</style>
20-
</head>
21-
<body>
22-
<!-- 这里是所有的 HTML 内容 -->
23-
<select id="language-selector">
24-
<option value="en">English</option>
25-
<option value="zh">中文</option>
26-
<option value="ko">한국어</option>
27-
<option value="ru">Русский</option>
28-
<option value="de">Deutsch</option>
29-
<option value="es">Español</option>
30-
</select>
31-
32-
<header>
33-
<h1 data-lang="title">File Converter Bot for Discord</h1>
34-
<!-- ... 其余的 HTML 内容 ... -->
35-
</header>
36-
37-
<!-- ... 主要内容和页脚 ... -->
38-
39-
<script>
40-
// 这里是 JavaScript 代码
41-
const languages = {
42-
en: {
43-
// 英文翻译
44-
},
45-
zh: {
46-
// 中文翻译
47-
},
48-
// ... 其他语言的翻译 ...
49-
};
50-
51-
function changeLanguage(lang) {
52-
// 语言切换函数
53-
}
54-
55-
document.getElementById('language-selector').addEventListener('change', function() {
56-
changeLanguage(this.value);
57-
});
58-
59-
// 初始化为英语
60-
changeLanguage('en');
61-
</script>
62-
</body>
63-
</html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>File Converter Bot for Discord</title>
7+
<style>
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
10+
line-height: 1.6;
11+
color: #333;
12+
max-width: 800px;
13+
margin: 0 auto;
14+
padding: 20px;
15+
background: #f0f0f0;
16+
}
17+
header, section, footer {
18+
background: #fff;
19+
padding: 20px;
20+
margin-bottom: 20px;
21+
border-radius: 8px;
22+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
23+
}
24+
h1, h2 {
25+
color: #2c3e50;
26+
margin-top: 0;
27+
}
28+
a {
29+
color: #3498db;
30+
text-decoration: none;
31+
}
32+
a:hover {
33+
text-decoration: underline;
34+
}
35+
code {
36+
background-color: #f8f8f8;
37+
padding: 2px 4px;
38+
border-radius: 3px;
39+
font-family: 'Courier New', Courier, monospace;
40+
border: 1px solid #e0e0e0;
41+
}
42+
.cta-button {
43+
display: inline-block;
44+
background-color: #3498db;
45+
color: white;
46+
padding: 10px 20px;
47+
border-radius: 5px;
48+
margin: 10px 0;
49+
transition: background-color 0.3s;
50+
}
51+
.cta-button:hover {
52+
background-color: #2980b9;
53+
text-decoration: none;
54+
}
55+
form {
56+
margin-top: 20px;
57+
}
58+
input, textarea, button, select {
59+
width: 100%;
60+
padding: 10px;
61+
margin-bottom: 10px;
62+
border: 1px solid #ddd;
63+
border-radius: 4px;
64+
box-sizing: border-box;
65+
}
66+
button {
67+
background-color: #3498db;
68+
color: white;
69+
border: none;
70+
cursor: pointer;
71+
transition: background-color 0.3s;
72+
}
73+
button:hover {
74+
background-color: #2980b9;
75+
}
76+
.format-grid {
77+
display: grid;
78+
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
79+
gap: 10px;
80+
}
81+
.format-item {
82+
background-color: #f8f8f8;
83+
padding: 5px 10px;
84+
border-radius: 4px;
85+
text-align: center;
86+
font-size: 0.9em;
87+
}
88+
.add-bot-container {
89+
text-align: center;
90+
margin: 20px 0;
91+
}
92+
#language-selector {
93+
position: absolute;
94+
top: 20px;
95+
right: 20px;
96+
width: auto;
97+
}
98+
</style>
99+
</head>
100+
<body>
101+
<select id="language-selector">
102+
<option value="en">English</option>
103+
<option value="zh">中文</option>
104+
<option value="ko">한국어</option>
105+
<option value="ru">Русский</option>
106+
<option value="de">Deutsch</option>
107+
<option value="es">Español</option>
108+
</select>
109+
110+
<header>
111+
<h1 data-lang="title">File Converter Bot for Discord</h1>
112+
<p data-lang="subtitle">Convert files directly in your Discord server. Simple, fast, efficient.</p>
113+
<div class="add-bot-container">
114+
<a href="https://discord.com/oauth2/authorize?client_id=1258258162545459332&permissions=108544&integration_type=0&scope=bot+applications.commands" class="cta-button" data-lang="add-to-discord">Add to Discord</a>
115+
</div>
116+
</header>
117+
118+
<main>
119+
<section id="usage">
120+
<h2 data-lang="how-to-use">How to Use</h2>
121+
<ol>
122+
<li data-lang="step1">Add bot to your server</li>
123+
<li data-lang="step2">Upload file to Discord</li>
124+
<li data-lang="step3">Type <code>!convert [format]</code></li>
125+
<li data-lang="step4">Receive converted file</li>
126+
</ol>
127+
<p data-lang="example">Example: To convert a file to PDF, upload the file and type:</p>
128+
<code>!convert pdf</code>
129+
</section>
130+
131+
<section id="supported-formats">
132+
<h2 data-lang="supported-formats">Supported Formats</h2>
133+
<div class="format-grid">
134+
<div class="format-item">PDF</div>
135+
<div class="format-item">DOCX</div>
136+
<div class="format-item">JPG</div>
137+
<div class="format-item">PNG</div>
138+
<div class="format-item">GIF</div>
139+
<div class="format-item">WebP</div>
140+
<div class="format-item">PSD</div>
141+
<div class="format-item">MP3</div>
142+
<div class="format-item">MP4</div>
143+
<div class="format-item">AVI</div>
144+
<div class="format-item">TXT</div>
145+
<div class="format-item">PPT</div>
146+
</div>
147+
<p data-lang="formats-note">Note: This list is not exhaustive. Use <code>!formats</code> command for a complete list.</p>
148+
</section>
149+
150+
<section id="commands">
151+
<h2 data-lang="commands">Commands</h2>
152+
<ul>
153+
<li data-lang="convert-command"><code>!convert [format]</code> - Convert file</li>
154+
<li data-lang="formats-command"><code>!formats</code> - List supported formats</li>
155+
<li data-lang="help-command"><code>!help</code> - Show help</li>
156+
</ul>
157+
</section>
158+
159+
<section id="contact">
160+
<h2 data-lang="contact-us">Contact Us</h2>
161+
<form action="https://formspree.io/f/mqazbgby" method="POST">
162+
<input type="email" name="email" data-lang="email-placeholder" placeholder="Your email" required>
163+
<input type="text" name="topic" data-lang="topic-placeholder" placeholder="Topic" required>
164+
<textarea name="message" data-lang="message-placeholder" placeholder="Your message" required></textarea>
165+
<button type="submit" data-lang="send">Send</button>
166+
</form>
167+
</section>
168+
</main>
169+
170+
<footer>
171+
<div class="add-bot-container">
172+
<a href="https://discord.com/oauth2/authorize?client_id=1258258162545459332&permissions=108544&integration_type=0&scope=bot+applications.commands" class="cta-button" data-lang="add-to-discord">Add to Discord</a>
173+
</div>
174+
</footer>
175+
176+
<script>
177+
const languages = {
178+
en: {
179+
"title": "File Converter Bot for Discord",
180+
"subtitle": "Convert files directly in your Discord server. Simple, fast, efficient.",
181+
"add-to-discord": "Add to Discord",
182+
"how-to-use": "How to Use",
183+
"step1": "Add bot to your server",
184+
"step2": "Upload file to Discord",
185+
"step3": "Type <code>!convert [format]</code>",
186+
"step4": "Receive converted file",
187+
"example": "Example: To convert a file to PDF, upload the file and type:",
188+
"supported-formats": "Supported Formats",
189+
"formats-note": "Note: This list is not exhaustive. Use <code>!formats</code> command for a complete list.",
190+
"commands": "Commands",
191+
"convert-command": "<code>!convert [format]</code> - Convert file",
192+
"formats-command": "<code>!formats</code> - List supported formats",
193+
"help-command": "<code>!help</code> - Show help",
194+
"contact-us": "Contact Us",
195+
"email-placeholder": "Your email",
196+
"topic-placeholder": "Topic",
197+
"message-placeholder": "Your message",
198+
"send": "Send"
199+
},
200+
zh: {
201+
"title": "Discord文件转换机器人",
202+
"subtitle": "直接在Discord服务器中转换文件。简单、快速、高效。",
203+
"add-to-discord": "添加到Discord",
204+
"how-to-use": "使用方法",
205+
"step1": "将机器人添加到您的服务器",
206+
"step2": "将文件上传到Discord",
207+
"step3": "输入 <code>!convert [格式]</code>",
208+
"step4": "接收转换后的文件",
209+
"example": "示例：要将文件转换为PDF，上传文件并输入：",
210+
"supported-formats": "支持的格式",
211+
"formats-note": "注意：此列表并非详尽无遗。使用 <code>!formats</code> 命令获取完整列表。",
212+
"commands": "命令",
213+
"convert-command": "<code>!convert [格式]</code> - 转换文件",
214+
"formats-command": "<code>!formats</code> - 列出支持的格式",
215+
"help-command": "<code>!help</code> - 显示帮助",
216+
"contact-us": "联系我们",
217+
"email-placeholder": "您的邮箱",
218+
"topic-placeholder": "主题",
219+
"message-placeholder": "您的留言",
220+
"send": "发送"
221+
},
222+
// Add translations for other languages here (ko, ru, de, es)
223+
};
224+
225+
function changeLanguage(lang) {
226+
document.querySelectorAll('[data-lang]').forEach(elem => {
227+
const key = elem.getAttribute('data-lang');
228+
if (languages[lang] && languages[lang][key]) {
229+
if (elem.tagName === 'INPUT' || elem.tagName === 'TEXTAREA') {
230+
elem.placeholder = languages[lang][key];
231+
} else {
232+
elem.innerHTML = languages[lang][key];
233+
}
234+
}
235+
});
236+
}
237+
238+
document.getElementById('language-selector').addEventListener('change', function() {
239+
changeLanguage(this.value);
240+
});
241+
242+
// Initialize with English
243+
changeLanguage('en');
244+
</script>
245+
</body>
246+
</html>

0 commit comments

Comments
 (0)