David a fait ça

263 ospino.emilie

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 August 2025

Animation de notification de blob CSS

26 December 2024

Un code par efficientcloud646

28 March 2025

Un code par mcdonge13

HTML

<!doctype html>
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ShadowSurf • Unblock the Web</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
      --primary: 59 130 246;
    }

body {
      font-family: 'Inter', system_ui, sans-serif;
      background: radial-gradient(circle at 50% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                  linear-gradient(135deg, #0f172a 0%, #1e2937 100%);
      min-height: 100vh;
      color: #e2e8f0;
      transition: background 0.6s ease;
    }

.title-font {
      font-family: 'Space Grotesk', sans-serif;
    }

.glass {
      background: rgba(30, 41, 59, 0.75);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(148, 163, 184, 0.15);
      box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
    }

.glow-blue {
      box-shadow: 0 0 25px -5px rgb(59 130 246 / 0.4);
    }

#output {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      background: #0a0f1c;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.6);
      min-height: 520px;
    }

.proxy-badge {
      font-size: 0.75rem;
      padding: 5px 14px;
      background: rgba(59, 130, 246, 0.15);
      color: rgb(147 197 253);
      border: 1px solid rgba(147 197 253 / 0.3);
      border-radius: 9999px;
    }

.history-item {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

.history-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.3);
    }

.toast {
      animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

@keyframes slideUp {
      from { transform: translateY(80px) scale(0.95); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }

.iframe-container {
      position: relative;
    }

.loading-overlay {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
  </style>
</head>
<body class="min-h-screen">

<div class="max-w-7xl mx-auto p-6 lg:p-8">
    
    <div class="flex items-center justify-between mb-12">
      <div class="flex items-center gap-4">
        <div class="w-14 h-14 bg-gradient-to-br from-blue-500 via-indigo-500 to-violet-600 rounded-3xl flex items-center justify-center shadow-xl shadow-blue-500/30">
          <i class="fa-solid fa-shield-halved text-4xl text-white"></i>
        </div>
        <div>
          <h1 class="title-font text-6xl font-bold tracking-tighter bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">ShadowSurf</h1>
          <p class="text-slate-400 text-xl -mt-1">Bypass • Privacy • Freedom</p>
        </div>
      </div>

<div class="flex items-center gap-4">
        <button onclick="toggleTheme()" id="themeToggle"
                class="p-4 rounded-3xl bg-slate-800/80 hover:bg-slate-700 transition-all hover:scale-110">
          <i class="fa-solid fa-moon text-2xl" id="themeIcon"></i>
        </button>
        <button onclick="showAbout()"
                class="px-6 py-4 text-sm font-medium rounded-3xl bg-slate-800/80 hover:bg-slate-700 transition-all flex items-center gap-2">
          <i class="fa-solid fa-info-circle"></i>
          <span>About</span>
        </button>
      </div>
    </div>

<div class="glass rounded-3xl overflow-hidden border border-slate-700/50 glow-blue">
      
      <div class="p-8 lg:p-10 border-b border-slate-700">
        <div class="flex flex-col lg:flex-row gap-4">
          <div class="flex-1 relative">
            <input
              type="text"
              id="urlInput"
              value="https://www.example.com"
              placeholder="https://blocked-site.com"
              class="w-full px-7 py-6 bg-slate-950 border border-slate-600 rounded-3xl text-lg focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 transition-all placeholder:text-slate-500"
              onkeypress="if(event.key === 'Enter') loadUrl()"
            >
            <div class="absolute right-7 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
              <i class="fa-solid fa-globe"></i>
            </div>
          </div>

<button onclick="loadUrl()"
                  class="px-14 py-6 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-violet-700 active:scale-95 font-semibold text-xl rounded-3xl flex items-center gap-4 shadow-xl shadow-blue-500/40 transition-all whitespace-nowrap">
            <i class="fa-solid fa-rocket"></i>
            <span>Launch</span>
          </button>
        </div>

<div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-6 text-sm">
          <label class="flex items-center gap-3 cursor-pointer hover:text-blue-400 transition-colors">
            <input type="checkbox" id="renderMode" checked class="w-5 h-5 accent-blue-500 rounded-lg">
            <span class="font-medium">Render as HTML</span>
          </label>

<label class="flex items-center gap-3 cursor-pointer hover:text-blue-400 transition-colors">
            <input type="checkbox" id="stripScripts" class="w-5 h-5 accent-blue-500 rounded-lg">
            <span class="font-medium">Strip JavaScript</span>
          </label>

<div class="flex items-center gap-3">
            <span class="text-slate-400 font-medium whitespace-nowrap">Proxy:</span>
            <select id="proxySelect" 
                    class="bg-slate-900 border border-slate-700 rounded-2xl px-5 py-3 focus:outline-none focus:border-blue-500 w-full">
              <option value="allorigins">AllOrigins (Fast)</option>
              <option value="corsproxy">CorsProxy.io</option>
              <option value="thingproxy">ThingProxy</option>
              <option value="proxy1">CORS.sh (Backup)</option>
            </select>
          </div>

<div class="flex gap-3">
            <button onclick="clearOutput()" 
                    class="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-900 hover:bg-red-950 hover:text-red-400 rounded-3xl transition-all">
              <i class="fa-solid fa-trash"></i>
              Clear
            </button>
            <button onclick="toggleFullscreen()" 
                    class="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-900 hover:bg-slate-800 rounded-3xl transition-all">
              <i class="fa-solid fa-expand"></i>
              Fullscreen
            </button>
          </div>
        </div>
      </div>

<div id="status" class="hidden px-8 py-4 bg-slate-950 border-b border-slate-700 flex items-center gap-3 text-sm font-medium text-emerald-400"></div>

<div class="p-8 lg:p-10">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
          <div class="flex items-center gap-3">
            <h2 class="font-semibold text-2xl flex items-center gap-3">
              <i class="fa-solid fa-file-lines text-blue-400"></i>
              Surfing Result
            </h2>
            <div id="proxyBadge" class="proxy-badge hidden"></div>
          </div>

<div id="output" class="iframe-container border border-slate-700 rounded-3xl bg-slate-950 relative">
          
          <div id="emptyState" class="flex flex-col items-center justify-center h-[520px] text-slate-500">
            <div class="w-24 h-24 bg-slate-800/70 rounded-3xl flex items-center justify-center mb-8 border border-slate-700">
              <i class="fa-solid fa-globe text-6xl opacity-40"></i>
            </div>
            <p class="text-3xl font-medium text-slate-300 mb-3">Ready to unblock the web</p>
            <p class="text-slate-500 max-w-xs text-center">Enter any URL above and hit Launch to bypass restrictions</p>
          </div>

<iframe id="proxyFrame" class="w-full min-h-[520px] rounded-3xl hidden" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe>
        </div>
      </div>

<div class="px-8 py-6 bg-slate-950 border-t border-slate-700 flex flex-wrap gap-4">
        <button onclick="downloadPage()" 
                class="flex items-center gap-3 px-8 py-4 bg-slate-800 hover:bg-slate-700 rounded-3xl text-sm font-medium transition-all">
          <i class="fa-solid fa-download"></i>
          Download HTML
        </button>
        <button onclick="printPage()" 
                class="flex items-center gap-3 px-8 py-4 bg-slate-800 hover:bg-slate-700 rounded-3xl text-sm font-medium transition-all">
          <i class="fa-solid fa-print"></i>
          Print / PDF
        </button>
      </div>
    </div>

<div class="mt-16">
      <div class="flex items-center justify-between mb-8">
        <h3 class="font-semibold text-2xl flex items-center gap-4">
          <i class="fa-solid fa-clock-rotate-left text-blue-400"></i>
          Recent Journeys
        </h3>
        <div class="relative w-96">
          <input type="text" id="historySearch" placeholder="Search history..." 
                 onkeyup="filterHistory()"
                 class="w-full bg-slate-900 border border-slate-700 rounded-3xl px-6 py-4 text-sm focus:outline-none focus:border-blue-500">
        </div>
      </div>

<div id="toast" class="hidden fixed bottom-8 right-8 bg-slate-800 border border-slate-600 text-white px-8 py-5 rounded-3xl shadow-2xl flex items-center gap-4 toast max-w-xs"></div>

<div id="aboutModal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-50">
    <div class="glass max-w-lg mx-4 rounded-3xl p-8">
      <h2 class="text-3xl font-bold mb-6 title-font">About ShadowSurf</h2>
      <p class="text-slate-300 leading-relaxed mb-6">
        ShadowSurf is a client-side web proxy tool that helps you access blocked or restricted websites using public CORS proxies.
      </p>
      <div class="text-sm text-slate-400 space-y-3">
        <p><strong>Disclaimer:</strong> This tool is for educational and privacy purposes only. Use responsibly and respect website terms of service.</p>
        <p>Public proxies may be slow or unreliable. Always verify the source of the content.</p>
      </div>
      <button onclick="hideAbout()" 
              class="mt-8 w-full py-4 bg-blue-600 hover:bg-blue-700 rounded-3xl font-medium transition-all">
        Got it
      </button>
    </div>
  </div>

<footer class="text-center text-slate-500 text-xs py-16">
    <p>ShadowSurf • Built for freedom • Use responsibly</p>
  </footer>

function updateThemeIcon() {
      const icon = document.getElementById('themeIcon');
      const isDark = document.documentElement.classList.contains('dark');
      icon.className = isDark ? 'fa-solid fa-moon text-2xl' : 'fa-solid fa-sun text-2xl';
    }

// Toast
    function showToast(message, type = 'success') {
      const toast = document.getElementById('toast');
      toast.innerHTML = `
        <i class="fa-solid ${type === 'error' ? 'fa-circle-xmark text-red-400' : 'fa-circle-check text-emerald-400'}"></i>
        <span>${message}</span>
      `;
      toast.className = `fixed bottom-8 right-8 px-8 py-5 rounded-3xl shadow-2xl flex items-center gap-4 toast border ${type === 'error' ? 'border-red-500 bg-red-950' : 'border-emerald-500 bg-emerald-950'}`;
      toast.classList.remove('hidden');

setTimeout(() => {
        toast.style.transition = 'all 0.4s ease';
        toast.style.opacity = '0';
        toast.style.transform = 'translateY(20px)';
        setTimeout(() => {
          toast.classList.add('hidden');
          toast.style.opacity = '1';
          toast.style.transform = 'none';
        }, 400);
      }, 4000);
    }

// Proxy configurations
    const proxyList = {
      allorigins: "https://api.allorigins.win/raw?url=",
      corsproxy: "https://corsproxy.io/?",
      thingproxy: "https://thingproxy.freeboard.io/fetch/",
      proxy1: "https://proxy.cors.sh/"
    };

let currentUrl = '';
    let currentProxy = 'allorigins';
    let history = JSON.parse(localStorage.getItem('shadowsurf_history') || '[]');

function renderHistory(filtered = null) {
      const container = document.getElementById('history');
      container.innerHTML = '';

const items = filtered || history;

if (items.length === 0) {
        container.innerHTML = `<div class="col-span-full text-center py-16 text-slate-500">No recent journeys yet</div>`;
        return;
      }

items.forEach(item => {
        const date = new Date(item.timestamp);
        const div = document.createElement('div');
        div.className = 'history-item glass border border-slate-700 hover:border-blue-500 rounded-3xl p-6 cursor-pointer group';
        div.innerHTML = `
          <div class="text-sm break-all line-clamp-3 text-slate-300 group-hover:text-white transition-colors">${item.url}</div>
          <div class="text-[10px] text-slate-500 mt-4 flex items-center gap-2">
            <i class="fa-solid fa-clock"></i>
            ${date.toLocaleDateString([], {month:'short', day:'numeric'})} ${date.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}
          </div>
        `;
        div.onclick = () => {
          document.getElementById('urlInput').value = item.url;
          loadUrl();
        };
        container.appendChild(div);
      });
    }

function filterHistory() {
      const term = document.getElementById('historySearch').value.toLowerCase().trim();
      if (!term) {
        renderHistory();
        return;
      }
      const filtered = history.filter(item => item.url.toLowerCase().includes(term));
      renderHistory(filtered);
    }

async function loadUrl() {
      let targetUrl = document.getElementById('urlInput').value.trim();

if (!targetUrl) {
        showToast("Please enter a URL", "error");
        return;
      }

if (!targetUrl.startsWith('http')) {
        targetUrl = 'https://' + targetUrl;
      }

currentUrl = targetUrl;
      currentProxy = document.getElementById('proxySelect').value;

const proxyUrl = proxyList[currentProxy] + encodeURIComponent(targetUrl);

document.getElementById('status').classList.remove('hidden');
      document.getElementById('status').innerHTML = `
        <i class="fa-solid fa-spinner fa-spin"></i>
        <span>Loading via ${currentProxy}...</span>
      `;

document.getElementById('emptyState').classList.add('hidden');
      const frame = document.getElementById('proxyFrame');
      frame.src = proxyUrl;
      frame.classList.remove('hidden');

// Update UI
      document.getElementById('urlDisplay').textContent = targetUrl;
      document.getElementById('proxyBadge').textContent = currentProxy.toUpperCase();
      document.getElementById('proxyBadge').classList.remove('hidden');

addToHistory(targetUrl);

// Clear status after load attempt
      setTimeout(() => {
        document.getElementById('status').classList.add('hidden');
      }, 2500);

showToast(`Surfing ${new URL(targetUrl).hostname}`);
    }

function copyCurrentUrl() {
      if (!currentUrl) return;
      navigator.clipboard.writeText(currentUrl).then(() => {
        showToast("URL copied to clipboard");
      });
    }

function clearOutput() {
      document.getElementById('proxyFrame').classList.add('hidden');
      document.getElementById('emptyState').classList.remove('hidden');
      document.getElementById('urlDisplay').textContent = '';
      document.getElementById('proxyBadge').classList.add('hidden');
      currentUrl = '';
      showToast("Output cleared");
    }

function printPage() {
      if (!currentUrl) return;
      const frame = document.getElementById('proxyFrame');
      frame.contentWindow.print();
    }

function showAbout() {
      document.getElementById('aboutModal').classList.remove('hidden');
    }

function hideAbout() {
      document.getElementById('aboutModal').classList.add('hidden');
    }

// Initialize
    window.onload = () => {
      updateThemeIcon();
      renderHistory();

// Load example on first visit
      if (history.length === 0) {
        setTimeout(() => {
          document.getElementById('urlInput').value = "https://news.ycombinator.com";
        }, 800);
      }

// Keyboard shortcuts
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') clearOutput();
      });
    };
  </script>
</body>
</html>

CSS