[iframe-fractal]: added

2024-04-01 21:15:06 -04:00 · 2024-04-01 21:15:06 -04:00 · 62ee04d884
commit 62ee04d884
parent 571c5ec85e
3 changed files with 60 additions and 0 deletions
--- a/docs/iframe-fractal/README.md
+++ b/docs/iframe-fractal/README.md
@ -0,0 +1,8 @@
+# iframe-fractal
+
+Quick 5-minute experiment where I made a menger sponge using nested iframes.
+Based on [this code](https://github.com/bryanbraun/infinitely-nested-iframes).
+
+Click [here](https://dogeystamp.github.io/garbage-monorepo/iframe-fractal/) for a demo.
+
+![preview](https://raw.githubusercontent.com/dogeystamp/garbage-monorepo/main/docs/iframe-fractal/preview.png)
--- a/docs/iframe-fractal/index.html
+++ b/docs/iframe-fractal/index.html
@ -0,0 +1,52 @@
+<head>
+<style>
+body, html {
+  height: 100%;
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 33vmin 33vmin 33vmin;
+  grid-template-rows: 33vmin 33vmin 33vmin;
+  grid-template-areas:
+	  "x1 x2 x3"
+	  "x4 oo x5"
+	  "x6 x7 x8";
+}
+iframe {
+  width: 100%;
+  height: 100%;
+}
+div {
+	background: #444444;
+}
+</style>
+</head>
+
+<iframe style="grid-area: x1"></iframe>
+<iframe style="grid-area: x2"></iframe>
+<iframe style="grid-area: x3"></iframe>
+<iframe style="grid-area: x4"></iframe>
+<iframe style="grid-area: x5"></iframe>
+<iframe style="grid-area: x6"></iframe>
+<iframe style="grid-area: x7"></iframe>
+<iframe style="grid-area: x8"></iframe>
+<div style="grid-area: oo"></div>
+
+<script>
+function func() {
+	for (const iframeEl of document.querySelectorAll('iframe')) {
+		const nextQueryValue = !location.search ? 1 :
+		  Number(location.search.split("?").pop()) + 1;
+
+		if (Number(location.search.split("?").pop()) > 3) {
+			return
+		}
+
+		iframeEl.src = `index.html?${nextQueryValue}`;
+	}
+}
+func()
+</script>
--- a/docs/iframe-fractal/preview.png
+++ b/docs/iframe-fractal/preview.png