ShadowSurf Plunker edition

98 techno_1605

<!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

ShadowSurf Plunker edition

Recommended