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

cyberweb 0.4.174 → 0.5.225

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' }
     }
   }
 }}