Сергей Ракипов,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 18px;
}
body {
background-color: #fff;
color: #000;
font-size: 1rem;
}
.light {
background-color: #fff;
color: #000;
}
.black {
background-color: #000;
color: #fff;
}
.size__1 {
font-size: .8rem;
}
.size__2 {
font-size: 1rem;
}
.size__3 {
font-size: 1.2rem;
}
main {
max-width: 480px;
padding: 0px 20px 0px 20px;
margin: 0px auto 0px;
}
.title {
font-weight: 900;
font-size: 26px;
padding: 20px 0px 20px 0px;
}
.sample__text {
margin: 20px 0px 20px 0px;
}
.general__blok {
display: flex;
}
.button {
display: flex;
justify-content: center;
align-items: center;
border-width: 3px;
border-style: solid;
border-color: #F4A900;
border-radius: 50%;
width: 48px;
height: 48px;
margin: 0px 5px 0px 5px;
cursor: pointer;
}
.color__fonts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0px 30px 0px 30px;
}
.color__fonts__title {
margin: 0px 0px 10px 0px;
font-weight: 900;
}
.color__fonts__block {
display: flex;
}
.color__fonts__button__1 {
background-color: #fff;
color: #000;
}
.color__fonts__button__2 {
background-color: #000;
color: #fff;
}
.size__fonts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0px 30px 0px 30px;
}
.size__fonts__title {
margin: 0px 0px 10px 0px;
font-weight: 900;
}
.size__fonts__block {
display: flex;
}
.size__fonts__buttons__1 {
font-size: 12px;
}
.size__fonts__buttons__2 {
font-size: 18px;
}
.size__fonts__buttons__3 {
font-size: 22px;
}
.aktive {
border-width: 6px;
border-style: double;
cursor: default
}
</style>
</head>
<body>
<main>
<div class="title">Образец</div>
<div class="sample__text">
Таким образом, укрепление и развитие внутренней структуры говорит о возможностях дальнейших направлений развития. Внезапно, сторонники тоталитаризма в науке освещают чрезвычайно интересные особенности картины в целом, однако конкретныевыводы, разумеется,
представлены в исключительно положительном свете. Внезапно, активно развивающиеся страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть превращены в посмешище, хотя само их существование приносит несомненную пользу
обществу.
</div>
<div class="title">Оформление</div>
<div class="general__blok">
<div class="color__fonts">
<div class="color__fonts__title">Цвет шрифта</div>
<div class="color__fonts__block">
<div class="button color__fonts__button__1 aktive">Аа</div>
<div class="button color__fonts__button__2">Аа</div>
</div>
</div>
<div class="size__fonts">
<div class="size__fonts__title">Размер шрифта</div>
<div class="size__fonts__block">
<div class="button size__fonts__buttons__1">0.5</div>
<div class="button size__fonts__buttons__2 aktive">1.0</div>
<div class="button size__fonts__buttons__3">1.5</div>
</div>
</div>
</div>
</main>
<script>
const body = document.querySelector("body");
const decor = {
'color': ['light', 'black'],
'size': ['size__1', 'size__2', 'size__3']
}
const state = {
'color': localStorage.getItem("state_color") ? localStorage.getItem("state_color") : 0,
'size': localStorage.getItem("state_size") ? localStorage.getItem("state_size") : 1
};
const set_decor = () => {
for (let sel in decor) {
body.classList.remove(...decor[sel]);
body.classList.add(decor[sel][state[sel]]);
}
}
set_decor();
for (let sel in decor) {
let div = document.querySelector(`.${sel}__fonts__block`);
const children = [...div.children];
const active_btn = () => children.forEach((btn, i) => btn.classList.toggle('aktive', i == state[sel]));
active_btn();
div.addEventListener('click', ({
target
}) => {
let index = children.indexOf(target);
if (index > -1) {
state[sel] = index;
localStorage.setItem(`state_${sel}`, index);
active_btn();
set_decor();
}
})
}
set_decor();
</script>
</body>
</html>