5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
# File 'lib/lowfidelity/payload.rb', line 5
def html
config = Lowfidelity.configuration
font_param = config.font.to_s.tr(" ", "+")
default_on_js = config.default_on ? "true" : "false"
button_js = config.button ? "true" : "false"
<<~HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=#{font_param}:wght@400;700&family=Patrick+Hand&display=swap" rel="stylesheet">
<style id="lowfi-styles">
html.lowfi-mode { filter: grayscale(1) contrast(1.05); }
html.lowfi-mode body, html.lowfi-mode body * {
font-family: '#{config.font}', 'Patrick Hand', 'Comic Sans MS', cursive !important;
border-color: #000 !important;
border-radius: 0 !important;
box-shadow: none !important;
background-image: none !important;
text-shadow: none !important;
color: #000 !important;
}
html.lowfi-mode body *:not(input):not(textarea):not(select) {
border-style: dashed !important;
}
html.lowfi-mode img,
html.lowfi-mode svg,
html.lowfi-mode video,
html.lowfi-mode canvas {
filter: grayscale(1) contrast(1.2) opacity(0.7);
}
html.lowfi-mode body,
html.lowfi-mode [class*="bg-"]:not(#lowfi-toggle) {
background-color: #fff !important;
}
#lowfi-toggle {
position: fixed; bottom: 12px; right: 12px; z-index: 2147483647;
background: #fff; color: #000; border: 2px dashed #000;
font-family: 'Caveat', 'Patrick Hand', cursive; font-size: 14px;
padding: 6px 10px; cursor: pointer; border-radius: 0;
box-shadow: none; line-height: 1;
}
html.lowfi-mode #lowfi-toggle { background: #000 !important; color: #fff !important; }
</style>
<script id="lowfi-script">
(function() {
var KEY = 'lowfi-mode';
var DEFAULT_ON = #{default_on_js};
var SHOW_BUTTON = #{button_js};
function apply() {
if (localStorage.getItem(KEY) === '1') {
document.documentElement.classList.add('lowfi-mode');
} else {
document.documentElement.classList.remove('lowfi-mode');
}
}
function ensureButton() {
if (!SHOW_BUTTON) return;
if (!document.body) return;
if (document.getElementById('lowfi-toggle')) return;
var btn = document.createElement('button');
btn.id = 'lowfi-toggle';
btn.type = 'button';
btn.textContent = 'lo-fi';
btn.addEventListener('click', function() {
var on = localStorage.getItem(KEY) === '1';
localStorage.setItem(KEY, on ? '0' : '1');
apply();
});
document.body.appendChild(btn);
}
if (DEFAULT_ON && localStorage.getItem(KEY) === null) {
localStorage.setItem(KEY, '1');
}
apply();
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', ensureButton);
} else {
ensureButton();
}
document.addEventListener('turbo:load', function() { apply(); ensureButton(); });
document.addEventListener('turbo:render', function() { apply(); ensureButton(); });
})();
</script>
HTML
end
|