cdnhost 2.5.0 → 2.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/ws_cdnhtml.js +13 -13
- package/ws_css.css +41 -1
package/package.json
CHANGED
package/ws_cdnhtml.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
// 1.
|
|
1
|
+
// 1. 웹 페이지에서 id가 'app'인 요소를 찾아서 appContainer 변수에 저장합니다.
|
|
2
2
|
const appContainer = document.getElementById('app');
|
|
3
3
|
|
|
4
|
-
// 2.
|
|
5
|
-
//
|
|
4
|
+
// 2. 원본 HTML 코드를 백틱(`)을 사용해 그대로 복사하여 문자열로 만듭니다.
|
|
5
|
+
// 이렇게 하면 모든 id, class, 속성들이 완벽하게 보존됩니다.
|
|
6
6
|
const widgetHTML = `
|
|
7
7
|
<div id="fhl-toast-notification" class="fhl-toast"></div>
|
|
8
8
|
<div class="fhl-widget-container" id="fhl-widget-container">
|
|
@@ -11,22 +11,22 @@ const widgetHTML = `
|
|
|
11
11
|
</div>
|
|
12
12
|
<div class="fhl-widget-wrapper" id="fhl-widget-wrapper">
|
|
13
13
|
<div class="fhl-icon-bar" id="fhl-icon-bar">
|
|
14
|
-
<button class="fhl-icon-display" id="fhl-search-trigger" aria-label="
|
|
14
|
+
<button class="fhl-icon-display" id="fhl-search-trigger" aria-label="검색 열기"><i class="ph-bold ph-magnifying-glass"></i></button>
|
|
15
15
|
<div class="fhl-list-container" id="fhl-list-container"></div>
|
|
16
|
-
<a href="#" id="fhl-add-to-home-btn" class="fhl-icon-display" aria-label="
|
|
16
|
+
<a href="#" id="fhl-add-to-home-btn" class="fhl-icon-display" aria-label="현재 페이지를 위젯에 추가"><i class="ph-bold ph-download-simple"></i></a>
|
|
17
17
|
</div>
|
|
18
18
|
<div class="fhl-search-view" id="fhl-search-view">
|
|
19
19
|
<div class="fhl-search-input-wrapper">
|
|
20
|
-
<input type="text" class="fhl-search-input" id="fhl-search-input" placeholder="
|
|
21
|
-
<button class="fhl-icon-display" id="fhl-search-close" aria-label="
|
|
20
|
+
<input type="text" class="fhl-search-input" id="fhl-search-input" placeholder="검색..." autocomplete="off">
|
|
21
|
+
<button class="fhl-icon-display" id="fhl-search-close" aria-label="검색 닫기"><i class="ph-bold ph-x"></i></button>
|
|
22
22
|
</div>
|
|
23
23
|
<div class="fhl-search-content">
|
|
24
24
|
<div class="fhl-search-results" id="fhl-search-results"></div>
|
|
25
25
|
<div class="fhl-fixed-panel">
|
|
26
|
-
<a href="#" id="fhl-search-add-btn" class="fhl-fixed-item" aria-label="
|
|
27
|
-
<a href="https://isai.kr/#chat" class="fhl-fixed-item" aria-label="
|
|
28
|
-
<a href="https://zoai.oduc.kr/ko/character/select" class="fhl-fixed-item" aria-label="
|
|
29
|
-
<a href="https://gig.snapp.im/" class="fhl-fixed-item" aria-label="
|
|
26
|
+
<a href="#" id="fhl-search-add-btn" class="fhl-fixed-item" aria-label="현재 페이지를 위젯에 추가"><i class="ph-bold ph-download-simple"></i></a>
|
|
27
|
+
<a href="https://isai.kr/#chat" class="fhl-fixed-item" aria-label="채팅"><i class="ph-question-mark ph-image"></i></a>
|
|
28
|
+
<a href="https://zoai.oduc.kr/ko/character/select" class="fhl-fixed-item" aria-label="캐릭터챗"><i class="ph-bold ph-smiley"></i></a>
|
|
29
|
+
<a href="https://gig.snapp.im/" class="fhl-fixed-item" aria-label="광고"><i class="ph-bold ph-megaphone"></i></a>
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
@@ -34,8 +34,8 @@ const widgetHTML = `
|
|
|
34
34
|
</div>
|
|
35
35
|
`;
|
|
36
36
|
|
|
37
|
-
// 3. appContainer
|
|
38
|
-
//
|
|
37
|
+
// 3. appContainer가 실제로 존재하는지 확인한 후,
|
|
38
|
+
// 내용물(innerHTML)을 위에서 만든 HTML 문자열로 교체합니다.
|
|
39
39
|
if (appContainer) {
|
|
40
40
|
appContainer.innerHTML = widgetHTML;
|
|
41
41
|
}
|
package/ws_css.css
CHANGED
|
@@ -71,4 +71,44 @@
|
|
|
71
71
|
font-size: 14px; z-index: 1001; opacity: 0; visibility: hidden; pointer-events: none;
|
|
72
72
|
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
|
|
73
73
|
}
|
|
74
|
-
.fhl-toast.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
|
|
74
|
+
.fhl-toast.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
|
|
75
|
+
.fhl-language-panel {
|
|
76
|
+
position: absolute;
|
|
77
|
+
bottom: 100%;
|
|
78
|
+
left: 50%;
|
|
79
|
+
transform: translateX(-50%);
|
|
80
|
+
margin-bottom: 15px;
|
|
81
|
+
background-color: rgba(255, 255, 255, 0.95);
|
|
82
|
+
backdrop-filter: blur(10px);
|
|
83
|
+
-webkit-backdrop-filter: blur(10px);
|
|
84
|
+
border-radius: 12px;
|
|
85
|
+
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
|
86
|
+
padding: 8px;
|
|
87
|
+
display: grid;
|
|
88
|
+
grid-template-columns: 1fr 1fr;
|
|
89
|
+
gap: 4px;
|
|
90
|
+
opacity: 0;
|
|
91
|
+
visibility: hidden;
|
|
92
|
+
pointer-events: none;
|
|
93
|
+
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
94
|
+
transform-origin: bottom center;
|
|
95
|
+
}
|
|
96
|
+
.fhl-language-panel.visible {
|
|
97
|
+
opacity: 1;
|
|
98
|
+
visibility: visible;
|
|
99
|
+
pointer-events: auto;
|
|
100
|
+
}
|
|
101
|
+
.fhl-language-item {
|
|
102
|
+
display: block;
|
|
103
|
+
padding: 6px 12px;
|
|
104
|
+
font-size: 14px;
|
|
105
|
+
color: #333;
|
|
106
|
+
text-decoration: none;
|
|
107
|
+
border-radius: 8px;
|
|
108
|
+
transition: background-color 0.2s ease;
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
text-align: center;
|
|
111
|
+
}
|
|
112
|
+
.fhl-language-item:hover {
|
|
113
|
+
background-color: rgba(0,0,0,0.1);
|
|
114
|
+
}
|