RubyGems - cyberweb - Versions diffs - 0.8.17 → 0.9.32 - Mend

cyberweb 0.8.17 → 0.9.32

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 (420) hide show

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

@@ -0,0 +1,358 @@
+<html>
+<head>
+<title>
+Dozing Bird Example
+</title>
+<style>
+@keyframes eyes {
+  0%, 8.8888888889%, 100% {
+	  top: -50px;
+	}
+  17.7777777778% {
+	  top: -45px;
+	}
+  91.1111111111% {
+	  top: -20px;
+	}
+  57.7777777778%, 88.8888888889% {
+	  top: -15px;
+	}
+  66.6666666667% {
+	  top: -25px;
+	}
+}
+ @keyframes wings {
+  0%, 88.8888888889%, 100% {
+	  top: 70px;
+	}
+  91.1111111111% {
+	  top: 60px;
+	}
+}
+ @keyframes feet {
+  0%, 88.8888888889%, 100% {
+	  top: -2px;
+	}
+  91.1111111111% {
+	  top: 0px;
+	}
+}
+ @keyframes cloud {
+  0% {
+	  left: -140px;
+	}
+  100% {
+	  left: 280px;
+	}
+}
+html {
+  height: 100%;
+  background: radial-gradient(circle at center, rgba(71, 65, 76, 1) 0%, rgba(34, 32, 36, 1) 100%);
+  background-repeat: no-repeat;
+}
+body {
+  text-align: center;
+}
+ h2 {
+  font-size: 4vw;
+}
+ h2 span {
+  font-size: 60%;
+}
+ a {
+  color: #aaa;
+}
+.globe {
+  margin: 1em 0 0 0;
+  position: relative;
+  display: inline-block;
+  text-align: left;
+  width: 400px;
+  height: 400px;
+  border-radius: 50%;
+  border: 20px solid whitesmoke;
+  box-sizing: border-box;
+  background: linear-gradient(to bottom, rgba(134, 174, 204, 1) 0%, rgba(212, 228, 239, 1) 100%);
+  overflow: hidden;
+  box-shadow: inset 0 0 80px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3);
+}
+ .globe:before, .globe:after {
+  position: absolute;
+  content: "";
+  box-sizing: border-box;
+  border-radius: 50%;
+  z-index: 10;
+}
+ .globe:before {
+  height: 94%;
+  width: 94%;
+  top: 3%;
+  right: 3%;
+  border: 10px solid transparent;
+  border-right-color: rgba(255, 255, 255, .3);
+  border-right-width: 10px;
+  border-right-style: solid;
+}
+ .globe:after {
+  top: 50px;
+  right: 65px;
+  width: 10px;
+  height: 10px;
+  background: rgba(255, 255, 255, .3);
+}
+ .globe .bird {
+  position: absolute;
+  z-index: 1;
+  left: 96px;
+  top: 100px;
+}
+ .globe .bird .body {
+  position: absolute;
+  width: 175px;
+  height: 186px;
+  border-radius: 50%;
+  background-clip: padding-box;
+  background-color: #11e7d7;
+  box-shadow: inset 0 0 80px rgba(0, 0, 0, .3);
+}
+ .globe .bird .body:before, .globe .bird .body:after {
+  position: absolute;
+  content: "";
+  z-index: -1;
+  width: 26px;
+  height: 93px;
+  border-radius: 50%;
+  background-color: #11e7d7;
+  box-shadow: inset 0 0 13px rgba(0, 0, 0, .3);
+  top: 70px;
+  animation: wings 4.5s linear infinite;
+}
+ .globe .bird .body:before {
+  left: 0;
+}
+ .globe .bird .body:after {
+  right: 0;
+}
+ .globe .bird .body .eye {
+  position: absolute;
+  z-index: 1;
+  overflow: hidden;
+  width: 56px;
+  height: 56px;
+  top: 28px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid #01c7be;
+  box-shadow: inset 0 0 0 1px #01c7be;
+}
+ .globe .bird .body .eye:before, .globe .bird .body .eye:after {
+  position: absolute;
+  content: "";
+}
+ .globe .bird .body .eye:before {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: #000;
+  top: 30px;
+}
+ .globe .bird .body .eye:after {
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(ellipse at center, rgba(109, 0, 25, 0) 0%, rgba(130, 1, 31, 0) 35%, #01c7be 36%, #31bfae 100%);
+  animation: eyes 4.5s linear infinite;
+}
+ .globe .bird .body .eye.left {
+  left: 15px;
+}
+ .globe .bird .body .eye.left:before {
+  left: 20px;
+}
+ .globe .bird .body .eye.left:after {
+  left: -60px;
+  top: -45px;
+}
+ .globe .bird .body .eye.right {
+  right: 15px;
+}
+ .globe .bird .body .eye.right:before {
+  right: 20px;
+}
+ .globe .bird .body .eye.right:after {
+  right: -60px;
+  top: -45px;
+}
+ .globe .bird .body .beak {
+  position: absolute;
+  z-index: 1;
+  width: 41px;
+  height: 55px;
+  top: 70px;
+  left: 67px;
+  border-radius: 50%;
+  background-color: #31bfae;
+}
+ .globe .bird .body .beak:before {
+  position: absolute;
+  content: "";
+  width: inherit;
+  height: inherit;
+  top: 2px;
+  border-radius: 50%;
+  background: #eb9f2d;
+}
+ .globe .bird .body .beak:after {
+  position: absolute;
+  content: "";
+  z-index: -1;
+  width: 37px;
+  height: inherit;
+  top: 12px;
+  left: 2px;
+  border-radius: 50%;
+  background: #31bfae;
+}
+ .globe .bird .body .beak div {
+  position: absolute;
+  width: 43px;
+  height: 43px;
+  top: -1px;
+  left: -1px;
+  border-radius: 50% 60% 50% 40%;
+  background-clip: padding-box;
+  background-color: #f7d35d;
+  transform: rotate(-45deg);
+}
+ .globe .bird .body .beak div:before {
+  position: absolute;
+  content: "";
+  transform: rotate(45deg);
+  width: 17px;
+  height: 8px;
+  top: 10px;
+  left: 20px;
+  border-radius: 50%;
+  background-color: #fff;
+}
+ .globe .bird .body .feet {
+  position: absolute;
+  bottom: 15px;
+  width: 100%;
+}
+ .globe .bird .body .feet:before, .globe .bird .body .feet:after {
+  position: absolute;
+  content: "";
+  width: 27px;
+  height: 21px;
+  border-radius: 50%;
+  background-color: #f8c14d;
+  box-shadow: inset 0 0 12px rgba(0, 0, 0, .2);
+  animation: feet 4.5s linear infinite;
+}
+ .globe .bird .body .feet:before {
+  left: 40px;
+}
+ .globe .bird .body .feet:after {
+  right: 40px;
+}
+ .globe .wire {
+  position: absolute;
+  z-index: -1;
+  width: 500px;
+  height: 400px;
+  left: -173px;
+  top: -215px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-bottom-color: black;
+}
+ .globe .hills {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  border-radius: 30%;
+  top: 230px;
+  left: 60px;
+  transform: rotate(45deg);
+  background: radial-gradient(ellipse at top left, rgba(170, 217, 93, 1) 0%, rgba(187, 195, 105, 1) 100%);
+  box-shadow: inset 5px 0 12px rgba(0, 0, 0, .2);
+}
+ .globe .hills:before, .globe .hills:after {
+  position: absolute;
+  content: "";
+  width: 178px;
+  height: 90px;
+  border-radius: 50%;
+  background: inherit;
+  box-shadow: inherit;
+}
+ .globe .hills:before {
+  left: -90px;
+  top: 30px;
+  z-index: -1;
+  transform: rotate(-20deg);
+}
+ .globe .hills:after {
+  left: 0px;
+  top: -55px;
+  transform: rotate(120deg);
+}
+ .globe .cloud {
+  position: absolute;
+  width: 70px;
+  height: 24px;
+  background: linear-gradient(to bottom, rgba(242, 249, 254, 1) 5%, rgba(214, 240, 253, 1) 100%);
+  border-radius: 20px;
+  top: -20px;
+  z-index: -1;
+  animation: cloud 9s linear infinite;
+}
+ .globe .cloud.small {
+  top: -50px;
+  transform: scale(0.6);
+  animation-delay: -1.5s;
+  animation-duration: 13.5s;
+}
+.globe .cloud:before, .globe .cloud:after {
+  position: absolute;
+  content: "";
+  background: inherit;
+  z-index: -1;
+}
+ .globe .cloud:before {
+  width: 36px;
+  height: 36px;
+  top: -18px;
+  right: 10px;
+  border-radius: 40px;
+}
+ .globe .cloud:after {
+  width: 20px;
+  height: 20px;
+  top: -10px;
+  left: 10px;
+  border-radius: 20px;
+}
+</style>
+</head>
+<body style="background-color: black">
+<div class="globe">
+<div class="bird">
+<div class="body">
+<div class="eye left"></div>
+<div class="eye right"></div>
+<div class="beak"><div></div></div>
+<div class="feet"></div>
+<div class="wire"></div>
+</div>
+<div class="hills"></div>
+<div class="cloud"></div>
+<div class="cloud small"></div>
+</div>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,130 @@
+<html>
+<head>
+<style>
+.ball {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: 50%;
+  position: relative;
+  -webkit-transform-style: preserve-3d;
+  background: url('http://hop.ie/balls/images/world-map-one-color.png') repeat-x;
+  background-size: auto 100%;
+  -webkit-animation: move-map 30s infinite linear;
+  -moz-animation: move-map 30s infinite linear;
+  -o-animation: move-map 30s infinite linear;
+  -ms-animation: move-map 30s infinite linear;
+  animation: move-map 30s infinite linear;
+}
+.ball:before {
+  content: "";
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;
+  z-index: 2;
+}
+.ball:after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  -webkit-filter: blur(0);
+  opacity: 0.3;
+  background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
+}
+.ball .shadow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
+  -webkit-transform: rotateX(90deg) translateZ(-150px);
+  -moz-transform: rotateX(90deg) translateZ(-150px);
+  -ms-transform: rotateX(90deg) translateZ(-150px);
+  -o-transform: rotateX(90deg) translateZ(-150px);
+  transform: rotateX(90deg) translateZ(-150px);
+  z-index: -1;
+}
+body {
+  width: 300px;
+  margin: 20px auto;
+  background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
+  background-repeat: no-repeat;
+}
+.stage {
+  width: 300px;
+  height: 300px;
+  display: inline-block;
+  margin: 20px;
+  -webkit-perspective: 1200px;
+  -moz-perspective: 1200px;
+  -ms-perspective: 1200px;
+  -o-perspective: 1200px;
+  perspective: 1200px;
+  -webkit-perspective-origin: 50% 50%;
+  -moz-perspective-origin: 50% 50%;
+  -ms-perspective-origin: 50% 50%;
+  -o-perspective-origin: 50% 50%;
+  perspective-origin: 50% 50%;
+}
+@-moz-keyframes move-map {
+  0% {
+    background-position: -849px 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+@-webkit-keyframes move-map {
+  0% {
+    background-position: 0 0; }
+  100% {
+    background-position: -849px 0; }
+}
+@-o-keyframes move-map {
+  0% {
+    background-position: -849px 0; }
+  100% {
+    background-position: 0 0; } }
+@-ms-keyframes move-map {
+  0% {
+    background-position: -849px 0; }
+  100% {
+    background-position: 0 0; } }
+@keyframes move-map {
+  0% {
+  background-position: -849px 0;
+}
+100% {
+  background-position: 0 0; }
+}
+</style>
+</head>
+<body>
+<section class="stage">
+<figure class="ball"><span class="shadow"></span></figure>
+</section>
+</body>
+</html>

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

@@ -0,0 +1,125 @@
+<html>
+<style>
+body{
+  background: #444 url('https://goo.gl/yfKGK') repeat;
+}
+.clock{
+  width: 200px; height: 200px;
+  border-radius: 200px;
+  border: 15px solid #222;
+  box-shadow:
+    9px 13px 20px rgba(0,0,0,.8),
+    0 0 4px #222,
+    0 -3px 122px #555 inset;
+  background-image: -webkit-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
+  background-image: -moz-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
+  background-image: -ms-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
+  background-image: -o-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
+  background-image: radial-gradient(farthest-side circle at center center, #ffffff 0%, #5c5c5c 100%);
+  position: relative;
+  margin: 40px auto;
+}
+.clock:after{
+  content: "";
+  width: 12px; height: 12px;
+  border-radius: 10px;
+  background: #555;
+  display: block;
+  position: absolute;
+  left: 92px;
+  top: 97px;
+}
+.clock:before{
+  content: "";
+  width: 180px; height: 180px;
+  top: 6px;
+  left: 6px;
+  position: absolute;
+  border-radius: 180px;
+  border: 4px dotted #444;
+}
+.clock div{
+  position: absolute;
+  margin-left: 96px;
+}
+.sec{
+  height: 100px;
+  width: 4px;
+  top: 52px;
+  background: none;
+  box-shadow:
+    0 -40px 0 1px #444,
+    0 1px 0 1px #444;
+  -webkit-animation: 60s steps(60) tick infinite;
+  -moz-animation: 60s steps(60) tick infinite;
+}
+.mns, .hrs {
+  height: 35px;
+  width: 5px;
+  top: 85px;
+  background: #962033;
+}
+.mns{
+  box-shadow:
+    0 -30px #962033,
+    0 -60px #962033,
+    1px 0 7px #777,
+    1px -28px 7px #777,
+    1px -58px 7px #777;
+  -webkit-transform: rotate(45deg);
+     -moz-transform: rotate(45deg);
+  -webkit-animation:
+    3600s steps(60) tick infinite;
+     -moz-animation:
+    3600s steps(60) tick infinite; }
+.hrs{
+  box-shadow:
+    0 -20px #962033,
+    0 -40px #962033,
+    1px 0 3px #777,
+    1px -19px 3px #777,
+    1px -38px 3px #777;
+  -webkit-transform: rotate(-45deg);
+     -moz-transform: rotate(-45deg);
+  -webkit-animation:
+    43200s linear tick infinite;
+     -moz-animation:
+    43200s linear tick infinite;
+}
+@-webkit-keyframes tick{
+  to{
+    -webkit-transform: rotate(360deg);
+  }
+}
+#-moz-keyframes tick{
+  to{
+   -moz-transform: rotate(360deg);
+  }
+}
+</style>
+<body>
+<div class="clock">
+  <div class="sec"></div>
+  <div class="mns"></div>
+  <div class="hrs"></div>
+</div>
+</body>
+</html>

data/examples/html/{href_examples.html → href_examples/href_examples.html} RENAMED Viewed

@@ -6,11 +6,14 @@
 .slateblue { color: slateblue }
+body {
+  font-size: 2em;
+  padding: 10px;
+  margin: 0px;
+}
 </style>
 </head>
 <body>
 <div>
 <p>

data/examples/html/href_in_pre_tag/href_in_pre_tag.html ADDED Viewed

@@ -0,0 +1,39 @@
+<html>
+<head>
+<title>Href examples in HTML</title>
+<style>
+.slateblue { color: slateblue }
+body {
+  font-size: 2em;
+  padding: 10px;
+  margin: 0px;
+}
+pre {
+  margin-left: 2%;
+}
+</style>
+</head>
+<body>
+<div>
+<p>The purpose of this webpage is to test whether
+we can embed the href tag in a pre tag
+</p>
+<pre>
+Testing 123
+<a href="blog.fefe.de" class="slateblue" title="Some Superlong Title">
+This is a test. \o/
+</a>
+<//pre>
+</div>
+</body>
+</html>

data/examples/javascript_and_jquery/toggle_visibility_of_elements/toggle_visibility_of_elements.html ADDED Viewed

@@ -0,0 +1,35 @@
+<html>
+<head>
+<title>
+Toggle visibility of elements
+</title>
+<script>
+function toggle(this_id) {
+  var x = document.getElementById(this_id);
+  if (x.style.display === "none") {
+    x.style.display = "block";
+  } else {
+    x.style.display = "none";
+  }
+}
+</script>
+</head>
+<body>
+<div id="foobar1">
+  <h2 id="foobar2">Element #1</h2>
+</div>
+<div id="foobar3">
+  <h2 id="foobar4">Element #2</h2>
+</div>
+<button onclick="toggle('foobar4')">
+Click here
+</button>
+<br><br>
+</body>
+</html>