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

@@ -0,0 +1,112 @@
+<html>
+<head>
+<style>
+.globe {
+	 position: relative;
+	 width: 400px;
+	 height: 400px;
+	 border-radius: 50%;
+	 border: 10px solid black;
+	 box-sizing: border-box;
+	 background: black;
+	 box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
+	 margin: 120px 0 0 35%;
+}
+ .view {
+	 position: absolute;
+	 top: 0;
+	 bottom: 0;
+	 left: 0;
+	 right: 0;
+	 perspective: 700;
+}
+ .plane {
+	 width: 120px;
+	 height: 120px;
+	 transform-style: preserve-3d;
+}
+ .plane.main {
+	 position: absolute;
+	 top: 0;
+	 bottom: 0;
+	 left: 0;
+	 right: 0;
+	 margin: auto;
+	 transform: rotateX(60deg) rotateZ(-30deg);
+	 animation: rotate 20s infinite linear;
+}
+ .plane.main .circle {
+	 width: 200px;
+	 height: 200px;
+	 position: absolute;
+	 transform-style: preserve-3d;
+	 border-radius: 100%;
+	 box-sizing: border-box;
+	 box-shadow: 0 0 60px crimson, inset 0 0 60px crimson;
+}
+ .plane.main .circle:before, .plane.main .circle:after {
+	 position: absolute;
+	 display: block;
+	 content: "";
+	 top: 0;
+	 left: 0;
+	 right: 0;
+	 bottom: 0;
+	 margin: auto;
+	 width: 9%;
+	 height: 9%;
+	 border-radius: 100%;
+	 background: crimson;
+	 box-sizing: border-box;
+	 box-shadow: 0 0 60px 2px crimson;
+}
+ .plane.main .circle:before {
+	 transform: translateZ(-140px);
+}
+ .plane.main .circle:after {
+	 transform: translateZ(140px);
+}
+ .plane.main .circle:nth-child(1) {
+	 transform: rotateZ(72deg) rotateX(63.435deg);
+}
+ .plane.main .circle:nth-child(2) {
+	 transform: rotateZ(144deg) rotateX(63.435deg);
+}
+ .plane.main .circle:nth-child(3) {
+	 transform: rotateZ(216deg) rotateX(63.435deg);
+}
+ .plane.main .circle:nth-child(4) {
+	 transform: rotateZ(288deg) rotateX(63.435deg);
+}
+ .plane.main .circle:nth-child(5) {
+	 transform: rotateZ(360deg) rotateX(63.435deg);
+}
+ @keyframes rotate {
+	 0% {
+		 transform: rotateX(0) rotateY(0) rotateZ(0);
+	}
+	 100% {
+		 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
+	}
+}
+</style>
+</head>
+<body>
+<div class="globe">
+  <div class="view">
+    <div class="plane main">
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

data/examples/css/scale_example.html CHANGED Viewed

@@ -4,13 +4,13 @@
 <style>
 div {
-  width: 80px;
-  height: 80px;
+  width:  150px;
+  height: 150px;
   background-color: skyblue;
 }
 .scaled {
-  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
+  transform: scale(0.5); /* Equal to scaleX(0.5) scaleY(0.5) */
   background-color: pink;
 }
@@ -18,8 +18,7 @@ div {
 <body>
 <div>Normal</div>
-<div class="scaled">Scaled</div>
+<div class="scaled">Scaled downwards</div>
 </body>
 </html>

data/examples/css/shadow_example_in_CSS/shadow_example_in_CSS.cgi ADDED Viewed

@@ -0,0 +1,62 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# http://localhost/programming/ruby/src/cyberweb/examples/css/shadow_example_in_CSS.cgi
+# =========================================================================== #
+require 'cyberweb/autoinclude'
+english('Shadow example in CSS') {
+autoextend
+ruby_favicon
+css_style '
+blockquote {
+  padding: 12px;
+  box-shadow:
+   inset 0 -3em 3em rgba(0,0,0,0.1),
+         0 0  0 2px rgb(255,255,255),
+         0.3em 0.3em 1em rgba(0,0,0,0.3);
+}
+p.fancy1 {
+  box-shadow: 0 0 0 1em #F4AAB9,
+              0 0 0 3em #66CCFF;
+}
+'+TEMPLATE1
+body_css_class 'mar0px s2px padt2px VERDANAs'
+body_css_style 'background-color: #d3d2d1;'
+font_size 'def'
+doc('mar0px pad0px s0_5em') {
+  h2 sg(:axe,'marr0_5em','drag_this_axe')+
+     'Shadow Effekte in CSS',
+     'mart4px marb1em'
+  div('mart0_5em black mars2em shadow_div1',
+      'drag_shadow_div1', # The id.
+      'height: 500px; width: 250px'){
+    e 'Hier ist eine Box.'
+    e 'Die hat einen Schatten.'
+    e 'Die Box kann herumgezogen werden mit der Maus.'
+    br
+    e 'In english: try to drag the box via the mouse.'
+  }
+  # ========================================================================= #
+  # Use box-shadow effects next, to demonstrate how these work:
+  # ========================================================================= #
+  h2 'Next showcasing different <b>box-shadow effects</b>:'
+  p('wid30') {
+    e '<blockquote><q>This uses the following CSS rule:'
+    e 'padding: 12px;'
+    e 'box-shadow:'
+    e 'inset 0 -3em 3em rgba(0,0,0,0.1),'
+    e '     0 0  0 2px rgb(255,255,255),'
+    e '      0.3em 0.3em 1em rgba(0,0,0,0.3);'
+    ee '</blockquote>'
+  }
+  p('fancy1 mar2em wid30 mart1em','drag_this_paragraph') {
+    ee 'Hello World!'
+  }
+}}

data/examples/css/shaking_shapes_example.html ADDED Viewed

@@ -0,0 +1,133 @@
+<html>
+<head>
+<title>Shaking shapes example</title>
+<style>
+    HTML CSS
+    Result
+    Skip Results Iframe
+EDIT ON
+/* Basic layout */
+body {
+  background: #283866;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+.shapes-container {
+  width: 600px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+.circle {
+  width: 200px;
+  height: 200px;
+  background: #C0F20C;
+  border-radius: 50%;
+}
+.circle-02 {
+  background: #DC366E;
+}
+.rectangle {
+  width: 65px;
+  height: 280px;
+  background: #0CEAF2;
+}
+.rectangle-02 {
+  background: #00A1FF;
+}
+/* Tweak positions */
+.circle-01 {
+   transform: translate(-9px, -15px);
+}
+.rectangle-01 {
+   transform: translate(0, 10px) rotate(15deg);
+}
+.circle-02 {
+   transform: translate(-3px, 3px);
+}
+.rectangle-02 {
+   transform: translate(-4px, 15px) rotate(-8deg);
+}
+/* Animate on hover */
+@keyframes shake-circle-01 {
+  0% { transform: translate(-8px, -14px); }
+  33% { transform: translate(-10px, -14px); }
+  66% { transform: translate(-10px, -16px); }
+  100% { transform: translate(-8px, -16px); }
+}
+.circle-01:hover {
+  animation: shake-circle-01 .1s infinite alternate;
+}
+@keyframes shake-circle-02 {
+  0% { transform: translate(-2px, 2px); }
+  33% { transform: translate(-2px, 4px); }
+  66% { transform: translate(-4px, 4px); }
+  100% { transform: translate(-4px, 2px); }
+}
+.circle-02:hover {
+  animation: shake-circle-02 .1s infinite alternate;
+}
+@keyframes shake-rectangle-01 {
+  0% { transform: translate(-1px, 9px) rotate(14deg); }
+  33% { transform: translate(-1px, 11px) rotate(16deg); }
+  66% { transform: translate(1px, 11px) rotate(14deg); }
+  100% { transform: translate(1px, 9px) rotate(16deg); }
+}
+.rectangle-01:hover {
+  animation: shake-rectangle-01 .16s infinite alternate;
+}
+@keyframes shake-rectangle-02 {
+  0% { transform: translate(-3px, 14px) rotate(-7deg); }
+  33% { transform: translate(-3px, 16px) rotate(-9deg); }
+  66% { transform: translate(-5px, 16px) rotate(-7deg); }
+  100% { transform: translate(-5px, 14px) rotate(-9deg); }
+}
+.rectangle-02:hover {
+  animation: shake-rectangle-02 .16s infinite alternate;
+}
+</style>
+</head>
+<body style="margin: 1.5em">
+<div class="shapes-container">
+  <div class="circle circle-01"></div>
+  <div class="rectangle rectangle-01"></div>
+  <div class="circle circle-02"></div>
+  <div class="rectangle rectangle-02"></div>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,27 @@
+<html>
+<head>
+<title>
+Simple stars
+</title>
+<style>
+.hr_stars {
+  border:none;
+}
+.hr_stars::after {
+  content:'✩    ✩    ✩';
+  display:block;
+  text-align:center;
+  font-size:1.2em;
+}
+</style>
+</head>
+<body>
+<div style="text-align: center">
+Stars below
+</div>
+<hr class="hr_stars">
+<div style="text-align: center">
+Stars above
+</div>
+</body>
+</html>