my-accessibility-widget
Version:
Accessibility widget untuk web (font resize, reading mask, dsb).
188 lines (177 loc) • 6.42 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accessibility Widget</title>
<link rel="stylesheet" href="./widget.css" />
</head>
<body>
<!-- Floating Button -->
<button
id="accessibility-toggle"
class="accessibility-fab bg-black-aceesibility"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.4575 14.0572V9.02866M12.4575 14.0572H11.0861M12.4575 14.0572L15.2004 20.0001M12.4575 9.02866H11.0861M12.4575 9.02866L13.7381 8.81523C14.7101 8.65322 15.6618 8.38692 16.5768 8.02094L17.4861 7.65723M11.0861 14.0572V9.02866M11.0861 14.0572L7.88608 20.0001M11.0861 9.02866L9.97052 8.84273C8.89172 8.66293 7.84586 8.32283 6.86764 7.83372L6.51465 7.65723"
stroke="white"
stroke-width="2.3"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12.7309 4.91429C12.7309 5.41923 12.3216 5.82857 11.8166 5.82857C11.3117 5.82857 10.9023 5.41923 10.9023 4.91429C10.9023 4.40934 11.3117 4 11.8166 4C12.3216 4 12.7309 4.40934 12.7309 4.91429Z"
fill="white"
stroke="white"
stroke-width="2.3"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<!-- Panel -->
<div id="accessibility-panel" class="accessibility-panel hidden">
<div class="container-button-drag">
<h3>accesibility</h3>
<button id="drag" class="button bg-black-aceesibility button-drag-text">
klik drag
</button>
</div>
<div class="container-main-panel">
<!-- Font Size -->
<div class="containerbutton">
<div class="font-size-control">
<p class="feature-info-title">Font Size</p>
<div class="font-buttons">
<button class="button bg-black-aceesibility" id="decrease-font">
-
</button>
<button class="button bg-black-aceesibility" id="increase-font">
+
</button>
</div>
</div>
</div>
<!-- ADHD -->
<div class="containerbutton">
<label class="feature-toggle">
<div class="feature-info">
<p class="feature-info-title">ADHD</p>
<p class="feature-info-desc">
Membantu fokus dengan tampilan lebih teratur
</p>
</div>
<div class="switch-wrapper">
<input
type="checkbox"
id="toggle-adhd-checkbox"
class="switch-input"
/>
<span class="switch-slider"></span>
</div>
</label>
</div>
<!-- Epilepsi -->
<div class="containerbutton">
<label class="feature-toggle">
<div class="feature-info">
<p class="feature-info-title">Epilepsi</p>
<p class="feature-info-desc">Kurangi efek visual berlebihan</p>
</div>
<div class="switch-wrapper">
<input
type="checkbox"
id="toggle-epilepsi-checkbox"
class="switch-input"
/>
<span class="switch-slider"></span>
</div>
</label>
</div>
<!-- Reading Mask -->
<div class="containerbutton">
<label class="feature-toggle">
<div class="feature-info">
<p class="feature-info-title">Reading Mask</p>
<p class="feature-info-desc">
Fokus hanya pada teks yang sedang dibaca
</p>
</div>
<div class="switch-wrapper">
<input
type="checkbox"
id="toggle-reading-mask-checkbox"
class="switch-input"
/>
<span class="switch-slider"></span>
</div>
</label>
</div>
<!-- Stop Animation -->
<div class="containerbutton">
<label class="feature-toggle">
<div class="feature-info">
<p class="feature-info-title">Stop Animation</p>
<p class="feature-info-desc">
Hentikan animasi agar lebih nyaman
</p>
</div>
<div class="switch-wrapper">
<input
type="checkbox"
id="stop-animation-checkbox"
class="switch-input"
/>
<span class="switch-slider"></span>
</div>
</label>
</div>
<!-- High Saturation -->
<div class="containerbutton">
<label class="feature-toggle">
<div class="feature-info">
<p class="feature-info-title">High Saturation</p>
<p class="feature-info-desc">Warna lebih tajam & kontras</p>
</div>
<div class="switch-wrapper">
<input
type="checkbox"
id="toggle-high-saturation-checkbox"
class="switch-input"
/>
<span class="switch-slider"></span>
</div>
</label>
</div>
<!-- Low Saturation -->
<div class="containerbutton">
<label class="feature-toggle">
<div class="feature-info">
<p class="feature-info-title">Low Saturation</p>
<p class="feature-info-desc">Warna lebih lembut & redup</p>
</div>
<div class="switch-wrapper">
<input
type="checkbox"
id="toggle-low-saturation-checkbox"
class="switch-input"
/>
<span class="switch-slider"></span>
</div>
</label>
</div>
</div>
<button class="reset-btn bg-black-aceesibility" id="reset-accessibility">
Reset
</button>
</div>
<div id="reading_mask" class="reading_mask"></div>
</body>
</html>