RubyGems - cyberweb - Versions diffs - 0.12.35 - Mend

cyberweb 0.12.35

Files changed (1259) hide show

data/examples/css/how_to_style_the_title_attribute_of_a_href_tag/how_to_style_the_title_attribute_of_a_href_tag.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>How to Change the Style of a Tag Title Attribute?</title>
+<style>
+a[title]:hover::after {
+  content: attr(title);
+  font-size: 25px;
+  color: white;
+  background-color: blue;
+  padding: 5px;
+  border-radius: 5px;
+}
+</style>
+</head>
+<body>
+<h4>How to Change the Style of a Tag Title Attribute?</h4>
+<p>
+<a href="https://www.tutorialspoint.com" title="Visit tutorialspoint.com">tutorialspoint.com</a>  </p>
+</body>
+</html>

data/examples/css/important_style/important_style.html ADDED Viewed

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Position Absolute</title>
+</head>
+<style>
+h2 {
+  color: #0d23e0;
+}
+.special_h2 {
+  color: #d90d2f !important;
+}
+.green {
+  color: green;
+}
+.really_green {
+  color: green !important;
+}
+</style>
+<body>
+<h2>I am Heading #1</h2>
+<h2>I am Heading #2</h2>
+<h2>I am Heading #3</h2>
+<h2 class="special_h2">I am Heading #4</h2>
+<h2 class="green">I am Heading #5</h2>
+<h2 class="really_green">I am Heading #6</h2>
+</body>
+</html>

data/examples/css/keyboard_example/keyboard_example.html ADDED Viewed

@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>keyboard</title>
+<style>
+.container_for_the_keyboard {
+  margin: 100px 0 0 200px;
+}
+.row_for_the_keyboard {
+  width:  100%;
+  height: 60px;
+}
+.row_one,
+.row_two,
+.row_three,
+.row_four,
+.row_five {
+  margin: 10px 0 0 0;
+}
+button.for_the_keyboard {
+  color: black;
+  font-weight: 500;
+  width:  55px;
+  height: 55px;
+  border: none;
+  background: rgb(214, 214, 214);
+  box-shadow: 0 0 10px #9521f3, 0 0 40px #c600ee, 0 0 80px #f704f7;
+  font-size: 15px;
+  margin-left: 5px;
+  outline: none;
+  font-family: Arial, Helvetica, sans-serif;
+  border-radius: 20%;
+}
+button.for_the_keyboard:active {
+  box-shadow: 1px 1px 2px #fd0c99,
+              1px 1px 2px #ff00dd;
+}
+.print_key {
+  width: 85px !important;
+  border-radius: 10px !important;
+}
+.backspace_key {
+  width: 148px !important;
+  border-radius: 10px !important;
+}
+.tab_key {
+  width: 115px !important;
+  border-radius: 10px !important;
+}
+.slace_key {
+  width: 90px !important;
+  border: 10px !important;
+}
+.caps_lock_key {
+  width: 96px !important;
+  border-radius: 10px !important;
+}
+.enter_button {
+  width: 109px !important;
+  border-radius: 10px !important;
+}
+.shift_key {
+  width: 135px !important;
+  border-radius: 10px !important;
+}
+.space_key {
+  width: 398px !important;
+  border-radius: 10px !important;
+}
+.last_row {
+  width: 56px !important;
+  border-radius: 10px !important;
+}
+</style>
+</head>
+<body style="background: black;">
+<div class="container_for_the_keyboard">
+<div class="row_for_the_keyboard zero">
+ <button class="for_the_keyboard">Esc</button>
+ <button class="for_the_keyboard">F1</button>
+ <button class="for_the_keyboard">F2</button>
+ <button class="for_the_keyboard">F3</button>
+ <button class="for_the_keyboard">F4</button>
+ <button class="for_the_keyboard">F5</button>
+ <button class="for_the_keyboard">F6</button>
+ <button class="for_the_keyboard">F7</button>
+ <button class="for_the_keyboard">F8</button>
+ <button class="for_the_keyboard">F9</button>
+ <button class="for_the_keyboard">F10</button>
+ <button class="for_the_keyboard">F11</button>
+ <button class="for_the_keyboard">F12</button>
+ <button class="for_the_keyboard">Insect</button>
+ <button class="print_key for_the_keyboard">printScr</button>
+ <button class="for_the_keyboard">Delete</button>
+</div>
+<div class="row_for_the_keyboard row_one">
+ <button onclick="on_key_pressed_event('~')" class="for_the_keyboard">~</button>
+ <button onclick="on_key_pressed_event('1')" class="for_the_keyboard">1</button>
+ <button onclick="on_key_pressed_event('2')" class="for_the_keyboard">2</button>
+ <button onclick="on_key_pressed_event('3')" class="for_the_keyboard">3</button>
+ <button onclick="on_key_pressed_event('4')" class="for_the_keyboard">4</button>
+ <button onclick="on_key_pressed_event('5')" class="for_the_keyboard">5</button>
+ <button onclick="on_key_pressed_event('6')" class="for_the_keyboard">6</button>
+ <button onclick="on_key_pressed_event('7')" class="for_the_keyboard">7</button>
+ <button onclick="on_key_pressed_event('8')" class="for_the_keyboard">8</button>
+ <button onclick="on_key_pressed_event('9')" class="for_the_keyboard">9</button>
+ <button onclick="on_key_pressed_event('0')" class="for_the_keyboard">0</button>
+ <button onclick="on_key_pressed_event('-')" class="for_the_keyboard">-</button>
+ <button onclick="on_key_pressed_event('=')" class="for_the_keyboard">=</button>
+ <button onclick="on_key_pressed_event('backspace_key')" class="backspace_key for_the_keyboard">Backspace</button>
+ <button onclick="on_key_pressed_event('home_key')" class="for_the_keyboard">Home</button>
+</div>
+<div class="row_for_the_keyboard row_two">
+ <button onclick="on_key_pressed_event('tab_key')" class="tab_key for_the_keyboard">Tab</button>
+ <button onclick="on_key_pressed_event('q')" class="for_the_keyboard">Q</button>
+ <button onclick="on_key_pressed_event('w')" class="for_the_keyboard">W</button>
+ <button onclick="on_key_pressed_event('e')" class="for_the_keyboard">E</button>
+ <button onclick="on_key_pressed_event('r')" class="for_the_keyboard">R</button>
+ <button onclick="on_key_pressed_event('t')" class="for_the_keyboard">T</button>
+ <button onclick="on_key_pressed_event('y')" class="for_the_keyboard">Y</button>
+ <button onclick="on_key_pressed_event('u')" class="for_the_keyboard">U</button>
+ <button onclick="on_key_pressed_event('i')" class="for_the_keyboard">I</button>
+ <button onclick="on_key_pressed_event('o')" class="for_the_keyboard">O</button>
+ <button onclick="on_key_pressed_event('p')" class="for_the_keyboard">P</button>
+ <button onclick="on_key_pressed_event('{')" class="for_the_keyboard">{</button>
+ <button onclick="on_key_pressed_event('}')" class="for_the_keyboard">}</button>
+ <button onclick="on_key_pressed_event('\\')" class="slace_key for_the_keyboard">\</button>
+ <button onclick="on_key_pressed_event('page_up')" class="for_the_keyboard">Pg Up</button>
+</div>
+<div class="row_for_the_keyboard row_three">
+ <button onclick="on_key_pressed_event('caps_lock')" class="caps_lock_key for_the_keyboard">Caps Lock</button>
+ <button onclick="on_key_pressed_event('a')" class="for_the_keyboard">A</button>
+ <button onclick="on_key_pressed_event('s')" class="for_the_keyboard">S</button>
+ <button onclick="on_key_pressed_event('d')" class="for_the_keyboard">D</button>
+ <button onclick="on_key_pressed_event('f')" class="for_the_keyboard">F</button>
+ <button onclick="on_key_pressed_event('g')" class="for_the_keyboard">G</button>
+ <button onclick="on_key_pressed_event('h')" class="for_the_keyboard">H</button>
+ <button onclick="on_key_pressed_event('i')" class="for_the_keyboard">I</button>
+ <button onclick="on_key_pressed_event('j')" class="for_the_keyboard">J</button>
+ <button onclick="on_key_pressed_event('k')" class="for_the_keyboard">K</button>
+ <button onclick="on_key_pressed_event('l')" class="for_the_keyboard">L</button>
+ <button onclick="on_key_pressed_event(';')" class="for_the_keyboard">;</button>
+ <button onclick="on_key_pressed_event('#')" class="for_the_keyboard">#</button>
+ <button onclick="on_key_pressed_event('enter_key')" class="enter_button for_the_keyboard">Enter</button>
+ <button onclick="on_key_pressed_event('page_down')" class="for_the_keyboard">Pg Dn</button>
+</div>
+<div class="row_for_the_keyboard row_four">
+ <button onclick="on_key_pressed_event('shift')" class="shift_key for_the_keyboard">Shift</button>
+ <button onclick="on_key_pressed_event('z')" class="for_the_keyboard">Z</button>
+ <button onclick="on_key_pressed_event('x')" class="for_the_keyboard">X</button>
+ <button onclick="on_key_pressed_event('c')" class="for_the_keyboard">C</button>
+ <button onclick="on_key_pressed_event('v')" class="for_the_keyboard">V</button>
+ <button onclick="on_key_pressed_event('b')" class="for_the_keyboard">B</button>
+ <button onclick="on_key_pressed_event('n')" class="for_the_keyboard">N</button>
+ <button onclick="on_key_pressed_event('m')" class="for_the_keyboard">M</button>
+ <button onclick="on_key_pressed_event(',')" class="for_the_keyboard">,</button>
+ <button onclick="on_key_pressed_event('.')" class="for_the_keyboard">.</button>
+ <button onclick="on_key_pressed_event('=')" class="for_the_keyboard">?</button>
+ <button onclick="on_key_pressed_event('Shift')" class="shift_key for_the_keyboard">Shift</button>
+ <button onclick="on_key_pressed_event('↑')" class="for_the_keyboard">↑</button>
+ <button onclick="on_key_pressed_event('End')" class="for_the_keyboard">End</button>
+</div>
+<div class="row_for_the_keyboard row_five">
+ <button onclick="on_key_pressed_event('ctrl_key')"class="last_row for_the_keyboard">Ctrl</button>
+ <button onclick="on_key_pressed_event('function_key')"class="last_row for_the_keyboard">Fn</button>
+ <button onclick="on_key_pressed_event('win_key')"class="last_row for_the_keyboard">Win</button>
+ <button onclick="on_key_pressed_event('alt_key')"class="last_row for_the_keyboard">Alt</button>
+ <button onclick="on_key_pressed_event('space_key')" class="for_the_keyboard space_key">space</button>
+ <button onclick="on_key_pressed_event('alt_key')" class="last_row for_the_keyboard">Alt</button>
+ <button onclick="on_key_pressed_event('fn_key')" class="last_row for_the_keyboard">Fn</button>
+ <button class="last_row for_the_keyboard">Ctrl</button>
+ <button class="last_row for_the_keyboard">←</button>
+ <button class="last_row for_the_keyboard">↓</button>
+ <button class="last_row for_the_keyboard">→</button>
+</div>
+</div>
+<div style="margin-left: 8em">
+ <h2>This textarea tests the above keyboard</h2>
+ <label for="textarea_id">Textarea:</label>
+ <textarea id="textarea_id" rows="12" cols="80" style="background-color: #d3d3d3">
+ </textarea>
+</div>
+<script>
+function on_key_pressed_event(i) {
+  console.log(i)
+  old_value = document.getElementById('textarea_id').value
+  switch (i) {
+    case 'enter_key':
+      i = "\n"
+      break
+    case 'space_key':
+      i = ' '
+      break
+    case 'shift',
+         'caps_lock',
+         'shift':
+      i = ''
+      break
+    case 'backspace_key':
+      i = ''
+      old_value = old_value.slice(0, -1)
+      break
+  }
+  document.getElementById('textarea_id').value = old_value+i
+  /*alert(i);*/
+}
+</script>
+</body>
+</html>

data/examples/css/landing_on_mars_animation/landing_on_mars_animation.html ADDED Viewed

@@ -0,0 +1,374 @@
+<html>
+<head>
+<title>Landing on Mars animation</title>
+<style>
+.space {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #435d70;
+  overflow: hidden;
+}
+.space .mars {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+}
+.space .mars .tentacle {
+  position: absolute;
+  top: -60px;
+  right: -80px;
+  z-index: 1;
+  height: 70px;
+  width: 70px;
+  box-sizing: border-box;
+  border-radius: 100%;
+  border-left: 15px solid #1aae1e;
+  transform: rotate(-30deg);
+  animation: tentacle 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
+}
+ .space .mars .flag {
+  position: absolute;
+  height: 17px;
+  width: 15px;
+  top: -57px;
+  left: -1px;
+  animation: flag-pole 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
+}
+ .space .mars .flag:before {
+  content: "";
+  position: absolute;
+  height: 17px;
+  width: 2px;
+  background: #eee;
+}
+ .space .mars .flag:after {
+  content: "";
+  position: absolute;
+  height: 10px;
+  width: 14px;
+  left: 2px;
+  top: 0;
+  background: #aaa;
+  animation: flag-unfurl 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
+}
+ .space .mars .flag .small-tentacle {
+  position: absolute;
+  left: -16px;
+  top: 3px;
+  height: 50px;
+  width: 50px;
+  border-left: 10px solid #1aae1e;
+  border-radius: 100%;
+  transform: rotate(25deg);
+  animation: small-tentacle 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
+  z-index: 2;
+}
+ .space .mars:before {
+  content: "";
+  position: absolute;
+  top: 80px;
+  left: -30px;
+  height: 10px;
+  width: 60px;
+  background: rgba(0, 0, 0, .2);
+  background: #374d5c;
+  border-radius: 100%;
+}
+ .space .mars .planet {
+  box-sizing: border-box;
+  position: absolute;
+  border-radius: 100%;
+  height: 120px;
+  width: 120px;
+  overflow: hidden;
+  margin-left: -60px;
+  margin-top: -60px;
+  z-index: 2;
+}
+ .space .mars .planet .surface {
+  position: absolute;
+  border-radius: 100%;
+  height: 140%;
+  width: 140%;
+  top: -30%;
+  right: -10%;
+  box-sizing: border-box;
+  border: 30px solid rgba(0, 0, 0, .15);
+  background: #ff5f40;
+}
+ .space .mars .planet .crater1, .space .mars .planet .crater2, .space .mars .planet .crater3 {
+  position: absolute;
+  border-radius: 100%;
+  background: rgba(0, 0, 0, .15);
+  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2);
+}
+ .space .mars .planet .crater1 {
+  height: 20px;
+  width: 20px;
+  top: 32%;
+  left: 17%;
+}
+ .space .mars .planet .crater2 {
+  height: 10px;
+  width: 10px;
+  top: 26%;
+  left: 55%;
+  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .2);
+}
+ .space .mars .planet .crater3 {
+  height: 10px;
+  width: 10px;
+  top: 60%;
+  left: 40%;
+  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .2);
+}
+ .space .ship {
+  position: absolute;
+  right: 50%;
+  top: 50%;
+  margin-top: -55px;
+  margin-right: -55px;
+  height: 22px;
+  background: rgba(0, 0, 0, .1);
+  transform-origin: 0% 100% 0;
+  z-index: 1;
+  animation: ship 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
+}
+ .space .ship .ship-rotate {
+  position: absolute;
+  height: 22px;
+  transform: rotate(-110deg);
+  animation: ship-rotate 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
+}
+ .space .ship .pod {
+  position: absolute;
+  top: 0;
+  left: -8px;
+  height: 16px;
+  width: 16px;
+  background: #eee;
+  border-radius: 100% 0 100% 0;
+  transform: rotate(-45deg);
+}
+ .space .ship .fuselage {
+  position: absolute;
+  top: 14px;
+  left: -6px;
+  height: 8px;
+  width: 12px;
+  background: #eee;
+  border-radius: 100% 100% 0 0;
+}
+ .space .ship .fuselage:after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 100%;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 6px solid red;
+}
+ .space .ship-shadow {
+  position: absolute;
+  right: 10%;
+  top: 50%;
+  margin-right: -28px;
+  margin-top: 83px;
+  height: 4px;
+  width: 16px;
+  background: #374d5c;
+  border-radius: 100%;
+  animation: ship-shadow 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
+}
+@keyframes small-tentacle {
+  0% {
+   transform: rotate(-60deg);
+  }
+  86% {
+   transform: rotate(-60deg);
+  }
+  89% {
+   transform: rotate(10deg);
+  }
+  100% {
+   transform: rotate(10deg);
+  }
+}
+@keyframes tentacle {
+  0% {
+   transform: rotate(-30deg);
+  }
+  75% {
+   transform: rotate(-30deg);
+  }
+  80% {
+   transform: rotate(-165deg) translate(6px, 8px);
+  }
+  82.5% {
+   transform: rotate(-165deg) translate(28px, -17px);
+  }
+  100% {
+   transform: rotate(-165deg) translate(35px, -22px);
+  }
+}
+@keyframes ship {
+  0% {
+   right: -10%;
+   top: -10%;
+   margin-top: -55px;
+   margin-right: -55px;
+  }
+  40% {
+   right: 50%;
+   top: 50%;
+  }
+  79.5% {
+   margin-top: -55px;
+   margin-right: -55px;
+  }
+  84% {
+   margin-top: -20px;
+   margin-right: 0px;
+  }
+  100% {
+   right: 50%;
+   top: 50%;
+   margin-top: 0px;
+   margin-right: 0px;
+  }
+}
+@keyframes ship-rotate {
+  0% {
+   transform: rotate(-110deg);
+  }
+  20% {
+   transform: rotate(-110deg);
+  }
+  34% {
+   transform: rotate(47deg);
+  }
+  79% {
+   transform: rotate(47deg);
+  }
+  100% {
+   transform: rotate(47deg);
+  }
+}
+@keyframes ship-shadow {
+  0% {
+   right: -10%;
+   transform: scale(1.4, 1);
+   opacity: 0.3;
+  }
+  40% {
+   right: 50%;
+   transform: scale(0.75, 1);
+   opacity: 1;
+  }
+  100% {
+   right: 50%;
+  }
+}
+@keyframes planet-bump {
+  0% {
+    margin-left: 0;
+  }
+  39% {
+   margin-left: 0;
+  }
+  40% {
+   margin-left: -1px;
+  }
+  40.5% {
+   margin-left: 1px;
+  }
+  41% {
+   margin-left: 0;
+  }
+  100% {
+   margin-left: 0;
+  }
+}
+@keyframes flag-pole {
+  0% {
+   top: -57px;
+  }
+  48% {
+   top: -57px;
+  }
+  54% {
+   top: -77px;
+  }
+  90% {
+   top: -77px;
+  }
+  92% {
+   top: -57px;
+  }
+  100% {
+   top: -57px;
+  }
+}
+@keyframes flag-unfurl {
+  0% {
+   width: 0;
+  }
+  55% {
+   width: 0;
+  }
+  60% {
+   width: 14px;
+  }
+  90% {
+   width: 14px;
+  }
+  100% {
+   width: 14px;
+  }
+}
+</style>
+</head>
+<body>
+<div class="space">
+<div class="ship">
+<div class="ship-rotate">
+<div class="pod"></div>
+<div class="fuselage"></div>
+</div>
+</div>
+<div class="ship-shadow"></div>
+<div class="mars">
+<div class="tentacle"></div>
+<div class="flag">
+<div class="small-tentacle"></div>
+</div>
+<div class="planet">
+<div class="surface"></div>
+<div class="crater1"></div>
+<div class="crater2"></div>
+<div class="crater3"></div>
+</div>
+</div>
+<div class="test"></div>
+</div>
+</body>
+</html>

data/examples/css/letter_spacing_example.cgi ADDED Viewed

@@ -0,0 +1,40 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/css/letter_spacing_example.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english('Letter spacing example') {
+ruby_favicon
+css_template1
+body_css_class 'mar0px s2px padt2px VERDANAs BG_Black White'
+font_size 'def'
+no_jquery
+doc('mar0px pad0px s0_5em') {
+  div('mart1px',
+      'css_letter_spacing',
+      'color:lightblue'){
+    h2 dot105?+'Letter Spacing Example',
+       'martb1px'
+    div {
+      e '<b>letter-spacing</b> can be used to decrease or increase
+      the distance between texts within a given text.'
+      br
+      div(css_style: 'letter-spacing: 1px')   { ee 'Letter Spacing with 1px' }
+      div(css_style: 'letter-spacing: 2px')   { ee 'Letter Spacing with 2px' }
+      div(css_style: 'letter-spacing: 3px')   { ee 'Letter Spacing with 3px' }
+      div(css_style: 'letter-spacing: 4px')   { ee 'Letter Spacing with 4px' }
+      div(css_style: 'letter-spacing: 5px')   { ee 'Letter Spacing with 5px' }
+      div(css_style: 'letter-spacing: 6px')   { ee 'Letter Spacing with 6px' }
+      div(css_style: 'letter-spacing: 7px')   { ee 'Letter Spacing with 7px' }
+      div(css_style: 'letter-spacing: 8px')   { ee 'Letter Spacing with 8px' }
+      div(css_style: 'letter-spacing: 9px')   { ee 'Letter Spacing with 9px' }
+      div(css_style: 'letter-spacing: 10px')  { ee 'Letter Spacing with 10px' }
+      div(css_style: 'letter-spacing: 1em')   { ee 'Letter Spacing with 1em' }
+      div(css_style: 'letter-spacing: -2px')  { ee 'Letter Spacing with -2px' }
+    }
+  }
+}}