Hugging Face's logo

Spaces:
CVNSS
/
Bogo
Running

App Files Community
CVNSS commited on
Commit
5741bb9
·
verified ·
1 Parent(s): 8057e65

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +109 -19
index.html CHANGED
@@ -1,19 +1,109 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bộ Gõ CVNSS 4.0 - Chế độ Spacebar</title>
7
+ <style>
8
+ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; padding-top: 50px; min-height: 100vh; margin: 0; }
9
+ .container { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); width: 800px; max-width: 95%; position: relative; }
10
+ h1 { text-align: center; color: #2c3e50; margin-bottom: 25px; font-size: 24px; }
11
+
12
+ .controls { background: #eef2f6; padding: 15px; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 20px; border: 1px solid #d1d9e6; }
13
+ .radio-group { display: flex; align-items: center; cursor: pointer; font-weight: 500; color: #444; transition: 0.2s; }
14
+ .radio-group:hover { color: #007bff; }
15
+ .radio-group input { margin-right: 8px; accent-color: #007bff; transform: scale(1.2); }
16
+ .highlight { color: #d63384; font-weight: bold; }
17
+
18
+ .editor-wrapper { position: relative; }
19
+ textarea { width: 100%; height: 250px; padding: 15px; font-size: 18px; line-height: 1.6; border: 2px solid #e0e0e0; border-radius: 8px; box-sizing: border-box; resize: vertical; outline: none; transition: border-color 0.3s; font-family: 'Courier New', Courier, monospace; }
20
+ textarea:focus { border-color: #007bff; }
21
+
22
+ .btn-copy {
23
+ position: absolute; top: 10px; right: 10px;
24
+ background-color: #007bff; color: white; border: none;
25
+ padding: 8px 16px; border-radius: 6px; cursor: pointer;
26
+ font-size: 14px; font-weight: 600; transition: background 0.2s;
27
+ display: flex; align-items: center; gap: 5px; opacity: 0.8;
28
+ }
29
+ .btn-copy:hover { background-color: #0056b3; opacity: 1; }
30
+ .btn-copy:active { transform: scale(0.98); }
31
+
32
+ .note { margin-top: 15px; font-size: 0.95em; color: #555; background: #fff3cd; padding: 10px; border-left: 4px solid #ffc107; border-radius: 4px; }
33
+ code { background: #eee; padding: 2px 5px; border-radius: 4px; font-family: monospace; color: #d63384; font-weight: bold; }
34
+
35
+ /* Toast notification */
36
+ #toast { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 4px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-size: 17px; opacity: 0; transition: opacity 0.5s, bottom 0.5s; }
37
+ #toast.show { visibility: visible; opacity: 1; bottom: 50px; }
38
+ </style>
39
+ </head>
40
+ <body>
41
+
42
+ <div class="container">
43
+ <h1>Soạn Thảo CVNSS 4.0 Pro</h1>
44
+
45
+ <div class="controls">
46
+ <label class="radio-group"><input type="radio" name="inputMethod" value="0" onclick="changeMode(0)"> Tắt</label>
47
+ <label class="radio-group"><input type="radio" name="inputMethod" value="1" onclick="changeMode(1)"> Telex</label>
48
+ <label class="radio-group"><input type="radio" name="inputMethod" value="2" onclick="changeMode(2)"> VNI</label>
49
+ <label class="radio-group"><input type="radio" name="inputMethod" value="5" onclick="changeMode(5)" checked> <span class="highlight">CVNSS 4.0</span></label>
50
+ </div>
51
+
52
+ <div class="editor-wrapper">
53
+ <textarea id="editor" placeholder="Gõ văn bản tại đây (Ví dụ: caf -> Space -> cách)..." spellcheck="false"></textarea>
54
+ <button class="btn-copy" onclick="copyText()">
55
+ <span>📄 Copy</span>
56
+ </button>
57
+ </div>
58
+
59
+ <div class="note" id="instruction">
60
+ Đang chọn chế độ: <b>CVNSS 4.0</b>. <br>
61
+ Cơ chế: Gõ mã thô (ví dụ <code>caf</code>), sau đó bấm <b>Phím Cách (Space)</b> để chuyển thành tiếng Việt.
62
+ </div>
63
+ </div>
64
+
65
+ <div id="toast">Đã sao chép vào bộ nhớ tạm!</div>
66
+
67
+ <script src="vietuni-cvnss.js"></script>
68
+
69
+ <script>
70
+ window.onload = function() {
71
+ var textArea = document.getElementById('editor');
72
+ if (typeof initTyper === 'function') {
73
+ initTyper(textArea);
74
+ setTypingMode(5); // Mặc định bật CVNSS
75
+ } else {
76
+ alert("Lỗi: Không tìm thấy file vietuni-cvnss.js!");
77
+ }
78
+ };
79
+
80
+ function changeMode(mode) {
81
+ setTypingMode(mode);
82
+ var note = document.getElementById('instruction');
83
+ if(mode == 5) note.innerHTML = "Chế độ: <b>CVNSS 4.0</b>. Gõ từ (vd: <code>baf</code>) rồi bấm <b>Space</b> để ra <code>bác</code>.";
84
+ else if(mode == 1) note.innerHTML = "Chế độ: <b>Telex</b>. Gõ dấu kiểu Telex (<code>aa</code> -> <code>â</code>, <code>s</code> -> sắc).";
85
+ else if(mode == 2) note.innerHTML = "Chế độ: <b>VNI</b>. Gõ dấu số (<code>a1</code> -> <code>á</code>).";
86
+ else note.innerHTML = "Đã tắt bộ gõ tiếng Việt.";
87
+
88
+ document.getElementById('editor').focus();
89
+ }
90
+
91
+ function copyText() {
92
+ var textArea = document.getElementById("editor");
93
+ textArea.select();
94
+ textArea.setSelectionRange(0, 99999);
95
+ navigator.clipboard.writeText(textArea.value).then(function() {
96
+ showToast();
97
+ }, function(err) {
98
+ alert('Không thể copy: ' + err);
99
+ });
100
+ }
101
+
102
+ function showToast() {
103
+ var x = document.getElementById("toast");
104
+ x.className = "show";
105
+ setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
106
+ }
107
+ </script>
108
+ </body>
109
+ </html>