Форум

рони · #11 (**permalink**) 07.09.2020, 19:34

Сергей Ракипов,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #fff;
            color: #000;
            font: 400 1rem/1.25rem sans-serif;
        }
        .fon_belyi{
            background-color: #fff;
            color: #000;
        }
        .fon_chernyi{
            background-color: #000;
            color: #fff
        }
        .chrift_osnovnoi{
            font-family: sans-serif;
        }
        .chrift_drygoi{
            font-family: serif;
        }
        .razmer_osnovnoi{
            font-size: 1rem;
        }
        .razmer_15{
            font-size: 1.3rem;
            line-height: 1.50rem;
        }
        .razmer_20{
            font-size: 1.6rem;
            line-height: 1.75rem;
        }
        .blok {
            max-width: 480px;
        }
        .knopka {
            width: 100%;
            padding: 5px;
            border: 1px solid #8b00ff;
            text-align: center;
            margin: 10px;
            cursor: pointer;
            text-decoration: none;
            color: #9400d3;
        }
        .knopka:hover {
            width: 100%;
            padding: 5px;
            border: 1px solid #000;
            text-align: center;
            margin: 10px;
            cursor: pointer;
            text-decoration: none;
            color: #8b00ff;
        }
        .knopka.vibran{
            text-decoration: underline;
            color: #000000;
            background-color: hsla(40, 100%, 70%, 1)}
   </style>
</head>
<body>
<script>
const dataCss = {
background : ["fon_belyi","fon_chernyi"],
font : ["chrift_osnovnoi","chrift_drygoi"],
size : ["razmer_osnovnoi","razmer_15","razmer_20"]
};
const body = document.querySelector("body");
let conserved = localStorage.dataCss ?  JSON.parse(localStorage.dataCss): {
background : 0,
font : 0,
size : 0
};
body.addEventListener( "click" ,  ({target}) => {
     if(target = target.closest("[data-css]")) {
         const key =  target.dataset.css;
         const index = [...document.querySelectorAll(`[data-css="${key}"]`)].indexOf(target)
         conserved[key] = index;
         localStorage.dataCss = JSON.stringify(conserved)
         setClassName();
         setActive();
     }
 });
const setClassName = () => {
for( let [key, index] of Object.entries(conserved)) {
dataCss[key].forEach((name, i) => body.classList[i == index ? "add" : "remove"](name))
}};
const setActive = () => {
for( let [key, index] of Object.entries(conserved)) {
[...document.querySelectorAll(`[data-css="${key}"]`)].forEach((el, i) => el.classList[i == index ? "add" : "remove"]("vibran"))
}};

setClassName();

</script>
<div class="blok">
    <div class="knopka" data-css="background">Основной фон</div>
    <div class="knopka" data-css="background">Смена фона</div>
    <div class="knopka" data-css="font">Основной шрифт</div>
    <div class="knopka" data-css="font">Другой шрифт</div>
    <div class="knopka" data-css="size">Основной размер</div>
    <div class="knopka" data-css="size">Увеличить размер * 1,5</div>
    <div class="knopka" data-css="size">Увеличить размер * 2</div>
    <div class="tekst"><br><br>
        ОБ ОРГАНИЗАЦИИ<br><br>
        Деятельность нашей организации направлена на оказание разного рода помощи малоимущим, социально незащищенным
        слоям населения.
        <br><br>
        На сегодняшний день открыты приюты, предназначенные для инвалидов и престарелых граждан, лиц, ведущих
        бродяжнический образ жизни, а так же для людей, оставшихся без средств к существованию и не имеющих крова над
        головой.<br>
        ЦЕЛЬ ДЕЯТЕЛЬНОСТИ:<br><br>
        минимализация бродяжничества в Новосибирске и Новосибирской области
        ОСНОВНЫЕ ЗАДАЧИ:<br><br>
        социальная и психологическая адаптация граждан через проживание в центре восстановления личности;<br>
        восполнение жизненно важных потребностей;<br>
        развитие в людях чувства сострадания, взаимовыручки, единства, милосердия, любви к ближним;<br>
        восстановление социального статуса, восстановление социальных – трудовых навыков, трудоустройство.<br>

        Я знаю, что есть люди, которым нужна помощь,<br>
        и мы в силах оказать её.<br><br>
        Директор АНО "ТВОЙ ДОМ"<br>
        Наталья Петровна Першина
    </div>
</div>
<script>
setActive();
</script>
</body>
</html>

laimas · #12 (**permalink**) 07.09.2020, 19:37

рони,
прищурьте глаза и попробуйте прочесть список.

Нельзя так делать, это равноценно как построить для колясочника пандус с препятствиями.

рони · #13 (**permalink**) 07.09.2020, 19:40

laimas,
сменил расцветочку.

laimas · #14 (**permalink**) 07.09.2020, 20:32

Сообщение от рони

сменил расцветочку

У вас зрение норма? А вот у меня минусовое, если я буду смотреть например на прилавок без очков, то никакой цвет не поможет мне прочесть то, что для меня нечитаемо.

Тут сам подход пагубный - темы для слабовидящих уже должны быть готовы, а это ведь не только размер шрифта и цвет, это еще и размеры элементов управления, то есть затрагивается многое. Заставлять подбирать под себя такого пользователя в том, что для него неудобно, ну это издеваться над ним.

Кстати, такой цвет как подобран, как раз для слабовидящего, это приговор.

voraa · #15 (**permalink**) 07.09.2020, 20:54

В большинстве согласен с laimas.
Можно еще добавить, что совсем слабовидящие пользуются экранными читалками, для использования которой сайт совсем никуда не годится. (Нужны атрибуты aria). А есть люди которые не могут в силу разных причин пользоваться мышью, и используют клавиатуру, для перемещения по сайту. И для них совсем никуда не годится делать кнопки с помощью div, без задания реакцию на нажатие кнопок....

Но как решение задачки, вот такой код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #fff;
            color: #000;
            font: 400 1rem/1.25rem sans-serif;
        }        
        .blok {
            max-width: 480px;
        }
        .knopka {
            width: 100%;
            padding: 5px;
            border: 1px solid #8b00ff;
            text-align: center;
            margin: 10px;
            cursor: pointer;
            text-decoration: none;
            color: #9400d3;
        }
        .knopka:hover {
            width: 100%;
            padding: 5px;
            border: 1px solid #000;
            text-align: center;
            margin: 10px;
            cursor: pointer;
            text-decoration: none;
            color: #8b00ff;
        }
        .vibran{
            text-decoration: underline;
            color: #8b00ff;
        }
    </style>
    <style>
		 .fon{
			background-color: #fff;
			color: #000;
		}

		.chrift_osnovnoi{
			font-family: sans-serif;
		}

		.razmer_osnovnoi{
			font-size: 1rem;
		}
    </style>
    <script>
let lnkfon = null;
let lnkchrift = null;
let lnkrazmer = null;
let mystyle = {fon: 'base', chrift: 'base', razmer: 'base'}

let head = document.querySelector('head')

function store () {
    localStorage.mystyle = JSON.stringify(mystyle)
}

function setstyle (style) {
    const est = document.createElement('style');
    est.innerHTML = style;
    head.appendChild (est);
    return est;
}

function  changefon (val) {
    if (lnkfon) {
        head.removeChild (lnkfon)
        lnkfon = null
    }
    if (val == 'drugoi') {
        lnkfon = setstyle('.fon{background-color: #000;color: #fff;}')
    }
    mystyle.fon = val
    store()
}   

function  changechrift (val) {
    if (lnkchrift) {
        head.removeChild (lnkchrift)
        lnkchrift = null
    }
    if (val == 'drugoi') {
        lnkchrift = setstyle('.chrift{font-family: serif;}')
    }
    mystyle.chrift = val
    store()
} 
  
function  changerazmer (val) {
    if (lnkrazmer) {
        head.removeChild (lnkrazmer)
        lnkrazmer = null
     }
        
    if (val == '15') {
        lnkrazmer = setstyle('.chrift{font-size: 1.5rem;;}')
    } else if (val == '20') {
        lnkrazmer = setstyle('.chrift{font-size: 2rem;;}')
    }
    mystyle.razmer = val
    store()
}   
    
if (localStorage.mystyle) {
    mystyle = JSON.parse(localStorage.mystyle)
    if (mystyle.fon != 'base') changefon (mystyle.fon)
    if (mystyle.chrift == 'base') changechrift (mystyle.chrift)
    if (mystyle.razmer != 'base') changerazmer (mystyle.razmer)
}

    </script>
</head>
<body class="fon chrift razmer">
 
<div class="blok">
    <div class="knopka knopka1 vibran">Основной фон</div>
    <div class="knopka knopka2">Смена фона</div>
    <div class="knopka knopka3 vibran">Основной шрифт</div>
    <div class="knopka knopka4">Другой шрифт</div>
    <div class="knopka knopka5 vibran">Основной размер</div>
    <div class="knopka knopka6">Увеличить размер * 1,5</div>
    <div class="knopka knopka7">Увеличить размер * 2</div>
    <div class="tekst"><br><br>
        ОБ ОРГАНИЗАЦИИ<br><br>
        Деятельность нашей организации направлена на оказание разного рода помощи малоимущим, социально незащищенным
        слоям населения.
        ?<br><br>
        На сегодняшний день открыты приюты, предназначенные для инвалидов и престарелых граждан, лиц, ведущих
        бродяжнический образ жизни, а так же для людей, оставшихся без средств к существованию и не имеющих крова над
        головой.<br>
        ЦЕЛЬ ДЕЯТЕЛЬНОСТИ:<br><br>
        минимализация бродяжничества в Новосибирске и Новосибирской области
        ОСНОВНЫЕ ЗАДАЧИ:<br><br>
        социальная и психологическая адаптация граждан через проживание в центре восстановления личности;<br>
        восполнение жизненно важных потребностей;<br>
        развитие в людях чувства сострадания, взаимовыручки, единства, милосердия, любви к ближним;<br>
        восстановление социального статуса, восстановление социальных – трудовых навыков, трудоустройство.<br>
 
        Я знаю, что есть люди, которым нужна помощь,<br>
        и мы в силах оказать её.<br><br>
        Директор АНО "ТВОЙ ДОМ"<br>
        Наталья Петровна Першина
    </div>
</div>
<script>

const body = document.querySelector("body");
const knopka1 = document.querySelector(".knopka1");
const knopka2 = document.querySelector(".knopka2");
const knopka3 = document.querySelector(".knopka3");
const knopka4 = document.querySelector(".knopka4");
const knopka5 = document.querySelector(".knopka5");
const knopka6 = document.querySelector(".knopka6");
const knopka7 = document.querySelector(".knopka7");
 
let fun_knopka1 = () =>{
    changefon ('base')
 
    knopka1.classList.add("vibran");
    knopka2.classList.remove("vibran");
}
knopka1.addEventListener("click", fun_knopka1);
 
let fun_knopka2 = () =>{
    changefon ('drugoi')
 
    knopka1.classList.remove("vibran");
    knopka2.classList.add("vibran");
}
knopka2.addEventListener("click", fun_knopka2);
 
let fun_knopka3 = () =>{
    changechrift ('base')
 
    knopka3.classList.add("vibran");
    knopka4.classList.remove("vibran");
}
knopka3.addEventListener("click", fun_knopka3);
 
let fun_knopka4 = () =>{
    changechrift ('drugoi')
 
    knopka3.classList.remove("vibran");
    knopka4.classList.add("vibran");
}
knopka4.addEventListener("click", fun_knopka4);
 
let fun_knopka5 = () =>{
    changerazmer ('base')
 
    knopka5.classList.add("vibran");
    knopka6.classList.remove("vibran");
    knopka7.classList.remove("vibran");
}
knopka5.addEventListener("click", fun_knopka5);
 
let fun_knopka6 = () =>{
    changerazmer ('15') 
    
    knopka5.classList.remove("vibran");
    knopka6.classList.add("vibran");
    knopka7.classList.remove("vibran");
}
knopka6.addEventListener("click", fun_knopka6);
 
let fun_knopka7 = () =>{
    changerazmer ('20') 
        
    knopka5.classList.remove("vibran");
    knopka6.classList.remove("vibran");
    knopka7.classList.add("vibran");
}
knopka7.addEventListener("click", fun_knopka7);
</script>
</body>
</html>

laimas · #16 (**permalink**) 07.09.2020, 20:59

voraa,
как решение, это имеет большой минус потому, что такое сопровождать, так лучше повеситься.

Всех этих fun_knopka и forEach не должно быть и близко.

Ops · #17 (**permalink**) 08.09.2020, 04:40

Где то я видел в инете готовое решение, разработанное в колабе с врачами, с уже подключенными библиотеками, чуть ли не texttospeech там был, стили подгружались из внешних файлов. Я думаю если от автора не требуется самописное решение, то лучше погуглить.

Сергей Ракипов · #18 (**permalink**) 08.09.2020, 05:45

Спасибо за участие в обсуждение. Буду пробовать применить на свой проект.Рони как всегда отдельное спасибо. Сейчас начну делать то что ты предложил.

То что я выложил в код это был просто шаблон, я не могу весь когда выложить так как там черт ногу сломит.

Я делаю сайт для благотворительно организации, бесплатно. По мере своих сил и умений, благо люди помогают, спасибо.

И я читал и изучал вопрос что нужно и как нужно делать сайт для слабовидящих, там большая пачка ГОСТов

Вот как предварительный вариант выглядит см. скриншоты.

Сергей Ракипов · #19 (**permalink**) 08.09.2020, 05:46

Ops,
Я видел эти решение они очень корявые, то есть если их вставлять то может все не очень хорошо местами выглядеть, проще саму попробовать, и тем более некоторые платные

Сергей Ракипов · #20 (**permalink**) 08.09.2020, 05:47

laimas,
то есть то что предложил voraa, лучше не пробовать использовать?

Форум

Справочник

Discord чат

Курсы javascript