source for lucas.co
polishing
index.html | 2 +-
main.js | 203 ++++++++++++++++++++++++++++++++-----------------------------
styles.css | 5 +-
3 files changed, 110 insertions(+), 100 deletions(-)
diff --git a/index.html b/index.html
index e1d8a53..c800e7b 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
<html>
<head>
@@ -8,7 +9,6 @@
<body id="body" onload="loadPage()">
<div id="box">
<div id="description">
-
</div>
</div>
diff --git a/main.js b/main.js
index 199df79..46976c5 100644
--- a/main.js
+++ b/main.js
@@ -30,6 +30,9 @@ let tab_data = {
}
}
+window.addEventListener("resize", function() {
+ sizing() });
+
let n_tabs = Object.keys(tab_data).length;
let active_tab = 0;
@@ -39,50 +42,30 @@ const txt_on = "#ffffff";
const bg_off = "#ffffff";
const txt_off = "#000000";
-let window_width = window.innerWidth;
-let window_height = window.innerHeight;
-
-const box_width = 400;
-const box_height = 250;
-
-const box_left = window_width / 2 - box_width / 2;
-const box_top = window_height / 2 - box_height / 2;
+let tabs = [];
+let counts = [0, 0, 0, 0];
function loadPage() {
create_tabs();
- style_box();
+ sizing();
set_tab(0);
}
-function style_box() {
- let box = document.getElementById("box");
-
- box.style.left = box_left.toString() + "px";
- box.style.top = box_top.toString() + "px";
-
- box.style.width = box_width.toString() + "px";
- box.style.height = box_height.toString() + "px";
-}
-
function create_tabs() {
- let counts = [0, 0, 0, 0];
- let indices = [];
- let positions = [];
- let tabs = [];
for(let i = 0; i < n_tabs; i++) {
- let position = i;
+ let tab = document.createElement("div");
- if(position >= 4) {
- position = (3 - (i % 4)) % 4;
+ let pos = i;
+
+ if(pos >= 4) {
+ pos = (3 - (i % 4)) % 4;
}
- indices.push(counts[position]);
- counts[position] += 1;
- positions.push(position);
-
- let tab = document.createElement("div");
-
+ tab.pos = pos;
+ tab.idx = counts[pos];
+ counts[pos] += 1;
+
tab.id = "tab_" + String(i);
tab.addEventListener("click", function() {
@@ -93,24 +76,19 @@ function create_tabs() {
tab.addEventListener("mouseleave", function() {
leave_tab(tab.id) });
+
tabs.push(tab);
body.append(tab);
}
- style_tabs(tabs, counts, indices, positions);
-}
-
-function style_tabs(tabs, counts, indices, positions) {
-
for(let i = 0; i < n_tabs; i++) {
- let index = indices[i];
let tab = tabs[i];
- let position = positions[i];
- let count = counts[position];
+
+ let pos = tab.pos;
let title = tab_data[tab.id].title;
- if(position == 1 || position == 3) {
+ if(pos == 1 || pos == 3) {
let new_title = "";
for(const letter of title) {
@@ -118,67 +96,16 @@ function style_tabs(tabs, counts, indices, positions) {
}
title = new_title;
}
- tab.innerText = title;
-
- let width;
- let height;
-
- const border_radius = 45;
-
- if(position == 0) {
- width = box_width / count;
- height = 25;
-
- tab.style.left = (box_left).toString() + "px";
- tab.style.top = (box_top - height).toString() + "px";
-
- tab.style.borderTopLeftRadius = border_radius + "px";
- tab.style.borderTopRightRadius = border_radius + "px";
- }
-
- if(position == 1) {
- width = 25;
- height = box_height / count;
-
- tab.style.left = (box_left + box_width - width / 2 + width / 2).toString() + "px";
- tab.style.top = (box_top + height / 2 - height / 2 + height * index).toString() + "px";
-
- tab.style.borderTopRightRadius = border_radius + "px";
- tab.style.borderBottomRightRadius = border_radius + "px";
- }
-
- if(position == 2) {
- width = box_width / count
- height = 25;
-
- tab.style.top = (box_top + box_height).toString() + "px";
- tab.style.left = (box_left + width * index).toString() + "px";
-
- tab.style.borderBottomRightRadius = border_radius + "px";
- tab.style.borderBottomLeftRadius = border_radius + "px";
- }
-
- if(position == 3) {
- width = 25;
- height = box_height / count;
- tab.style.top = (box_top + height / 2 - height / 2 + height * index).toString() + "px";
- tab.style.left = (box_left - width / 2 - width / 2).toString() + "px";
-
- tab.style.borderBottomLeftRadius = border_radius + "px";
- tab.style.borderTopLeftRadius = border_radius + "px";
- }
-
- tab.style.width = width.toString() + "px";
- tab.style.height = height.toString() + "px";
+ tab.innerText = title;
}
}
-function set_tab(index) {
+function set_tab(idx) {
for(let i = 0; i < n_tabs; i++) {
let tab_id = "tab_" + String(i);
- if(i == index) {
+ if(i == idx) {
let tab = document.getElementById(tab_id);
tab.style.backgroundColor = bg_on;
tab.style.color = txt_on;
@@ -191,8 +118,8 @@ function set_tab(index) {
}
}
- active_tab = index;
- let tab_id = "tab_" + String(index);
+ active_tab = idx;
+ let tab_id = "tab_" + idx;
const description = document.getElementById("description");
(description.innerText = tab_data[tab_id]["body"])
@@ -205,9 +132,89 @@ function enter_tab(tab_id) {
}
function leave_tab(tab_id) {
- if(tab_id != "tab_" + String(active_tab)) {
+ if(tab_id != "tab_" + active_tab) {
let tab = document.getElementById(tab_id);
tab.style.backgroundColor = bg_off;
tab.style.color = txt_off;
}
+}
+
+function sizing() {
+ let window_w = window.innerWidth;
+ let window_h = window.innerHeight;
+
+ let box = document.getElementById("box");
+
+ let box_w = window_w * 0.4;
+ let box_h = window_h * 0.5;
+
+ let box_left = window_w / 2 - box_w / 2;
+ let box_top = window_h / 2 - box_h / 2;
+
+ box.style.width = box_w + "px";
+ box.style.height = box_h + "px";
+
+ box.style.left = box_left + "px";
+ box.style.top = box_top + "px";
+
+ let tab_w;
+ let tab_h;
+
+ let dim_1 = 25;
+
+ const border_radius = 45;
+
+ for(let i = 0; i < n_tabs; i++) {
+ let tab = tabs[i];
+ let pos = tab.pos;
+ let idx = tab.idx;
+ let count = counts[pos];
+
+ if(pos == 0) {
+ tab_w = box_w / count;
+ tab_h = dim_1;
+
+ tab.style.left = box_left + "px";
+ tab.style.top = (box_top - tab_h) + "px";
+
+ tab.style.borderTopLeftRadius = border_radius + "px";
+ tab.style.borderTopRightRadius = border_radius + "px";
+ }
+
+ if(pos == 1) {
+ tab_w = dim_1;
+ tab_h = box_h / count;
+
+ tab.style.left = (box_left + box_w - tab_w / 2 + tab_w / 2) + "px";
+ tab.style.top = (box_top + tab_h / 2 - tab_h / 2 + tab_h * idx) + "px";
+
+ tab.style.borderTopRightRadius = border_radius + "px";
+ tab.style.borderBottomRightRadius = border_radius + "px";
+ }
+
+ if(pos == 2) {
+ tab_w = box_w / count
+ tab_h = dim_1;
+
+ tab.style.top = (box_top + box_h) + "px";
+ tab.style.left = (box_left + tab_w * idx) + "px";
+
+ tab.style.borderBottomRightRadius = border_radius + "px";
+ tab.style.borderBottomLeftRadius = border_radius + "px";
+ }
+
+ if(pos == 3) {
+ tab_w = dim_1;
+ tab_h = box_h / count;
+
+ tab.style.top = (box_top + tab_h / 2 - tab_h / 2 + tab_h * idx) + "px";
+ tab.style.left = (box_left - tab_w / 2 - tab_w / 2) + "px";
+
+ tab.style.borderBottomLeftRadius = border_radius + "px";
+ tab.style.borderTopLeftRadius = border_radius + "px";
+ }
+
+ tab.style.width = tab_w + "px";
+ tab.style.height = tab_h + "px";
+ }
}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 0564175..baeb535 100644
--- a/styles.css
+++ b/styles.css
@@ -9,11 +9,14 @@ body {
}
#box {
- border-style: none;
+ /* border-style: solid; */
position: fixed;
+ align-items: center;
+ margin: auto;
}
#description {
+ /* border-style:solid; */
color: rgb(41, 62, 80);
position: relative;
margin: 25px;