cyberweb 0.4.174 → 0.5.225

data/examples/advanced/random_glow_effects.cgi

@@ -0,0 +1,34 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/random_glow_effects.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+
+english('Random glow effects') {
+autoextend
+ruby_favicon
+template1 '
+
+.text_glow1 {
+  text-shadow: 0 0 85px rgb(25 219 255 / 75%), 0 0 32px rgb(65 120 255 / 24%);
+}
+
+'
+body_css_class 'mar0px s2px padt2px VERDANAs'
+body_css_style 'background-color: #d3d2d1;'
+font_size 'def'
+no_jquery
+
+doc('mar0px pad0px pad0_5em') {
+  h1 'Random glow effects',
+     'martb1px'
+  p('text_glow1') {
+    ee 'This is text_glow1.'
+  }
+  h2('This is text_glow1.','text_glow1')
+  div('text_glow1 mars2em border_1px_dotted_orange') {
+    e 'And this is in a div-element.'
+  }
+}}

data/examples/advanced/select_everything_example/select_everything_example.cgi

@@ -0,0 +1,25 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/select_everything_example/select_everything_example.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+
+english('No right click') {
+autoextend
+ruby_favicon
+template1
+body_css_class 'mar0px s2px padt2px VERDANAs'
+body_css_style 'background-color: #d3d2d1;'
+font_size 'def'
+
+doc('mar0px') {
+  div = Cyberweb::Objectified::HtmlTags::Div.new(
+    '<h2>Hello world!</h2>'
+  )
+  div.id = 'test_div'
+  div.css_class = 'wid50 bblack3'
+  div.on_clicked { :select_everything }
+  addnl(div.string?)
+}}

data/examples/advanced/simple_calculator.cgi

@@ -2,41 +2,33 @@
 # Encoding: UTF-8
 # frozen_string_literal: true
 # =========================================================================== #
-# http://localhost/DATA/PROGRAMMING_LANGUAGES/RUBY/src/cyberweb/examples/advanced/simple_calculator.cgi
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/simple_calculator.cgi
 # =========================================================================== #
 require 'cyberweb/autoinclude'
 
 english('Simple Calculator') {
 autoextend
 ruby_favicon
-css_style '
-
-.input_for_the_calculator 
-{
-  display: inline-block;
-  text-decoration: none;
-  color: #fff;
-  font-weight: bold;
-  background-color: #538fbe;
-  margin:10px ;
-  font-size: 16px;
-  border: 1px solid #2d6898;
-  width:50px;
-  text-align:center;
-  background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
-  box-shadow: 0px 3px 0px #2b638f, 0px 3px 10px rgba(0,0,0,.2);
+template1(
+'#screen_for_the_simple_javascript_calculator {
+  background-color: #fffc95;
+  color: black;
+  border: 2px solid black;
 }
+'+Cyberweb.return_css_for_the_simple_calculator(
+    '22px'   # Font size to use.
+    #'#' # Background colour to use.
+  )
+)
 
-
-'+TEMPLATE1
 body_css_class 'mar0px s2px padt2px VERDANAs'
 body_css_style 'background-color: #d3d2d1;'
 font_size 'def'
 
 doc('mar0px') {
   h1 'Simple Calculator - in JavaScript',
-      'martb1px'
-  div {
+     'martb1px'
+  div('mars1em') {
     add_simple_javascript_calculator
   }
 }}

data/examples/advanced/simple_form_example.cgi

@@ -2,16 +2,14 @@
 # Encoding: UTF-8
 # frozen_string_literal: true
 # =========================================================================== #
-# http://localhost/programming/ruby/src/cyberweb/test/simple_tests/simple_html_example.cgi
+# http://localhost/programming/ruby/src/cyberweb/examples/advanced/simple_form_example.cgi
 # =========================================================================== #
 require 'cyberweb/autoinclude'
 
 english('Simple Form Example') {
 autoextend
 ruby_favicon
-css_style '
-
-'+TEMPLATE1
+template1
 body_css_class 'mar0px s2px padt2px VERDANAs'
 body_css_style 'background-color: #d3d2d1;'
 font_size 'def'
@@ -19,8 +17,15 @@ font_size 'def'
 doc('mar0px') {
   h1 'Simple Form example',
      'martb1px'
-  div {
-    form('simple_form_example.cgi', :post) {
+  _ = params?
+  if _ and !_.empty?
+    h3 'Debugging: the params were:','darkblue'
+    pre _,
+       'mars2em'
+    e 'You did input: '+_['user_input'].first.to_s
+  end
+  div('FS2em') {
+    form('simple_form_example.cgi', :get) {
       input :text,'',
             's4px bblack2 BG_gold mar8px',
             'user_input',
@@ -29,10 +34,5 @@ doc('mar0px') {
       submit text: 'Test it (submit)' #, css_class: 'center'
       br
     }
-    _ = params?
-    if _ and !_.empty?
-      h3 'The params were:'
-      pre _
-    end
   }
 }}

data/examples/advanced/traffic_light/traffic_light.html

@@ -0,0 +1,163 @@
+<html>
+<head>
+<style>
+
+html {
+  background: linear-gradient(royalblue, darkblue);
+  padding: 40px;
+  width: 170px;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.protector{
+  background: transparent;
+  width: 180px;
+  height: 0;
+  position: absolute;
+  top: 20px;
+  left: -35px;
+  border-right: solid 30px transparent;
+  border-left: solid 30px transparent;
+  border-top: solid 90px #111;
+  border-radius: 10px;
+  z-index: -1;
+}
+
+.protector:nth-child(2){
+  top: 140px;
+}
+
+.protector:nth-child(3){
+  top: 260px;
+}
+
+.trafficlight{
+  background: #222;
+  background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
+  width: 170px;
+  height: 400px;
+  border-radius: 10px;
+  position: relative;
+  border: solid 5px #333;
+}
+
+
+.trafficlight:before{
+  background: #222;
+  background-image: radial-gradient(#444, #000);
+  content: "";
+  width: 170px;
+  height: 150px;
+  margin: 0 auto;
+  position: absolute;
+  top: -30px;
+  margin-left: 0px;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.trafficlight:after{
+  background: #222;
+  background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
+  content: "";
+  width: 75px;
+  height: 800px;
+  margin-left: 50px;
+  position: absolute;
+  top: 150px;
+  z-index: -1;
+}
+
+.red{
+  background: red;
+  background-image: radial-gradient(brown, transparent);
+  background-size: 5px 5px; 
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  position: absolute;
+  top: 20px;
+  left: 35px;
+  animation: 13s red infinite;
+  box-shadow: 
+    0 0 20px #111 inset,
+    0 0 10px red;
+}
+
+.yellow{
+  background: yellow;
+  background-image: radial-gradient(orange, transparent);
+  background-size: 5px 5px;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  position: absolute;
+  top: 145px;
+  left: 35px;
+  animation: 13s yellow infinite;
+  box-shadow: 
+    0 0 20px #111 inset,
+    0 0 10px yellow;
+}
+
+.green_traffic_light {
+  background: green;
+  background-image: radial-gradient(lime, transparent);
+  background-size: 5px 5px;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  position: absolute;
+  top: 270px;
+  left: 35px;
+  box-shadow: 
+    0 0 20px #111 inset,
+    0 0 10px lime;
+  animation: 13s green infinite;
+}
+
+@keyframes red{
+  0%{opacity: 1;}
+  20%{opacity: 1;}
+  40%{opacity: 1;}
+  60%{opacity: .1;}
+  80%{opacity: .1;}
+  100%{opacity: .1;}
+}
+
+@keyframes yellow{
+  0%{opacity: .1;}
+  20%{opacity: .1;}
+  40%{opacity: 1;}
+  50%{opacity: .1;}
+  60%{opacity: .1;}
+  80%{opacity: .1;}
+  100%{opacity: .1;}
+}
+
+@keyframes green{
+  0%{opacity: .1;}
+  20%{opacity: .1;}
+  40%{opacity: .1;}
+  60%{opacity: 1;}
+  80%{opacity: 1;}
+  85%{opacity: .1;}
+  90%{opacity: 1;}
+  95%{opacity: .1;}
+  100%{opacity: 1;}
+}
+
+</style>
+</head>
+<body>
+<div class="trafficlight">
+  <div class="protector"></div>
+  <div class="protector"></div>
+  <div class="protector"></div>
+  <div class="red"></div>
+  <div class="yellow"></div>
+  <div class="green_traffic_light"></div>
+</div>
+</body>
+</html>