<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>/photo1 Qora</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 20px;
                text-align: center;
            }
            #image-container {
                margin-top: 20px;
            }
            img {
                max-width: 100%;
                height: auto;
                border: 1px solid #ccc;
                padding: 5px;
                background-color: #f9f9f9;
            }
    
    a {
      text-decoration: none;
      display: inline-block;
      padding: 8px 16px;
    }
    
    a:hover {
      background-color: #ddd;
      color: black;
    }
    
    .previous {
      background-color: #198964;
      color: #c1c1c1;
    }
    
    .next {
      background-color: #198964;
      color: white;
    }
    
    .round {
      border-radius: 60%;
    }
    
        </style>
    </head>
    <body>
        <h1><a href="/0x0y0z" class="previous round">&#8249;</a>&nbsp; /photo1 Qora &nbsp;<a href="/photo2" class="next round">&#8250;</a></h1>
    
        <label for="ipfs-node">Select IPFS Node:</label>
        <select id="ipfs-node" onchange="updateNode()">
            <option value="https://ipfs.io/ipfs/">IPFS Public Gateway</option>
            <option value="https://gateway.pinata.cloud/ipfs/">Pinata Gateway</option>
            <option value="https://dweb.link/ipfs/">dweb.link Gateway</option>    
            <option value="http://localhost:8080/ipfs/">Qora and :8080_IPFS both localhost</option>
            <option value="custom">Custom Node URL</option>
        </select>
    
        <div id="custom-node-container" style="display: none;">
            <label for="custom-ipfs-node">Enter Custom IPFS Node URL:</label>
            <input type="text" id="custom-ipfs-node" placeholder="Enter IPFS node URL" />
        </div>
    
        <div id="image-container">
            <img id="ipfs-image" src="" alt="IPFS Image" />
        </div>
    
        <script>
            const hash = 'QmQtYmFxuDJCk7pZfY5TPj4CNHr86rBMQwViMpYHvMFkmD';
            let selectedNode = 'https://ipfs.io/ipfs/'; // Default IPFS public gateway
    
            function updateNode() {
                const nodeSelect = document.getElementById('ipfs-node');
                const customNodeContainer = document.getElementById('custom-node-container');
                const customNodeInput = document.getElementById('custom-ipfs-node');
    
                if (nodeSelect.value === 'custom') {
                    customNodeContainer.style.display = 'block';
                    customNodeInput.focus();
                } else {
                    customNodeContainer.style.display = 'none';
                    selectedNode = nodeSelect.value;
                    loadImage();
                }
            }
    
            function loadImage() {
                const customNodeInput = document.getElementById('custom-ipfs-node');
                if (customNodeInput.style.display === 'block') {
                    selectedNode = customNodeInput.value.trim();
                }
    
                if (!selectedNode.endsWith('/')) {
                    selectedNode += '/';
                }
    
                const imageUrl = `${selectedNode}${hash}`;
                const img = document.getElementById('ipfs-image');
                img.src = imageUrl;
                img.alt = 'Loading image...';
            }
    
            // Load the image initially with the default node
            window.onload = loadImage;
    
            // Add event listener to the custom node input field
            document.getElementById('custom-ipfs-node').addEventListener('input', loadImage);
        </script>
    IPFS picture file, 合歡山, Taiwan. <a href="/index/blockexplorer.html?block=1008850" title="/photo1 for sale blockchain transaction">/photo1</a>QNS for sale.
    </body>
    </html>