cyberweb 0.6.17 → 0.7.9
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 +299 -134
- data/bin/images_from_this_webpage +11 -0
- data/doc/README.gen +276 -107
- data/doc/todo/todo_for_the_cyberweb_project.md +90 -90
- data/examples/css/day_night_toggle/day_night_toggle.html +202 -0
- data/examples/css/fleeing_dinosaur_animation/fleeing_dinosaur_animation.html +420 -0
- data/examples/css/important_style/important_style.html +35 -0
- data/examples/html/custom_cursor.html +1 -1
- data/examples/javascript_and_jquery/misc/miscallenous_javascript_examples.html +25 -0
- data/examples/javascript_and_jquery/roll_a_die/roll_a_die.html +48 -0
- data/lib/cyberweb/base/misc.rb +7 -0
- data/lib/cyberweb/cascading_style_sheets/div.css +2 -2
- data/lib/cyberweb/cascading_style_sheets/drop_shadow.css +4 -0
- data/lib/cyberweb/cascading_style_sheets/fonts.css +42 -30
- data/lib/cyberweb/cascading_style_sheets/glow_effects.css +58 -0
- data/lib/cyberweb/cascading_style_sheets/margin.css +254 -248
- data/lib/cyberweb/cascading_style_sheets/tooltip.css +73 -0
- data/lib/cyberweb/generator/cgi.rb +2 -1
- data/lib/cyberweb/javascript_code/custom_functions.js +16 -16
- data/lib/cyberweb/javascript_code/math.js +18 -0
- data/lib/cyberweb/javascript_code/simulate_a_dice.js +13 -5
- data/lib/cyberweb/sinatra/custom_extensions.rb +2 -2
- data/lib/cyberweb/toplevel_methods/misc.rb +44 -0
- data/lib/cyberweb/utility_scripts/create_coloured_tags.rb +1 -5
- data/lib/cyberweb/utility_scripts/download_balloon_css.rb +1 -5
- data/lib/cyberweb/utility_scripts/fix_incorrect_links_to_locally_existing_images_in_this_file.rb +5 -33
- data/lib/cyberweb/utility_scripts/hyperlink_all_images_from.rb +1 -5
- data/lib/cyberweb/utility_scripts/obtain_css_rules.rb +169 -0
- data/lib/cyberweb/version/version.rb +2 -2
- data/lib/cyberweb/web_object/html_tags.rb +12 -1
- data/lib/cyberweb/web_object/images.rb +534 -178
- data/lib/cyberweb/web_object/javascript_and_jquery.rb +9 -9
- data/lib/cyberweb/web_object/link.rb +102 -67
- data/lib/cyberweb/web_object/misc.rb +320 -518
- data/lib/cyberweb/yaml/js_files_to_load.yml +3 -2
- data/lib/cyberweb/yaml/load_these_yaml_files_by_default.yml +1 -0
- data/test/complex_tests/testing_style_variants/show_coloured_boxes.cgi +2 -2
- data/test/javascript/testing_various_javascript_related_APIs.html +17 -0
- data/test/simple_tests/testing_dragging_an_image.cgi +2 -0
- data/test/simple_tests/testing_uniform_css_rules_for_all_images.cgi +25 -0
- metadata +15 -5
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Position Absolute</title>
|
|
6
|
+
</head>
|
|
7
|
+
<style>
|
|
8
|
+
|
|
9
|
+
h2 {
|
|
10
|
+
color: #0d23e0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.special_h2 {
|
|
14
|
+
color: #d90d2f !important;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.green {
|
|
18
|
+
color: green;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.really_green {
|
|
22
|
+
color: green !important;
|
|
23
|
+
}
|
|
24
|
+
</style>
|
|
25
|
+
<body>
|
|
26
|
+
|
|
27
|
+
<h2>I am Heading #1</h2>
|
|
28
|
+
<h2>I am Heading #2</h2>
|
|
29
|
+
<h2>I am Heading #3</h2>
|
|
30
|
+
<h2 class="special_h2">I am Heading #4</h2>
|
|
31
|
+
<h2 class="green">I am Heading #5</h2>
|
|
32
|
+
<h2 class="really_green">I am Heading #6</h2>
|
|
33
|
+
|
|
34
|
+
</body>
|
|
35
|
+
</html>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<script src="../../../lib/cyberweb/javascript_code/html_colours.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
|
|
9
|
+
<p id="our_id">
|
|
10
|
+
Some random examples.
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
var x = 42;
|
|
15
|
+
</script>
|
|
16
|
+
<script>
|
|
17
|
+
alert(x); // Will alert '42';
|
|
18
|
+
</script>
|
|
19
|
+
/*
|
|
20
|
+
* The above code shows that all definitions within <script>
|
|
21
|
+
* will be retained. So the variable 42 will be known to
|
|
22
|
+
* later uses of the script tag.
|
|
23
|
+
*/
|
|
24
|
+
</body>
|
|
25
|
+
</html>
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>
|
|
4
|
+
Roll a die
|
|
5
|
+
</title>
|
|
6
|
+
<style>
|
|
7
|
+
* {
|
|
8
|
+
font-family: Helvetica, Arial, sans-serif;
|
|
9
|
+
text-align: center;
|
|
10
|
+
}
|
|
11
|
+
button.roll_a_die {
|
|
12
|
+
background-color: rgb(82, 186, 179);
|
|
13
|
+
border-radius: 6px;
|
|
14
|
+
border: none;
|
|
15
|
+
color: rgb(255, 255, 255);
|
|
16
|
+
padding: 8px;
|
|
17
|
+
text-transform: uppercase;
|
|
18
|
+
width: 150px;
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
}
|
|
21
|
+
#placeholder {
|
|
22
|
+
height: 80px;
|
|
23
|
+
width: 80px;
|
|
24
|
+
padding: 25px;
|
|
25
|
+
margin: 10px auto;
|
|
26
|
+
font-size: 60px;
|
|
27
|
+
border: 2px solid gray;
|
|
28
|
+
border-radius: 10px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
</style>
|
|
32
|
+
</head>
|
|
33
|
+
<body>
|
|
34
|
+
<p id="placeholder"></p>
|
|
35
|
+
<script>
|
|
36
|
+
|
|
37
|
+
function assign_a_new_value() {
|
|
38
|
+
var placeholder = document.getElementById('placeholder');
|
|
39
|
+
placeholder.innerHTML = random_number_from_to();
|
|
40
|
+
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
</script>
|
|
44
|
+
<button class="roll_a_die" id="button" onclick="assign_a_new_value()">Roll Dice</button>
|
|
45
|
+
<script type="text/javascript" src="../../../lib/cyberweb/javascript_code/simulate_a_dice.js"></script>
|
|
46
|
+
|
|
47
|
+
</body>
|
|
48
|
+
</html>
|
data/lib/cyberweb/base/misc.rb
CHANGED
|
@@ -18,6 +18,13 @@ class Base # === Cyberweb::Base
|
|
|
18
18
|
@internal_hash = {}
|
|
19
19
|
end
|
|
20
20
|
|
|
21
|
+
# ========================================================================= #
|
|
22
|
+
# === cascading_style_sheets_directory?
|
|
23
|
+
# ========================================================================= #
|
|
24
|
+
def cascading_style_sheets_directory?
|
|
25
|
+
::Cyberweb.project_base_directory?+'cascading_style_sheets/'
|
|
26
|
+
end
|
|
27
|
+
|
|
21
28
|
# ========================================================================= #
|
|
22
29
|
# === read_file_via_utf8_encoding
|
|
23
30
|
# ========================================================================= #
|
|
@@ -22,26 +22,26 @@
|
|
|
22
22
|
* Font weight tags, font-weight tags,
|
|
23
23
|
* fw tags, FWB is Font-weight bold.
|
|
24
24
|
*/
|
|
25
|
-
.FWN { font-weight: normal;}
|
|
26
|
-
.FWB { font-weight: bold;}
|
|
27
|
-
.FWBB { font-weight: bolder;}
|
|
28
|
-
.FWL { font-weight: lighter;}
|
|
29
|
-
.FWM { font-weight: 500;}
|
|
30
|
-
.FW1, .F1 { font-weight: 100;}
|
|
31
|
-
.FW2, .F2 { font-weight: 200;}
|
|
32
|
-
.FW3, .F3, .FW300 { font-weight: 300;}
|
|
33
|
-
.FW4, .F4 { font-weight: 400;}
|
|
34
|
-
.FW5, .F5 { font-weight: 500;}
|
|
35
|
-
.FW6, .F6 { font-weight: 600;}
|
|
36
|
-
.FW7, .F7 { font-weight: 700;}
|
|
37
|
-
.FW8, .F8 { font-weight: 800;}
|
|
38
|
-
.FW9, .F9 { font-weight: 900;}
|
|
39
|
-
.FW, .BO { font-weight: 600;}
|
|
25
|
+
.FWN { font-weight: normal; }
|
|
26
|
+
.FWB { font-weight: bold; }
|
|
27
|
+
.FWBB { font-weight: bolder; }
|
|
28
|
+
.FWL { font-weight: lighter; }
|
|
29
|
+
.FWM { font-weight: 500; }
|
|
30
|
+
.FW1, .F1 { font-weight: 100; }
|
|
31
|
+
.FW2, .F2 { font-weight: 200; }
|
|
32
|
+
.FW3, .F3, .FW300 { font-weight: 300; }
|
|
33
|
+
.FW4, .F4 { font-weight: 400; }
|
|
34
|
+
.FW5, .F5 { font-weight: 500; }
|
|
35
|
+
.FW6, .F6 { font-weight: 600; }
|
|
36
|
+
.FW7, .F7 { font-weight: 700; }
|
|
37
|
+
.FW8, .F8 { font-weight: 800; }
|
|
38
|
+
.FW9, .F9 { font-weight: 900; }
|
|
39
|
+
.FW, .BO { font-weight: 600; }
|
|
40
40
|
|
|
41
41
|
.BOLD, .BOLD, .bold { font-weight:600; }
|
|
42
42
|
|
|
43
43
|
.GOBOLD { font-weight:600;color:gold}
|
|
44
|
-
.normal { font-weight:300; font-style: normal;}
|
|
44
|
+
.normal { font-weight:300; font-style: normal; }
|
|
45
45
|
|
|
46
46
|
.BG_FIX { background-attachment: fixed; }
|
|
47
47
|
.BG_Pos00 { background-position: 0 0; }
|
|
@@ -49,11 +49,11 @@
|
|
|
49
49
|
/* SPAN urgierte font-family und Font-Size solutions */
|
|
50
50
|
/* Rule: 1) font-family 2)Font-Size 3)Font-Decoration ABER KEINE colorS ETC. */
|
|
51
51
|
/* Font tags, font size tags, font-size tags, fs tags, size tags */
|
|
52
|
-
.\38px { font-size: 8px;}
|
|
53
|
-
.\39px { font-size: 9px;}
|
|
54
|
-
.\310px { font-size: 10px;}
|
|
55
|
-
.\311px { font-size: 11px;}
|
|
56
|
-
.\312px { font-size: 12px;}
|
|
52
|
+
.\38px { font-size: 8px; }
|
|
53
|
+
.\39px { font-size: 9px; }
|
|
54
|
+
.\310px { font-size: 10px; }
|
|
55
|
+
.\311px { font-size: 11px; }
|
|
56
|
+
.\312px { font-size: 12px; }
|
|
57
57
|
/* .\312px { font-size: 12px} */
|
|
58
58
|
|
|
59
59
|
/*
|
|
@@ -222,12 +222,12 @@
|
|
|
222
222
|
.FS300 { font-size: 300%; }
|
|
223
223
|
.FS400 { font-size: 400%; }
|
|
224
224
|
.FS500 { font-size: 500%; }
|
|
225
|
-
.bigger { font-size:larger;}
|
|
226
|
-
.larger { font-size:larger;}
|
|
227
|
-
.big { font-size:larger;}
|
|
225
|
+
.bigger { font-size:larger; }
|
|
226
|
+
.larger { font-size:larger; }
|
|
227
|
+
.big { font-size:larger; }
|
|
228
228
|
.smaller { font-size:smaller}
|
|
229
229
|
|
|
230
|
-
.yeli { font-style:italic; color: yellow;}
|
|
230
|
+
.yeli { font-style:italic; color: yellow; }
|
|
231
231
|
|
|
232
232
|
/* Text tag, text deco tags, deco tags, decoration tags */
|
|
233
233
|
.nud {text-decoration:none }
|
|
@@ -242,7 +242,6 @@
|
|
|
242
242
|
.TTL {text-transform: lowercase; }
|
|
243
243
|
.LOW {text-transform: lowercase; }
|
|
244
244
|
.UPP {text-transform: uppercase; }
|
|
245
|
-
.SMALL_CAPS {font-variant:small-caps;}
|
|
246
245
|
|
|
247
246
|
/*
|
|
248
247
|
* Font family tags, font fam tags,ff tags, font-family tags,
|
|
@@ -378,9 +377,22 @@
|
|
|
378
377
|
*/
|
|
379
378
|
.FSN,
|
|
380
379
|
.FN,
|
|
381
|
-
.no_italics { font-style: normal;}
|
|
382
|
-
.FSI,
|
|
383
|
-
.FI
|
|
380
|
+
.no_italics { font-style: normal; }
|
|
381
|
+
.FSI,
|
|
382
|
+
.FI,
|
|
383
|
+
.italic {
|
|
384
|
+
font-style: italic;
|
|
385
|
+
}
|
|
384
386
|
.FSO { font-style: oblique}
|
|
385
387
|
/* inherit means that it takes the same style as the parent */
|
|
386
|
-
.FINHERIT { font-style:inherit} /* each property may have a specified value of inherit */
|
|
388
|
+
.FINHERIT { font-style: inherit} /* each property may have a specified value of inherit */
|
|
389
|
+
|
|
390
|
+
/*
|
|
391
|
+
* This is for the font-variant where all letters are upcased,
|
|
392
|
+
* but the first one is upcased even more so.
|
|
393
|
+
*/
|
|
394
|
+
.SMALL_CAPS,
|
|
395
|
+
.pretty_caps,
|
|
396
|
+
.pretty_capitalized {
|
|
397
|
+
font-variant: small-caps;
|
|
398
|
+
}
|
|
@@ -8,6 +8,59 @@
|
|
|
8
8
|
text-shadow: 0 0 80px rgb(192 219 255 / 75%), 0 0 32px rgb(65 120 255 / 24%);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
/*
|
|
12
|
+
* Note that .flashy_surroundings is almost identical to .glow_on_hover.
|
|
13
|
+
*
|
|
14
|
+
* The primary difference is that width and height are not specified by
|
|
15
|
+
* .flashy_surroundings. Furthermore it will not use colours and
|
|
16
|
+
* the transition is slower.
|
|
17
|
+
*/
|
|
18
|
+
.flashy_surroundings,
|
|
19
|
+
.stylish_rainbow_effect,
|
|
20
|
+
.fancy_glow_effect,
|
|
21
|
+
.fancy_colourful_hover_effect {
|
|
22
|
+
border: none;
|
|
23
|
+
outline: none;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
position: relative;
|
|
26
|
+
z-index: 0;
|
|
27
|
+
border-radius: 10px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.flashy_surroundings:after,
|
|
31
|
+
.stylish_rainbow_effect:after,
|
|
32
|
+
.fancy_glow_effect:after,
|
|
33
|
+
.fancy_colourful_hover_effect:after {
|
|
34
|
+
z-index: -1;
|
|
35
|
+
content: '';
|
|
36
|
+
position: absolute;
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: 100%;
|
|
39
|
+
left: 0;
|
|
40
|
+
top: 0;
|
|
41
|
+
border-radius: 10px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.flashy_surroundings:before,
|
|
45
|
+
.stylish_rainbow_effect:before,
|
|
46
|
+
.fancy_glow_effect:before,
|
|
47
|
+
.fancy_colourful_hover_effect:before {
|
|
48
|
+
content: '';
|
|
49
|
+
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: -2px;
|
|
52
|
+
left:-2px;
|
|
53
|
+
background-size: 400%;
|
|
54
|
+
z-index: -1;
|
|
55
|
+
filter: blur(4px);
|
|
56
|
+
width: calc(100% + 4px);
|
|
57
|
+
height: calc(100% + 4px);
|
|
58
|
+
animation: glowing_on_hover_animation 22s linear infinite;
|
|
59
|
+
opacity: 0;
|
|
60
|
+
transition: opacity 2.5s ease-in-out;
|
|
61
|
+
border-radius: 8px;
|
|
62
|
+
}
|
|
63
|
+
|
|
11
64
|
.glow_on_hover,
|
|
12
65
|
.rainbow_effect {
|
|
13
66
|
width: 220px;
|
|
@@ -46,11 +99,16 @@
|
|
|
46
99
|
}
|
|
47
100
|
|
|
48
101
|
.glow_on_hover:active:after,
|
|
102
|
+
.fancy_glow_effect:active:after,
|
|
49
103
|
.rainbow_effect:active:after {
|
|
50
104
|
background: transparent;
|
|
51
105
|
}
|
|
52
106
|
|
|
53
107
|
.glow_on_hover:hover:before,
|
|
108
|
+
.flashy_surroundings:hover:before,
|
|
109
|
+
.stylish_rainbow_effect:hover:before,
|
|
110
|
+
.fancy_glow_effect:hover:before,
|
|
111
|
+
.fancy_colourful_hover_effect:hover:before,
|
|
54
112
|
.rainbow_effect:hover:before {
|
|
55
113
|
opacity: 1;
|
|
56
114
|
}
|