source for lucas.co
v3 again
css.css | 5 +
js.js | 272 +++++++++++++++++++++++++++++++++++++++++
site_v1/CNAME | 1 +
site_v1/contact.html | 26 ++++
site_v1/index.html | 69 +++++++++++
site_v1/index.html.bak | 69 +++++++++++
site_v1/media/chobits-chii.png | Bin 0 -> 2093311 bytes
site_v1/media/magic.gif | Bin 0 -> 20502976 bytes
site_v1/media/rin_kokonoe.jpg | Bin 0 -> 29799 bytes
site_v1/mystyle.css | 127 +++++++++++++++++++
site_v1/mystyle.css.bak | 119 ++++++++++++++++++
site_v2/horny.gif | Bin 0 -> 20502976 bytes
site_v2/index.html | 29 +++++
site_v2/indexx.html | 45 +++++++
site_v2/media/chobits-chii.png | Bin 0 -> 2093311 bytes
site_v2/media/magic.gif | Bin 0 -> 20502976 bytes
site_v2/media/rin_kokonoe.jpg | Bin 0 -> 29799 bytes
site_v2/styles.css | 82 +++++++++++++
txt.txt | 12 ++
19 files changed, 856 insertions(+)
diff --git a/css.css b/css.css
new file mode 100644
index 0000000..6f8acb9
--- /dev/null
+++ b/css.css
@@ -0,0 +1,5 @@
+:root {
+ font-family: monospace;
+ font-weight: lighter;
+ -webkit-font-smoothing: none;
+}
\ No newline at end of file
diff --git a/js.js b/js.js
new file mode 100644
index 0000000..aedeae7
--- /dev/null
+++ b/js.js
@@ -0,0 +1,272 @@
+async function stinky(d1, d2, d3) {
+ const response = await fetch("https://raw.githubusercontent.com/lsgalante/lucas_co/main/info.json?token=GHSAT0AAAAAACFZORYKOTML4F5SY6YPPRP2ZGJL66Q");
+
+ const data = await response.json();
+
+ return data[d1][d2][d3];
+}
+
+const n_tabs = 5;
+
+let active_tab = 0;
+
+function loadPage() {
+ populate();
+}
+
+class globals_class {
+ constructor() {}
+
+ main_text(idx) {
+ const main_text = {
+ tab0: "me one",
+ tab1: "me two",
+ tab2: "me three",
+ tab3: "me four",
+ tab4: "me five",
+ tab5: "me six"
+ }
+ return main_text[idx];
+ }
+}
+
+class box_class {
+ constructor() {}
+
+ x() { return 400; }
+
+ y() { return 250; }
+
+ left() { return window.innerWidth / 2 - this.x() / 2; }
+
+ top() {return window.innerHeight / 2 - this.y() / 2; }
+
+ text_margin() { return 25; }
+
+ return_box() {
+ let box = document.createElement("div");
+ box.id = "box";
+ box.style.position = "fixed";
+
+ box.style.left = this.left().toString() + "px";
+ box.style.top = this.top().toString() + "px";
+
+ box.style.width = this.x().toString() + "px";
+ box.style.height = this.y().toString() + "px";
+
+ box.style.padding = 0;
+
+ box.style.borderStyle = "solid";
+ box.style.borderWidth = "1px";
+ return box;
+ }
+}
+
+class tab_class {
+ constructor(ct, idx, id) {
+ this.ct = ct;
+ this.idx = idx;
+ this.id = id;
+
+ this.box_ = new box_class;
+ }
+
+ x() {
+ const x = [
+ this.box_.x() / this.ct,
+ this.box_.y() / this.ct,
+ this.box_.x() / this.ct,
+ this.box_.y() / this.ct
+ ]
+ return x[this.idx];
+ }
+
+ y() {
+ const y = 25;
+ return y;
+ }
+
+ left() {
+ const x = this.x();
+
+ const box_left = this.box_.left();
+ const box_x = this.box_.x();
+
+ let left = [
+ box_left + x * this.id,
+ box_left + box_x - x / 2 + this.y() / 2,
+ box_left + x * this.id,
+ box_left - x / 2 - this.y() / 2
+ ]
+ return left[this.idx];
+ }
+
+ top() {
+ const x = this.x();
+
+ const box_y = this.box_.y();
+ const box_top = this.box_.top();
+
+ const top = [
+ box_top - this.y(),
+ box_top + x / 2 - this.y() / 2 + x * this.id,
+ box_top + box_y,
+ box_top + x / 2 - this.y() / 2 + x * this.id
+ ]
+ return top[this.idx];
+ }
+
+ border_radius() { return 45; }
+
+ transform() { return "rotate(" + (this.idx * 90).toString() + "deg)" }
+
+ return_tab() {
+ let tab = document.createElement("div");
+
+ tab.style.position = "fixed";
+
+ tab.style.height = this.y().toString() + "px";
+ tab.style.width = this.x().toString() + "px";
+
+ tab.style.left = this.left().toString() + "px";
+ tab.style.top = this.top().toString() + "px";
+
+ tab.style.borderTopLeftRadius = this.border_radius() + "px";
+ tab.style.borderTopRightRadius = this.border_radius() + "px";
+
+ tab.style.borderStyle = "solid";
+ tab.style.borderColor = "black";
+ tab.style.borderWidth = "1px";
+
+ tab.style.backgroundColor = "white";
+
+ tab.style.color = "black";
+ tab.style.fontSize = 12;
+
+ tab.style.textAlign = "center";
+ tab.style.lineHeight = "26px";
+
+ tab.style.transform = this.transform();
+
+ return tab;
+ }
+}
+
+function populate() {
+ const body = document.getElementById("body");
+ body.style.backgroundColor = "#c8c7db";
+
+ make_box();
+
+ const info = tab_idx(n_tabs);
+
+ make_tab(info);
+}
+
+function make_box() {
+ const globals_ = new globals_class();
+ const box_instance = new box_class();
+
+ let box = box_instance.return_box();
+
+ let text_box = document.createElement("div");
+ let inner_text = globals_.main_text("tab0");
+
+ text_box.id = "text_box";
+
+ text_box.style.margin = "25px";
+
+ text_box.innerText = inner_text;
+
+ box.append(text_box);
+
+ document.body.append(box);
+}
+
+function make_tab(info) {
+ const globals_ = new globals_class();
+ const box_ = new box_class();
+
+ let cts = info["cts"];
+ let ids = info["ids"];
+ let idcs = info["idcs"];
+
+ for(let i = 0; i < idcs.length; i++) {
+
+ let idx = idcs[i];
+ let ct = cts[idx];
+ let id = ids[i];
+
+ const tab_ = new tab_class(ct, idx, id);
+
+ let tab = tab_.return_tab();
+
+ let tab_id = "tab_" + String(i);
+ tab.id = tab_id;
+
+ tab.onmouseenter = function() {tab_enter(tab_id)};
+ tab.onmouseleave = function() {tab_leave(tab_id)};
+ tab.onclick = function() {tab_click(tab_id, i)};
+
+
+
+ tab.innerText = "title";
+
+ body.appendChild(tab);
+ }
+}
+
+function tab_idx(n_tabs) {
+ let idcs = [];
+ let ids = [];
+ let cts = [0, 0, 0, 0];
+
+ for(let i = 0; i < n_tabs; i++) {
+ let idx;
+
+ if(i < 4) {
+ idx = i;
+ }
+
+ else if(i >= 4) {
+ idx = (3 - (i % 4)) % 4;
+ }
+
+ idcs.push(idx);
+ ids.push(cts[idx]);
+ cts[idx] += 1;
+ }
+
+ const info = {
+ idcs: idcs,
+ ids: ids,
+ cts: cts
+ }
+ return info;
+}
+
+function tab_enter(tab_id) {
+ tab = document.getElementById(tab_id);
+ tab.style.color = "white";
+ tab.style.backgroundColor = "black";
+}
+
+function tab_leave(tab_id) {
+ tab = document.getElementById(tab_id);
+ tab.style.color = "black";
+ tab.style.backgroundColor = "white";
+}
+
+function tab_click(tab_id, i) {
+ tab = document.getElementById(tab_id);
+ tab.style.color = "white";
+ tab.style.backgroundColor = "black";
+
+ const globals_ = new globals_class();
+
+ const text = globals_.main_text(tab_id);
+
+ const text_box = document.getElementById("text_box");
+
+ text_box.innerText = text;
+}
\ No newline at end of file
diff --git a/site_v1/CNAME b/site_v1/CNAME
new file mode 100644
index 0000000..e3873e7
--- /dev/null
+++ b/site_v1/CNAME
@@ -0,0 +1 @@
+synthpu.re
diff --git a/site_v1/contact.html b/site_v1/contact.html
new file mode 100644
index 0000000..c8ed0dd
--- /dev/null
+++ b/site_v1/contact.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <link rel="stylesheet" href="mystyle.css">
+ <title>Synthpu.re/contact</title>
+</head>
+
+<body>
+ <div class="header">
+ Synthpu.re
+ </div>
+
+ <div class="navigation">
+ <a class="there" href="/items.html">Items</a>
+ <a class="here" href="/contact.html">Contact</a>
+ </div>
+
+ <div class = "contact_box">
+ <div>Lucas Galante</div>
+ <p>[email protected]</p>
+ <p>@_lucasgalante</p>
+ </div>
+</body>
+
+</html>
diff --git a/site_v1/index.html b/site_v1/index.html
new file mode 100644
index 0000000..a14fd04
--- /dev/null
+++ b/site_v1/index.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <link rel="stylesheet" href="mystyle.css">
+ <title>Synthpu.re</title>
+</head>
+
+<body>
+ <div class="header">
+ Synthpu.re
+ </div>
+
+ <div class = "contact_box">
+ <div>Halcyinth Elbatour</div>
+ <p>[email protected]</p>
+ <p>@x</p>
+ </div>
+
+ <div class="chocolate_box">
+ <div class="box_title">Chocolate Anime Figures</div>
+
+ <input class="radio" id="one" name="chocolate_figures" type="radio" checked>
+ <input class="radio" id="two" name="chocolate_figures" type="radio">
+
+ <div class="tab_container">
+ <label class="tab" id="tab_one" for="one">Chobits Chii</label>
+ <label class="tab" id="tab_two" for="two">New Figure</label>
+ </div>
+
+ <div class="slides">
+ <div class="slide" id="slide_one">
+ <img class="image" src="media/chobits-chii.png" height="128" width="128">
+ <div class="description">Chobits Chii is a beautiful girl and you can take a big bite out of her with Chobits Chii Anime Figure Made Out of Chocolate.</div>
+ <div class="price">USD 80</div>
+ </div>
+ <div class="slide" id="slide_two">
+ <img class="image" src="media/rin_kokonoe.jpg" height="128" width="128">
+ <div class="description">Please bear the extra cost and ask me to make you a new Anime Figure that I have not done before. Whatever character you choose will be added to the lineup of figures you can order for USD 80.</div>
+ <div class="price">USD 200</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="sewing_box">
+
+ <div class="box_title">Sewing Services</div>
+
+ <input class="radio" id="one" name="sewing_services" type="radio" checked>
+
+ <div class="tab_container">
+ <label class="tab" id="tab_one" for="one">Alterations</label>
+ </div>
+
+ <div class="slides">
+ <div class="slide" id="slide_one">
+ Alteration
+ </div>
+ <div class="price">USD TBD</div>
+ </div>
+ </div>
+
+ <div class="magic_box">
+ <img class="image" src="media/magic.gif" height="200" width="200">
+ </div>
+
+</body>
+
+</html>
diff --git a/site_v1/index.html.bak b/site_v1/index.html.bak
new file mode 100644
index 0000000..4988c83
--- /dev/null
+++ b/site_v1/index.html.bak
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <link rel="stylesheet" href="mystyle.css">
+ <title>Synthpu.re</title>
+</head>
+
+<body>
+ <div class="header">
+ Synthpu.re
+ </div>
+
+ <div class = "contact_box">
+ <div>Halcyinth Elbatour</div>
+ <p>[email protected]</p>
+ <p>@x</p>
+ </div>
+
+ <div class="chocolate_box">
+ <div class="box_title">Chocolate Anime Figures</div>
+
+ <input class="radio" id="one" name="chocolate_figures" type="radio" checked>
+ <input class="radio" id="two" name="chocolate_figures" type="radio">
+
+ <div class="tab_container">
+ <label class="tab" id="tab_one" for="one">Chobits Chii</label>
+ <label class="tab" id="tab_two" for="two">New Figure</label>
+ </div>
+
+ <div class="slides">
+ <div class="slide" id="slide_one">
+ <img class="image" src="media/chobits-chii.png" height="128" width="128">
+ <div class="description">Chobits Chii is a beautiful girl and you can take a big bite out of her with Chobits Chii Anime Figure Made Out of Chocolate.</div>
+ <div class="price">USD 80</div>
+ </div>
+ <div class="slide" id="slide_two">
+ <img class="image" src="media/rin_kokonoe.jpg" height="128" width="128">
+ <div class="description">Please bear the extra cost and ask me to make you a new Anime Figure that I have not done before. Whatever character you choose will be added to the lineup of figures you can order for USD 80.</div>
+ <div class="price">USD 200</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="sewing_box">
+
+ <div class="box_title">Sewing Services</div>
+
+ <input class="radio" id="one" name="sewing_services" type="radio" checked>
+
+ <div class="tab_container">
+ <label class="tab" id="tab_one" for="one">Alterations</label>
+ </div>
+
+ <div class="slides">
+ <div class="slide" id="slide_one">
+ Alteration
+ </div>
+ <div class="price">USD TBD</div>
+ </div>
+ </div>
+
+ <div class="magic_box">
+
+ </div>
+
+</body>
+
+</html>
diff --git a/site_v1/media/chobits-chii.png b/site_v1/media/chobits-chii.png
new file mode 100644
index 0000000..7c7bc31
Binary files /dev/null and b/site_v1/media/chobits-chii.png differ
diff --git a/site_v1/media/magic.gif b/site_v1/media/magic.gif
new file mode 100644
index 0000000..86c6d73
Binary files /dev/null and b/site_v1/media/magic.gif differ
diff --git a/site_v1/media/rin_kokonoe.jpg b/site_v1/media/rin_kokonoe.jpg
new file mode 100644
index 0000000..530e5ab
Binary files /dev/null and b/site_v1/media/rin_kokonoe.jpg differ
diff --git a/site_v1/mystyle.css b/site_v1/mystyle.css
new file mode 100644
index 0000000..84f1151
--- /dev/null
+++ b/site_v1/mystyle.css
@@ -0,0 +1,127 @@
+
+
+body {
+ background:white;
+}
+
+.header {
+ padding:20px;
+ margin:25px 25px 25px 100px;
+}
+
+.contact_box {
+ height:100px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin:25px 25px 25px 25px;
+ border:1px solid black;
+}
+
+.chocolate_box {
+ height:250px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin:25px 25px 25px 25px;
+ outline:1px solid black;
+}
+
+.sewing_box {
+ height:250px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin:25px 25px 25px 25px;
+ outline:1px solid black;
+}
+
+.magic_box {
+ height:250px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin:25px 25px 25px 25px;
+ outline:1px solid black;
+}
+
+.box_title {
+ margin:0px 0px 20px 0px;
+ outline:1px solid white;
+}
+
+.tab_container {
+ margin:0px 0px 20px 0px;
+ outline:0px solid black;
+}
+
+.tab {
+ display:inline-block;
+ cursor:pointer;
+ padding:2px 8px 2px 8px;
+ margin:0px 2px 0px 0px;
+ outline:1px solid black;
+}
+
+.here:link, a.here:visited {
+ background-color:black;
+ color:white;
+ padding:3px 35px;
+ text-align:center;
+ border:1px solid black;
+ text-decoration:none;
+ display:inline-block;
+}
+
+.there:link {
+ background-color:white;
+ color:black;
+ padding:3px 35px;
+ text-align:center;
+ border:1px solid black;
+ text-decoration:none;
+ display:inline-block;
+}
+
+.slides {
+ border:0px solid black;
+}
+
+.image {
+ display:inline-block;
+ margin:0px 10px 0px 0px;
+ outline:0px solid black;
+}
+
+.description {
+ display:inline-block;
+ width:230px;
+ vertical-align:top;
+ text-align:justify;
+ margin:0px 40px 0px 0px;
+ outline:0px solid black;
+}
+
+.price {
+ display:inline-block;
+ vertical-align:top;
+ margin:0px 0px 0px 0px;
+ outline:0px solid black;
+}
+
+.slide {
+ display:none;
+}
+
+.radio {
+ display:none;
+}
+
+#one:checked ~ .slides #slide_one,
+#two:checked ~ .slides #slide_two,
+#three:checked ~ .slides #slide_three {
+ display:block
+}
+
+#one:checked ~ .tab_container #tab_one,
+#two:checked ~ .tab_container #tab_two,
+#three:checked ~ .tab_container #tab_three {
+ background:black;
+ color:white;
+}
diff --git a/site_v1/mystyle.css.bak b/site_v1/mystyle.css.bak
new file mode 100644
index 0000000..474e3f9
--- /dev/null
+++ b/site_v1/mystyle.css.bak
@@ -0,0 +1,119 @@
+
+
+body {
+ background:white;
+}
+
+.header {
+ padding:20px;
+ margin:25px 25px 25px 100px;
+}
+
+.contact_box {
+ height:100px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin:25px 25px 25px 25px;
+ border:1px solid black;
+}
+
+.chocolate_box {
+ height:250px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin:25px 25px 25px 25px;
+ outline:1px solid black;
+}
+
+.sewing_box {
+ height:250px;
+ width:500px;
+ padding:20px 20px 20px 20px;
+ margin: 25px 25px 25px 25px;
+ outline:1px solid black;
+}
+
+.box_title {
+ margin:0px 0px 20px 0px;
+ outline:1px solid white;
+}
+
+.tab_container {
+ margin:0px 0px 20px 0px;
+ outline:0px solid black;
+}
+
+.tab {
+ display:inline-block;
+ cursor:pointer;
+ padding:2px 8px 2px 8px;
+ margin:0px 2px 0px 0px;
+ outline:1px solid black;
+}
+
+.here:link, a.here:visited {
+ background-color:black;
+ color:white;
+ padding:3px 35px;
+ text-align:center;
+ border:1px solid black;
+ text-decoration:none;
+ display:inline-block;
+}
+
+.there:link {
+ background-color:white;
+ color:black;
+ padding:3px 35px;
+ text-align:center;
+ border:1px solid black;
+ text-decoration:none;
+ display:inline-block;
+}
+
+.slides {
+ border:0px solid black;
+}
+
+.image {
+ display:inline-block;
+ margin:0px 10px 0px 0px;
+ outline:0px solid black;
+}
+
+.description {
+ display:inline-block;
+ width:230px;
+ vertical-align:top;
+ text-align:justify;
+ margin:0px 40px 0px 0px;
+ outline:0px solid black;
+}
+
+.price {
+ display:inline-block;
+ vertical-align:top;
+ margin:0px 0px 0px 0px;
+ outline:0px solid black;
+}
+
+.slide {
+ display:none;
+}
+
+.radio {
+ display:none;
+}
+
+#one:checked ~ .slides #slide_one,
+#two:checked ~ .slides #slide_two,
+#three:checked ~ .slides #slide_three {
+ display:block
+}
+
+#one:checked ~ .tab_container #tab_one,
+#two:checked ~ .tab_container #tab_two,
+#three:checked ~ .tab_container #tab_three {
+ background:black;
+ color:white;
+}
diff --git a/site_v2/horny.gif b/site_v2/horny.gif
new file mode 100644
index 0000000..86c6d73
Binary files /dev/null and b/site_v2/horny.gif differ
diff --git a/site_v2/index.html b/site_v2/index.html
new file mode 100644
index 0000000..f09f4ae
--- /dev/null
+++ b/site_v2/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+ <link rel="stylesheet" href="styles.css">
+ <title>
+ lucas.co/
+ </title>
+ </head>
+
+ <body>
+ <!-- <div class="title">Lucas Galante</div> -->
+ <div class="whitebox">
+ <div class="title">
+ Lucas Galante
+ </div>
+ </div>
+ <div class="boxx">
+ <img src="horny.gif" class="myimg">
+ </div>
+ <div class="left"></div>
+ <div class="right"></div>
+ <div class="center"></div>
+ <div class="circle1"></div>
+ <div class="circle2"></div>
+ </body>
+
+</html>
diff --git a/site_v2/indexx.html b/site_v2/indexx.html
new file mode 100644
index 0000000..7a65250
--- /dev/null
+++ b/site_v2/indexx.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body {
+ background-color: #8fb6ff;
+ margin: 0;
+}
+.gradient {
+ animation: animateBg 180s infinite linear;
+ background-color: #fff;
+ background-image: linear-gradient(0deg, #fff, #000, #da3287, #fff);
+ background-size: 100% 300%;
+ height: 100vh;
+ width: 100vw;
+}
+@keyframes animateBg {
+ 0% {
+ background-position: 0 150%;
+ }
+ 100% {
+ background-position: 0 0;
+ }
+}
+div.work {
+ position:absolute;
+ left: 3vw;
+ top: 3vh;
+}
+</style>
+<title>Page Title</title>
+</head>
+<body>
+
+<canvas id="canvas1" width="400" height="100"
+style="border:1px solid #000000;">
+You are a loser.
+</canvas>
+
+<article class="gradient"></article>
+<div class="work"><p><a href="file:///C:/Users/lsgal/OneDrive/Documents/website/index.html">Work</a></p></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/site_v2/media/chobits-chii.png b/site_v2/media/chobits-chii.png
new file mode 100644
index 0000000..7c7bc31
Binary files /dev/null and b/site_v2/media/chobits-chii.png differ
diff --git a/site_v2/media/magic.gif b/site_v2/media/magic.gif
new file mode 100644
index 0000000..86c6d73
Binary files /dev/null and b/site_v2/media/magic.gif differ
diff --git a/site_v2/media/rin_kokonoe.jpg b/site_v2/media/rin_kokonoe.jpg
new file mode 100644
index 0000000..530e5ab
Binary files /dev/null and b/site_v2/media/rin_kokonoe.jpg differ
diff --git a/site_v2/styles.css b/site_v2/styles.css
new file mode 100644
index 0000000..48927da
--- /dev/null
+++ b/site_v2/styles.css
@@ -0,0 +1,82 @@
+:root {
+ --width1: 11%;
+ --height1: 75%;
+ --height2: 63%;
+ --top1: 1%;
+ --top2: 5%;
+ --top3: 78%;
+ --bottom1: 13%;
+ --side1: 20%;
+}
+.title {
+ font-size: 1.7vw;
+ margin-top: .5vw;
+ margin-left: .5vw;
+}
+.myimg {
+ object-fit: contain;
+ width: 100%;
+ height: 100%;
+}
+.boxx {
+ position: absolute;
+ top: var(--top1);
+ left: 36.0%;
+ height:19%;
+ width: 25%;
+ padding: 1%;
+ border: 1px solid black;
+}
+.whitebox {
+ position: absolute;
+ top: 0%;
+ left: var(--side1);
+ height: 3.3vw;
+ width: var(--width1);
+ background-color: white;
+ z-index: 2;
+}
+.left {
+ position: absolute;
+ top: calc(var(--top1));
+ left: var(--side1);
+ height: calc(var(--height1));
+ width: var(--width1);
+ background-color: black;
+ z-index: 1;
+}
+.right {
+ position: absolute;
+ top: var(--top1);
+ right: var(--side1);
+ height: var(--height1);
+ width: var(--width1);
+ background-color: black;
+}
+.center {
+ position: absolute;
+ top: 25.4%;
+ left: calc(50% - 8% / 2);
+ height: 45%;
+ width: 8%;
+ background-color: black;
+}
+.circle1 {
+ position: absolute;
+ top: var(--top3);
+ left: var(--side1);
+ width: var(--width1);
+ padding-bottom: var(--width1);
+ border-radius: 50%;
+ border: 1px solid black;
+
+}
+.circle2 {
+ position: absolute;
+ top: var(--top3);
+ right: var(--side1);
+ width: var(--width1);
+ padding-bottom: var(--width1);
+ border-radius: 50%;
+ border: 1px solid black;
+}
\ No newline at end of file
diff --git a/txt.txt b/txt.txt
new file mode 100644
index 0000000..7d8d787
--- /dev/null
+++ b/txt.txt
@@ -0,0 +1,12 @@
+x -- 0 1 2 3 4 5
+
+desired -- 0 1 2 2 3 3
+
+(3 - 1) % 4
+
+0 1 2 3 0 1 2 3
+
+0 1 2 3 3 2 1 0
+
+
+