Hugging Face's logo

Spaces:
f64k
/
js
Running

App Files
f64k commited on
Commit
93d244a
·
verified ·
1 Parent(s): d5cce60

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +167 -0
index.html ADDED
@@ -0,0 +1,167 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <link
8
+ rel="icon"
9
+ href="https://cdn.glitch.global/5c1ad9f2-b645-4eeb-9cad-c3b84c688c4a/Inspector-1.jpg?v=1706018893085"
10
+ />
11
+ <title>Страница только из кастомных тэгов</title>
12
+ </head>
13
+ <style>
14
+ html,
15
+ body {
16
+ margin: 0;
17
+ border: 0;
18
+ min-height: 100% !important;
19
+ height: 100%;
20
+ overflow: hidden;
21
+ }
22
+
23
+ /* Basic page style resets */
24
+ * {
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ [hidden] {
29
+ display: none !important;
30
+ }
31
+
32
+ /* Просто напишите имя тега, и оно работает. */
33
+ my-layout {
34
+ display: grid;
35
+ grid-template-columns: auto 1fr auto;
36
+ /*grid-template-columns: auto 5fr 1fr;*/
37
+ grid-template-rows: auto auto 1fr auto auto;
38
+ row-gap: 0.2em;
39
+ column-gap: 0.3em;
40
+ padding: 0.2em;
41
+ font-family: Roboto, Tahoma, Arial, Verdana, Helvetica, sans-serif;
42
+
43
+ background: linear-gradient(
44
+ hsla(100, 90%, 20%, 0.1),
45
+ hsla(270, 90%, 20%, 0.1)
46
+ );
47
+ height: 100%;
48
+
49
+ my-header,
50
+ my-block-main,
51
+ my-nav-menu,
52
+ my-nav-left,
53
+ my-nav-right,
54
+ my-footer {
55
+ box-shadow: inset 0 0 9px #0005;
56
+ border-radius: 0.4em;
57
+ padding: 0.3em;
58
+ }
59
+
60
+ my-header {
61
+ grid-column: 1 / span 3;
62
+ grid-row: 1;
63
+ }
64
+
65
+ my-nav-menu {
66
+ background-color: hsl(270, 34%, 85%);
67
+ grid-column: 1 / span 3;
68
+ grid-row: 2;
69
+ }
70
+
71
+ my-nav-left {
72
+ grid-column: 1;
73
+ grid-row: 3;
74
+ padding: 0.5em;
75
+ word-break: break-word; /*на будущее*/
76
+ }
77
+
78
+ my-block-main {
79
+ grid-column: 2;
80
+ grid-row: 3;
81
+ height: 100%;
82
+ }
83
+
84
+ my-nav-right {
85
+ grid-column: 3;
86
+ grid-row: 3;
87
+ padding: 0.5em;
88
+ overflow: auto;
89
+ }
90
+
91
+ my-footer {
92
+ grid-column: 1 / span 3;
93
+ grid-row: 5;
94
+ }
95
+
96
+ my-block-title {
97
+ font-size: 19px;
98
+ background: linear-gradient(
99
+ hsla(270, 90%, 20%, 0.2),
100
+ hsla(100, 90%, 20%, 0.2)
101
+ );
102
+ }
103
+ }
104
+
105
+ sp-an {
106
+ display: inline;
107
+ background: #0001;
108
+ }
109
+
110
+ p-p {
111
+ display: block;
112
+ background: #0001;
113
+ }
114
+
115
+ centered-content {
116
+ text-align: center;
117
+ margin: auto;
118
+ }
119
+ </style>
120
+ <body>
121
+ <!-- Смело используйте атрибуты без data- префикса, так можно. -->
122
+ <my-layout block-number="15">
123
+ <my-header>
124
+ <my-block-title> &#65018; my-block-title</my-block-title>
125
+ <my-nav-menu>my-nav-menu</my-nav-menu>
126
+ </my-header>
127
+
128
+ <my-nav-left>my-nav-left</my-nav-left>
129
+
130
+ <my-block-main>
131
+ <p-p id="qq0">START my-block-main </p-p>
132
+ <centered-content>
133
+ <p-p id="qq1">
134
+ Много-много-много текста, совсем много, мне лень его писать.
135
+ </p-p>
136
+ <my-block-decor>ΫΫΫ</my-block-decor>
137
+ </centered-content>
138
+
139
+ <my-chat-area id="output"></my-chat-area>
140
+
141
+ <section class="locked">
142
+ <textarea
143
+ id="textNew"
144
+ rows="11"
145
+ placeholder="текст описания товара графа 31.1 и текст описания товарных групп ..."
146
+ ></textarea>
147
+ <button id="buttonSend" title="S E N D">✉️</button>
148
+ </section>
149
+
150
+ <p-p id="qq2">END my-block-main</p-p>
151
+ </my-block-main>
152
+
153
+ <my-nav-right>
154
+ my-nav-right
155
+ <sp-an> &#65021; </sp-an>
156
+ <sp-an>In the name of Allah, the Most Gracious, the Most Merciful</sp-an>
157
+ </my-nav-right>
158
+
159
+ <my-footer>
160
+ my-footer <sp-an> &#65021; </sp-an>
161
+ <a href="https://habr.com/ru/articles/786284/"
162
+ >О кастомных HTML-тегах
163
+ </a>
164
+ </my-footer>
165
+ </my-layout>
166
+ </body>
167
+ </html>