Skip to content

Commit afda2b0

Browse files
hodgefhodgef
committed
Initial Commit
1 parent 157d710 commit afda2b0

File tree

14 files changed

+1791
-748
lines changed

14 files changed

+1791
-748
lines changed

‎LICENSE

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎README.md

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
<div align="center">
2-
<p>
3-
<img src="https://i.imgur.com/oju8TbK.png"/>
4-
</p>
5-
<p>
6-
Javascript Virtual Keyboard <br /> https://virtual-keyboard.js.org/
7-
</p>
8-
</div>
1+
<h1>My Site</h1>
2+
<div align="right">
3+
<a href="https://prss.io"><img src="https://i.imgur.com/119jHbZ.png" /></a>
4+
</div>

‎assets/css/main.css

Lines changed: 1 addition & 293 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎blog/index.html

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
<!DOCTYPE html><html><head><meta name="description" content="Explore the latest posts"><meta name="twitter:description" content="Explore the latest posts"><meta property="og:title" content="Blog"><meta property="og:site_name" content="Simple-keyboard - The Modern Virtual Keyboard"><meta charset="UTF-8"><title>Blog - Simple-keyboard - The Modern Virtual Keyboard</title><style>@import url("assets/css/font-awesome.min.css");
2+
@import "https://fonts.googleapis.com/css?family=Roboto:300,400";
3+
4+
body {
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body,
10+
input,
11+
select,
12+
textarea {
13+
font-family: "Roboto", Helvetica, sans-serif;
14+
font-size: 17pt;
15+
font-weight: 300;
16+
line-height: 1.65;
17+
}
18+
19+
h1 {
20+
font-size: 2.5em;
21+
line-height: 1.2;
22+
font-family: "skfont";
23+
font-weight: normal;
24+
font-style: normal;
25+
display: inline-block;
26+
border-right: 25px solid white;
27+
padding-right: 25px;
28+
letter-spacing: 0px;
29+
margin-bottom: 0;
30+
}
31+
32+
a {
33+
-moz-transition: color 0.2s ease, border-bottom 0.2s ease;
34+
-webkit-transition: color 0.2s ease, border-bottom 0.2s ease;
35+
-ms-transition: color 0.2s ease, border-bottom 0.2s ease;
36+
transition: color 0.2s ease, border-bottom 0.2s ease;
37+
text-decoration: none;
38+
/*border-bottom: dotted 1px;*/
39+
color: inherit;
40+
}
41+
42+
a:hover {
43+
border-bottom-color: transparent;
44+
}
45+
46+
.btnContainer .button {
47+
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
48+
}
49+
50+
.btnContainer .button:first-child {
51+
margin-right: 10px;
52+
}
53+
54+
input[type="submit"],
55+
input[type="reset"],
56+
input[type="button"],
57+
button,
58+
.button {
59+
-moz-appearance: none;
60+
-webkit-appearance: none;
61+
-ms-appearance: none;
62+
appearance: none;
63+
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
64+
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
65+
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
66+
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
67+
border-radius: 8px;
68+
border: 0;
69+
cursor: pointer;
70+
display: inline-block;
71+
font-weight: 300;
72+
height: 2.75em;
73+
line-height: 2.75em;
74+
min-width: 9.25em;
75+
padding: 0 1.5em;
76+
text-align: center;
77+
text-decoration: none;
78+
white-space: nowrap;
79+
}
80+
81+
.button:hover {
82+
font-weight: 400;
83+
}
84+
85+
h1:first-child,
86+
h2:first-child {
87+
margin-top: 0;
88+
}
89+
90+
div#wrapper {
91+
display: flex;
92+
height: 100%;
93+
}
94+
95+
.left-content {
96+
color: white;
97+
flex: 1;
98+
justify-content: center;
99+
align-items: center;
100+
display: flex;
101+
padding: 20px;
102+
box-sizing: border-box;
103+
}
104+
105+
.right-content {
106+
background: #efefef;
107+
width: 500px;
108+
box-sizing: border-box;
109+
display: flex;
110+
flex-flow: column;
111+
padding: 40px;
112+
}
113+
114+
.content-detail {
115+
flex: 1;
116+
overflow-y: auto;
117+
display: flex;
118+
flex-flow: column;
119+
}
120+
121+
.intro-content {
122+
display: inline-block;
123+
text-align: center;
124+
width: 50%;
125+
min-width: 600px;
126+
}
127+
128+
h2 {
129+
font-size: 25px;
130+
display: flex;
131+
align-items: center;
132+
}
133+
134+
input.simple-keyboard-input {
135+
border: 0;
136+
padding: 20px 10px;
137+
font-size: 20px;
138+
flex-grow: 1;
139+
width: 700px;
140+
font-size: 2em;
141+
}
142+
143+
input::placeholder {
144+
color: #636363;
145+
}
146+
147+
.keyboardContainer {
148+
transition: margin-top 1s ease-in-out 0.5s, opacity 1s ease-in-out 0.5s,
149+
width 0.3s linear;
150+
overflow: hidden;
151+
width: 100%;
152+
z-index: 3;
153+
max-width: 750px;
154+
/*margin: 0 auto;*/
155+
font-size: 20px;
156+
margin-bottom: 40px;
157+
}
158+
159+
.keyboardContainer .simple-keyboard {
160+
background: rgba(255, 255, 255, 0.9);
161+
}
162+
163+
.keyboardContainer .simple-keyboard .hg-button {
164+
color: rgba(0, 0, 0, 0.7);
165+
font-weight: 300;
166+
font-size: 20px;
167+
font-size: 17px;
168+
}
169+
170+
.keyboardContainer .simple-keyboard .hg-button:active {
171+
background: rgba(0, 0, 0, 0.01);
172+
}
173+
174+
.inputContainer:after {
175+
display: block;
176+
content: "";
177+
width: 3.25em;
178+
height: 2px;
179+
margin: 0.7em 0 1em 0;
180+
border-radius: 2px;
181+
}
182+
183+
.inputContainer:after {
184+
background-color: #dddddd;
185+
background-image: -moz-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);
186+
background-image: -webkit-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);
187+
background-image: -ms-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);
188+
background-image: linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);
189+
}
190+
191+
.simple-keyboard.hg-theme-default .hg-button[data-skbtnuid^="numbers-"] {
192+
width: 33%;
193+
max-width: none;
194+
}
195+
196+
.content-block>p:first-child {
197+
margin-top: 0;
198+
}
199+
200+
/**
201+
* Hide lang
202+
*/
203+
.content-block:last-child {
204+
display: none;
205+
}
206+
207+
div#codefund span,
208+
div#codefund strong,
209+
div#codefund a {
210+
color: black !important;
211+
text-decoration: none;
212+
border: none;
213+
}
214+
215+
div#cf {
216+
max-width: 500px !important;
217+
width: 500px;
218+
}
219+
220+
h2 i,
221+
h2 em {
222+
margin-right: 10px !important;
223+
}
224+
225+
.ul-lang {
226+
display: flex;
227+
flex-wrap: wrap;
228+
list-style: none;
229+
padding: 0;
230+
}
231+
232+
.ul-lang li {
233+
background: #e0e0e0;
234+
border-radius: 5px;
235+
padding: 3px 10px;
236+
margin-bottom: 5px;
237+
margin-right: 5px;
238+
}
239+
240+
.fundzone {
241+
border-top: 5px solid rgba(0, 0, 0, 0.01);
242+
}
243+
244+
strong {
245+
color: #1c4994;
246+
}
247+
248+
.qDemo {
249+
display: flex;
250+
align-items: center;
251+
justify-content: center;
252+
}
253+
254+
.spo-widget {
255+
border: none !important;
256+
width: 100%;
257+
height: 160px !important;
258+
min-height: 160px !important;
259+
}
260+
261+
.content-detail {
262+
max-height: calc(100vh - 176px);
263+
}
264+
265+
.right-content {
266+
font-size: 21px;
267+
min-height: 100vh;
268+
}
269+
270+
@media screen and (max-width: 945px) {
271+
div#wrapper {
272+
display: block;
273+
}
274+
275+
.intro-content {
276+
width: 100%;
277+
padding: 20px;
278+
min-width: unset;
279+
}
280+
281+
.btnContainer {
282+
text-align: center;
283+
}
284+
285+
.right-content {
286+
width: 100%;
287+
}
288+
289+
h1 {
290+
font-size: 26px;
291+
}
292+
293+
.button {
294+
display: block;
295+
margin-right: 0 !important;
296+
margin-bottom: 10px;
297+
}
298+
299+
.hg-button.hg-functionBtn.hg-button-space {
300+
flex: 5;
301+
}
302+
}</style></head><body><div id="root"></div><script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.min.js"></script><script src="../items.js"></script><script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script><script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script><script crossorigin src="https://cdn.jsdelivr.net/npm/@hodgef/[email protected]/build/blog.js"></script><script src="../config.js"></script><script>var PRSSElement=React.createElement(PRSSComponent.default,Object.assign({path:"/blog",templateId:"blank.blog",parser:"react",item:{uuid:"b3aa3640-8b67-4a96-a021-c3d172975655",slug:"blog",title:"Blog",content:"<p>Explore the latest posts</p>",template:"blog",updatedAt:null,createdAt:1714779163703,vars:{}},rootPath:"../",headHtml:'<title>%item.title% - %site.title%</title>\n<style>\n @import url("assets/css/font-awesome.min.css");\n @import "https://fonts.googleapis.com/css?family=Roboto:300,400";\n\n body {\n margin: 0;\n padding: 0;\n }\n\n body,\n input,\n select,\n textarea {\n font-family: "Roboto", Helvetica, sans-serif;\n font-size: 17pt;\n font-weight: 300;\n line-height: 1.65;\n }\n\n h1 {\n font-size: 2.5em;\n line-height: 1.2;\n font-family: "skfont";\n font-weight: normal;\n font-style: normal;\n display: inline-block;\n border-right: 25px solid white;\n padding-right: 25px;\n letter-spacing: 0px;\n margin-bottom: 0;\n }\n\n a {\n -moz-transition: color 0.2s ease, border-bottom 0.2s ease;\n -webkit-transition: color 0.2s ease, border-bottom 0.2s ease;\n -ms-transition: color 0.2s ease, border-bottom 0.2s ease;\n transition: color 0.2s ease, border-bottom 0.2s ease;\n text-decoration: none;\n /*border-bottom: dotted 1px;*/\n color: inherit;\n }\n\n a:hover {\n border-bottom-color: transparent;\n }\n\n .btnContainer .button {\n box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);\n }\n\n .btnContainer .button:first-child {\n margin-right: 10px;\n }\n\n input[type="submit"],\n input[type="reset"],\n input[type="button"],\n button,\n .button {\n -moz-appearance: none;\n -webkit-appearance: none;\n -ms-appearance: none;\n appearance: none;\n -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n border-radius: 8px;\n border: 0;\n cursor: pointer;\n display: inline-block;\n font-weight: 300;\n height: 2.75em;\n line-height: 2.75em;\n min-width: 9.25em;\n padding: 0 1.5em;\n text-align: center;\n text-decoration: none;\n white-space: nowrap;\n }\n\n .button:hover {\n font-weight: 400;\n }\n\n h1:first-child,\n h2:first-child {\n margin-top: 0;\n }\n\n div#wrapper {\n display: flex;\n height: 100%;\n }\n\n .left-content {\n color: white;\n flex: 1;\n justify-content: center;\n align-items: center;\n display: flex;\n padding: 20px;\n box-sizing: border-box;\n }\n\n .right-content {\n background: #efefef;\n width: 500px;\n box-sizing: border-box;\n display: flex;\n flex-flow: column;\n padding: 40px;\n }\n\n .content-detail {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-flow: column;\n }\n\n .intro-content {\n display: inline-block;\n text-align: center;\n width: 50%;\n min-width: 600px;\n }\n\n h2 {\n font-size: 25px;\n display: flex;\n align-items: center;\n }\n\n input.simple-keyboard-input {\n border: 0;\n padding: 20px 10px;\n font-size: 20px;\n flex-grow: 1;\n width: 700px;\n font-size: 2em;\n }\n\n input::placeholder {\n color: #636363;\n }\n\n .keyboardContainer {\n transition: margin-top 1s ease-in-out 0.5s, opacity 1s ease-in-out 0.5s,\n width 0.3s linear;\n overflow: hidden;\n width: 100%;\n z-index: 3;\n max-width: 750px;\n /*margin: 0 auto;*/\n font-size: 20px;\n margin-bottom: 40px;\n }\n\n .keyboardContainer .simple-keyboard {\n background: rgba(255, 255, 255, 0.9);\n }\n\n .keyboardContainer .simple-keyboard .hg-button {\n color: rgba(0, 0, 0, 0.7);\n font-weight: 300;\n font-size: 20px;\n font-size: 17px;\n }\n\n .keyboardContainer .simple-keyboard .hg-button:active {\n background: rgba(0, 0, 0, 0.01);\n }\n\n .inputContainer:after {\n display: block;\n content: "";\n width: 3.25em;\n height: 2px;\n margin: 0.7em 0 1em 0;\n border-radius: 2px;\n }\n\n .inputContainer:after {\n background-color: #dddddd;\n background-image: -moz-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);\n background-image: -webkit-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);\n background-image: -ms-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);\n background-image: linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);\n }\n\n .simple-keyboard.hg-theme-default .hg-button[data-skbtnuid^="numbers-"] {\n width: 33%;\n max-width: none;\n }\n\n .content-block>p:first-child {\n margin-top: 0;\n }\n\n /**\n * Hide lang\n */\n .content-block:last-child {\n display: none;\n }\n\n div#codefund span,\n div#codefund strong,\n div#codefund a {\n color: black !important;\n text-decoration: none;\n border: none;\n }\n\n div#cf {\n max-width: 500px !important;\n width: 500px;\n }\n\n h2 i,\n h2 em {\n margin-right: 10px !important;\n }\n\n .ul-lang {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n padding: 0;\n }\n\n .ul-lang li {\n background: #e0e0e0;\n border-radius: 5px;\n padding: 3px 10px;\n margin-bottom: 5px;\n margin-right: 5px;\n }\n\n .fundzone {\n border-top: 5px solid rgba(0, 0, 0, 0.01);\n }\n\n strong {\n color: #1c4994;\n }\n\n .qDemo {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .spo-widget {\n border: none !important;\n width: 100%;\n height: 160px !important;\n min-height: 160px !important;\n }\n\n .content-detail {\n max-height: calc(100vh - 176px);\n }\n\n .right-content {\n font-size: 21px;\n min-height: 100vh;\n }\n\n @media screen and (max-width: 945px) {\n div#wrapper {\n display: block;\n }\n\n .intro-content {\n width: 100%;\n padding: 20px;\n min-width: unset;\n }\n\n .btnContainer {\n text-align: center;\n }\n\n .right-content {\n width: 100%;\n }\n\n h1 {\n font-size: 26px;\n }\n\n .button {\n display: block;\n margin-right: 0 !important;\n margin-bottom: 10px;\n }\n\n .hg-button.hg-functionBtn.hg-button-space {\n flex: 5;\n }\n }\n</style>',footerHtml:"",sidebarHtml:"",vars:{}},{site:PRSSConfig}));ReactDOM.render(PRSSElement,document.getElementById("root"));</script></body></html>

0 commit comments

Comments
 (0)