jp/settings.html at main · kendawson-online/jp · GitHub

1
2
3
4
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
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Jesus Prayer: Settings</title>
    <meta name="description" content="Lord Jesus Christ Son of God have mercy on me a sinner is an Orthodox Christian prayer.">
    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#8b0000" media="(prefers-color-scheme: dark)" />
    <link rel="manifest" href="manifest.json" />
    <link rel="icon" href="assets/img/app-icons/orthodox-cross.svg" sizes="any" type="image/svg+xml" />
    <link rel="stylesheet" href="assets/css/base.css" />
    <link rel="stylesheet" href="assets/css/settings.css" />
    <script>
        const theme = localStorage.getItem('theme') || 'dark';
        const isLight = theme === 'light';
        document.documentElement.classList.toggle('light', isLight);
        const icon = (name, lightFile, darkFile) => `assets/img/app-icons/${isLight ? lightFile : darkFile}`;
        window.themeIcons = {
            sun: icon('sun', 'sun-fill.svg', 'sun.svg'),
            moon: icon('moon', 'moon.svg', 'moon-fill.svg'),
            toggle: icon('toggle', 'toggle-off.svg', 'toggle-on.svg')
        };
    </script>
</head>
<body>

    <div class="cornerBtnWrapper">
        <button id="closeSettings" class="icon-button" type="button" aria-label="Close settings">
            <img src="assets/img/app-icons/x-circle.svg" class="corner-icon close-btn" alt="" />
        </button>
    </div>

    <div class="settings-container">

        <h2 style="text-align: center;">App Settings:</h2>

        <!-- theme toggle -->
        <div class="themeControls" id="themeControls">
            <label>Theme Style:</label>
            <img id="sunIcon" title="Light" alt="Light" width="30">
            <img id="toggleIcon" title="Toggle Switch" alt="Toggle" width="52" height="52">
            <img id="moonIcon" title="Dark" alt="Dark" width="28">
            <script>
                sunIcon.src = window.themeIcons.sun;
                moonIcon.src = window.themeIcons.moon;
                toggleIcon.src = window.themeIcons.toggle;
            </script>
        </div>

        <hr/><br/>

        <!-- glow color -->
        <div class="setting-group">
            <label>Glow Color (Dark Mode)</label>
            <input type="color" id="glowDark" value="#8b0000">
        </div>

        <div class="setting-group">
            <label>Glow Color (Light Mode)</label>
            <input type="color" id="glowLight" value="#7d93a1">
        </div>

        <hr/><br/>

        <!-- checkboxes -->
        <div class="setting-group">
            <label>
                <input type="checkbox" id="noRotation"> Disable Automatic Rotation on Page Load
            </label>
        </div>

        <div class="setting-group">
            <label>
                <input type="checkbox" id="noShadow"> Disable Glow/Shadow
            </label>
        </div>

        <hr/><br/>

        <!-- range input -->
        <div class="setting-group">
            <label for="speedSliderSettings">Rotation Speed:</label>
            <input type="range" id="speedSliderSettings" class="speed-slider" min="5" max="90" value="30" step="1">
            <div style="font-size: smaller; text-align:center; margin-top:20px;">
                It will take <span id="speedValueSettings">30</span> seconds to complete 1 rotation
            </div>
        </div>

    </div>

    <script type="module" src="assets/js/settings.js"></script>

</body>
</html>