Spaces:

xcoolcoinx
/

ip-revealer-pro

Running

App Files Files Community

xcoolcoinx commited on Oct 31, 2025

Commit

685e752

verified ·

1 Parent(s): 34aae6b

create a similar page but more stylish https://whatismyipaddress.com/

Browse files

Files changed (5) hide show

README.md +7 -4
components/theme-toggle.js +85 -0
index.html +202 -19
script.js +79 -0
style.css +48 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Ip Revealer Pro
-emoji: 👁
 colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: IP Revealer Pro 🕵️‍♂️
 colorFrom: blue
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/theme-toggle.js ADDED Viewed

	@@ -0,0 +1,85 @@

+class ThemeToggle extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .toggle-container {
+          display: inline-flex;
+          align-items: center;
+          cursor: pointer;
+        }
+        .toggle {
+          position: relative;
+          width: 44px;
+          height: 24px;
+          background-color: #e2e8f0;
+          border-radius: 12px;
+          margin: 0 8px;
+          transition: background-color 0.3s;
+        }
+        .toggle.dark {
+          background-color: #4a5568;
+        }
+        .slider {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          background-color: white;
+          border-radius: 50%;
+          top: 2px;
+          left: 2px;
+          transition: transform 0.3s;
+        }
+        .dark .slider {
+          transform: translateX(20px);
+        }
+        .icon {
+          width: 16px;
+          height: 16px;
+        }
+        .light-icon {
+          color: #f59e0b;
+        }
+        .dark-icon {
+          color: #a0aec0;
+        }
+      </style>
+      <div class="toggle-container">
+        <i data-feather="sun" class="icon light-icon"></i>
+        <div class="toggle">
+          <div class="slider"></div>
+        </div>
+        <i data-feather="moon" class="icon dark-icon"></i>
+      </div>
+    `;
+    const toggle = this.shadowRoot.querySelector('.toggle');
+    const slider = this.shadowRoot.querySelector('.slider');
+    // Check for saved theme preference or use system preference
+    const savedTheme = localStorage.getItem('darkMode');
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (savedTheme === null ? systemDark : savedTheme === 'true') {
+      document.documentElement.classList.add('dark');
+      toggle.classList.add('dark');
+      slider.classList.add('dark');
+    }
+    // Add click event listener
+    this.shadowRoot.querySelector('.toggle-container').addEventListener('click', () => {
+      const isDark = document.documentElement.classList.toggle('dark');
+      toggle.classList.toggle('dark');
+      slider.classList.toggle('dark');
+      localStorage.setItem('darkMode', isDark);
+      // Dispatch event for other components to listen to
+      document.dispatchEvent(new CustomEvent('themeChanged', { detail: { isDark } }));
+    });
+    // Initialize feather icons
+    feather.replace();
+  }
+}
+customElements.define('theme-toggle', ThemeToggle);

index.html CHANGED Viewed

@@ -1,19 +1,202 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</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>IP Revealer Pro | Discover Your Digital Identity</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="style.css">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#6366f1',
+                            600: '#4f46e5',
+                        },
+                        secondary: {
+                            500: '#f43f5e',
+                            600: '#e11d48',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 min-h-screen">
+    <main class="container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto">
+            <!-- Header -->
+            <header class="mb-12 text-center">
+                <h1 class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-4">
+                    IP Revealer <span class="text-primary-500">Pro</span>
+                </h1>
+                <p class="text-lg text-gray-600 dark:text-gray-300">
+                    Discover your digital identity in one click
+                </p>
+            </header>
+            <!-- Main Card -->
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden mb-8 transition-all duration-300 hover:shadow-2xl">
+                <!-- Card Header -->
+                <div class="bg-gradient-to-r from-primary-500 to-secondary-500 p-4">
+                    <div class="flex items-center">
+                        <i data-feather="globe" class="text-white mr-2"></i>
+                        <h2 class="text-xl font-semibold text-white">Your IP Information</h2>
+                    </div>
+                </div>
+                <!-- Card Content -->
+                <div class="p-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <!-- Left Column -->
+                        <div class="space-y-6">
+                            <div class="flex items-center">
+                                <div class="bg-primary-100 dark:bg-gray-700 p-3 rounded-full mr-4">
+                                    <i data-feather="map-pin" class="text-primary-500 dark:text-primary-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500 dark:text-gray-400">IP Address</p>
+                                    <p id="ip-address" class="text-lg font-medium text-gray-800 dark:text-gray-200">Loading...</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="bg-primary-100 dark:bg-gray-700 p-3 rounded-full mr-4">
+                                    <i data-feather="navigation" class="text-primary-500 dark:text-primary-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500 dark:text-gray-400">Location</p>
+                                    <p id="location" class="text-lg font-medium text-gray-800 dark:text-gray-200">Loading...</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="bg-primary-100 dark:bg-gray-700 p-3 rounded-full mr-4">
+                                    <i data-feather="compass" class="text-primary-500 dark:text-primary-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500 dark:text-gray-400">Country</p>
+                                    <p id="country" class="text-lg font-medium text-gray-800 dark:text-gray-200">Loading...</p>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Right Column -->
+                        <div class="space-y-6">
+                            <div class="flex items-center">
+                                <div class="bg-primary-100 dark:bg-gray-700 p-3 rounded-full mr-4">
+                                    <i data-feather="cpu" class="text-primary-500 dark:text-primary-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500 dark:text-gray-400">ISP</p>
+                                    <p id="isp" class="text-lg font-medium text-gray-800 dark:text-gray-200">Loading...</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="bg-primary-100 dark:bg-gray-700 p-3 rounded-full mr-4">
+                                    <i data-feather="clock" class="text-primary-500 dark:text-primary-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500 dark:text-gray-400">Timezone</p>
+                                    <p id="timezone" class="text-lg font-medium text-gray-800 dark:text-gray-200">Loading...</p>
+                                </div>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="bg-primary-100 dark:bg-gray-700 p-3 rounded-full mr-4">
+                                    <i data-feather="shield" class="text-primary-500 dark:text-primary-400"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500 dark:text-gray-400">Security</p>
+                                    <p id="security" class="text-lg font-medium text-gray-800 dark:text-gray-200">Loading...</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Map Visualization -->
+                <div id="map-container" class="h-64 bg-gray-200 dark:bg-gray-700 relative">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <i data-feather="map" class="text-gray-400 dark:text-gray-500 w-16 h-16"></i>
+                    </div>
+                </div>
+                <!-- Card Footer -->
+                <div class="bg-gray-50 dark:bg-gray-700 p-4 border-t border-gray-200 dark:border-gray-600">
+                    <button id="refresh-btn" class="flex items-center justify-center w-full py-2 px-4 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors duration-300">
+                        <i data-feather="refresh-cw" class="mr-2 animate-spin hidden"></i>
+                        Refresh Information
+                    </button>
+                </div>
+            </div>
+            <!-- Additional Info Section -->
+            <section class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8">
+                <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">About Your IP Address</h2>
+                <div class="prose dark:prose-invert max-w-none">
+                    <p>Your IP address is like your digital fingerprint online. It reveals information about your approximate location and internet service provider.</p>
+                    <p class="mt-2">This information is used by websites to deliver localized content and for security purposes. You can use a VPN to mask your real IP address if desired.</p>
+                </div>
+            </section>
+            <!-- Features Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
+                    <div class="bg-primary-100 dark:bg-gray-700 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
+                        <i data-feather="lock" class="text-primary-500 dark:text-primary-400"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Privacy Check</h3>
+                    <p class="text-gray-600 dark:text-gray-300">Discover if your IP is exposed and learn how to protect it.</p>
+                </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
+                    <div class="bg-primary-100 dark:bg-gray-700 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
+                        <i data-feather="map" class="text-primary-500 dark:text-primary-400"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Geo Location</h3>
+                    <p class="text-gray-600 dark:text-gray-300">See where your internet connection is originating from.</p>
+                </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
+                    <div class="bg-primary-100 dark:bg-gray-700 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
+                        <i data-feather="activity" class="text-primary-500 dark:text-primary-400"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Network Stats</h3>
+                    <p class="text-gray-600 dark:text-gray-300">Get insights about your internet service provider.</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-gray-200 dark:bg-gray-800 py-8">
+        <div class="container mx-auto px-4 text-center">
+            <p class="text-gray-600 dark:text-gray-300">© 2023 IP Revealer Pro. All rights reserved.</p>
+            <div class="flex justify-center space-x-4 mt-4">
+                <a href="#" class="text-gray-600 hover:text-primary-500 dark:text-gray-300 dark:hover:text-primary-400">
+                    <i data-feather="github"></i>
+                </a>
+                <a href="#" class="text-gray-600 hover:text-primary-500 dark:text-gray-300 dark:hover:text-primary-400">
+                    <i data-feather="twitter"></i>
+                </a>
+                <a href="#" class="text-gray-600 hover:text-primary-500 dark:text-gray-300 dark:hover:text-primary-400">
+                    <i data-feather="mail"></i>
+                </a>
+            </div>
+        </div>
+    </footer>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,79 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Fetch IP information on page load
+    fetchIPInfo();
+    // Setup refresh button
+    const refreshBtn = document.getElementById('refresh-btn');
+    refreshBtn.addEventListener('click', function() {
+        const icon = this.querySelector('i');
+        icon.classList.remove('hidden');
+        this.disabled = true;
+        fetchIPInfo().finally(() => {
+            setTimeout(() => {
+                icon.classList.add('hidden');
+                this.disabled = false;
+            }, 500);
+        });
+    });
+    // Theme toggle functionality (if you want to add a toggle button later)
+    // const themeToggle = document.getElementById('theme-toggle');
+    // themeToggle.addEventListener('click', function() {
+    //     document.documentElement.classList.toggle('dark');
+    //     localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+    // });
+});
+async function fetchIPInfo() {
+    try {
+        // First get the IP address
+        const ipResponse = await fetch('https://api.ipify.org?format=json');
+        const ipData = await ipResponse.json();
+        const ipAddress = ipData.ip;
+        // Then get detailed information using the IP
+        const infoResponse = await fetch(`https://ipapi.co/${ipAddress}/json/`);
+        const infoData = await infoResponse.json();
+        // Update the UI with the fetched data
+        document.getElementById('ip-address').textContent = ipAddress;
+        document.getElementById('location').textContent =
+            `${infoData.city || 'Unknown'}, ${infoData.region || 'Unknown'}`;
+        document.getElementById('country').textContent =
+            `${infoData.country_name || 'Unknown'} (${infoData.country || 'XX'})`;
+        document.getElementById('isp').textContent = infoData.org || 'Unknown ISP';
+        document.getElementById('timezone').textContent = infoData.timezone || 'Unknown';
+        // Determine security status (simplified for demo)
+        const securityStatus = infoData.proxy === true || infoData.vpn === true ?
+            '⚠️ VPN/Proxy Detected' : '✅ Normal Connection';
+        document.getElementById('security').textContent = securityStatus;
+        // Simulate map loading (in a real app you would use Google Maps or similar)
+        const mapContainer = document.getElementById('map-container');
+        mapContainer.innerHTML = `
+            <div class="absolute inset-0 flex items-center justify-center">
+                <div class="text-center">
+                    <i data-feather="map-pin" class="text-secondary-500 w-12 h-12 mb-2 mx-auto"></i>
+                    <p class="text-gray-800 dark:text-gray-200 font-medium">${infoData.city || 'Your Location'}</p>
+                </div>
+            </div>
+        `;
+        feather.replace();
+    } catch (error) {
+        console.error('Error fetching IP information:', error);
+        // Show error state in UI
+        const elements = [
+            'ip-address', 'location', 'country',
+            'isp', 'timezone', 'security'
+        ];
+        elements.forEach(id => {
+            document.getElementById(id).textContent = 'Failed to load';
+            document.getElementById(id).classList.add('text-red-500');
+        });
+    }
+}

style.css CHANGED Viewed

@@ -1,28 +1,57 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+/* Apply animation to card elements */
+#ip-address, #location, #country, #isp, #timezone, #security {
+    animation: fadeIn 0.5s ease-out forwards;
+}
+.delay-100 { animation-delay: 0.1s; }
+.delay-200 { animation-delay: 0.2s; }
+.delay-300 { animation-delay: 0.3s; }
+.delay-400 { animation-delay: 0.4s; }
+.delay-500 { animation-delay: 0.5s; }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
+.dark ::-webkit-scrollbar-track {
+    background: #2d3748;
 }
+.dark ::-webkit-scrollbar-thumb {
+    background: #4a5568;
 }
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #718096;
 }
+/* Smooth transitions for dark mode */
+html {
+    scroll-behavior: smooth;
+    transition: background-color 0.3s ease;
+}
+body {
+    transition: background-color 0.3s ease, color 0.3s ease;
+}