Code HTML du navigateur proxy Web

6 Cudhdhucvdu

Ouvrir dans l'éditeur Publiez votre code

Recommandé

5 April 2025

un site Web de plateforme

22 November 2025

Effet de survol du bouton en verre liquide CSS

23 July 2025

Modèle HTML CSS de carte de profil Neumorphic

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Proxy Browser</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
            overflow: hidden;
            background-color: #1a1a1a;
        }

.navbar {
            display: flex;
            background-color: #333;
            padding: 10px;
            align-items: center;
            color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        }

.navbar input[type="text"] {
            flex-grow: 1;
            padding: 10px;
            border: none;
            border-radius: 4px;
            margin: 0 10px;
            font-size: 16px;
        }

.navbar button {
            padding: 10px 20px;
            background-color: #007bff;
            border: none;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

.navbar button:hover {
            background-color: #0056b3;
        }

.browser-container {
            width: 100%;
            height: calc(100vh - 60px);
            background-color: white;
        }

iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

.status-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: #222;
            color: #888;
            font-size: 12px;
            padding: 2px 10px;
        }
    </style>
</head>
<body>

<div class="navbar">
        <div style="font-weight: bold; margin-left: 10px;">WebVPN</div>
        <input type="text" id="urlInput" placeholder="Enter URL (e.g., https://www.wikipedia.org)" value="https://www.bing.com">
        <button onclick="loadSite()">Go</button>
    </div>

<div class="status-bar">
        Connection Status: Secure Proxy Simulator Active
    </div>

const frame = document.getElementById('browserFrame');
            frame.src = url;
            
            console.log("Navigating to: " + url);
        }

// Allow pressing Enter to load
        document.getElementById('urlInput').addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                loadSite();
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Proxy Browser</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #202124;
            display: flex;
            flex-direction: column;
        }
        .toolbar {
            background-color: #2f3136;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            z-index: 10;
        }
        .logo {
            color: #4285F4;
            font-weight: bold;
            font-size: 1.2rem;
            cursor: pointer;
        }
        .address-bar-container {
            flex-grow: 1;
            display: flex;
            background: #3c4043;
            border-radius: 24px;
            padding: 5px 15px;
            align-items: center;
        }
        input#url-input {
            background: transparent;
            border: none;
            color: white;
            width: 100%;
            padding: 8px;
            outline: none;
            font-size: 14px;
        }
        button {
            background: #8ab4f8;
            border: none;
            padding: 8px 20px;
            border-radius: 18px;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.2s;
        }
        button:hover {
            background: #aecbfa;
        }
        .browser-container {
            flex-grow: 1;
            width: 100%;
            background: white;
            position: relative;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        .info-overlay {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            pointer-events: none;
        }
    </style>
</head>
<body>

<div class="toolbar">
        <div class="logo" onclick="location.reload()">ProxyBrowse</div>
        <div class="address-bar-container">
            <input type="text" id="url-input" placeholder="Search Google or type a URL..." autocomplete="off">
        </div>
        <button onclick="navigateTo()">Go</button>
    </div>

<div class="browser-container">
        
        <iframe id="viewport" src="https://www.google.com/search?igu=1"></iframe>
        <div class="info-overlay">Note: Some sites may block embedding due to security headers.</div>
    </div>

function navigateTo() {
            let url = urlInput.value.trim();
            
            if (!url) return;

// Check if input is a search term or a URL
            const isUrl = url.includes('.') && !url.includes(' ');

if (isUrl) {
                // Ensure protocol is present
                if (!url.startsWith('http://') && !url.startsWith('https://')) {
                    url = 'https://' + url;
                }
                viewport.src = url;
            } else {
                // Search via Google (igu=1 allows iframe display for Google)
                viewport.src = `https://www.google.com/search?q=${encodeURIComponent(url)}&igu=1`;
            }
        }

// Allow pressing "Enter" key to navigate
        urlInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                navigateTo();
            }
        });

// Handle iframe security restrictions
        viewport.onload = function() {
            console.log("Attempted to load: " + viewport.src);
        };
    </script>
</body>
</html>

CSS