RubyGems - cyberweb - Versions diffs - 0.4.174 → 0.5.225 - Mend

cyberweb 0.4.174 → 0.5.225

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of cyberweb might be problematic. Click here for more details.

Files changed (625) hide show

data/examples/advanced/games/tic-tac-toe/tic-tac-toe.cgi ADDED Viewed

@@ -0,0 +1,123 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/games/tic-tac-toe/tic-tac-toe.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english('Tic-Tac-Toe') {
+created_on '21.04.2022' # Thursday.
+ruby_favicon
+main_css '
+* {
+  padding: 0;
+  margin: 0;
+  font-family: "Itim", cursive;
+}
+.background {
+  background-color: #12181B;
+  height: 100vh;
+  padding-top: 1px;
+}
+.title {
+  color: white;
+  text-align: center;
+  font-size: 40px;
+  margin-top: 10%;
+}
+.display_for_tic_tac_toe {
+  color: white;
+  font-size: 25px;
+  text-align: center;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.hide_tic_tac_toe {
+  display: none;
+}
+.container_for_tic_tac_toe {
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  grid-template-rows: 33% 33% 33%;
+  max-width: 300px;
+}
+.tile {
+  border: 1px solid white;
+  min-width: 100px;
+  min-height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 50px;
+  cursor: pointer;
+}
+.playerX {
+  color: #09C372;
+}
+.playerO {
+  color: #498AFB;
+}
+.controls_for_tic_tac_toe {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1em;
+}
+.controls_for_tic_tac_toe button {
+  color: white;
+  padding: 8px;
+  border-radius: 8px;
+  border: none;
+  font-size: 20px;
+  margin-left: 1em;
+  cursor: pointer;
+}
+#reset_for_tic_tac_toe {
+  background-color: #FF3860;
+}
+'
+body_css_class ''
+body_css_style ''
+font_size ''
+no_jquery
+doc('mar0px pad0px') {
+  ee '<main class="background">
+<section class="title">
+<h1>Tic Tac Toe</h1>
+</section>
+<section class="display_for_tic_tac_toe">
+Player <span class="display-player playerX">X</span>\'s turn
+</section>
+<section class="container_for_tic_tac_toe">
+<div class="tile"></div>
+<div class="tile"></div>
+<div class="tile"></div>
+<div class="tile"></div>
+<div class="tile"></div>
+<div class="tile"></div>
+<div class="tile"></div>
+<div class="tile"></div>
+<div class="tile"></div>
+</section>
+<section class="display_for_tic_tac_toe announcer hide"></section>
+<section class="controls">
+<button id="reset">Reset</button>
+</section>
+</main>'
+ejavascript :tic_tac_toe
+}}

data/examples/advanced/get_some_coffee/get_some_coffee.html ADDED Viewed

@@ -0,0 +1,293 @@
+<html>
+<head>
+<title>Get some coffee!</title>
+<style>
+.container_for_coffee {
+  width:    300px;
+  height:   280px;
+  position: absolute;
+  top:   calc(25% - 140px);
+  left:  calc(50% - 150px);
+}
+.coffee-header {
+  width: 100%;
+  height: 80px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #ddcfcc;
+  border-radius: 10px;
+}
+.coffee-header__buttons {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  top: 25px;
+  background-color: #282323;
+  border-radius: 50%;
+}
+.coffee-header__buttons::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  bottom: -8px;
+  left: calc(50% - 4px);
+  background-color: #615e5e;
+}
+.coffee-header__button-one {
+  left: 15px;
+}
+.coffee-header__button-two {
+  left: 50px;
+}
+.coffee-header__display {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+  border-radius: 50%;
+  background-color: #9acfc5;
+  border: 5px solid #43beae;
+  box-sizing: border-box;
+}
+.coffee-header__details {
+  width: 8px;
+  height: 20px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: #9b9091;
+  box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;
+}
+.coffee-medium {
+  width: 90%;
+  height: 160px;
+  position: absolute;
+  top: 80px;
+  left: calc(50% - 45%);
+  background-color: #bcb0af;
+}
+.coffee-medium:before {
+  content: "";
+  width: 90%;
+  height: 100px;
+  background-color: #776f6e;
+  position: absolute;
+  bottom: 0;
+  left: calc(50% - 45%);
+  border-radius: 20px 20px 0 0;
+}
+.coffe-medium__exit {
+  width: 60px;
+  height: 20px;
+  position: absolute;
+  top: 0;
+  left: calc(50% - 30px);
+  background-color: #231f20;
+}
+.coffe-medium__exit::before {
+  content: "";
+  width: 50px;
+  height: 20px;
+  border-radius: 0 0 50% 50%;
+  position: absolute;
+  bottom: -20px;
+  left: calc(50% - 25px);
+  background-color: #231f20;
+}
+.coffe-medium__exit::after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  bottom: -30px;
+  left: calc(50% - 5px);
+  background-color: #231f20;
+}
+.coffee-medium__arm {
+  width: 70px;
+  height: 20px;
+  position: absolute;
+  top: 15px;
+  right: 25px;
+  background-color: #231f20;
+}
+.coffee-medium__arm::before {
+  content: "";
+  width: 15px;
+  height: 5px;
+  position: absolute;
+  top: 7px;
+  left: -15px;
+  background-color: #9e9495;
+}
+.coffee-medium__cup {
+  width: 80px;
+  height: 47px;
+  position: absolute;
+  bottom: 0;
+  left: calc(50% - 40px);
+  background-color: #FFF;
+  border-radius: 0 0 70px 70px / 0 0 110px 110px;
+}
+.coffee-medium__cup::after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 6px;
+  right: -13px;
+  border: 5px solid #FFF;
+  border-radius: 50%;
+}
+@keyframes liquid {
+  0% {
+    height: 0px;
+    opacity: 1;
+  }
+  5% {
+    height: 0px;
+    opacity: 1;
+  }
+  20% {
+    height: 62px;
+    opacity: 1;
+  }
+  95% {
+    height: 62px;
+    opacity: 1;
+  }
+  100% {
+    height: 62px;
+    opacity: 0;
+  }
+}
+.coffee-medium__liquid {
+  width: 6px;
+  height: 63px;
+  opacity: 0;
+  position: absolute;
+  top: 50px;
+  left: calc(50% - 3px);
+  background-color: #74372b;
+  animation: liquid 3s 3s linear infinite;
+}
+.coffee-medium__smoke {
+  width: 8px;
+  height: 20px;
+  position: absolute;
+  border-radius: 5px;
+  background-color: #b3aeae;
+}
+@keyframes smokeOne {
+  0% {
+    bottom: 20px;
+    opacity: 0;
+  }
+  40% {
+    bottom: 50px;
+    opacity: .5;
+  }
+  80% {
+    bottom: 80px;
+    opacity: .3;
+  }
+  100% {
+    bottom: 80px;
+    opacity: 0;
+  }
+}
+@keyframes smokeTwo {
+  0% {
+    bottom: 40px;
+    opacity: 0;
+  }
+  40% {
+    bottom: 70px;
+    opacity: .5;
+  }
+  80% {
+    bottom: 80px;
+    opacity: .3;
+  }
+  100% {
+    bottom: 80px;
+    opacity: 0;
+  }
+}
+.coffee-medium__smoke-one {
+  opacity: 0;
+  bottom: 50px;
+  left: 102px;
+  animation: smokeOne 3s 4s linear infinite;
+}
+.coffee-medium__smoke-two {
+  opacity: 0;
+  bottom: 70px;
+  left: 118px;
+  animation: smokeTwo 3s 5s linear infinite;
+}
+.coffee-medium__smoke-three {
+  opacity: 0;
+  bottom: 65px;
+  right: 118px;
+  animation: smokeTwo 3s 6s linear infinite;
+}
+.coffee-medium__smoke-for {
+  opacity: 0;
+  bottom: 50px;
+  right: 102px;
+  animation: smokeOne 3s 5s linear infinite;
+}
+.coffee-footer {
+  width: 95%;
+  height: 15px;
+  position: absolute;
+  bottom: 25px;
+  left: calc(50% - 47.5%);
+  background-color: #41bdad;
+  border-radius: 10px;
+}
+.coffee-footer::after {
+  content: "";
+  width: 106%;
+  height: 26px;
+  position: absolute;
+  bottom: -25px;
+  left: -8px;
+  background-color: #000;
+}
+</style>
+</head>
+<body style="background-color: black">
+<h2 style="color: gold; text-align: center">Get some coffee!</h2>
+<div class="container_for_coffee">
+ <div class="coffee-header">
+  <div class="coffee-header__buttons coffee-header__button-one"></div>
+  <div class="coffee-header__buttons coffee-header__button-two"></div>
+  <div class="coffee-header__display"></div>
+  <div class="coffee-header__details"></div>
+ </div>
+ <div class="coffee-medium">
+  <div class="coffe-medium__exit"></div>
+  <div class="coffee-medium__arm"></div>
+  <div class="coffee-medium__liquid"></div>
+  <div class="coffee-medium__smoke coffee-medium__smoke-one"></div>
+  <div class="coffee-medium__smoke coffee-medium__smoke-two"></div>
+  <div class="coffee-medium__smoke coffee-medium__smoke-three"></div>
+  <div class="coffee-medium__smoke coffee-medium__smoke-for"></div>
+  <div class="coffee-medium__cup"></div>
+ </div>
+ <div class="coffee-footer"></div>
+</div>
+</body>
+</html>

data/examples/advanced/glow_on_hover_example/glow_on_hover_example.cgi ADDED Viewed

@@ -0,0 +1,27 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/glow_on_hover_example/glow_on_hover_example.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english('Glow on mouse-hover example') {
+autoextend
+ruby_favicon
+css_template1
+body_css_class 'mar0px s2px padt2px VERDANAs'
+body_css_style 'background-color: black; color: white;'
+font_size '1.2em'
+doc('mar0px pad0px s0_5em BG_Black White') {
+  h1 dot(106, 'marr8px')+
+     'Show a glow effect',
+     'mart1px marb0_5em gold'
+  p_default {
+    button(
+      text: 'Move the mouse cursor here.',
+      css_class: 'glow_on_hover'
+    )
+  }
+}}

data/examples/advanced/hybrid_experiment.cgi CHANGED Viewed

@@ -11,13 +11,15 @@ require 'cyberweb/requires/require_the_toplevel_methods_files.rb'
 require 'cyberweb/requires/require_the_html_template.rb'
 require 'cyberweb/javascript/drag_and_drop.rb'
 require 'cyberweb/toplevel_methods/jquery.rb'
+require 'cyberweb/objectified/mask/mask.rb'
+include Cyberweb::Objectified::Mask
 alias ee print
 Cyberweb.require_objectified_html_tags_files
 Cyberweb.require_toplevel_methods_files
-include Cyberweb::ObjectifiedHtmlTags
+include Cyberweb::Objectified::HtmlTags
 include Cyberweb
 ee "Content-type: text/html\n\n"
@@ -36,14 +38,19 @@ ee '<body>'
 # =========================================================================== #
 # Hello world div:
 # =========================================================================== #
-_ = Cyberweb::ObjectifiedHtmlTags::Div.new('Hello world!')
+_ = Cyberweb::Objectified::HtmlTags::Div.new('Hello world!')
 ee _
-ee '<br>'
-ee 'The params are:'
-ee '<br>'
-ee Cyberweb.params?
-ee '<br>'
+params = Cyberweb.params?
+if params.empty?
+  ee 'No params were given.'
+else
+  ee '<br>'
+  ee 'The params are:'
+  ee '<br>'
+  ee params
+  ee '<br>'
+end
 _ = entry('This is the default text for the entry.')
 _.css_class('pad8px mar2px border_steelblue_3px wid50 mart1em BG_lightyellow')
@@ -52,7 +59,7 @@ ee _
 # =========================================================================== #
 # Test an OOP Table next:
 # =========================================================================== #
-_ = Cyberweb::ObjectifiedHtmlTags::Table.new
+_ = oop_table
 _.is_draggable
 _.id 'drag_table_id1'
 _.bblack5
@@ -61,7 +68,8 @@ _.style 'right: 65%'
 _.fill_with_this_array(
   [
     [1,2,3,5],
-    [55,33,2222,33434]
+    [55,33,2222,33434],
+    ['This can be', 'dragged around','willy-nilly','\o/']
   ]
 )
 ee _
@@ -83,16 +91,24 @@ _.report
 ee '<br>'
 ee '<br>'
 ee '<br>'
-_ = checkbox
+# =========================================================================== #
+# Add a checkbox:
+# =========================================================================== #
+_ = html_checkbox
 _.id = 'checkbox1'
 _.report
+# =========================================================================== #
+# And then a submit-button:
+# =========================================================================== #
 _ = submit_button
 _.bblack2
-_.css_class 'pad8px mar4px'
-_.style 'border: 5px dotted tomato'
+_.css_class 'pad12px mar4px BG_White'
+_.css_style 'border: 15px dotted tomato'
 _.report
 ee '</form>'
+spacer
+ee 'Next come three checkboxes.<br>'
 ee '
 <form class="BG_Black white">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
@@ -104,5 +120,11 @@ ee '
 </form>
 '
+div = oop_div
+div.css_class = 'bblack3'
+div.content = 'Hey there'
+div.on_mouse_over {{ fg: :lightgreen, bg: :royalblue }}
+ee div
 ee '</body>'
 ee '</html>'

data/examples/advanced/images/global_css_rules_for_the_images.cgi ADDED Viewed

@@ -0,0 +1,32 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/images/global_css_rules_for_the_images.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english(:filename) {
+created_on '01.10.2022' # Saturday.
+autoextend
+ruby_favicon
+template1
+body_css_class 'mar0px s2px padt2px VERDANAs'
+body_css_style 'background-color: #d3d2d1;'
+font_size 'def'
+images_css 'bblack3 mar1em'
+doc('mar0px pad0px s0_6em') {
+  h1 dot(106, 'marr8px')+
+     'Global CSS rules for the images',
+     'mart1px marb0_5em'
+  p_default {
+    dimg 'NJOY/TANAKA.jpg'
+    dimg 'NJOY/Torrie_Wilson.jpg'
+    dimg 'NJOY/Unknown1.jpg'
+    fancy_spacer
+    dimg '../../../programming/ruby/src/cyberweb/images/cyberweb_favicon.png'
+    dimg '../../../programming/ruby/src/cyberweb/images/cyberweb_logo.png'
+    dimg '../../../programming/ruby/src/cyberweb/images/cyberweb_theme.png'
+  }
+}}

data/examples/advanced/larger_image_on_mouse_over_example.cgi CHANGED Viewed

@@ -16,8 +16,8 @@ body_css_style 'background-color: #d3d2d1;'
 font_size 'def'
 doc('mar0px') {
-  h1 'Demonstrate how to disable right click mouse button - '\
-     'but keep in mind that this may annoy the user greatly.',
+  h1 'The following image will slowly grow in '\
+     'size, to an increase of +20%.',
      'martb1px'
   div {

data/examples/advanced/no_right_click.cgi CHANGED Viewed

@@ -2,18 +2,19 @@
 # Encoding: UTF-8
 # frozen_string_literal: true
 # =========================================================================== #
-# http://localhost/DATA/PROGRAMMING_LANGUAGES/RUBY/src/cyberweb/examples/advanced/no_right_click.cgi
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/no_right_click.cgi
 # =========================================================================== #
 require 'cyberweb/autoinclude'
 english('No right click') {
 autoextend
-rub_favicon
+ruby_favicon
 css_style '
 '+TEMPLATE1
 body_css_class 'mar0px s2px padt2px VERDANAs'
 body_css_style 'background-color: #d3d2d1;'
 font_size 'def'
+no_right_click
 doc('mar0px') {
   h1 'Demonstrate how to disable right click mouse button - but '\
@@ -21,6 +22,6 @@ doc('mar0px') {
      'martb1px'
   div {
     textarea {{ css_class: 'bblack3' }}
-    no_right_click
   }
+  h1 'YO THERE','drop_shadow_steelblue'
 }}

data/examples/advanced/{objectified_html_tags.cgi → objectified_html_tags/objectified_html_tags.cgi} RENAMED Viewed

@@ -4,18 +4,21 @@
 # =========================================================================== #
 # This file may also mix non-objectified HTML tags.
 # =========================================================================== #
-# http://localhost/programming/ruby/src/cyberweb/examples/advanced/objectified_html_tags.cgi
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/objectified_html_tags/objectified_html_tags.cgi
 # =========================================================================== #
 require 'cyberweb/requires/require_objectified_html_tags_files.rb'
 require 'cyberweb/requires/require_the_toplevel_methods_files.rb'
 require 'cyberweb/requires/require_the_html_template.rb'
+require 'cyberweb/objectified/mask/mask.rb'
+include Cyberweb::Objectified::Mask
 alias ee print
 Cyberweb.require_objectified_html_tags_files
 Cyberweb.require_toplevel_methods_files
-include Cyberweb::ObjectifiedHtmlTags
+include Cyberweb::Objectified::HtmlTags
 include Cyberweb
 ee "Content-type: text/html\n\n"
@@ -25,11 +28,17 @@ ee Cyberweb.return_content_of_all_the_CSS_files
 ee '</style>'
 ee '<body>'
-_ = Cyberweb::ObjectifiedHtmlTags::Div.new('Hello world!')
+_ = Cyberweb::Objectified::HtmlTags::Div.new('Hello world!')
 ee _
 _ = entry('This is the default text for the entry.')
 _.css_class('pad8px mar2px border_steelblue_3px')
 ee _
+result = oop_div(class: 'BG_wheat bblack1 mar8px', id: 'another_id') {
+  h2 'Hey there!!!!!!!'
+  on_mouse_hover {{ bg: :whitesmoke, fg: :wheat }}
+}
+e result
 ee '</body>'
 ee '</html>'

data/examples/advanced/objectified_html_tags/testing_objectified_html_tags_with_the_webobject.cgi ADDED Viewed

@@ -0,0 +1,28 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/objectified_html_tags/testing_objectified_html_tags_with_the_webobject.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english(:filename) {
+autoextend
+ruby_favicon
+css_template1
+body_css_class 'mar0px s2px padt2px VERDANAs'
+body_css_style 'background-color: #d3d2d1;'
+font_size 'def'
+doc('mar0px pad0px s0_5em') {
+  h1 dot(106, 'marr8px')+
+     'Testing objectified html tags with the webobject',
+     'mart1px marb0_5em'
+  # ========================================================================= #
+  # === Progress bar
+  # ========================================================================= #
+  h2 'Progress bar'
+  p('pad1em mars2em wid25') {
+    oop_progress '25 / 100'
+  }
+}}