Hugging Face's logo

Spaces:
f64k
/
1
Running

App Files Community
f64 commited on
Commit
d082010
·
1 Parent(s): 7b73416

1

Browse files
Files changed (2) hide show
  1. index.html +3 -2
  2. style.css +220 -220
index.html CHANGED
@@ -1,5 +1,5 @@
1
  <!doctype html>
2
- <html >
3
 
4
  <head>
5
  <meta charset="utf-8" />
@@ -9,7 +9,8 @@
9
  </head>
10
 
11
  <body class="noise_00">
12
- <header class="noise_29"><span class="block-title">https://huggingface.co/spaces/f64k/1</span> Пример шума из SVG </header>
 
13
  <nav class="nav-menu noise_19">
14
  </nav>
15
  <aside class="aside-left noise_03">
 
1
  <!doctype html>
2
+ <html>
3
 
4
  <head>
5
  <meta charset="utf-8" />
 
9
  </head>
10
 
11
  <body class="noise_00">
12
+ <header class="noise_29"><span class="block-title">https://huggingface.co/spaces/f64k/1</span> Пример шума из SVG
13
+ </header>
14
  <nav class="nav-menu noise_19">
15
  </nav>
16
  <aside class="aside-left noise_03">
style.css CHANGED
@@ -1,242 +1,242 @@
1
- /* Basic page style resets */
2
- html,
3
- body {
4
- margin: 0;
5
- border: 0;
6
- min-height: 100% !important;
7
- height: 100%;
8
- overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- *,
12
- *:after,
13
- *:before {
14
- box-sizing: border-box;
15
- }
16
-
17
- [hidden] {
18
- display: none !important;
19
- }
20
-
21
- /*https://codepen.io/cjimmy/pen/RwVmgGR?editors=1100*/
22
- /*https://yoksel.github.io/url-encoder/*/
23
- .noise_004 {
24
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
25
- }
26
-
27
- .noise_00 {
28
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
29
- background-blend-mode: color;
30
- background-color: #f8f8f8;
31
- }
32
-
33
- .noise_02 {
34
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
35
- }
36
-
37
- .noise_03 {
38
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
39
- background-blend-mode: hard-light;
40
- background-color: #BBB;
41
- }
42
-
43
- .noise_04 {
44
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
45
- /* https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode */
46
- /* */
47
- background-blend-mode: luminosity;
48
- /*
49
- background-blend-mode: luminosity;
50
- background-blend-mode: screen;
51
- background-blend-mode: multiply;
52
- background-blend-mode: hard-light;
53
- background-blend-mode: difference;
54
- */
55
- background-color: #DDD;
56
- }
57
-
58
- .noise_09 {
59
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
60
- }
61
-
62
- .noise_19 {
63
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.19' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
64
- background-blend-mode: multiply;
65
- background-color: #FFF;
66
- }
67
-
68
- .noise_29 {
69
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.29' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
70
- }
71
-
72
- .linear_background_1 {
73
- background: linear-gradient(-45deg,
74
- hsla(110, 90%, 20%, 0.1),
75
- hsla(310, 90%, 20%, 0.1));
76
  }
77
 
78
- body {
79
- background-color: #999;
80
-
81
- display: grid;
82
- row-gap: 0.2em;
83
- column-gap: 0.3em;
84
- padding: 0.2em;
85
- font-family: Geneva, Verdana, Tahoma, Arial, Helvetica, sans-serif;
86
-
87
- header,
88
- footer,
89
- nav,
90
- main,
91
- aside {
92
- box-shadow: inset 0 0 9px #0005;
93
- border-radius: 0.4em;
94
- padding: 0.3em;
95
- }
96
  }
97
 
98
- body {
99
- grid-template-columns: auto 1fr auto;
100
- grid-template-rows: auto auto 1fr auto auto;
101
-
102
- header {
103
- grid-column: 1 / span 3;
104
- grid-row: 1;
105
- }
106
-
107
- .nav-menu {
108
- grid-column: 1 / span 3;
109
- grid-row: 2;
110
- }
111
-
112
- .aside-left {
113
- grid-column: 1;
114
- grid-row: 3;
115
- }
116
-
117
- .aside-right {
118
- grid-column: 3;
119
- grid-row: 3;
120
- }
121
-
122
- footer {
123
- grid-column: 1 / span 3;
124
- grid-row: 5;
125
- }
126
  }
127
 
128
- @media screen and (max-width: 800px) {
129
- body {
130
- grid-template-columns: auto 1fr;
131
- grid-template-rows: auto 1fr 1fr auto;
132
-
133
- header {
134
- grid-column: 1;
135
- grid-row: 1;
136
- }
137
-
138
- .nav-menu {
139
- grid-column: 2;
140
- grid-row: 1;
141
- }
142
-
143
- .aside-left {
144
- grid-column: 1;
145
- grid-row: 2;
146
- }
147
-
148
- main {
149
- grid-row: span 2;
150
- }
151
-
152
- .aside-right {
153
- grid-column: 1;
154
- grid-row: 3;
155
- }
156
-
157
- footer {
158
- grid-column: 1 / span 2;
159
- grid-row: 5;
160
- }
161
- }
162
  }
163
 
164
- @media screen and (max-width: 370px) {
165
- body {
166
- grid-template-columns: 1fr;
167
- grid-template-rows: auto auto auto 1fr auto auto;
168
-
169
- header {
170
- grid-column: 1;
171
- grid-row: 1;
172
- }
173
-
174
- .nav-menu {
175
- grid-column: 1;
176
- grid-row: 2;
177
- }
178
-
179
- .aside-left {
180
- grid-column: 1;
181
- grid-row: 3;
182
- }
183
-
184
- main {
185
- grid-row: 4;
186
- }
187
-
188
- .aside-right {
189
- grid-column: 1;
190
- grid-row: 5;
191
- }
192
-
193
- footer {
194
- grid-column: 1;
195
- grid-row: 6;
196
- }
197
- }
198
  }
 
 
199
 
200
- @media (hover: hover) {
 
 
 
201
 
202
- header:hover,
203
- footer:hover,
204
- nav:hover,
205
- main:hover,
206
- aside:hover {
207
- box-shadow: inset 0 0 9px #0007;
208
- transition-duration: 0.5s;
209
- }
210
  }
211
 
212
- .block-main {
213
- height: 100%;
 
214
  }
215
 
216
  .aside-left {
217
- padding: 0.5em;
218
- word-break: break-word;
219
- /*на будущее*/
220
  }
221
 
222
- .aside-right {
223
- padding: 0.5em;
224
- overflow: auto;
225
-
226
- a {
227
- background-color: #FFFF;
228
- color: darkblue;
229
- text-decoration: none;
230
- }
231
  }
232
 
233
- .nav-menu {
234
- /*background-color: hsl(270, 34%, 85%);*/
235
- background-color: #0004;
236
- }
237
-
238
- .block-title {
239
- font-size: 19px;
240
- background: linear-gradient(hsla(270, 90%, 20%, 0.2),
241
- hsla(100, 90%, 20%, 0.2));
242
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Basic page style resets */
2
+ html,
3
+ body {
4
+ margin: 0;
5
+ border: 0;
6
+ min-height: 100% !important;
7
+ height: 100%;
8
+ overflow: hidden;
9
+ }
10
+
11
+ *,
12
+ *:after,
13
+ *:before {
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ [hidden] {
18
+ display: none !important;
19
+ }
20
+
21
+ /*https://codepen.io/cjimmy/pen/RwVmgGR?editors=1100*/
22
+ /*https://yoksel.github.io/url-encoder/*/
23
+ .noise_004 {
24
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
25
+ }
26
+
27
+ .noise_00 {
28
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
29
+ background-blend-mode: color;
30
+ background-color: #f8f8f8;
31
+ }
32
+
33
+ .noise_02 {
34
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
35
+ }
36
+
37
+ .noise_03 {
38
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
39
+ background-blend-mode: hard-light;
40
+ background-color: #BBB;
41
+ }
42
+
43
+ .noise_04 {
44
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
45
+ /* https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode */
46
+ /* */
47
+ background-blend-mode: luminosity;
48
+ /*
49
+ background-blend-mode: luminosity;
50
+ background-blend-mode: screen;
51
+ background-blend-mode: multiply;
52
+ background-blend-mode: hard-light;
53
+ background-blend-mode: difference;
54
+ */
55
+ background-color: #DDD;
56
+ }
57
+
58
+ .noise_09 {
59
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
60
+ }
61
+
62
+ .noise_19 {
63
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.19' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
64
+ background-blend-mode: multiply;
65
+ background-color: #FFF;
66
+ }
67
+
68
+ .noise_29 {
69
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.29' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E");
70
+ }
71
+
72
+ .linear_background_1 {
73
+ background: linear-gradient(-45deg,
74
+ hsla(110, 90%, 20%, 0.1),
75
+ hsla(310, 90%, 20%, 0.1));
76
+ }
77
+
78
+ body {
79
+ background-color: #999;
80
+
81
+ display: grid;
82
+ row-gap: 0.2em;
83
+ column-gap: 0.3em;
84
+ padding: 0.2em;
85
+ font-family: Geneva, Verdana, Tahoma, Arial, Helvetica, sans-serif;
86
+
87
+ header,
88
+ footer,
89
+ nav,
90
+ main,
91
+ aside {
92
+ box-shadow: inset 0 0 9px #0005;
93
+ border-radius: 0.4em;
94
+ padding: 0.3em;
95
+ }
96
+ }
97
+
98
+ body {
99
+ grid-template-columns: auto 1fr auto;
100
+ grid-template-rows: auto auto 1fr auto auto;
101
+
102
+ header {
103
+ grid-column: 1 / span 3;
104
+ grid-row: 1;
105
+ }
106
+
107
+ .nav-menu {
108
+ grid-column: 1 / span 3;
109
+ grid-row: 2;
110
+ }
111
+
112
+ .aside-left {
113
+ grid-column: 1;
114
+ grid-row: 3;
115
+ }
116
+
117
+ .aside-right {
118
+ grid-column: 3;
119
+ grid-row: 3;
120
+ }
121
+
122
+ footer {
123
+ grid-column: 1 / span 3;
124
+ grid-row: 5;
125
+ }
126
+ }
127
+
128
+ @media screen and (max-width: 800px) {
129
+ body {
130
+ grid-template-columns: auto 1fr;
131
+ grid-template-rows: auto 1fr 1fr auto;
132
+
133
+ header {
134
+ grid-column: 1;
135
+ grid-row: 1;
136
  }
137
 
138
+ .nav-menu {
139
+ grid-column: 2;
140
+ grid-row: 1;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  }
142
 
143
+ .aside-left {
144
+ grid-column: 1;
145
+ grid-row: 2;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  }
147
 
148
+ main {
149
+ grid-row: span 2;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150
  }
151
 
152
+ .aside-right {
153
+ grid-column: 1;
154
+ grid-row: 3;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
155
  }
156
 
157
+ footer {
158
+ grid-column: 1 / span 2;
159
+ grid-row: 5;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
160
  }
161
+ }
162
+ }
163
 
164
+ @media screen and (max-width: 370px) {
165
+ body {
166
+ grid-template-columns: 1fr;
167
+ grid-template-rows: auto auto auto 1fr auto auto;
168
 
169
+ header {
170
+ grid-column: 1;
171
+ grid-row: 1;
 
 
 
 
 
172
  }
173
 
174
+ .nav-menu {
175
+ grid-column: 1;
176
+ grid-row: 2;
177
  }
178
 
179
  .aside-left {
180
+ grid-column: 1;
181
+ grid-row: 3;
 
182
  }
183
 
184
+ main {
185
+ grid-row: 4;
 
 
 
 
 
 
 
186
  }
187
 
188
+ .aside-right {
189
+ grid-column: 1;
190
+ grid-row: 5;
191
+ }
192
+
193
+ footer {
194
+ grid-column: 1;
195
+ grid-row: 6;
196
+ }
197
+ }
198
+ }
199
+
200
+ @media (hover: hover) {
201
+
202
+ header:hover,
203
+ footer:hover,
204
+ nav:hover,
205
+ main:hover,
206
+ aside:hover {
207
+ box-shadow: inset 0 0 9px #0007;
208
+ transition-duration: 0.5s;
209
+ }
210
+ }
211
+
212
+ .block-main {
213
+ height: 100%;
214
+ }
215
+
216
+ .aside-left {
217
+ padding: 0.5em;
218
+ word-break: break-word;
219
+ /*на будущее*/
220
+ }
221
+
222
+ .aside-right {
223
+ padding: 0.5em;
224
+ overflow: auto;
225
+
226
+ a {
227
+ background-color: #FFFF;
228
+ color: darkblue;
229
+ text-decoration: none;
230
+ }
231
+ }
232
+
233
+ .nav-menu {
234
+ /*background-color: hsl(270, 34%, 85%);*/
235
+ background-color: #0004;
236
+ }
237
+
238
+ .block-title {
239
+ font-size: 19px;
240
+ background: linear-gradient(hsla(270, 90%, 20%, 0.2),
241
+ hsla(100, 90%, 20%, 0.2));
242
+ }