Skip to content

Commit b4d365b

Browse files
ru51a4ru51a4
committed
fix
1 parent d0f752d commit b4d365b

File tree

1 file changed

+107
-125
lines changed

1 file changed

+107
-125
lines changed

‎index.html

Lines changed: 107 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,60 @@
11
<html>
2-
<head>
3-
<link
4-
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
5-
rel="stylesheet"
6-
/>
7-
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
8-
<link
9-
rel="stylesheet"
10-
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
11-
/>
12-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
13-
<script src="https://cdn.jsdelivr.net/gh/ru51a4/rrender/dist/rrender.js"></script>
14-
<!-- and it's easy to individually load additional languages -->
15-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
16-
<meta charset="utf-8" />
17-
<link rel="icon" type="image/png" href="favicon.png" />
18-
<title>rrender</title>
19-
<script>
20-
hljs.highlightAll();
21-
</script>
22-
</head>
23-
24-
<body>
25-
<div class="container">
26-
<header
27-
class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"
28-
>
29-
<a
30-
href="#"
31-
class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"
32-
>
33-
<svg class="bi me-2" width="40" height="32">
34-
<use xlink:href="#bootstrap"></use>
35-
</svg>
36-
<span class="fs-4">rrender</span>
37-
</a>
38-
</header>
39-
</div>
402

41-
<div class="container d-flex flex-column align-items-center">
42-
<div class="row d-flex flex-column align-items-center">
43-
<h2>
44-
<a href="https://github.com/ru51a4/minimal_react"
45-
>rrender</a
46-
>
47-
- framework for building user interfaces
48-
</h2>
49-
<br /><span style="text-align: center"
50-
>https://cdn.jsdelivr.net/gh/ru51a4/rrender/dist/rrender.js</span
51-
>
52-
<br />
53-
</div>
54-
<div
55-
class="mt-5 row d-flex justify-content-center"
56-
style="text-align: center"
57-
>
58-
<h2>online demo:</h2>
59-
<ul class="d-flex flex-column align-items-center">
60-
<li>
61-
<a href="./demo/todo/">todo app</a>
62-
</li>
63-
<li>
64-
<a
65-
href="http://188.120.245.72:88/demo/iblockcms-frontend/"
66-
>ajax-catalog</a
67-
>
68-
</li>
69-
<li>
70-
<a href="http://188.120.245.72:3000/">chat-app</a>
71-
</li>
72-
</ul>
73-
<br />
74-
</div>
75-
<div style="min-width: 100%" class="row align-items-center">
76-
<div class="col-6">
77-
<pre>
3+
<head>
4+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
5+
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
8+
<script src="https://cdn.jsdelivr.net/gh/ru51a4/rrender/dist/rrender.js"></script>
9+
<!-- and it's easy to individually load additional languages -->
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
11+
<meta charset="utf-8" />
12+
<link rel="icon" type="image/png" href="favicon.png" />
13+
<title>rrender</title>
14+
<script>
15+
hljs.highlightAll();
16+
</script>
17+
</head>
18+
19+
<body>
20+
<div class="container">
21+
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
22+
<a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
23+
<svg class="bi me-2" width="40" height="32">
24+
<use xlink:href="#bootstrap"></use>
25+
</svg>
26+
<span class="fs-4">rrender</span>
27+
</a>
28+
</header>
29+
</div>
30+
31+
<div class="container d-flex flex-column align-items-center">
32+
<div class="row d-flex flex-column align-items-center">
33+
<h2>
34+
<a href="https://github.com/ru51a4/minimal_react">rrender</a>
35+
- framework for building user interfaces
36+
</h2>
37+
<br /><span style="text-align: center">https://cdn.jsdelivr.net/gh/ru51a4/rrender/dist/rrender.js</span>
38+
<br />
39+
</div>
40+
<div class="mt-5 row d-flex justify-content-center" style="text-align: center">
41+
<h2>online demo:</h2>
42+
<ul class="d-flex flex-column align-items-center">
43+
<li>
44+
<a href="./demo/todo/">todo app</a>
45+
</li>
46+
<li>
47+
<a href="http://188.120.245.72:88/demo/iblockcms-frontend/">ajax-catalog</a>
48+
</li>
49+
<li>
50+
<a href="http://188.120.245.72:3000/">chat-app</a>
51+
</li>
52+
</ul>
53+
<br />
54+
</div>
55+
<div style="min-width: 100%" class="row align-items-center">
56+
<div class="col-6">
57+
<pre>
7858
<code class="language-js">
7959
class component_todo extends component {
8060
state = {
@@ -106,30 +86,26 @@ <h2>online demo:</h2>
10686
}
10787
</code>
10888
</pre>
109-
</div>
89+
</div>
11090

111-
<div class="col-6 main d-flex justify-content-center">
112-
<todo />
113-
</div>
91+
<div class="col-6 main d-flex justify-content-center">
92+
<todo />
11493
</div>
94+
</div>
11595

116-
<div class="row">
117-
<div class="d-flex flex-column align-items-center">
118-
<h2>fast start:</h2>
119-
<!-- HTML generated using hilite.me -->
120-
<div
121-
style="
96+
<div class="row">
97+
<div class="d-flex flex-column align-items-center">
98+
<h2>fast start:</h2>
99+
<!-- HTML generated using hilite.me -->
100+
<div style="
122101
background: #ffffff;
123102
overflow: auto;
124103
width: auto;
125104
border: solid gray;
126105
border-width: 0.1em 0.1em 0.1em 0.8em;
127106
padding: 0.2em 0.6em;
128-
"
129-
>
130-
<pre
131-
style="margin: 0; line-height: 125%"
132-
><span style="color: #007700">&lt;html&gt;</span>
107+
">
108+
<pre style="margin: 0; line-height: 125%"><span style="color: #007700">&lt;html&gt;</span>
133109
<span style="color: #007700">&lt;script </span><span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">&quot;https://cdn.jsdelivr.net/gh/ru51a4/rrender/dist/rrender.js&quot;</span><span style="color: #007700">&gt;&lt;/script&gt;</span>
134110

135111
<span style="color: #007700">&lt;body&gt;</span>
@@ -171,24 +147,29 @@ <h2>fast start:</h2>
171147

172148
<span style="color: #007700">&lt;/html&gt;</span>
173149
</pre>
174-
</div>
175150
</div>
176151
</div>
177152
</div>
178-
</body>
179-
<script>
180-
class component_todo extends component {
181-
state = {
182-
counter: 0,
183-
todos: [
184-
{ title: "wash the dishes" },
185-
{ title: "cook lunch" },
186-
{ title: "cook dinner" },
187-
],
188-
};
189-
190-
body() {
191-
return `
153+
<footer class="mt-5 pt-3 text-muted border-top">
154+
ru51a4 ©️ 2020 - 2025
155+
<br>
156+
disigned by<a href="vk.com/umarekawari"> umarekawari</a>
157+
</footer>
158+
</div>
159+
</body>
160+
<script>
161+
class component_todo extends component {
162+
state = {
163+
counter: 0,
164+
todos: [
165+
{ title: "wash the dishes" },
166+
{ title: "cook lunch" },
167+
{ title: "cook dinner" },
168+
],
169+
};
170+
171+
body() {
172+
return `
192173
193174
<div class="card" style="width: 18rem;">
194175
<div class="card-body d-flex flex-column align-items-center">
@@ -205,27 +186,28 @@ <h2>fast start:</h2>
205186
</div>
206187
207188
`;
208-
}
209-
increment() {
210-
this.state.counter++;
211-
Render.renderDom();
212-
}
213189
}
214-
var components = [
215-
{
216-
name: "todo",
217-
component: component_todo,
218-
},
219-
];
220-
221-
Render = new render(document.querySelector(".main"), components);
222-
223-
function main() {
224-
Render.renderDom();
225-
Render.renderDom();
190+
increment() {
191+
this.state.counter++;
226192
Render.renderDom();
227193
}
194+
}
195+
var components = [
196+
{
197+
name: "todo",
198+
component: component_todo,
199+
},
200+
];
228201

229-
main();
230-
</script>
231-
</html>
202+
Render = new render(document.querySelector(".main"), components);
203+
204+
function main() {
205+
Render.renderDom();
206+
Render.renderDom();
207+
Render.renderDom();
208+
}
209+
210+
main();
211+
</script>
212+
213+
</html>

0 commit comments

Comments
 (0)