cyberweb 0.7.9 → 0.8.17
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of cyberweb might be problematic. Click here for more details.
- checksums.yaml +4 -4
- data/README.md +242 -141
- data/cyberweb.gemspec +6 -6
- data/doc/README.gen +242 -142
- data/doc/todo/todo_for_the_cyberweb_project.md +13 -0
- data/examples/advanced/animated_colourful_border/animated_colourful_border.cgi +149 -0
- data/examples/advanced/no_right_click.cgi +1 -2
- data/examples/css/changing_border_colours_animation/changing_border_colours_animation.html +134 -0
- data/examples/css/editable_boxes_example/editable_boxes_example.html +75 -0
- data/examples/css/flexbox_example/flexbox_example.html +39 -0
- data/examples/css/keyboard_example/keyboard_example.html +238 -0
- data/examples/css/magic_card/magic_card.html +110 -0
- data/examples/css/overflow_example/overflow_example.html +125 -0
- data/examples/css/planet_example/planet_example.html +34 -0
- data/examples/css/progress_bar_examples/progress_bar_examples.html +316 -0
- data/examples/css/single_row_glow/single_row_glow.html +91 -0
- data/examples/css/slinky_animation/slinky_animation.html +292 -0
- data/examples/html/hbox_and_vbox_example.html +5 -5
- data/examples/javascript_and_jquery/all_in_one_example/all_in_one_example.cgi +38 -0
- data/lib/cyberweb/base/misc.rb +63 -25
- data/lib/cyberweb/cascading_style_sheets/border.css +61 -24
- data/lib/cyberweb/cascading_style_sheets/colours.css +2 -0
- data/lib/cyberweb/cascading_style_sheets/default.css +102 -89
- data/lib/cyberweb/cascading_style_sheets/glow_effects.css +36 -0
- data/lib/cyberweb/cascading_style_sheets/margin.css +11 -7
- data/lib/cyberweb/cascading_style_sheets/misc.css +7 -0
- data/lib/cyberweb/cascading_style_sheets/text_shadow.css +6 -1
- data/lib/cyberweb/generator/cgi.rb +9 -1
- data/lib/cyberweb/html_template/html_template.rb +7 -2
- data/lib/cyberweb/javascript_code/custom_functions.js +33 -2
- data/lib/cyberweb/javascript_code/math.js +0 -0
- data/lib/cyberweb/objectified/html_tags/progress.rb +8 -8
- data/lib/cyberweb/skeleton/README.md +2 -0
- data/lib/cyberweb/skeleton/html_keyboard.md +140 -0
- data/lib/cyberweb/toplevel_methods/is_an_image.rb +18 -0
- data/lib/cyberweb/toplevel_methods/listing.rb +2 -3
- data/lib/cyberweb/toplevel_methods/misc.rb +1 -57
- data/lib/cyberweb/toplevel_methods/registered_ids.rb +53 -37
- data/lib/cyberweb/toplevel_methods/sort_this_array_by_time.rb +65 -0
- data/lib/cyberweb/toplevel_methods/video.rb +32 -19
- data/lib/cyberweb/utility_scripts/images_to_html/images_to_html.rb +78 -49
- data/lib/cyberweb/utility_scripts/remove_this_image_from_that_webpage.rb +125 -0
- data/lib/cyberweb/version/version.rb +2 -2
- data/lib/cyberweb/web_images/map_symbol_to_image_location.rb +28 -8
- data/lib/cyberweb/web_object/effects.rb +19 -0
- data/lib/cyberweb/web_object/html_tags.rb +199 -196
- data/lib/cyberweb/web_object/images.rb +83 -26
- data/lib/cyberweb/web_object/misc.rb +1048 -529
- data/lib/cyberweb/web_object/reset.rb +47 -29
- data/lib/cyberweb/yaml/custom_tags.yml +2 -0
- metadata +52 -52
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<style>
|
|
4
|
+
body {
|
|
5
|
+
margin: 0;
|
|
6
|
+
background-color: #060C1F;
|
|
7
|
+
font-family: 'Almarai', sans-serif;
|
|
8
|
+
}
|
|
9
|
+
.wrapper {
|
|
10
|
+
height: 100vh;
|
|
11
|
+
display: -webkit-box;
|
|
12
|
+
display: -ms-flexbox;
|
|
13
|
+
display: flex;
|
|
14
|
+
-ms-flex-wrap: wrap;
|
|
15
|
+
flex-wrap: wrap;
|
|
16
|
+
-webkit-box-pack: center;
|
|
17
|
+
-ms-flex-pack: center;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
-webkit-box-align: center;
|
|
20
|
+
-ms-flex-align: center;
|
|
21
|
+
align-items: center;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.main_div {
|
|
26
|
+
position: relative;
|
|
27
|
+
margin: 10px;
|
|
28
|
+
background-color: transparent;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.main-div2::before {
|
|
32
|
+
content: '';
|
|
33
|
+
position: absolute;
|
|
34
|
+
left: 0;
|
|
35
|
+
top: 0;
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: 100%;
|
|
38
|
+
-webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
|
39
|
+
box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
|
40
|
+
z-index: -1;
|
|
41
|
+
-webkit-animation-name: gradient_shadow_with_changing_colours_animation;
|
|
42
|
+
animation-name: gradient_shadow_with_changing_colours_animation;
|
|
43
|
+
-webkit-animation-timing-function: ease;
|
|
44
|
+
animation-timing-function: ease;
|
|
45
|
+
-webkit-animation-duration: 6s;
|
|
46
|
+
animation-duration: 6s;
|
|
47
|
+
-webkit-animation-iteration-count: infinite;
|
|
48
|
+
animation-iteration-count: infinite;
|
|
49
|
+
border-radius: 5px;
|
|
50
|
+
-webkit-border-radius: 5px;
|
|
51
|
+
-moz-border-radius: 5px;
|
|
52
|
+
-ms-border-radius: 5px;
|
|
53
|
+
-o-border-radius: 5px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
h1 {
|
|
57
|
+
font-size: 50px;
|
|
58
|
+
margin: 0;
|
|
59
|
+
position: relative;
|
|
60
|
+
z-index: 3;
|
|
61
|
+
padding: 20px;
|
|
62
|
+
background-color: #060C1F;
|
|
63
|
+
color: #fff;
|
|
64
|
+
border-radius: 5px;
|
|
65
|
+
-webkit-border-radius: 5px;
|
|
66
|
+
-moz-border-radius: 5px;
|
|
67
|
+
-ms-border-radius: 5px;
|
|
68
|
+
-o-border-radius: 5px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@-webkit-keyframes gradient_shadow_with_changing_colours_animation {
|
|
72
|
+
0% {
|
|
73
|
+
-webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
|
74
|
+
box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
|
75
|
+
}
|
|
76
|
+
20% {
|
|
77
|
+
-webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
|
|
78
|
+
box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
|
|
79
|
+
}
|
|
80
|
+
40% {
|
|
81
|
+
-webkit-box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
|
|
82
|
+
box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
|
|
83
|
+
}
|
|
84
|
+
60% {
|
|
85
|
+
-webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
|
86
|
+
box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
|
87
|
+
}
|
|
88
|
+
80% {
|
|
89
|
+
-webkit-box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
|
|
90
|
+
box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
|
|
91
|
+
}
|
|
92
|
+
100% {
|
|
93
|
+
-webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
|
94
|
+
box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@keyframes gradient_shadow_with_changing_colours_animation {
|
|
99
|
+
0% {
|
|
100
|
+
-webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
|
101
|
+
box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
|
102
|
+
}
|
|
103
|
+
20% {
|
|
104
|
+
-webkit-box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
|
|
105
|
+
box-shadow: 0 0 17px 3px #0ff,0 0 4px 2px #0ff;
|
|
106
|
+
}
|
|
107
|
+
40% {
|
|
108
|
+
-webkit-box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
|
|
109
|
+
box-shadow: 0 0 17px 3px #0f0,0 0 4px 2px #0f0;
|
|
110
|
+
}
|
|
111
|
+
60% {
|
|
112
|
+
-webkit-box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
|
113
|
+
box-shadow: 0 0 17px 3px #ffff01,0 0 4px 2px #ffff01;
|
|
114
|
+
}
|
|
115
|
+
80% {
|
|
116
|
+
-webkit-box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
|
|
117
|
+
box-shadow: 0 0 17px 3px #f00,0 0 4px 2px #f00;
|
|
118
|
+
}
|
|
119
|
+
100% {
|
|
120
|
+
-webkit-box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
|
121
|
+
box-shadow: 0 0 17px 3px #C586C0,0 0 4px 2px #C586C0;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
</style>
|
|
126
|
+
</head>
|
|
127
|
+
<body>
|
|
128
|
+
<div class="wrapper">
|
|
129
|
+
<div class="main_div main-div2">
|
|
130
|
+
<h1>This is a test sentence.</h1>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</body>
|
|
134
|
+
</html>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>
|
|
4
|
+
Editable boxes example
|
|
5
|
+
</title>
|
|
6
|
+
<style>
|
|
7
|
+
|
|
8
|
+
.tabs_box {
|
|
9
|
+
margin: 30px auto;
|
|
10
|
+
width: 45%;
|
|
11
|
+
height: 150px;
|
|
12
|
+
position: relative;
|
|
13
|
+
}
|
|
14
|
+
.tab {
|
|
15
|
+
float:left
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
input{
|
|
19
|
+
position:absolute;
|
|
20
|
+
opacity:0;
|
|
21
|
+
}
|
|
22
|
+
#radio1:checked ~ label,
|
|
23
|
+
#radio2:checked ~ label,
|
|
24
|
+
#radio3:checked ~ label{
|
|
25
|
+
background: lightslategrey;
|
|
26
|
+
}
|
|
27
|
+
#radio1:checked ~ section,
|
|
28
|
+
#radio2:checked ~ section,
|
|
29
|
+
#radio3:checked ~ section{
|
|
30
|
+
z-index:1
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
label {
|
|
34
|
+
padding: .5em .5em;
|
|
35
|
+
background:#2980b9;
|
|
36
|
+
color: #fff;
|
|
37
|
+
border-radius:3px;
|
|
38
|
+
width: 300px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
section{
|
|
42
|
+
background:#ddd;
|
|
43
|
+
width: 100%;
|
|
44
|
+
height: 220px;
|
|
45
|
+
position:absolute;
|
|
46
|
+
padding: 15px;
|
|
47
|
+
top:30px;
|
|
48
|
+
left:0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
</style>
|
|
52
|
+
|
|
53
|
+
</head>
|
|
54
|
+
<body style="font-size: 1.5em">
|
|
55
|
+
<div class="tabs_box">
|
|
56
|
+
<div class="tab">
|
|
57
|
+
<input type="radio" id="radio1" name="radiogroup"/>
|
|
58
|
+
<label for="radio1">Header #1</label>
|
|
59
|
+
<section contenteditable="true">This is the first entry.</section>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div class="tab">
|
|
63
|
+
<input type="radio" id="radio2" name="radiogroup"/>
|
|
64
|
+
<label for="radio2">Header #2</label>
|
|
65
|
+
<section contenteditable="true">This is the second entry.</section>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="tab">
|
|
69
|
+
<input type="radio" id="radio3" name="radiogroup"/>
|
|
70
|
+
<label for="radio3">Header #3</label>
|
|
71
|
+
<section contenteditable="true">This is the third entry.</section>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</body>
|
|
75
|
+
</html>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<style>
|
|
5
|
+
.flex-container {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-wrap: nowrap;
|
|
8
|
+
background-color: DodgerBlue;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.flex-container > div {
|
|
12
|
+
background-color: #f1f1f1;
|
|
13
|
+
width: 100px;
|
|
14
|
+
margin: 10px;
|
|
15
|
+
text-align: center;
|
|
16
|
+
line-height: 75px;
|
|
17
|
+
font-size: 30px;
|
|
18
|
+
}
|
|
19
|
+
</style>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<h1>Flexible Boxes</h1>
|
|
23
|
+
|
|
24
|
+
<div class="flex-container">
|
|
25
|
+
<div>1</div>
|
|
26
|
+
<div>2</div>
|
|
27
|
+
<div>3</div>
|
|
28
|
+
<div>4</div>
|
|
29
|
+
<div>5</div>
|
|
30
|
+
<div>6</div>
|
|
31
|
+
<div>7</div>
|
|
32
|
+
<div>8</div>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<p>A container with "flex-wrap: nowrap;" will never wrap
|
|
36
|
+
its items.</p>
|
|
37
|
+
|
|
38
|
+
</body>
|
|
39
|
+
</html>
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>keyboard</title>
|
|
7
|
+
<style>
|
|
8
|
+
|
|
9
|
+
.container_for_the_keyboard {
|
|
10
|
+
margin: 100px 0 0 200px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.row_for_the_keyboard {
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 60px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.row_one,
|
|
19
|
+
.row_two,
|
|
20
|
+
.row_three,
|
|
21
|
+
.row_four,
|
|
22
|
+
.row_five {
|
|
23
|
+
margin: 10px 0 0 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
button.for_the_keyboard {
|
|
27
|
+
color: black;
|
|
28
|
+
font-weight: 500;
|
|
29
|
+
width: 55px;
|
|
30
|
+
height: 55px;
|
|
31
|
+
border: none;
|
|
32
|
+
background: rgb(214, 214, 214);
|
|
33
|
+
box-shadow: 0 0 10px #9521f3, 0 0 40px #c600ee, 0 0 80px #f704f7;
|
|
34
|
+
|
|
35
|
+
font-size: 15px;
|
|
36
|
+
margin-left: 5px;
|
|
37
|
+
outline: none;
|
|
38
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
39
|
+
border-radius: 20%;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
button.for_the_keyboard:active {
|
|
43
|
+
box-shadow: 1px 1px 2px #fd0c99,
|
|
44
|
+
1px 1px 2px #ff00dd;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.print_key {
|
|
48
|
+
width: 85px !important;
|
|
49
|
+
border-radius: 10px !important;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.backspace_key {
|
|
53
|
+
width: 148px !important;
|
|
54
|
+
border-radius: 10px !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.tab_key {
|
|
58
|
+
width: 115px !important;
|
|
59
|
+
border-radius: 10px !important;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.slace_key {
|
|
63
|
+
width: 90px !important;
|
|
64
|
+
border: 10px !important;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.caps_lock_key {
|
|
68
|
+
width: 96px !important;
|
|
69
|
+
border-radius: 10px !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.enter_button {
|
|
73
|
+
width: 109px !important;
|
|
74
|
+
border-radius: 10px !important;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.shift_key {
|
|
78
|
+
width: 135px !important;
|
|
79
|
+
border-radius: 10px !important;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.space_key {
|
|
83
|
+
width: 398px !important;
|
|
84
|
+
border-radius: 10px !important;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.last_row {
|
|
88
|
+
width: 56px !important;
|
|
89
|
+
border-radius: 10px !important;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
</style>
|
|
93
|
+
</head>
|
|
94
|
+
<body style="background: black;">
|
|
95
|
+
|
|
96
|
+
<div class="container_for_the_keyboard">
|
|
97
|
+
<div class="row_for_the_keyboard zero">
|
|
98
|
+
<button class="for_the_keyboard">Esc</button>
|
|
99
|
+
<button class="for_the_keyboard">F1</button>
|
|
100
|
+
<button class="for_the_keyboard">F2</button>
|
|
101
|
+
<button class="for_the_keyboard">F3</button>
|
|
102
|
+
<button class="for_the_keyboard">F4</button>
|
|
103
|
+
<button class="for_the_keyboard">F5</button>
|
|
104
|
+
<button class="for_the_keyboard">F6</button>
|
|
105
|
+
<button class="for_the_keyboard">F7</button>
|
|
106
|
+
<button class="for_the_keyboard">F8</button>
|
|
107
|
+
<button class="for_the_keyboard">F9</button>
|
|
108
|
+
<button class="for_the_keyboard">F10</button>
|
|
109
|
+
<button class="for_the_keyboard">F11</button>
|
|
110
|
+
<button class="for_the_keyboard">F12</button>
|
|
111
|
+
<button class="for_the_keyboard">Insect</button>
|
|
112
|
+
<button class="print_key for_the_keyboard">printScr</button>
|
|
113
|
+
<button class="for_the_keyboard">Delete</button>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div class="row_for_the_keyboard row_one">
|
|
117
|
+
<button onclick="on_key_pressed_event('~')" class="for_the_keyboard">~</button>
|
|
118
|
+
<button onclick="on_key_pressed_event('1')" class="for_the_keyboard">1</button>
|
|
119
|
+
<button onclick="on_key_pressed_event('2')" class="for_the_keyboard">2</button>
|
|
120
|
+
<button onclick="on_key_pressed_event('3')" class="for_the_keyboard">3</button>
|
|
121
|
+
<button onclick="on_key_pressed_event('4')" class="for_the_keyboard">4</button>
|
|
122
|
+
<button onclick="on_key_pressed_event('5')" class="for_the_keyboard">5</button>
|
|
123
|
+
<button onclick="on_key_pressed_event('6')" class="for_the_keyboard">6</button>
|
|
124
|
+
<button onclick="on_key_pressed_event('7')" class="for_the_keyboard">7</button>
|
|
125
|
+
<button onclick="on_key_pressed_event('8')" class="for_the_keyboard">8</button>
|
|
126
|
+
<button onclick="on_key_pressed_event('9')" class="for_the_keyboard">9</button>
|
|
127
|
+
<button onclick="on_key_pressed_event('0')" class="for_the_keyboard">0</button>
|
|
128
|
+
<button onclick="on_key_pressed_event('-')" class="for_the_keyboard">-</button>
|
|
129
|
+
<button onclick="on_key_pressed_event('=')" class="for_the_keyboard">=</button>
|
|
130
|
+
<button onclick="on_key_pressed_event('backspace_key')" class="backspace_key for_the_keyboard">Backspace</button>
|
|
131
|
+
<button onclick="on_key_pressed_event('home_key')" class="for_the_keyboard">Home</button>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div class="row_for_the_keyboard row_two">
|
|
135
|
+
<button onclick="on_key_pressed_event('tab_key')" class="tab_key for_the_keyboard">Tab</button>
|
|
136
|
+
<button onclick="on_key_pressed_event('q')" class="for_the_keyboard">Q</button>
|
|
137
|
+
<button onclick="on_key_pressed_event('w')" class="for_the_keyboard">W</button>
|
|
138
|
+
<button onclick="on_key_pressed_event('e')" class="for_the_keyboard">E</button>
|
|
139
|
+
<button onclick="on_key_pressed_event('r')" class="for_the_keyboard">R</button>
|
|
140
|
+
<button onclick="on_key_pressed_event('t')" class="for_the_keyboard">T</button>
|
|
141
|
+
<button onclick="on_key_pressed_event('y')" class="for_the_keyboard">Y</button>
|
|
142
|
+
<button onclick="on_key_pressed_event('u')" class="for_the_keyboard">U</button>
|
|
143
|
+
<button onclick="on_key_pressed_event('i')" class="for_the_keyboard">I</button>
|
|
144
|
+
<button onclick="on_key_pressed_event('o')" class="for_the_keyboard">O</button>
|
|
145
|
+
<button onclick="on_key_pressed_event('p')" class="for_the_keyboard">P</button>
|
|
146
|
+
<button onclick="on_key_pressed_event('{')" class="for_the_keyboard">{</button>
|
|
147
|
+
<button onclick="on_key_pressed_event('}')" class="for_the_keyboard">}</button>
|
|
148
|
+
<button onclick="on_key_pressed_event('\\')" class="slace_key for_the_keyboard">\</button>
|
|
149
|
+
<button onclick="on_key_pressed_event('page_up')" class="for_the_keyboard">Pg Up</button>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="row_for_the_keyboard row_three">
|
|
153
|
+
<button onclick="on_key_pressed_event('caps_lock')" class="caps_lock_key for_the_keyboard">Caps Lock</button>
|
|
154
|
+
<button onclick="on_key_pressed_event('a')" class="for_the_keyboard">A</button>
|
|
155
|
+
<button onclick="on_key_pressed_event('s')" class="for_the_keyboard">S</button>
|
|
156
|
+
<button onclick="on_key_pressed_event('d')" class="for_the_keyboard">D</button>
|
|
157
|
+
<button onclick="on_key_pressed_event('f')" class="for_the_keyboard">F</button>
|
|
158
|
+
<button onclick="on_key_pressed_event('g')" class="for_the_keyboard">G</button>
|
|
159
|
+
<button onclick="on_key_pressed_event('h')" class="for_the_keyboard">H</button>
|
|
160
|
+
<button onclick="on_key_pressed_event('i')" class="for_the_keyboard">I</button>
|
|
161
|
+
<button onclick="on_key_pressed_event('j')" class="for_the_keyboard">J</button>
|
|
162
|
+
<button onclick="on_key_pressed_event('k')" class="for_the_keyboard">K</button>
|
|
163
|
+
<button onclick="on_key_pressed_event('l')" class="for_the_keyboard">L</button>
|
|
164
|
+
<button onclick="on_key_pressed_event(';')" class="for_the_keyboard">;</button>
|
|
165
|
+
<button onclick="on_key_pressed_event('#')" class="for_the_keyboard">#</button>
|
|
166
|
+
<button onclick="on_key_pressed_event('enter_key')" class="enter_button for_the_keyboard">Enter</button>
|
|
167
|
+
<button onclick="on_key_pressed_event('page_down')" class="for_the_keyboard">Pg Dn</button>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<div class="row_for_the_keyboard row_four">
|
|
171
|
+
<button onclick="on_key_pressed_event('shift')" class="shift_key for_the_keyboard">Shift</button>
|
|
172
|
+
<button onclick="on_key_pressed_event('z')" class="for_the_keyboard">Z</button>
|
|
173
|
+
<button onclick="on_key_pressed_event('x')" class="for_the_keyboard">X</button>
|
|
174
|
+
<button onclick="on_key_pressed_event('c')" class="for_the_keyboard">C</button>
|
|
175
|
+
<button onclick="on_key_pressed_event('v')" class="for_the_keyboard">V</button>
|
|
176
|
+
<button onclick="on_key_pressed_event('b')" class="for_the_keyboard">B</button>
|
|
177
|
+
<button onclick="on_key_pressed_event('n')" class="for_the_keyboard">N</button>
|
|
178
|
+
<button onclick="on_key_pressed_event('m')" class="for_the_keyboard">M</button>
|
|
179
|
+
<button onclick="on_key_pressed_event(',')" class="for_the_keyboard">,</button>
|
|
180
|
+
<button onclick="on_key_pressed_event('.')" class="for_the_keyboard">.</button>
|
|
181
|
+
<button onclick="on_key_pressed_event('=')" class="for_the_keyboard">?</button>
|
|
182
|
+
<button onclick="on_key_pressed_event('Shift')" class="shift_key for_the_keyboard">Shift</button>
|
|
183
|
+
<button onclick="on_key_pressed_event('↑')" class="for_the_keyboard">↑</button>
|
|
184
|
+
<button onclick="on_key_pressed_event('End')" class="for_the_keyboard">End</button>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<div class="row_for_the_keyboard row_five">
|
|
188
|
+
<button onclick="on_key_pressed_event('ctrl_key')"class="last_row for_the_keyboard">Ctrl</button>
|
|
189
|
+
<button onclick="on_key_pressed_event('function_key')"class="last_row for_the_keyboard">Fn</button>
|
|
190
|
+
<button onclick="on_key_pressed_event('win_key')"class="last_row for_the_keyboard">Win</button>
|
|
191
|
+
<button onclick="on_key_pressed_event('alt_key')"class="last_row for_the_keyboard">Alt</button>
|
|
192
|
+
<button onclick="on_key_pressed_event('space_key')" class="for_the_keyboard space_key">space</button>
|
|
193
|
+
<button onclick="on_key_pressed_event('alt_key')" class="last_row for_the_keyboard">Alt</button>
|
|
194
|
+
<button onclick="on_key_pressed_event('fn_key')" class="last_row for_the_keyboard">Fn</button>
|
|
195
|
+
<button class="last_row for_the_keyboard">Ctrl</button>
|
|
196
|
+
<button class="last_row for_the_keyboard">←</button>
|
|
197
|
+
<button class="last_row for_the_keyboard">↓</button>
|
|
198
|
+
<button class="last_row for_the_keyboard">→</button>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<div style="margin-left: 8em">
|
|
204
|
+
<h2>This textarea tests the above keyboard</h2>
|
|
205
|
+
<label for="textarea_id">Textarea:</label>
|
|
206
|
+
<textarea id="textarea_id" rows="12" cols="80" style="background-color: #d3d3d3">
|
|
207
|
+
</textarea>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<script>
|
|
211
|
+
|
|
212
|
+
function on_key_pressed_event(i) {
|
|
213
|
+
console.log(i)
|
|
214
|
+
old_value = document.getElementById('textarea_id').value
|
|
215
|
+
switch (i) {
|
|
216
|
+
case 'enter_key':
|
|
217
|
+
i = "\n"
|
|
218
|
+
break
|
|
219
|
+
case 'space_key':
|
|
220
|
+
i = ' '
|
|
221
|
+
break
|
|
222
|
+
case 'shift',
|
|
223
|
+
'caps_lock',
|
|
224
|
+
'shift':
|
|
225
|
+
i = ''
|
|
226
|
+
break
|
|
227
|
+
case 'backspace_key':
|
|
228
|
+
i = ''
|
|
229
|
+
old_value = old_value.slice(0, -1)
|
|
230
|
+
break
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
document.getElementById('textarea_id').value = old_value+i
|
|
234
|
+
/*alert(i);*/
|
|
235
|
+
}
|
|
236
|
+
</script>
|
|
237
|
+
</body>
|
|
238
|
+
</html>
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<style>
|
|
4
|
+
@property --rotate {
|
|
5
|
+
syntax: "<angle>";
|
|
6
|
+
initial-value: 132deg;
|
|
7
|
+
inherits: false;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
--card-height: calc(88.9px * 5);
|
|
12
|
+
--card-width: calc(63.5px * 5);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
min-height: 100vh;
|
|
17
|
+
background: #212534;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
padding-top: 2rem;
|
|
22
|
+
padding-bottom: 2rem;
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.card {
|
|
27
|
+
background: #191c29;
|
|
28
|
+
width: var(--card-width);
|
|
29
|
+
height: var(--card-height);
|
|
30
|
+
padding: 3px;
|
|
31
|
+
position: relative;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
align-items: center;
|
|
34
|
+
text-align: center;
|
|
35
|
+
display: flex;
|
|
36
|
+
font-size: 1.5em;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
font-family: cursive;
|
|
39
|
+
border-radius: 6px;
|
|
40
|
+
color: rgb(88 199 250 / 0%);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.card:hover {
|
|
44
|
+
color: rgb(88 199 250 / 100%);
|
|
45
|
+
transition: color 1s;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.card:hover:before,
|
|
49
|
+
.card:hover:after {
|
|
50
|
+
animation: none;
|
|
51
|
+
opacity: 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.card::before {
|
|
55
|
+
content: "";
|
|
56
|
+
width: 104%;
|
|
57
|
+
height: 102%;
|
|
58
|
+
border-radius: 8px;
|
|
59
|
+
background-image: linear-gradient(
|
|
60
|
+
var(--rotate),
|
|
61
|
+
#5ddcff,
|
|
62
|
+
#3c67e3 43%,
|
|
63
|
+
#4e00c2
|
|
64
|
+
);
|
|
65
|
+
position: absolute;
|
|
66
|
+
z-index: -1;
|
|
67
|
+
top: -1%;
|
|
68
|
+
left: -2%;
|
|
69
|
+
animation: spin 3.5s linear infinite;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.card::after {
|
|
73
|
+
position: absolute;
|
|
74
|
+
content: "";
|
|
75
|
+
top: calc(var(--card-height) / 6);
|
|
76
|
+
left: 0;
|
|
77
|
+
right: 0;
|
|
78
|
+
z-index: -1;
|
|
79
|
+
height: 100%;
|
|
80
|
+
width: 100%;
|
|
81
|
+
margin: 0 auto;
|
|
82
|
+
transform: scale(0.8);
|
|
83
|
+
filter: blur(calc(var(--card-height) / 6));
|
|
84
|
+
background-image: linear-gradient(
|
|
85
|
+
var(--rotate)
|
|
86
|
+
, #5ddcff, #3c67e3 43%, #4e00c2);
|
|
87
|
+
opacity: 1;
|
|
88
|
+
transition: opacity .5s;
|
|
89
|
+
animation: spin_animation 2.5s linear infinite;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@keyframes spin_animation {
|
|
93
|
+
0% {
|
|
94
|
+
--rotate: 0deg;
|
|
95
|
+
}
|
|
96
|
+
100% {
|
|
97
|
+
--rotate: 360deg;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
</style>
|
|
102
|
+
|
|
103
|
+
</head>
|
|
104
|
+
<body>
|
|
105
|
+
<div class="card">
|
|
106
|
+
Magic Card
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
</body>
|
|
110
|
+
</html>
|