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/animated_windmill/animated_windmill.html ADDED Viewed

@@ -0,0 +1,468 @@
+<html>
+<head>
+<title>Animated Windmill</title>
+</head>
+<style>
+:root {
+  --sun-color: #FFBB10;
+  --sky-color-1: #FBD788;
+  --sky-color-2: #FFEFC0;
+  --sky-color-3: #E8BF62;
+  --land-color-1: #62B144;
+  --land-color-2: #3D9339;
+  --grass-color-1: #37913B;
+  --grass-color-2: #8BC435;
+  --brick-color-1: #D58256;
+  --brick-color-2: #CD7555;
+  --wood-color-1: #623B39;
+  --wood-color-2: #472A2A;
+  --wood-color-3: #2E1D1D;
+  --wood-color-4: #000000;
+  --window-color-1: #E3E1E1;
+  --window-color-2: #000000;
+  --window-color-3: #FFFFFF;
+  --mill-top-color: #C0C0C0;
+  --mill-bottom-color-1: #8F3C31;
+  --mill-bottom-color-2: #9C4B3D;
+  --dome-color: #FFFFFF;
+  --blade-color-1: #FD903D;
+  --blade-color-2: #BE684F;
+  --window-move-time: 2s;
+  --land-slide-time: 2s;
+  --blades-spin-time: 6s;
+}
+@keyframes window-move {
+  0% {
+    top: 47%;
+  }
+  100% {
+    top: 53%;
+  }
+}
+@keyframes window-bottom-move {
+  0% {
+    transform: scale(1);
+    top: 0px;
+  }
+  100% {
+    transform: scale(1.1);
+    top: -10px;
+  }
+}
+@keyframes blades-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes land-slide {
+  0% {
+    transform: translateX(-50%) scale(1.0);
+  }
+  100% {
+    transform: translateX(-50%) scale(1.0);
+  }
+}
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+* {
+  position: absolute;
+  box-sizing: border-box;
+}
+*::before, *::after {
+  content: '';
+  position: inherit;
+  box-sizing: inherit;
+}
+.window {
+  width: 540px;
+  height: 540px;
+  left: 50%;
+  top: 50%;
+  transform-origin: 50% 50%;
+  transform: translate(-50%, -50%) scale(1);
+  border-radius: 50%;
+  background: radial-gradient(farthest-side at 135px 340px,
+                var(--sky-color-2) 135px, transparent 135px
+              ),
+              radial-gradient(farthest-side at 405px 300px,
+                var(--sky-color-1) 140px, transparent 135px),
+                linear-gradient(to bottom, var(--sky-color-1) 320px,
+                var(--sky-color-2) 320px
+              );
+  animation: window-move var(--window-move-time) ease-in-out infinite alternate;
+}
+.window::before {
+  bottom: 0;
+  left: 0;
+  top: 0;
+  right: 0;
+  background: linear-gradient(to bottom, transparent 490px, var(--sky-color-3) 490px, var(--sky-color-3) 510px, var(--sky-color-1) 510px);
+  border-radius: 50%;
+  animation: window-bottom-move var(--window-move-time) ease-in-out infinite alternate;
+}
+.land {
+  width: 460px;
+  height: 40px;
+  background: var(--land-color-1);
+  bottom: 40px;
+  left:  50%;
+  transform-origin: 50% 0%;
+  transform: translateX(-50%) scale(1);
+  border-radius: 20px 20px 5px 5px;
+  border-bottom: 5px solid var(--land-color-2);
+  z-index: 2;
+  animation: land-slide var(--land-slide-time) ease-in-out infinite alternate;
+}
+/*
+ * This is the grass near the bottom.
+ */
+.grass {
+  background: transparent;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+/*
+ * This is the grass close to the bottom of the windmill.
+ */
+.grass-1 {
+  z-index: 1;
+  width: 60px;
+  height: 30px;
+  border-radius: 30px 30px 0 0;
+}
+.grass-2 {
+  z-index: 2;
+  width: 40px;
+  height: 20px;
+  border-radius: 20px 20px 0 0;
+}
+.grass-1 {
+  box-shadow: -90px 0 0 0 var(--grass-color-1),
+              -30px 4px 0 -4px var(--grass-color-1), -165px 8px 0 -8px var(--grass-color-1), 90px 0 0 0 var(--grass-color-1), 140px 4px 0 -4px var(--grass-color-1), 165px 8px 0 -8px var(--grass-color-1);
+}
+.grass-2 {
+  box-shadow: -90px 0 0 0 var(--grass-color-2),
+              -60px 2px 0 -2px var(--grass-color-2), -35px 5px 0 -5px var(--grass-color-2), 90px 0 0 0 var(--grass-color-2), 60px 2px 0 -2px var(--grass-color-2), 35px 5px 0 -5px var(--grass-color-2);
+}
+.windmill {
+  width: 180px;
+  height: 280px;
+  left: 50%;
+  bottom: 80px;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+.windmill::before {
+  top: 0px;
+  background: var(--mill-top-color);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 130px;
+  height: 30px;
+  border-radius: 0 0 20px 20Array/0Array 0 45px 45px;
+}
+.windmill::after {
+  bottom: 0px;
+  background: linear-gradient(to bottom,
+                var(--mill-bottom-color-1) 25px,
+                var(--mill-bottom-color-2) 25px,
+                var(--mill-bottom-color-2) 45px,
+                var(--mill-bottom-color-1) 45px
+              );
+  width: 100%;
+  height: 50px;
+}
+/*
+ * This will position the windmill-windows properly.
+ */
+.windmill-window {
+  left: 50%;
+  top:  38%;
+  transform: translate(-50%, -50%) scale(0.85, 0.95);
+  width: 8px;
+  height: 8px;
+  background: transparent;
+  box-shadow: 5px 25px 0 0 var(--window-color-2),
+             -5px 25px 0 0 var(--window-color-2),
+              5px 35px 0 0 var(--window-color-2),
+             -5px 35px 0 0 var(--window-color-2),
+              0 30px 0 5px var(--window-color-1),
+              0 30px 0 8px var(--window-color-3),
+              5px -25px 0 0 var(--window-color-2),
+             -5px -25px 0 0 var(--window-color-2),
+              5px -35px 0 0 var(--window-color-2),
+             -5px -35px 0 0 var(--window-color-2),
+              0 -30px 0 5px var(--window-color-1),
+              0 -30px 0 8px var(--window-color-3);
+}
+/*
+ * The pillar determines how high the windmill is.
+ */
+.pillar {
+  background-image: linear-gradient(335deg,
+                      var(--brick-color-2) 6px, transparent 6px
+                    ),
+                    linear-gradient(155deg,
+                      var(--brick-color-2) 6px, transparent 6px
+                    ),
+                    linear-gradient(335deg, var(--brick-color-2) 6px, transparent 6px), linear-gradient(155deg, var(--brick-color-2) 6px, transparent 6px);
+  background-size: 15px 15px;
+  background-position: 0 0, 2px 9px, 7px 8px, 9px 1px;
+  background-color: var(--brick-color-1);
+  width: 100%;
+  height: 200px;
+  bottom: 50px;
+  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0 100%);
+  box-shadow: inset 0 4px 0 0 var(--wood-color-1);
+}
+/*
+ * The dome is ~ near the top of the windmill.
+ */
+.dome {
+  width: 110px;
+  height: 65px;
+  border-radius: 55px 55px 0 0;
+  background: var(--dome-color);
+  left: 50%;
+  top: -65px;
+  transform: translateX(-50%);
+}
+.dome-window {
+  width: 24px;
+  height: 26px;
+  border-radius: 12px 12px 0 0;
+  background: linear-gradient(to right, transparent 8px, var(--window-color-1) 8px, var(--window-color-1) 10px, transparent 10px), linear-gradient(to bottom, transparent 9px, var(--window-color-1) 9px, var(--window-color-1) 11px, transparent 11px), var(--window-color-2);
+  border: 3px solid var(--window-color-1);
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.dome-window::before {
+  bottom: -4px;
+  width: 32px;
+  height: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--window-color-1);
+  box-shadow: 0 2px 0 0 var(--wood-color-1);
+}
+.blades {
+  z-index: -1;
+  left: 50%;
+  top: -30px;
+  transform: translate(-50%, -50%) rotate(40deg);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--wood-color-3);
+  animation: blades-spin var(--blades-spin-time) linear infinite;
+}
+.blade {
+  height: 60px;
+  width: 200px;
+  background: var(--blade-color-1);
+  box-shadow: 0 5px 0 0 var(--blade-color-2), 0 -5px 0 0 var(--blade-color-2);
+  transform-origin: -50px 15px;
+  top: -5px;
+  left: 60px;
+  transform: rotate(0deg);
+}
+.blade::before {
+  height: 8px;
+  width: 260px;
+  border-radius: 5px;
+  background: var(--wood-color-2);
+  top: 11px;
+  left: -55px;
+}
+.blade::after {
+  height: 75px;
+  width: 4px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 2px;
+  background: var(--wood-color-1);
+  box-shadow: -33px 0 0 0 var(--wood-color-1), -67px 0 0 0 var(--wood-color-1), -100px 0 0 0 var(--wood-color-1), 33px 0 0 0 var(--wood-color-1), 67px 0 0 0 var(--wood-color-1), 100px 0 0 0 var(--wood-color-1);
+}
+.blade-1 {
+  transform: rotate(0deg);
+}
+.blade-2 {
+  transform: rotate(90deg);
+}
+.blade-3 {
+  transform: rotate(180deg);
+}
+.blade-4 {
+  transform: rotate(270deg);
+}
+.ramp {
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 240px;
+  height: 35px;
+  background: linear-gradient(to bottom, transparent 10px, var(--wood-color-4) 10px, var(--wood-color-4) 15px, transparent 15px), linear-gradient(to right, var(--wood-color-1) 32%, var(--wood-color-2) 32%, var(--wood-color-2) 66%, var(--wood-color-3) 66%);
+  z-index: 2;
+}
+.ramp::before {
+  height: 5px;
+  width: 20px;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: transparent;
+  box-shadow: -115px 0 0 0 var(--sky-color-2), 115px 0 0 0 var(--sky-color-1);
+}
+.grill {
+  height: 25px;
+  width: 6px;
+  top: -25px;
+  background: transparent;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 2px 2px 0 0;
+  box-shadow: -100px 0 0 0 var(--wood-color-1), -60px 0 0 0 var(--wood-color-1), -20px 0 0 0 var(--wood-color-2), 20px 0 0 0 var(--wood-color-2), 60px 0 0 0 var(--wood-color-3), 100px 0 0 0 var(--wood-color-3);
+}
+/*
+ * This is the upper bar of the base platform in front of the windmill.
+ */
+.grill::before {
+  width: 240px;
+  height: 6px;
+  top: 6px;
+  background: linear-gradient(to right,
+                var(--wood-color-2) 33%,
+                var(--wood-color-3) 33%,
+                var(--wood-color-3) 66%,
+                var(--wood-color-4) 66%
+              );
+  left: 50%;
+  transform: translateX(-50%);
+}
+.hook {
+  width: 8px;
+  height: 24px;
+  bottom: -24px;
+  transform-origin: 0 0;
+}
+.hook::before {
+  background: var(--mill-bottom-color-1);
+  width: 8px;
+  height: 10px;
+  bottom: 0;
+  transform: skew(-50deg);
+}
+.hook::after {
+  background: inherit;
+  width: 8px;
+  height: 10px;
+  bottom: 0;
+}
+.hook-1 {
+  background: var(--wood-color-1);
+  left: 2%;
+  transform: skew(50deg);
+}
+.hook-1::before {
+  right: -5px;
+  transform: skew(-50deg);
+}
+.hook-2 {
+  background: var(--wood-color-2);
+  left: 33.5%;
+  transform: skew(25deg);
+}
+.hook-2::before {
+  right: -2.5px;
+  transform: skew(-25deg);
+}
+.hook-3 {
+  background: var(--wood-color-3);
+  left: 64%;
+  transform: skew(-25deg);
+}
+.hook-3::before {
+  right: 2.5px;
+  transform: skew(25deg);
+}
+.hook-4 {
+  background: var(--wood-color-4);
+  left: 95.5%;
+  transform: skew(-50deg);
+}
+.hook-4::before {
+  right: 5px;
+  transform: skew(50deg);
+}
+.sun {
+  right: 30px;
+  top: 55px;
+  width:  180px;
+  height: 180px;
+  background: var(--sun-color);
+  border-radius: 50%;
+}
+@media (max-width: 800px) {
+  .window {
+    transform: translate(-50%, -50%) scale(0.75);
+  }
+}
+@media (max-width: 360px) {
+  .window {
+    transform: translate(-50%, -50%) scale(0.5);
+  }
+}
+@media (min-width: 1920px) {
+  .window {
+    transform: translate(-50%, -50%) scale(1.25);
+  }
+}
+</style>
+<body>
+<div class="window">
+<div class="windmill">
+<div class="pillar"></div>
+<div class="dome">
+<div class="dome-window"></div>
+</div>
+<div class="windmill-window"></div>
+<div class="blades">
+<div class="blade blade-1"></div>
+<div class="blade blade-2"></div>
+<div class="blade blade-3"></div>
+<div class="blade blade-4"></div>
+</div>
+<div class="ramp">
+<div class="grill"></div>
+<div class="hook hook-1"></div>
+<div class="hook hook-2"></div>
+<div class="hook hook-3"></div>
+<div class="hook hook-4"></div>
+</div>
+</div>
+<div class="sun"></div>
+<div class="land"></div>
+<div class="grass grass-1"></div>
+<div class="grass grass-2"></div>
+</div>
+</body>
+</html>

data/examples/advanced/delayed_update_of_the_body_via_javascript.cgi CHANGED Viewed

@@ -9,16 +9,17 @@ require 'cyberweb/autoinclude'
 english('Delayed update of the body via JavaScript') {
 autoextend
 ruby_favicon
-css_style :template1
+css_template1
 body_css_class 'mar0px s2px padt2px VERDANAs'
 body_css_style 'background-color: #d3d2d1;'
 font_size 'def'
+no_jquery
-doc('mar0px pad0px s0_5em') {
+doc('mar0px pad0px pad0_5em') {
   h1 'Delayed Update of the body via javascript',
      'martb1px'
   p {
-    e 'This is regular content.'
+    e 'This is regular content. It will soon be replaced, in 3 seconds ...'
   }
 script '
@@ -27,11 +28,13 @@ function set_body_content(i) {
 }
 async function do_change_the_body_content(input) {
-  await new Promise(r => setTimeout(r, 2000));
+  await new Promise(r => setTimeout(r, 3000));
   set_body_content(input);
 }
-do_change_the_body_content("This is new content.<br>");
+do_change_the_body_content(
+  "<h1 class=\"martb1px\">Delayed Update of the body via javascript</h1><p>This is new content.<br></p>"
+);
 '

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

@@ -0,0 +1,36 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/draw_circle/draw_circle.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')+
+     'Draw a circle example',
+     'mart1px marb0_5em'
+  draw_circle(
+    width: 100, height: 200, background_color: :steelblue, border_radius: '30%'
+  )
+  draw_circle(
+    width:  50,
+    height: 50,
+    background_color: :darkgreen,
+    border_radius: '50%'
+  )
+  draw_circle(
+    width:  40,
+    height: 40,
+    background_color: :tomato,
+    border_radius: '40%'
+  )
+}}

data/examples/advanced/drop_shadow_examples.cgi ADDED Viewed

@@ -0,0 +1,37 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/drop_shadow_examples.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english('Drop-shadow examples') {
+autoextend
+ruby_favicon
+css_style '
+'+TEMPLATE1
+body_css_class 'mar0px s2px padt2px VERDANAs'
+body_css_style 'background-color: #d3d2d1;'
+font_size 'def'
+no_jquery
+doc('mar0px pad0px pad0_5em BG_Black') {
+  h1 'Drop shadow examples',
+     'martb1px'
+  # ========================================================================= #
+  # The next line could be used for debugging:
+  #
+  #   html_colours?.each {|this_colour| p(this_colour) { e 'Hello world in '+this_colour.to_s+'!' } }
+  #
+  # ========================================================================= #
+  div('pad10px mar0px BG_White') {
+    html_colours?.each {|this_colour|
+      p('drop_shadow_'+this_colour.to_s) {
+        e 'Hello world in '+this_colour.to_s+', via:
+        drop_shadow_'+this_colour.to_s
+      }
+    }
+  }
+}}

data/examples/advanced/games/snake/food.png ADDED Viewed

Binary file

data/examples/advanced/games/snake/ground.png ADDED Viewed

Binary file

data/examples/advanced/games/snake/snake.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/games/snake/snake.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english('The snake game') {
+created_on '22.04.2022' # Friday.
+ruby_favicon
+main_css '
+canvas {
+  display: block;
+  margin: 0 auto;
+}
+'
+body_css_class 'pad0px mar0px'
+body_css_style ''
+font_size ''
+no_jquery
+doc('mar0px pad0px center BG_Black',
+    '',
+    'min-height: 900px') {
+  ee '<canvas id="snake_canvas" width="608" height="608"></canvas>'
+  ejavascript :snake
+}}

data/examples/advanced/games/tetris/tetris.cgi ADDED Viewed

@@ -0,0 +1,7 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/games/tetris/tetris.cgi
+# =========================================================================== #
+require 'cyberweb/evaluate_from_the_same_named_file_then_serve'

data/examples/advanced/games/tetris/tetris.rb ADDED Viewed

@@ -0,0 +1,17 @@
+english('Tetris') {
+autoextend
+ruby_favicon
+css_style return_css_for_tetris
+body_css_class 'mar0px s0px padt2px VERDANAs'
+body_css_style 'background-color: #d3d2d1;'
+font_size 'def'
+no_jquery
+doc('mar0px pad0px') {
+  h1 'Tetris',
+     'martb1px s0_8em center royalblue drop_caps',
+     '',
+     'font-size: 4em'
+  ee '<canvas id="tetris"></canvas>'
+  ejavascript :tetris
+}}

data/examples/advanced/games/tetris/tetris.sinatra ADDED Viewed

@@ -0,0 +1,58 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/games/tetris/tetris.sinatra
+# =========================================================================== #
+require 'cyberweb/and_sinatra_base.rb'
+module Roebe
+class SinatraTetris < ::Sinatra::Base # === Roebe::SinatraTetris
+  # ========================================================================= #
+  # === USE_THIS_PORT
+  # ========================================================================= #
+  if ENV['SINATRA_PORT']
+    USE_THIS_PORT = ENV['SINATRA_PORT'].to_s.dup
+  else
+    USE_THIS_PORT = '4567'
+  end
+  set :port, USE_THIS_PORT
+  # ========================================================================= #
+  # === initialize
+  # ========================================================================= #
+  def initialize(shall_we_open_via_the_browser = true)
+    super()
+    if shall_we_open_via_the_browser
+      target = "http://localhost:#{USE_THIS_PORT}/"
+      Cyberweb.try_to_open_this_URL_via_the_browser(target, USE_THIS_PORT)
+    end
+  end
+  # ========================================================================= #
+  # === /
+  #
+  # Usage Example:
+  #
+  #   http://localhost:4567/
+  #
+  # ========================================================================= #
+  get('/'){
+    return Cyberweb::WebObject.evaluate_from_the_same_named_file_then_serve(:do_not_display_anything)
+  }
+  # ========================================================================= #
+  # === Roebe::English.start_sinatra_interface
+  # ========================================================================= #
+  def self.start_sinatra_interface
+    ::Roebe::SinatraTetris.run!
+  end
+end; end
+if __FILE__ == $PROGRAM_NAME
+  Roebe::SinatraTetris.start_sinatra_interface
+end