[GH-ISSUE #50] New land page. #47

New issue

Closed

opened 2026-03-03 11:13:40 +03:00 by kerem · 4 comments

kerem commented

2026-03-03 11:13:40 +03:00

Owner

Originally created by @marcoemanuelecocco on GitHub (Oct 13, 2024).
Original GitHub issue: https://github.com/debloper/xiosk/issues/50

below is a single page to select in pkiosh at the address http://127.0.0.1/start.html
the two files are to be placed in the pkiosk/web folder
in the siteButtons.txt file there are the sites paired with the selection buttons.

siteButtons.txt
start.html.txt

Originally created by @marcoemanuelecocco on GitHub (Oct 13, 2024). Original GitHub issue: https://github.com/debloper/xiosk/issues/50 below is a single page to select in pkiosh at the address http://127.0.0.1/start.html the two files are to be placed in the pkiosk/web folder in the siteButtons.txt file there are the sites paired with the selection buttons. [siteButtons.txt](https://github.com/user-attachments/files/17356224/siteButtons.txt) [start.html.txt](https://github.com/user-attachments/files/17356225/start.html.txt)

kerem closed this issue

2026-03-03 11:13:40 +03:00

kerem commented

2026-03-03 11:13:41 +03:00

Author

Owner

@marcoemanuelecocco commented on GitHub (Oct 13, 2024):

Start.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page con Slidebar a Scomparsa</title>
    <style>
        body {
            display: flex;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .sidebar {
            width: 200px;
            background-color: #333;
            color: white;
           
            height: 100vh;
            position: fixed;
            left: -200px;
            transition: left 0.3s;
        }
        .sidebar button {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            background-color: #444;
            color: white;
            border: none;
            cursor: pointer;
        }
        .sidebar button:hover {
            background-color: #555;
        }
        .main-content {
            margin-left: 0;
            padding: 20px;
            flex-grow: 1;
            transition: margin-left 0.3s;
        }
        .open-sidebar {
            left: 0;
        }
        .shift-content {
            margin-left: 200px;
        }
        iframe {
            width: 100%;
            height: 80vh;
            border: none;

        }
        .toggle-button {
            position: fixed;
            top: 20px;
            left: 30px;
            background-color: #444;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }
        .menu-button {
            
            background-color: #444;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button class="toggle-button" onclick="toggleSidebar()">☰</button>
    <div class="sidebar" id="sidebar">
        <button class="menu-button" onclick="toggleSidebar()">☰</button>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="main-content" id="mainContent">
        <iframe id="siteFrame" src=""></iframe>
    </div>

 <script>
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        const mainContent = document.getElementById('mainContent');
        sidebar.classList.toggle('open-sidebar');
        mainContent.classList.toggle('shift-content');
        if (sidebar.classList.contains('open-sidebar')) {
            setTimeout(hideSidebar, 5000); // Nascondi la sidebar dopo 10 secondi
        }
    }

    function hideSidebar() {
        const sidebar = document.getElementById('sidebar');
        const mainContent = document.getElementById('mainContent');
        sidebar.classList.remove('open-sidebar');
        mainContent.classList.remove('shift-content');
    }

    function loadSite(url) {
        document.getElementById('siteFrame').src = url;
    }

    function loadButtons() {
        fetch('siteButtons.txt')
            .then(response => response.text())
            .then(data => {
                const lines = data.split('\n');
                const sidebar = document.getElementById('sidebar');
                let firstSiteLoaded = false;

                lines.forEach((line, index) => {
                    const [name, url] = line.split(',');
                    if (name && url) {
                        const button = document.createElement('button');
                        button.textContent = name;
                        button.onclick = () => loadSite(url.trim());
                        sidebar.appendChild(button);

                        // Carica il primo sito di default
                        if (!firstSiteLoaded && index === 0) {
                            loadSite(url.trim());
                            firstSiteLoaded = true;
                        }
                    }
                });
            })
            .catch(error => console.error('Errore nel caricamento del file:', error));
    }

    document.addEventListener('DOMContentLoaded', loadButtons);
</script>
</body>
</html>

@marcoemanuelecocco commented on GitHub (Oct 13, 2024): Start.html ```html <!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Landing Page con Slidebar a Scomparsa</title> <style> body { display: flex; margin: 0; font-family: Arial, sans-serif; } .sidebar { width: 200px; background-color: #333; color: white; height: 100vh; position: fixed; left: -200px; transition: left 0.3s; } .sidebar button { display: block; width: 100%; padding: 10px; margin: 5px 0; background-color: #444; color: white; border: none; cursor: pointer; } .sidebar button:hover { background-color: #555; } .main-content { margin-left: 0; padding: 20px; flex-grow: 1; transition: margin-left 0.3s; } .open-sidebar { left: 0; } .shift-content { margin-left: 200px; } iframe { width: 100%; height: 80vh; border: none; } .toggle-button { position: fixed; top: 20px; left: 30px; background-color: #444; color: white; border: none; padding: 10px; cursor: pointer; } .menu-button { background-color: #444; color: white; border: none; padding: 10px; cursor: pointer; } </style> </head> <body> <button class="toggle-button" onclick="toggleSidebar()">☰</button> <div class="sidebar" id="sidebar"> <button class="menu-button" onclick="toggleSidebar()">☰</button> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <div class="main-content" id="mainContent"> <iframe id="siteFrame" src=""></iframe> </div> <script> function toggleSidebar() { const sidebar = document.getElementById('sidebar'); const mainContent = document.getElementById('mainContent'); sidebar.classList.toggle('open-sidebar'); mainContent.classList.toggle('shift-content'); if (sidebar.classList.contains('open-sidebar')) { setTimeout(hideSidebar, 5000); // Nascondi la sidebar dopo 10 secondi } } function hideSidebar() { const sidebar = document.getElementById('sidebar'); const mainContent = document.getElementById('mainContent'); sidebar.classList.remove('open-sidebar'); mainContent.classList.remove('shift-content'); } function loadSite(url) { document.getElementById('siteFrame').src = url; } function loadButtons() { fetch('siteButtons.txt') .then(response => response.text()) .then(data => { const lines = data.split('\n'); const sidebar = document.getElementById('sidebar'); let firstSiteLoaded = false; lines.forEach((line, index) => { const [name, url] = line.split(','); if (name && url) { const button = document.createElement('button'); button.textContent = name; button.onclick = () => loadSite(url.trim()); sidebar.appendChild(button); // Carica il primo sito di default if (!firstSiteLoaded && index === 0) { loadSite(url.trim()); firstSiteLoaded = true; } } }); }) .catch(error => console.error('Errore nel caricamento del file:', error)); } document.addEventListener('DOMContentLoaded', loadButtons); </script> </body> </html> ```

kerem commented

2026-03-03 11:13:41 +03:00

Author

Owner

@marcoemanuelecocco commented on GitHub (Oct 13, 2024):

siteButtons.txt

Site1,http://www.exemple1.com
Site2,https://www.exemple2.com
Site3,https://www.site3.com

@marcoemanuelecocco commented on GitHub (Oct 13, 2024): siteButtons.txt ```typescript Site1,http://www.exemple1.com Site2,https://www.exemple2.com Site3,https://www.site3.com ```

kerem commented

2026-03-03 11:13:41 +03:00

Author

Owner

@debloper commented on GitHub (Oct 19, 2024):

Not sure what do you want out of this.

Are you asking these files to be added to the repo?
If so, then can you please explain, what for?
Can you please submit a pull request?

@debloper commented on GitHub (Oct 19, 2024): Not sure what do you want out of this. Are you asking these files to be added to the repo? If so, then can you please explain, what for? Can you please submit a [pull request](https://www.youtube.com/watch?v=8lGpZkjnkt4)?

kerem commented

2026-03-03 11:13:41 +03:00

Author

Owner

@debloper commented on GitHub (Nov 22, 2024):

Please reopen if there's a better explanation to keep it open.

@debloper commented on GitHub (Nov 22, 2024): Please reopen if there's a better explanation to keep it open.