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/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 CHANGED Viewed

@@ -2,35 +2,39 @@
 # Encoding: UTF-8
 # frozen_string_literal: true
 # =========================================================================== #
-# http://localhost/DATA/PROGRAMMING_LANGUAGES/RUBY/src/cyberweb/examples/css/letter_spacing_example.cgi
+# http://localhost/programming/ruby/src/cyberweb/examples/css/letter_spacing_example.cgi
 # =========================================================================== #
 require 'cyberweb/autoinclude'
-english {
-title 'letter spacing example'
-favicon :ruby_favicon
-css_style :template1
+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 'Letter Spacing Example',
+    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: 1em')  { ee 'Letter Spacing with 1em' }
-      div(css_style: 'letter-spacing: -2px') { ee 'Letter Spacing with -2px' }
+      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' }
     }
   }
 }}