gamf-web1-2025-lev3-ea-beadando/html5.html at main · ImBenny95/gamf-web1-2025-lev3-ea-beadando · 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
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 API-k | WEB-programozás I. - Előadás beadandó feladat</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/html5.css">
</head>
<body>
<div class="background-container">
    <div class="site-wrapper">
        <header>
            <h1>WEB-programozás I. <br> Előadás beadandó feladat</h1>
        </header>
        <nav>
            <ul>
                <li><a href="index.html">Kezdőlap</a></li>
                <li><a href="tabla.html">Táblázat</a></li>
                <li class="active"><a href="html5.html">HTML5 API</a></li>
                <li><a href="chart.html">ChartJS</a></li>
                <li><a href="ajax.html">AJAX</a></li>
                <li><a href="oojs.html">OOJS</a></li>
                <li><a href="react.html">React</a></li>
            </ul>
        </nav>
        <aside>
            <p>HTML5 API bemutató megoldások. A különböző típusok között az alábbi gombokkal válthatsz.</p>
        </aside>
        <aside>
            <button data-target="localstorage">Web Storage</button>
            <button data-target="geolocation">Geolocation</button>
            <button data-target="canvas">Canvas</button>
            <button data-target="dragdrop">Drag & Drop</button>
            <button data-target="svg">SVG</button>
            <button data-target="worker">Web Worker</button>
            <button data-target="sse">Server-Sent Events</button>
        </aside>
        <div id="content">
            <h2>HTML5 API példák</h2>
            <section id="localstorage" class="apiSection">
                <h3>Web Storage (LocalStorage)</h3>
                <input type="text" id="storageInput" placeholder="Írj be valamit...">
                <button id="saveBtn">Mentés</button>
                <p id="savedText"></p>
            </section>
            <section id="geolocation" class="apiSection" style="display: none;">
                <h3>Geolocation API</h3>
                <h4 style="color: red;">A host szerveren működő HTTPS kapcsolat szükséges!</h3>
                <button id="geoBtn">Helyzet lekérése</button>
                <p id="geoResult">Helyzet: ...</p>
            </section>
            <section id="canvas" class="apiSection" style="display: none;">
                <h3>Canvas példa</h3>
                <canvas id="myCanvas" width="300" height="150" style="border:1px solid black;"></canvas>
                <button id="rajzolBtn">Rajzolj valamit</button>
            </section>
            <section id="dragdrop" class="apiSection" style="display: none;">
                <h3>Drag & Drop API</h3>
                <p>Fogd meg a színes négyzetet és húzd a célterületre!</p>
                <div id="dragMe" draggable="true" style="width:50px; height:50px; background:red;"></div>
                <div id="dropZone" style="width:200px; height:100px; border:2px dashed gray; margin-top:20px;">
                    <p>Ide húzd!</p>
                </div>
            </section>
            <section id="svg" class="apiSection" style="display: none;">
                <h3>SVG példa</h3>
                <svg id="svgArea" width="400" height="300" style="border:1px solid black; background:#f0f0f0;">
                    <rect x="20" y="20" width="100" height="100" fill="skyblue" />
                    <circle cx="200" cy="150" r="40" fill="tomato" />
                </svg>
                <p>Kattints az SVG területre új kör létrehozásához!</p>
            </section>
            <section id="worker" class="apiSection" style="display: none;">
                <h3>Web Worker példa</h3>
                <label for="numberInput">Add meg, hány szám összegét szeretnéd kiszámolni:</label>
                <input type="number" id="numberInput" value="10" min="1">
                <button id="startBtn">Számolás indítása</button>
                <p id="workerResult">Összeg: ...</p>
            </section>
            <section id="sse" class="apiSection" style="display: none;">
                <h3>Server-Sent Events példa</h3>
                <h4 style="color: red;">A host szerveren előbb az sse-server.js futtatása szükséges NodeJS alatt!</h3>
                <p id="sseData">Nincs adat...</p>
                <button id="sseStartBtn">Kapcsolódás indítása</button>
            </section>
        </div>
        <footer>
            <p>&copy; 2025 WEB-programozás I. - Előadás beadandó feladat</p>
            <p>A weboldalt készítette: Pál Bence (GHXXQA)</p>
        </footer>
    </div>
</div>
<script src="js/html5/html5.js"></script>
<script src="js/html5/wbstr.js"></script>
<script src="js/html5/geoloc.js"></script>
<script src="js/html5/canvas.js"></script>
<script src="js/html5/dragdrop.js"></script>
<script src="js/html5/svg.js"></script>
<script src="js/html5/workerapi.js"></script>
<script src="js/html5/sse.js"></script>
</body>
</html>