streamlayer/streamlayer.html at main · ipappa74/streamlayer · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!--
===========================================================
 STREAMLAYER — Advanced Multistream Dashboard
===========================================================
 Tekijä:      Toni
 Sijainti:    Oulu, Suomi
 Projekti:    StreamLayer (HTML5 + CSS3 + JS)

 Kuvaus:
   Kevyt, moderni ja täysin responsiivinen hallintapaneeli
   Twitch- ja Kick-striimien seuraamiseen. Tukee useita
   yhtäaikaisia striimejä, suosikkilistoja, automaattista
   LIVE-seurantaa ja kustomoitavaa grid-asettelua.

 GitHub Repo:
   https://github.com/ipappa74/streamlayer

 GitHub Pages:
   https://ipappa74.github.io/streamlayer/

 Kontaktit:
   Email:     toni.spams@gmail.com
   GitHub:    https://github.com/ipappa74
   Kick:      https://kick.com/ipappa

 Ominaisuudet:
   • StreamLayer Blue UI (Neon & Glassmorphism)
   • Monialustatuki: Kick & Twitch integraatiot
   • Täysi mobiilioptimointi (stacked view + mobile menu)
   • Suosikit automaattisella live-statuksella
   • Reaaliaikaiset katsojamäärät (DecAPI & Kick API)
   • Vedettävät ikkunat (Drag & Drop)
   • Mute-tilan ja asetusten tallennus (localStorage)
   • Integroitu chat-hallinta ja auto-open-toiminto

 Lisenssi:
   CC BY-NC-SA 4.0 License
===========================================================
-->

<!DOCTYPE html>
<html lang="fi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StreamLayer</title>

<!-- Faviconit ja Manifest -->
	<link rel="apple-touch-icon" sizes="180x180" href="/streamlayer/img/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/streamlayer/img/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/streamlayer/img/favicon-16x16.png">
	<link rel="manifest" href="/streamlayer/img/site.webmanifest">

<!-- Ulkoiset kirjastot ja tyylit -->
    <script src="https://player.twitch.tv/js/embed/v1.js" async></script>
    <link rel="stylesheet" href="style.css?v=1.8.19">
</head>
<body>

<aside id="main-sidebar">
<!-- Mobiili sivupalkin sulku -->
    <button class="mobile-close-btn" onclick="toggleSidebar()">×</button>
<!-- Sivupalkin hallintapainike -->
    <button class="toggle-sidebar-btn" onclick="toggleSidebar()">◀</button>

<!-- Sovelluksen logo ja otsikko -->
    <div class="app-header">
        <svg class="app-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="5 3 19 12 5 21 5 3"></polygon>
            <path d="M19 12l-14 9V3l14 9z" fill="var(--accent)" fill-opacity="0.2"></path>
            <path d="M22 12l-14 9V3l14 9z" opacity="0.3"></path>
        </svg>
        <h1 class="app-name">StreamLayer</h1>
    </div>

    <h3>Suosikit</h3>

<!-- Uuden kanavan lisäyslomake -->
    <form class="input-group" onsubmit="saveFavorite(event)">
        <select id="platform-select">
            <option value="kick">Kick</option>
            <option value="twitch">Twitch</option>
        </select>
        <input type="text" id="channel-name" placeholder="Käyttäjänimi" autocomplete="off" required maxlength="50" pattern="[A-Za-z0-9_-]+">
        <button class="primary-btn" type="submit">Lisää listalle</button>
        <p id="form-feedback" class="form-feedback" aria-live="polite"></p>
    </form>

<!-- Lista tallennetuista suosikeista -->
    <div id="favorites-list"></div>

<!-- Footer -->
	<footer class="app-footer">
		<div class="footer-links">
			<button class="footer-link" type="button" onclick="openSettings()">Asetukset</button>
			<button class="footer-link" type="button" onclick="openAbout()">Tietoa sovelluksesta</button>
		</div>
		<span class="footer-copy">© 2026 StreamLayer by Toni</span>
	</footer>
</aside>

<main>
<!-- Grid-alue, johon striimit avautuvat -->
    <div id="stream-grid">
        <section id="stream-empty-state" class="empty-state" aria-live="polite">
            <h2>Avaa ensimmäinen striimi</h2>
            <p>Lisää kanava suosikkeihin vasemmalta ja avaa se listasta.</p>
        </section>
    </div>
</main>

<!-- Tietoa-modal -->
<div id="about-modal" class="modal-overlay" onclick="closeAbout(event)">
    <div class="modal-content about-card">
        <button class="modal-close" onclick="closeAbout(event)">×</button>
        <h2 id="app-name">StreamLayer</h2>
        <div class="meta-info-list">
            <p id="app-version"></p>
            <p id="app-author"></p>
            <p id="app-date"></p>
			<a id="app-kick" href="#" target="_blank" class="kick-btn">Seuraa Kick:ssä</a>
            <a id="app-repo" href="#" target="_blank" class="repo-btn">GitHub Repository</a>
        </div>
    </div>
</div>

<!-- Asetukset-modal -->
<div id="settings-modal" class="modal-overlay" onclick="closeSettings(event)">
    <div class="modal-content about-card settings-card" role="dialog" aria-modal="true" aria-labelledby="settings-title">
        <button class="modal-close" type="button" aria-label="Sulje asetukset" onclick="closeSettings(event)">×</button>
        <h2 id="settings-title">Asetukset</h2>
        <label class="stream-setting" for="auto-close-offline">
            <input type="checkbox" id="auto-close-offline" onchange="toggleAutoCloseOffline(event)">
            <span>Sulje offline-striimi minuutin kuluttua</span>
        </label>
        <section class="settings-section" aria-labelledby="backup-title">
            <h3 id="backup-title">Varmuuskopio</h3>
            <p>Tallenna suosikit ja asetukset JSON-tiedostoon tai palauta ne takaisin.</p>
            <div class="backup-actions">
                <button class="backup-btn" type="button" onclick="exportBackup()">Vie varmuuskopio</button>
                <label class="backup-btn" for="backup-file">Palauta varmuuskopio</label>
                <input class="backup-file-input" id="backup-file" type="file" accept="application/json,.json" onchange="importBackup(event)">
            </div>
            <p id="settings-feedback" class="form-feedback" aria-live="polite"></p>
        </section>
    </div>
</div>

<!-- Sovelluslogiikka -->
<script src="script.js?v=1.8.19"></script>
</body>
</html>