1<!doctype html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta name="renderer" content="webkit"><meta name="force-rendering" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"><meta data-rh="true" name="viewport" content="width=device-width, initial-scale=1.0"><title>View Source | View & analyze page source code on any browser</title><meta name="description" content="View Source & Page Source Code on Chrome, Safari, Firefox. Free online tool works on mobile, Android & iPhone. How to guide to view website source code easily. "><meta name="sv" content="1.0.1"> <link rel="canonical" href="https://view-source.net/" /> <meta name="theme-color" content="#f9f9f9"> <meta property="og:type" content="website"> <meta property="og:url" content="https://view-source.net/"> <meta property="og:title" content="View Source | View & analyze page source code on any browser"> <meta property="og:description" content="View Source & Page Source Code on Chrome, Safari, Firefox. Free online tool works on mobile, Android & iPhone. How to guide to view website source code easily. "> <meta property="og:image" content=""> <meta property="og:site_name" content="View Source"> <meta property="og:locale" content="en"> <link rel="alternate" hreflang="x-default" href="https://view-source.net/"> <link rel="alternate" hreflang="en" href="https://view-source.net/"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="#000"> <link rel="apple-touch-icon" href="https://oris1.view-source.net/viewsource_k0m1/fa/img/logo/app-icon.jpg"><link rel="shortcut icon" href="https://oris1.view-source.net/viewsource_k0m1/fa/img/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="https://oris1.view-source.net/viewsource_k0m1/fa/css/common.min.260127v1.css"><link rel="stylesheet" href="https://oris1.view-source.net/viewsource_k0m1/fa/css/feature.260127v1.67af5fdb.css">
1<script type="text/javascript"> var cdnPrefix = 'https://oris1.view-source.net/viewsource_k0m1'; var googleClientId = ''; </script>
1<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-html.min.js"></script>
1<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
1<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
1<script>window._LANG_ = { 'rank': 'Rank', 'word_phrase': 'Word/Phrase', 'total': 'Total', 'density_percent': 'Density', 'no_data': 'No Data', 'showing_first': 'Showing first 100 of {count} items', /**/ 'missing_title': 'Missing Title tag', 'missing_description': 'Missing Description tag', 'missing_h1': 'Missing H1 tag', 'multiple_h1': 'Multiple H1 tags found', 'title_too_long': 'Title tag too long (over 60 characters)', 'title_too_short': 'Title tag too short (under 30 characters)', 'description_too_long': 'Description tag too long (over 160 characters)', 'description_too_short': 'Description tag too short (under 120 characters)', 'missing_canonical': 'Missing Canonical URL', 'images_without_alt': 'Images without Alt attribute', 'no_seo_issues': 'No SEO issues found', 'empty_title': '(empty title)', 'empty': '(empty)', 'showing_items': 'Showing {count} of {total} items', /**/ 'no_wrap': 'No Wrap', 'toggle_wrap': 'Toggle Wrap', 'copied': 'Copied!', /**/ 'feature_performance_desc': 'Get detailed page speed insights including DNS lookup, TCP connection, TLS handshake, server wait, and download times.', 'feature_server_desc': 'Server type, location info', 'feature_seo_desc': 'SEO issue detection & suggestions', 'feature_structure_desc': 'HTML structure & content analysis', 'feature_tdk_desc': 'Title, Description, Keywords', 'feature_request_desc': 'Request time, status codes', 'feature_basic_desc': 'Page basic info statistics', 'source_code': 'Source Code', 'feature_source_desc': 'Formatted source code display', /**/ 'guide_universal_method_desc': 'Simply enter view-source: followed by the URL in the address bar to view the page source', /**/ 'guide_android_others_title': 'Other Browsers', 'guide_android_others_desc': 'Safari and other system-based browsers can try the view-source: method', 'guide_android_others_note': 'Support depends on the device manufacturer and browser kernel, some customized systems may not support it', 'guide_android_others_platform_title': 'view-source: method not supported? Use our platform:', /**/ 'guide_iphone_common_note': 'Due to iOS system restrictions, most browsers do not support the view-source: method', 'guide_iphone_platform_title': 'Recommended to use our platform:', 'guide_iphone_others_title': 'Other Browsers', 'guide_iphone_others_desc': 'Firefox and other third-party browsers can try the view-source: method', /**/ 'guide_safari_prerequisite_title': 'Prerequisite: Enable Develop Menu', 'guide_safari_prerequisite_desc': 'Before using the following methods, you need to enable the "Develop" menu in Safari browser:', 'guide_safari_prerequisite_step1': 'Open Safari browser, click menu bar "Safari" â "Settings..." (or "Preferences")', 'guide_safari_prerequisite_step2': 'Click the "Advanced" tab', 'guide_safari_prerequisite_step3': 'Check the "Show feature for web developers" checkbox', 'guide_safari_prerequisite_note': 'After enabling, the "Develop" option will appear in the menu bar for the following methods to work', /**/ 'guide_safari_method1_title': 'Keyboard Shortcut Method', 'guide_safari_method1_desc': 'Press the following key combination to open the source code view:', 'guide_safari_shortcut1_label': 'View source directly:', 'guide_safari_shortcut2_label': 'Open developer tools (includes source view):', 'guide_safari_method2_title': 'Menu Bar Method', 'guide_safari_method2_desc': 'Quickly access page source through the right-click context menu', 'guide_safari_method2_instruction': '<span class="text-blue-600 font-semibold">Right-click</span> anywhere on the page â Select <span class="text-blue-600 font-semibold">"Show Page Source"</span>', /**/ 'text_html_ratio': 'Text/HTML Ratio', 'text_html_ratio_short': 'Text/HTML Ratio', 'text_content_size': 'Text Content Ratio', 'html_total_size': 'HTML Total Size', 'quality_score': 'Quality Score', 'ratio_description': 'Based on ratio assessment', 'what_is_text_html_ratio': 'What is Text/HTML Ratio?', 'text_html_ratio_desc': 'The Text/HTML ratio is the percentage of visible text content compared to total HTML code (plain text chars ÷ total HTML source chars à 100%). This is a "health indicator" rather than a direct ranking factor: Ratio â¥25% indicates sufficient content; <10% may suggest code bloat or thin content. Low ratios typically mean excessive inline styles/JS, deep DOM nesting, leading to large page size, slow FCP, and less crawlable content. Use as a "sniffer": when issues are found, optimize by minifying code, externalizing JS, compressing whitespaceârather than stuffing text or deleting necessary tags.', 'quality_good': 'Excellent', 'quality_good_average': 'Good', 'quality_average': 'Average', 'quality_poor': 'Poor', 'smart_segmenting': 'Smart word segmentation in progress...', /**/ 'error_fetch_failed': 'Failed to fetch page source', 'error_request_failed': 'Request failed', 'error_please_enter_url': 'Please enter a URL', 'error_parse_response_failed': 'Failed to parse response', 'error_network_failed': 'Network request failed', 'error_timeout': 'Request timeout', 'error_copy_failed': 'Copy failed, please select and copy manually', 'error_split_failed': 'Word segmentation failed', 'error_missing_view_id': 'Missing view_id', /**/ 'tech_frameworks': 'Frameworks', 'tech_cdn': 'CDN Services', 'tech_analytics': 'Analytics', 'tech_other'
1: 'Other Technologies', /**/ 'schema_org_type': 'Schema.org Types', 'json_ld_data': 'JSON-LD Data', /**/ 'alt_text': 'Alt', 'language_label': 'Language', 'none': 'None' 2};</script>
2</head><body class="layout-body"> <header class="header"> <nav class="nav"> <div class="flex items-center"> <div class="md:hidden mr-4"> <button id="mobile-menu-btn" class="mobile-menu-btn"> <svg class="mobile-menu-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> <div class="logo-container"> <a href="/" class="logo-link"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/toplogo.png" alt="View-Source.net" class="logo-img hidden md:block"> <span class="logo-text">View-Source.net</span> </a> </div> </div> <div class="header-right"> <div class="desktop-nav"> <a href="/" class="nav-link">Home</a> <a href="/#view-source-tool" class="nav-link">Tool</a> <a href="/#guide-browser" class="nav-link">Browser Guide</a> <a href="/#guide-mobile" class="nav-link">Mobile Guide</a> <a href="/#faq" class="nav-link">FAQ</a> </div> </div> </nav> <div id="mobile-menu" class="mobile-menu hidden"> <div class="mobile-menu-content"> <a href="/" class="mobile-nav-link">Home</a> <a href="/#view-source-tool" class="mobile-nav-link">Tool</a> <a href="/#guide-browser" class="mobile-nav-link">Browser Guide</a> <a href="/#guide-mobile" class="mobile-nav-link">Mobile Guide</a> <a href="/#faq" class="mobile-nav-link">FAQ</a> </div> </div></header>
2<script src="https://oris1.view-source.net/viewsource_k0m1/fa/js/common.min.260127v1.js" crossorigin="anonymous"></script>
2 <div class="flex-1"> <section class="w-full max-w-[1600px] mx-auto px-4 py-3"> <div class="flex justify-center gap-4"> <aside class="hidden lg:flex flex-col gap-4 w-[170px] flex-shrink-0"> <div class="w-[160px] h-[600px] bg-gray-100 flex items-center justify-center border border-gray-200 rounded">
2<script> atOptions = { 'key' : '2586ab7f20fa04ab81231893e477d84c', 'format' : 'iframe', 'height' : 600, 'width' : 160, 'params' : {} }; </script>
2
2<script src="https://www.highperformanceformat.com/2586ab7f20fa04ab81231893e477d84c/invoke.js"></script>
2 </div> </aside> <main class="flex-1 w-full max-w-[900px] flex flex-col gap-2"> <div class="w-full flex items-center justify-center "> <div id="adsterra-wiki-top" style=" text-align:center;">
2<script> (function () { if ((document.documentElement.lang || '').toLowerCase().indexOf('zh') === 0) return; var isMobile = window.matchMedia('(max-width: 768px)').matches; var conf = isMobile ? { key: 'ecc3cf50dae6cceacdaf456df956dea7', w: 320, h: 50 } : { key: '124dfa9154a14bbdcad05b762d8ddeff', w: 728, h: 90 }; var box = document.getElementById('adsterra-wiki-top'); new IntersectionObserver(function (e, obs) { if (!e[0].isIntersecting) return; obs.disconnect(); window.atOptions = { key: conf.key, format: 'iframe', width: conf.w, height: conf.h, params: {} }; var s = document.createElement('script'); s.src = 'https://www.highperformanceformat.com/' + conf.key + '/invoke.js'; box.appendChild(s); }, { rootMargin: '200px' }).observe(box); })(); </script>
2 </div> </div> <div id="view-source-tool" class="min-h-[400px] bg-white border border-gray-200 rounded-lg p-6"> <div class="text-center py-1"> <h1 class="text-2xl font-bold text-gray-900 mb-2">View Source & Page Source Code on Chrome, Safari, Firefox | Mobile, Android & iPhone | How to Guide</h1> <p class="text-gray-600 max-w-xlg mx-auto mb-6"> With this HTML Viewer, you can View and analyze the source code of any live URL. It instantly fetches the code and provides comprehensive SEO analysis on any device - Mac, PC, tablet, or mobile. </p> <div id="error-message" class="hidden mb-4 max-w-3xl mx-auto relative p-4 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm"> <button id="close-error-btn" class="absolute top-2 right-2 text-red-400 hover:text-red-600 transition-colors"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <span class="pr-8"></span> </div> <div class="mb-4 max-w-3xl mx-auto"> <label class="block text-sm font-medium text-gray-700 mb-2 text-left">Select Browser</label> <select id="ua-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <option value="1">Chrome 120 (Windows) - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36</option> <option value="2">Chrome 119 (Windows) - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36</option> <option value="3">Chrome 120 (macOS) - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36</option> <option value="4">Firefox 121 (Windows) - Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0</option> <option value="5">Firefox 121 (macOS) - Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:121.0) Gecko/20100101 Firefox/121.0</option> <option value="6">Safari 17.1 (macOS) - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15</option> <option value="7">Safari 17.1 (iPhone) - Mozilla/5.0 (iPhone; CPU iPhone OS 17_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Mobile/15E148 Safari/604.1</option> <option value="8">Chrome 120 (Android 13) - Mozilla/5.0 (Linux; Android 13) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.6099.230 Mobile Safari/537.36</option> <option value="9">Chrome 119 (Android 14) - Mozilla/5.0 (Linux; Android 14) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.123 Mobile Safari/537.36</option> <option value="10">Edge 118 (Windows) - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 Edg/118.0.2088.76</option> <option value="11">Safari 17.1 (iPad) - Mozilla/5.0 (iPad; CPU OS 17_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Mobile/15E148 Safari/604.1</option> </select> </div> <div class="max-w-3xl mx-auto"> <div class="flex flex-col sm:flex-row gap-3"> <input type="url" id="url-input" placeholder="https://example.com" value="https://example.com" class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <button id="view-source-btn" class="w-full sm:w-auto px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"> View Source </button> </div> </div> </div> <div class="mt-8 max-w-4xl mx-auto"> <div class="flex flex-wrap justify-center gap-2 mb-4"> <a href="#info-source" class="flex items-center px-3 py-2 bg-indigo-50 hover:bg-indigo-100 rounded-lg transition-colors group"> <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path> </svg> <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-indigo-700">
2Source Code</span> </a> <a href="#info-density" class="flex items-center px-3 py-2 bg-emerald-50 hover:bg-emerald-100 rounded-lg transition-colors group"> <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> </svg> <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-emerald-700">Word Density</span> </a> <a href="#info-text-html-ratio" class="flex items-center px-3 py-2 bg-violet-50 hover:bg-violet-100 rounded-lg transition-colors group"> <svg class="w-5 h-5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path> </svg> <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-violet-700">Text/HTML Ratio</span> </a> <a href="#info-performance" class="flex items-center px-2 py-2 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors group"> <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-purple-700">Performance Breakdown</span> </a> <a href="#info-server" class="flex items-center px-2 py-2 bg-orange-50 hover:bg-orange-100 rounded-lg transition-colors group"> <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path> </svg> <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-orange-700">Server Information</span> </a> <a href="#info-seo-issues" class="flex items-center px-2 py-2 bg-red-50 hover:bg-red-100 rounded-lg transition-colors group"> <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path> </svg> <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-red-700">SEO Issues</span> </a> <a href="#info-tdk-meta" class="flex items-center px-2 py-2 bg-cyan-50 hover:bg-cyan-100 rounded-lg transition-colors group"> <svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path> </svg> <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-cyan-700">TDK & Meta Tags</span> </a> <a href="#info-request" class="flex items-center px-3 py-2 bg-green-50 hover:bg-green-100 rounded-lg transition-colors group"> <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-green-700">Request Information</span> </a> <a href="#info-basic" class="flex items-center px-3 py-2 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors group"> <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-blue-700">Page Information</span> </a> </div> <div class="flex flex-wrap justify-center gap-2 text-sm"> <a href="#guide-browser" class="px-3 py-1 text-gray-600 hover:text-blue-600 hover:underline transition-colors">How to View Page Source in Browser</a> <span class="text-gray-300">|</span> <a href="#guide-safari" class="inline-flex items-center px-3 py-1 text-gray-600 hover:text-blue-600 hover:underline transition-colors"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/safari.png" class="w-4 h-4 mr-1" alt="Safari"> Safari </a> <a href="#guide-chrome" class="inline-flex items-center px-3 py-1 text-gray-600 hover:text-blue-600 hover:underline transition-colors"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/chrome.png" class="w-4 h-4 mr-1" alt="Chrome"> Chrome </a> <a href="#guide-firefox" class="inline-flex items-center px-3 py-1 text-gray-600 hover:text-blue-600 hover:underline transition-colors"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/firefox.png" class="w-4 h-4 mr-1" alt="Firefox"> Firefox </a> <span class="text-gray-300">|</span> <a href="#guide-mobile" class="px-3 py-1 text-gray-600 hover:text-blue-600 hover:underline transition-colors">How to View Page Source on Mobile</a> <a href="#guide-android" class="inline-flex items-center px-3 py-1 text-gray-600 hover:text-blue-600 hover:underline transition-colors"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/android.png" class="w-4 h-4 mr-1" alt="Android"> Android </a> <a href="#guide-iphone" class="inline-flex items-center px-3 py-1 text-gray-600 hover:text-blue-600 hover:underline transition-colors"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/iphone.png" class="w-4 h-4 mr-1" alt="iPhone"> iPhone </a> </div> </div> <div id="loading-spinner" class="hidden text-center py-6"> <div class="inline-flex items-center justify-center w-12 h-12 border-4 border-blue-600 border-t-transparent roun
2ded-full animate-spin mb-4"></div> <p class="text-gray-600">Loading...</p> </div> </div> </main> <aside class="hidden lg:flex flex-col gap-4 w-[310px] flex-shrink-0">
2<script async="async" data-cfasync="false" src="https://pl30485154.effectivecpmnetwork.com/9d8fbad7f85bf7cac824a653f214c23e/invoke.js"></script>
2<div id="container-9d8fbad7f85bf7cac824a653f214c23e"></div> </aside> </div> </section> <section id="results-section" class="py-1 bg-white" style="min-height: 100vh;"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div id="info-source" class="mb-8 bg-gray-900 rounded-xl overflow-hidden shadow-lg"> <div class="bg-gray-800 px-4 py-3 flex items-center justify-between border-b border-gray-700"> <div class="flex items-center"> <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div> <span class="text-gray-300 text-sm font-mono truncate max-w-md" id="url-display">--</span> </div> <div class="flex items-center space-x-2"> <button id="toggle-wrap-btn" class="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-gray-300 text-xs rounded transition-colors"> Toggle Wrap </button> <button id="copy-code-btn" class="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 text-gray-300 text-xs rounded transition-colors"> Copy </button> <button id="download-code-btn" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded transition-colors"> Download </button> </div> </div> <div class="code-display-wrapper" style="max-height: 600px; overflow-y: auto; background-color: #2d2d2d;"> <div id="source-code-display" class="p-4 text-sm font-mono" style="min-height: 200px;">请è¾å
¥URLæ¥çæºä»£ç ...</div> </div> </div> <div class="border-t border-gray-200 my-8"></div> <div class="flex gap-8" style="position: relative; min-height: 800px;"> <aside class="hidden lg:block w-48 flex-shrink-0" style="height: fit-content;"> <div id="nav-container"> <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">navigation</h3> <nav class="space-y-2" id="info-nav"> <a href="#info-performance" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-purple-50 hover:text-purple-700 transition-colors" data-target="info-performance"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> Performance Breakdown </span> </a> <a href="#info-server" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-700 transition-colors" data-target="info-server"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path> </svg> Server Information </span> </a> <a href="#info-basic" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-basic"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> Page Information </span> </a> <a href="#info-request" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-green-50 hover:text-green-700 transition-colors" data-target="info-request"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> Request Information </span> </a> <a href="#info-structure" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-pink-50 hover:text-pink-700 transition-colors" data-target="info-stru
2cture"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path> </svg> HTML Structure Analysis </span> </a> <a href="#info-tdk-meta" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-cyan-50 hover:text-cyan-700 transition-colors" data-target="info-tdk-meta"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path> </svg> TDK & Meta Tags </span> </a> <a href="#info-seo-issues" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-red-50 hover:text-red-700 transition-colors" data-target="info-seo-issues"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path> </svg> SEO Issues </span> </a> <a href="#info-density" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-lime-50 hover:text-lime-700 transition-colors" data-target="info-density"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-lime-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> Word Density </span> </a> <a href="#info-text-html-ratio" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-cyan-50 hover:text-cyan-700 transition-colors" data-target="info-text-html-ratio"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> Text/HTML Ratio </span> </a> <a href="#info-headings" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-amber-50 hover:text-amber-700 transition-colors" data-target="info-headings"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path> </svg> Headings Structure </span> </a> <a href="#info-images" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-emerald-50 hover:text-emerald-700 transition-colors" data-target="info-images"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path> </svg> Images Information </span> </a> <a href="#info-links" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-violet-50 hover:text-violet-700 transition-colors" data-target="info-links"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path> </svg> Links Information </span> </a> <a href="#info-hreflangs" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-teal-50 hover:text-teal-700 transition-colors" data-target="info-hreflangs"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.948 9.5H16.95"></path> </svg> Hreflang Tags </span> </a> <a href="#info-opengraph" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-pink-50 hover:text-pink-700 transition-colors" data-target="info-opengraph"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path> </svg> Open Graph & Social </span> </a>
2 <a href="#info-structured" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 transition-colors" data-target="info-structured"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 012-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path> </svg> Structured Data </span> </a> <a href="#info-technology" class="info-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-rose-50 hover:text-rose-700 transition-colors" data-target="info-technology"> <span class="flex items-center"> <svg class="w-4 h-4 mr-2 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm2-4h.01M16 9h.01"></path> </svg> Technology Detection </span> </a> </nav> </div> </aside> <div class="flex-1 min-w-0"> <div class="mb-8 grid grid-cols-1 md:grid-cols-3 gap-4"> <div id="info-performance" class="bg-white rounded-xl p-5 shadow-sm scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-7 h-7 bg-yellow-500 rounded-lg flex items-center justify-center mr-2"> <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> </div> <h3 class="text-base font-bold text-gray-900">Performance Breakdown</h3> </div> <div class="space-y-3"> <div class="flex items-center"> <span class="text-xs text-gray-600 w-24 flex-shrink-0">DNS Lookup</span> <div class="flex-1 mx-2 h-4 bg-gray-200 rounded-full overflow-hidden"> <div id="dns-bar-circle" class="h-full bg-green-500 rounded-full transition-all duration-300" style="width: 0%"></div> </div> <span class="text-xs font-mono font-semibold text-gray-800 w-16 text-right" id="dns-display-mini">0ms</span> </div> <div class="flex items-center"> <span class="text-xs text-gray-600 w-24 flex-shrink-0">TCP Connection</span> <div class="flex-1 mx-2 h-4 bg-gray-200 rounded-full overflow-hidden"> <div id="tcp-bar-circle" class="h-full bg-blue-500 rounded-full transition-all duration-300" style="width: 0%"></div> </div> <span class="text-xs font-mono font-semibold text-gray-800 w-16 text-right" id="tcp-display-mini">0ms</span> </div> <div class="flex items-center"> <span class="text-xs text-gray-600 w-24 flex-shrink-0">TLS Handshake</span> <div class="flex-1 mx-2 h-4 bg-gray-200 rounded-full overflow-hidden"> <div id="tls-bar-circle" class="h-full bg-purple-500 rounded-full transition-all duration-300" style="width: 0%"></div> </div> <span class="text-xs font-mono font-semibold text-gray-800 w-16 text-right" id="tls-display-mini">0ms</span> </div> <div class="flex items-center"> <span class="text-xs text-gray-600 w-24 flex-shrink-0">Server Wait</span> <div class="flex-1 mx-2 h-4 bg-gray-200 rounded-full overflow-hidden"> <div id="server-bar-circle" class="h-full bg-orange-500 rounded-full transition-all duration-300" style="width: 0%"></div> </div> <span class="text-xs font-mono font-semibold text-gray-800 w-16 text-right" id="server-display-mini">0ms</span> </div> <div class="flex items-center"> <span class="text-xs text-gray-600 w-24 flex-shrink-0">Content Transfer</span> <div class="flex-1 mx-2 h-4 bg-gray-200 rounded-full overflow-hidden"> <div id="transfer-bar-circle" class="h-full bg-cyan-500 rounded-full transition-all duration-300" style="width: 0%"></div> </div> <span class="text-xs font-mono font-semibold text-gray-800 w-16 text-right" id="transfer-display-mini">0ms</span> </div> <div class="flex items-center pt-2 border-t border-gray-200"> <span class="text-xs font-semibold text-gray-700 w-24 flex-shrink-0">Total Time</span> <div class="flex-1"></div> <span class="text-sm font-mono font-bold text-gray-900 w-16 text-right" id="total-time-circle">0ms</span> </div> </div> </div> <div id="info-server" class="bg-white rounded-xl p-5 shadow-sm scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-7 h-7 bg-gray-500 rounded-lg flex items-center justify-center mr-2"> <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path> </svg> </div> <h3 class="text-base font-bold text-gray-900">Server Information</h3> </div> <div class="space-y-2"> <div class="flex justify-between items-center text-xs border-b border-gray-100 pb-2"> <span class="text-gray-500">Server</span> <span class="font-mono font-semibold text-gray-900" id="server-display">--</span> </div> <div class="flex justify-between items-center text-xs border-b border-gray-100 pb-2"> <span class="text-gray-500">HTTP Version</span> <span class="font-mono font-semibold text-gray-900" id="http-version-display">--</span> </div> <div class="flex justify-between items-center text-xs border-b border-gray-100 pb-2"> <span class="text-gray-500">
2Status Code</span> <span class="font-mono font-semibold text-gray-900" id="http-code-display-mini">--</span> </div> <div class="flex justify-between items-center text-xs"> <span class="text-gray-500">Content Type</span> <span class="font-mono font-semibold text-gray-900" id="content-type-display">--</span> </div> </div> </div> <div id="info-basic" class="bg-white rounded-xl p-5 shadow-sm scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-7 h-7 bg-purple-500 rounded-lg flex items-center justify-center mr-2"> <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> </svg> </div> <h3 class="text-base font-bold text-gray-900">Page Information</h3> </div> <div class="space-y-2"> <div class="flex justify-between items-center text-xs border-b border-gray-100 pb-2"> <span class="text-gray-500">File Size</span> <span class="font-mono font-semibold text-gray-900" id="page-size-display">--</span> </div> <div class="flex justify-between items-center text-xs border-b border-gray-100 pb-2"> <span class="text-gray-500">Characters</span> <span class="font-mono font-semibold text-gray-900" id="page-chars-display">--</span> </div> <div class="flex justify-between items-center text-xs border-b border-gray-100 pb-2"> <span class="text-gray-500">Words</span> <span class="font-mono font-semibold text-gray-900" id="page-words-display">--</span> </div> <div class="flex justify-between items-center text-xs border-b border-gray-100 pb-2"> <span class="text-gray-500">Lines</span> <span class="font-mono font-semibold text-gray-900" id="page-lines-display">--</span> </div> <div class="flex justify-between items-center text-xs border-b border-gray-100 pb-2"> <span class="text-gray-500">Tag Count</span> <span class="font-mono font-semibold text-gray-900" id="tag-count-display-mini">--</span> </div> <div class="flex justify-between items-center text-xs"> <span class="text-gray-500">Text/HTML Ratio</span> <span class="font-mono font-semibold text-gray-900" id="text-html-ratio-display">--</span> </div> </div> </div> </div> <div id="info-request" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Request Information</h2> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> <div class="bg-white rounded-lg p-4 shadow-sm"> <div class="text-2xl font-bold text-gray-900" id="http-code-display">--</div> <div class="text-sm text-gray-500 mt-1">Status Code</div> </div> <div class="bg-white rounded-lg p-4 shadow-sm"> <div class="text-2xl font-bold text-gray-900" id="execution-time-display">--</div> <div class="text-sm text-gray-500 mt-1">Execution Time</div> </div> <div class="bg-white rounded-lg p-4 shadow-sm"> <div class="text-2xl font-bold text-gray-900" id="cache-status-display">--</div> <div class="text-sm text-gray-500 mt-1">Cache Status</div> </div> <div class="bg-white rounded-lg p-4 shadow-sm"> <div class="text-2xl font-bold text-gray-900" id="total-time-display">--</div> <div class="text-sm text-gray-500 mt-1">Total Time</div> </div> </div> </div> <div id="info-performance-detail" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8 hidden"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Performance Breakdown (Detail)</h2> </div> <div class="space-y-3"> <div class="bg-white rounded-lg p-3 shadow-sm"> <div class="flex justify-between items-center"> <span class="text-sm text-gray-600">DNS Lookup</span> <span class="font-mono text-gray-900 font-semibold" id="dns-display">--</span> </div> <div class="mt-2 h-2 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-blue-500 rounded-full" id="dns-bar" style="width: 0%"></div> </div> </div> <div class="bg-white rounded-lg p-3 shadow-sm"> <div class="flex justify-between items-center"> <span class="text-sm text-gray-600">TCP Connection</span> <span class="font-mono text-gray-900 font-semibold" id="tcp-display">--</span> </div> <div class="mt-2 h-2 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-green-500 rounded-full" id="tcp-bar" style="width: 0%"></div> </div> </div> <div class="bg-white rounded-lg p-3 shadow-sm"> <div class="flex justify-between items-center"> <span class="text-sm text-gray-600">TLS Handshake</span> <span class="font-mono text-gray-900 font-semibold" id="tls-display">--</span> </div> <div class="mt-2 h-2 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-yellow-500 rounded-full" id="tls-bar" style="width: 0%"></div> </div> </div> <div class="bg-white rounded-lg p-3 shadow-sm"> <div class="flex justify-between items-center"> <span class="text-sm text-gray-600">Server Wait</span> <span class="font-mono text-gray-900 font-semibold" id="server-wait-display">--</span> </div> <div class="mt-2 h-2 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-orange-500 rounded-full" id="server-bar" style="width: 0%"></div> </div> </div> <div class="bg-white rounded-lg p-3 shadow-sm"> <div class="flex justify-between items-center"> <span class="text-sm text-gray-600">Content Transfer</span> <span class="font-mono text-gray-900 font-semibold" id="transfer-display">--</span> </div> <div class="mt-2 h-2 bg-gray-200 rounded-full overflow-hidden"> <div class="h-full bg-pink-500 rounded-full" id="transfer-bar" style="width: 0%"></div> </div> </div> </div> </div>
2 <div id="info-structure" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-pink-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">HTML Structure Analysis</h2> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> <div class="bg-white rounded-lg p-4 shadow-sm text-center"> <div class="text-3xl font-bold text-pink-600" id="tag-count-display">--</div> <div class="text-sm text-gray-500 mt-1">Tag Count</div> </div> <div class="bg-white rounded-lg p-4 shadow-sm text-center"> <div class="text-3xl font-bold text-indigo-600" id="link-count-display">--</div> <div class="text-sm text-gray-500 mt-1">Links</div> </div> <div class="bg-white rounded-lg p-4 shadow-sm text-center"> <div class="text-3xl font-bold text-purple-600" id="image-count-display">--</div> <div class="text-sm text-gray-500 mt-1">Images</div> </div> <div class="bg-white rounded-lg p-4 shadow-sm text-center"> <div class="text-3xl font-bold text-blue-600" id="script-count-display">--</div> <div class="text-sm text-gray-500 mt-1">Scripts</div> </div> </div> </div> <div id="info-tdk-meta" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">TDK & Meta Tags</h2> </div> <div class="space-y-3"> <div class="bg-white rounded-lg p-3 shadow-sm"> <div class="text-xs text-gray-500 mb-1">Title</div> <div class="font-mono text-sm text-gray-900 break-all" id="meta-title-display">--</div> <div class="text-xs text-gray-400 mt-1">Length: <span id="meta-title-length">0</span></div> </div> <div class="bg-white rounded-lg p-3 shadow-sm"> <div class="text-xs text-gray-500 mb-1">Description</div> <div class="font-mono text-sm text-gray-900 break-all" id="meta-description-display">--</div> <div class="text-xs text-gray-400 mt-1">Length: <span id="meta-description-length">0</span></div> </div> <div class="bg-white rounded-lg p-3 shadow-sm"> <div class="text-xs text-gray-500 mb-1">Keywords</div> <div class="font-mono text-sm text-gray-900 break-all" id="meta-keywords-display">--</div> <div class="text-xs text-gray-400 mt-1">Length: <span id="meta-keywords-length">0</span></div> </div> <div class="bg-white rounded-lg p-3 shadow-sm"> <div class="text-xs text-gray-500 mb-1">Canonical URL</div> <div class="font-mono text-sm text-gray-900 break-all" id="meta-canonical-display">--</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm"> <div class="text-xs text-gray-500 mb-2">Other Meta Tags</div> <div class="max-h-48 overflow-y-auto space-y-2" id="meta-other-display"> <div class="text-sm text-gray-400">No Data</div> </div> </div> </div> </div> <div id="info-seo-issues" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">SEO Issues</h2> </div> <div class="bg-white rounded-lg p-4 shadow-sm"> <div id="seo-issues-list" class="space-y-2"> <div class="text-sm text-gray-400">No Data</div> </div> </div> </div> <div id="info-density" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-lime-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Word Density</h2> </div>
2 <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4"> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-lime-600" id="density-total-words">0</div> <div class="text-xs text-gray-500">Total Words</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-lime-700" id="density-unique-words">0</div> <div class="text-xs text-gray-500">Unique Words</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-lime-800" id="density-1word">0</div> <div class="text-xs text-gray-500">1-Word</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-lime-900" id="density-2word">0</div> <div class="text-xs text-gray-500">2-Words</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-green-600" id="density-3word">0</div> <div class="text-xs text-gray-500">3-Words</div> </div> </div> <div class="bg-white rounded-lg shadow-sm overflow-hidden"> <div class="flex border-b border-gray-200"> <button class="density-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-lime-500 transition-colors" data-tab="1">1 Word</button> <button class="density-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-lime-500 transition-colors" data-tab="2">2 Words</button> <button class="density-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-lime-500 transition-colors" data-tab="3">3 Words</button> <button class="density-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-lime-500 transition-colors" data-tab="4">4 Words</button> <button class="density-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-lime-500 transition-colors" data-tab="5">5 Words</button> </div> <div class="p-4"> <div class="overflow-x-auto" id="density-content"> <div class="text-sm text-gray-400">No Data</div> </div> </div> </div> </div> <div id="info-text-html-ratio" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Text/HTML Ratio</h2> </div> <div class="bg-white rounded-lg p-6 shadow-sm"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="text-center"> <div class="text-3xl font-bold text-cyan-600" id="text-html-ratio-value">--%</div> <div class="text-sm text-gray-500 mt-1">Text Content Ratio</div> <div class="text-xs text-gray-400 mt-1" id="text-content-size-display">--</div> </div> <div class="text-center"> <div class="text-3xl font-bold text-cyan-700" id="html-size-value">--</div> <div class="text-sm text-gray-500 mt-1">HTML Total Size</div> <div class="text-xs text-gray-400 mt-1" id="html-size-display">--</div> </div> <div class="text-center"> <div class="text-3xl font-bold text-cyan-800" id="ratio-quality">--</div> <div class="text-sm text-gray-500 mt-1">Quality Score</div> <div class="text-xs text-gray-400 mt-1">Based on ratio assessment</div> </div> </div> <div class="mt-4 pt-4 border-t border-gray-200"> <div class="text-sm text-gray-600"> <strong>What is Text/HTML Ratio?</strong> <p class="mt-2 text-gray-500">The Text/HTML ratio is the percentage of visible text content compared to total HTML code (plain text chars ÷ total HTML source chars à 100%). This is a "health indicator" rather than a direct ranking factor: Ratio â¥25% indicates sufficient content; <10% may suggest code bloat or thin content. Low ratios typically mean excessive inline styles/JS, deep DOM nesting, leading to large page size, slow FCP, and less crawlable content. Use as a "sniffer": when issues are found, optimize by minifying code, externalizing JS, compressing whitespaceârather than stuffing text or deleting necessary tags.</p> </div> </div> </div> </div> <div id="info-headings" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center justify-between mb-4"> <div class="flex items-center"> <div class="w-8 h-8 bg-amber-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Headings Structure</h2> </div> </div> <div class="grid grid-cols-3 md:grid-cols-7 gap-2 mb-4"> <div class="bg-white rounded-lg p-2 shadow-sm text-center"> <div class="text-lg font-bold text-amber-600" id="heading-h1-count">0</div> <div class="text-xs text-gray-500">H1</div> </div> <div class="bg-white rounded-lg p-2 shadow-sm text-center"> <div class="text-lg font-bold text-amber-700" id="heading-h2-count">0</div> <div class="text-xs text-gray-500">H2</div> </div> <div class="bg-white rounded-lg p-2 shadow-sm text-center"> <div class="text-lg font-bold text-amber-800" id="heading-h3-count">0</div> <div class="text-xs text-gray-500">H3</div> </div> <div class="bg-white rounded-lg p-2 shadow-sm text-center"> <div class="text-lg font-bold text-amber-900" id="heading-h4-count">0</div> <div class="text-xs text-gray-500">H4</div> </div> <div class="bg-white rounded-lg p-2 shadow-sm text-center"> <div class="text-lg font-bold text-yellow-600" id="heading-h5-count">0</div> <div class="text-xs text-gray-500">H5</div> </div> <div class="bg-white rounded-lg p-2 shadow-sm text-center"> <div class="text-lg font-bold text-yellow-700" id="heading-h6-count">0</div> <div class="text-xs text-gray-500">H6</div> </div> <div class="bg-white rounded-lg p-2 shadow-sm text-center"> <div class="text-lg font-bold text-gray-600" id="heading-total-count">0</div> <div class="text-xs text-gray-500">Total</div> </div> </div> <div class="bg-white rounded-lg shadow-sm overflow-hidden"> <div class="flex border-b border-gray-200"> <button class="heading-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-amber-500 transition-colors" data-tab="all">All</button> <button class="heading-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-amber-500 transition-colors" data-tab="h">H</button> <button class="heading-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-amber-500 transition-colors" data-tab="h1">H1</button> <button class="heading-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-amber-500 transition-colors" data-tab="h2">H2</button> <button class="heading-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-amber-500 transition-colors" data-tab="h3">H3</button> <button class="heading-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-amber-500 transition-colors" data-tab="h4">H4</button> <button class="heading-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-amber-500 transition-colors" data-tab="h5">H5</button> <button class="heading-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-amber-500 transition-colors" data-tab="h6">H6</button> </div> <div class="p-4 max-h-96 overflow-y-auto" id="headings-content"> <div class="text-sm text-gray-400">No Data</div> </div> </div> </div> <div id="info-images" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-emerald-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Images Information</h2> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4"> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-emerald-600" id="image-total-count">0</div> <div class="text-xs text-gray-500">Total</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-emerald-700" id="image-unique-count">0</div> <div class="text-xs text-gray-500">Unique</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-orange-500" id="image-no-alt-count">0</div> <div class="text-xs text-gray-500">No Alt</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-orange-600" id="image-no-title-count">0</div> <div class="text-xs text-gray-500">No Title</div> </div> </div> <div class="bg-white rounded-lg shadow-sm overflow-hidden"> <div class="flex border-b border-gray-200"> <button class="image-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-emerald-500 transition-colors" data-tab="all">All</button> <button class="image-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-emerald-500 transition-colors" data-tab="unique">Unique</button> <button class="image-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-emerald-500 transition-colors" data-tab="no-alt">No Alt</button> <button class="image-tab px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-emerald-500 transition-colors" data-tab="no-title">No Title</button> </div> <div class="p-4 max-h-96 overflow-y-auto" id="images-content"> <div class="text-sm text-gray-400">No Data</div> </div> </div> </div> <div id="info-links" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-violet-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Links Information</h2> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4"> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-violet-600" id="link-total-count">0</div> <div class="text-xs text-gray-500">Total</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-violet-700" id="link-unique-count">0</div> <div class="text-xs text-gray-500">Unique</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-blue-500" id="link-internal-count">0</div> <div class="text-xs text-gray-500">Internal</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-green-500" id="link-external-count">0</div> <div class="text-xs text-gray-500">External</div> </div> </div> <div class="bg-white rounded-lg shadow-sm overflow-hidden"> <div class="flex flex-wrap border-b border-gray-200"> <button class="link-tab px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-violet-500 transition-colors" data-tab="all">All</button> <button class="link-tab px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-violet-500 transition-colors" data-tab="unique">Unique</button> <button class="link-tab px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-violet-500 transition-colors" data-tab="internal">Internal</button> <button class="link-tab px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-violet-500 transition-colors" data-tab="external">External</button> <button class="link-tab px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-violet-500 transition-colors" data-tab="dofollow">Dofollow</button> <button class="link-tab px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 border-b-2 border-transparent hover:border-violet-500 transition-colors" data-tab="nofollow">Nofollow</button> </div> <div class="p-4 max-h-96 overflow-y-auto" id="links-content"> <div class="text-sm text-gray-400">No Data</div> </div> </div> </div> <div id="info-hreflangs" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-teal-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Hreflang Tags</h2> </div> <div class="grid grid-cols-2 md:grid-cols-3 gap-3 mb-4"> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-teal-600" id="hreflang-total-count">0</div> <div class="text-xs text-gray-500">Total</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-teal-700" id="hreflang-unique-count">0</div> <div class="text-xs text-gray-500">Unique</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-red-500" id="hreflang-error-count">0</div> <div class="text-xs text-gray-500">Errors</div> </div> </div> <div class="bg-white rounded-lg shadow-sm overflow-hidden"> <div class="p-4"> <h3 class="text-sm font-semibold text-gray-700 mb-3">Hreflang Links</h3> <div class="overflow-x-auto" id="hreflangs-content"> <div class="text-sm text-gray-400">No Data</div> </div> </div> </div> </div> <div id="info-opengraph" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-pink-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2m0 2v2m0-2H5m2 0h2m4 0V2m0 2v2m0-2h-2m2 0h2M4 7h16M4 7v2m16-2v2M9 10h6m-6 4h6m-6 4h6"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Open Graph & Social</h2> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4"> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-pink-600" id="og-total-count">0</div> <div class="text-xs text-gray-500">Total</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-pink-700" id="og-basic-count">0</div> <div class="text-xs text-gray-500">Basic Tags</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-blue-500" id="og-image-count">0</div> <div class="text-xs text-gray-500">OG Images</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-green-500" id="og-twitter-count">0</div> <div class="text-xs text-gray-500">Twitter Cards</div> </div> </div> <div clas
2s="bg-white rounded-lg shadow-sm overflow-hidden"> <div class="p-4"> <div id="opengraph-content"> <div class="text-sm text-gray-400">No Data</div> </div> </div> </div> </div> <div id="info-structured" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Structured Data</h2> </div> <div class="grid grid-cols-2 md:grid-cols-3 gap-3 mb-4"> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-indigo-600" id="jsonld-count">0</div> <div class="text-xs text-gray-500">JSON-LD</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-indigo-700" id="microdata-count">0</div> <div class="text-xs text-gray-500">Microdata</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-purple-500" id="schema-types-count">0</div> <div class="text-xs text-gray-500">Schema Types</div> </div> </div> <div class="bg-white rounded-lg shadow-sm overflow-hidden"> <div class="p-4" id="structured-content"> <div class="text-sm text-gray-400">No Data</div> </div> </div> </div> <div id="info-technology" class="mb-8 bg-gray-50 rounded-xl p-6 scroll-mt-8"> <div class="flex items-center mb-4"> <div class="w-8 h-8 bg-rose-500 rounded-lg flex items-center justify-center mr-3"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> </div> <h2 class="text-lg font-bold text-gray-900">Technology Detection</h2> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4"> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-rose-600" id="tech-frameworks-count">0</div> <div class="text-xs text-gray-500">Frameworks</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-rose-700" id="tech-cdn-count">0</div> <div class="text-xs text-gray-500">CDN Services</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-blue-500" id="tech-analytics-count">0</div> <div class="text-xs text-gray-500">Analytics</div> </div> <div class="bg-white rounded-lg p-3 shadow-sm text-center"> <div class="text-2xl font-bold text-green-500" id="tech-other-count">0</div> <div class="text-xs text-gray-500">Other</div> </div> </div> <div class="bg-white rounded-lg shadow-sm overflow-hidden"> <div class="p-4" id="technology-content"> <div class="text-sm text-gray-400">No Data</div> </div> </div> </div> </div> </section> <div id="mobile-nav-drawer" class="lg:hidden fixed inset-0 z-50 hidden"> <div id="nav-drawer-overlay" class="absolute inset-0 bg-black bg-opacity-50 transition-opacity"></div> <div id="nav-drawer-panel" class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-2xl transform transition-transform duration-300 translate-y-full"> <div class="p-4"> <div id="nav-drawer-handle" class="w-12 h-1 bg-gray-300 rounded-full mx-auto mb-4"></div> <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4 text-center">navigation</h3> <div class="space-y-1"> <a href="#info-performance" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-performance"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> Performance Breakdown </span> </a> <a href="#info-server" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-server"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path> </svg> Server Information </span> </a> <a href="#info-basic" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-basic"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> Page Information </span> </a>
2 <a href="#info-request" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-request"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> Request Information </span> </a> <a href="#info-structure" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-structure"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path> </svg> HTML Structure Analysis </span> </a> <a href="#info-tdk-meta" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-tdk-meta"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path> </svg> TDK & Meta Tags </span> </a> <a href="#info-seo-issues" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-seo-issues"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path> </svg> SEO Issues </span> </a> <a href="#info-density" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-density"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-lime-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> Word Density </span> </a> <a href="#info-text-html-ratio" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-text-html-ratio"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path> </svg> Text/HTML Ratio </span> </a> <a href="#info-headings" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-headings"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path> </svg> Headings Structure </span> </a> <a href="#info-images" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-images"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path> </svg> Images Information </span> </a> <a href="#info-links" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-links"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path> </svg> Links Information </span> </a> <a href="#info-hreflangs" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-hreflangs"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path> </svg> Hreflang Tags </span> </a> <a href="#info-opengraph" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-opengraph"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2m0 2v2m0-2H5m2 0h2m4 0V2m0 2v2m0-2h-2m2 0h2M4 7h16M4 7v2m16-2v2M9 10h6m-6 4h6m-6 4h6"></path> </svg> Open Graph & Social </span> </a>
2 <a href="#info-structured" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-structured"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path> </svg> Structured Data </span> </a> <a href="#info-technology" class="mobile-nav-link block px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors" data-target="info-technology"> <span class="flex items-center"> <svg class="w-5 h-5 mr-3 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> Technology Detection </span> </a> </div> <button id="close-drawer-btn" class="w-full mt-4 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition-colors"> close </button> </div> </div> </div> <button id="mobile-nav-toggle" class="lg:hidden fixed bottom-6 right-16 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg flex items-center justify-center transition-transform hover:scale-105 z-40 hidden"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> <button id="back-to-top" class="fixed bottom-6 right-1 w-14 h-14 bg-gray-800 hover:bg-gray-900 text-white rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-110 z-40 opacity-0 invisible" style="transition: opacity 0.3s, visibility 0.3s;"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path> </svg> </button> <section class="py-10 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-8"> <h2 class="text-2xl font-bold text-gray-900 mb-2">Quick Navigation</h2> <p class="text-gray-600">Select your browser or device to view detailed source viewing guides</p> </div> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> <a href="#guide-safari" class="group bg-gradient-to-br from-blue-50 to-blue-100 hover:from-blue-100 hover:to-blue-200 rounded-xl p-5 text-center transition-all duration-200 border border-blue-200 hover:border-blue-300 hover:shadow-md"> <div class="text-3xl mb-2">ð</div> <div class="font-semibold text-gray-900 group-hover:text-blue-700">Safari</div> <div class="text-xs text-gray-500 mt-1">Browser</div> </a> <a href="#guide-chrome" class="group bg-gradient-to-br from-green-50 to-green-100 hover:from-green-100 hover:to-green-200 rounded-xl p-5 text-center transition-all duration-200 border border-green-200 hover:border-green-300 hover:shadow-md"> <div class="text-3xl mb-2">ð</div> <div class="font-semibold text-gray-900 group-hover:text-green-700">Chrome</div> <div class="text-xs text-gray-500 mt-1">Browser</div> </a> <a href="#guide-firefox" class="group bg-gradient-to-br from-orange-50 to-orange-100 hover:from-orange-100 hover:to-orange-200 rounded-xl p-5 text-center transition-all duration-200 border border-orange-200 hover:border-orange-300 hover:shadow-md"> <div class="text-3xl mb-2">ð¦</div> <div class="font-semibold text-gray-900 group-hover:text-orange-700">Firefox</div> <div class="text-xs text-gray-500 mt-1">Browser</div> </a> <a href="#guide-android" class="group bg-gradient-to-br from-emerald-50 to-emerald-100 hover:from-emerald-100 hover:to-emerald-200 rounded-xl p-5 text-center transition-all duration-200 border border-emerald-200 hover:border-emerald-300 hover:shadow-md"> <div class="text-3xl mb-2">ð±</div> <div class="font-semibold text-gray-900 group-hover:text-emerald-700">Android</div> <div class="text-xs text-gray-500 mt-1">Mobile</div> </a> <a href="#guide-iphone" class="group bg-gradient-to-br from-indigo-50 to-indigo-100 hover:from-indigo-100 hover:to-indigo-200 rounded-xl p-5 text-center transition-all duration-200 border border-indigo-200 hover:border-indigo-300 hover:shadow-md"> <div class="text-3xl mb-2">ð²</div> <div class="font-semibold text-gray-900 group-hover:text-indigo-700">iPhone</div> <div class="text-xs text-gray-500 mt-1">Mobile</div> </a> </div> </div> </section> <section class="relative bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden"> <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20"> <div class="text-center"> <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-blue-100 text-blue-800 mb-4"> Free online tool - No installation required </span> <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 leading-tight"> View Source & Analyze Any Website </h2> <p class="max-w-3xl mx-auto text-base sm:text-lg text-gray-600 mb-6"> Instantly view source, detect 100+ technologies, and get comprehensive SEO analysis. Smart insights reveal meta tags, structured data, security indicators, frameworks, and more. </p> <div class="flex justify-center gap-3"> <a href="#view-source-tool" class="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"> <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/> </svg> View Source </a> </div> </div> </div> </section> <section class="py-10 bg-white border-b border-gray-100"> <div class="max-w-4xl mx-auto px-4"> <div class="grid grid-cols-3 gap-4"> <div class="text-center"> <div class="text-2xl sm:text-3xl font-bold text-blue-600 mb-1">7+</div> <div class="text-xs sm:text-sm text-gray-600">Years Online</div> </div> <div class="text-center"> <div class="text-2xl sm:text-3xl font-bold text-indigo-600 mb-1">10M+</div> <div class="text-xs sm:text-sm text-gray-600">Pages Analyzed</div> </div> <div class="text-center"> <div class="text-2xl sm:text-3xl font-bold text-purple-600 mb-1">100%</div> <div class="text-xs sm:text-sm text-gray-600">Free Forever</div> </div> </div> </div> </section> <section id="features" class="py-16 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-12"> <h2 class="text-3xl font-bold text-gray-900 mb-4">Powerful Website Intelligence Tools</h2> <p class="text-lg text-gray-600 max-w-3xl mx-auto">Go beyond viewing source. Analyze SEO, detect technologies, and uncover insights about any website.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100"> <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4"> <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/> </svg> </div> <h3 class="text-xl font-semibold text-gray-900 mb-2">Instant Source View</h3> <p class="text-gray-600">Enter any URL and get the complete HTML instantly. No browser extensions or installations needed.</p> </div> <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100"> <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4"> <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/> </svg> </div> <h3 class="text-xl font-semibold text-gray-900 mb-2">Smart Analysis</h3> <p class="text-gray-600">
2Comprehensive SEO audit covering meta tags, Open Graph, structured data, internationalization, links, resources, and security indicators.</p> </div> <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100"> <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/> </svg> </div> <h3 class="text-xl font-semibold text-gray-900 mb-2">Technology Detection</h3> <p class="text-gray-600">Identify 100+ technologies including CMS platforms, JavaScript frameworks, analytics tools, CDNs, payment systems, and more.</p> </div> <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100"> <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4"> <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/> </svg> </div> <h3 class="text-xl font-semibold text-gray-900 mb-2">Performance Metrics</h3> <p class="text-gray-600">Get detailed page speed insights including DNS lookup, TCP connection, TLS handshake, server wait, and download times.</p> </div> <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100"> <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4"> <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/> </svg> </div> <h3 class="text-xl font-semibold text-gray-900 mb-2">Works Everywhere</h3> <p class="text-gray-600">Access from any device - desktop, tablet, or mobile. View Source on the go, even on devices that don't support it natively.</p> </div> <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-gray-100"> <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mb-4"> <svg class="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/> </svg> </div> <h3 class="text-xl font-semibold text-gray-900 mb-2">Private & Secure</h3> <p class="text-gray-600">We don't store your queries or the source you view. Your browsing history stays completely private.</p> </div> </div> </div> </section> <section id="guide-browser" class="py-16 bg-white"> <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-12"> <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-blue-100 text-blue-800 mb-4">Browser Guide</span> <h2 class="text-3xl font-bold text-gray-900 mb-4">How to View Page Source in Browser</h2> <p class="text-lg text-gray-600 max-w-3xl mx-auto">Detailed step-by-step guides to view source in various desktop browsers</p> </div> <div id="guide-safari" class="mb-16 scroll-mt-20"> <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-8 border border-blue-100"> <div class="flex items-center mb-6"> <div class="text-4xl mr-4">ð</div> <div> <h3 class="text-2xl font-bold text-gray-900">View Page Source in Safari</h3> <p class="text-gray-600">Three methods to View Source in Apple Safari browser</p> </div> </div> <div class="space-y-6"> <div class="bg-amber-50 rounded-xl p-6 border-2 border-amber-200"> <h4 class="font-semibold text-lg text-amber-900 mb-3 flex items-center"> <span class="inline-flex items-center justify-center w-8 h-8 bg-amber-200 text-amber-800 rounded-full text-sm font-bold mr-3">â ï¸</span> Prerequisite: Enable Develop Menu </h4> <div class="pl-11">
2 <p class="text-amber-900 mb-3 font-medium">Before using the following methods, you need to enable the "Develop" menu in Safari browser:</p> <ol class="text-amber-800 space-y-2 mb-4"> <li class="flex items-start"> <span class="text-amber-600 mr-2 font-bold">1.</span> <span>Open Safari browser, click menu bar "Safari" â "Settings..." (or "Preferences")</span> </li> <li class="flex items-start"> <span class="text-amber-600 mr-2 font-bold">2.</span> <span>Click the "Advanced" tab</span> </li> <li class="flex items-start"> <span class="text-amber-600 mr-2 font-bold">3.</span> <span>Check the "Show feature for web developers" checkbox</span> </li> </ol> <div class="my-4 rounded-lg overflow-hidden border border-amber-300"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/desktop-safari-show-feature.webp" alt="Safari Enable Develop Menu" class="w-full h-auto"> </div> <div class="bg-amber-100 rounded-lg p-3 border border-amber-300"> <p class="text-xs text-amber-900"><strong>ð¡ After enabling, the "Develop" option will appear in the menu bar for the following methods to work</strong></p> </div> </div> </div> <div class="bg-white rounded-xl p-6 border border-gray-200"> <h4 class="font-semibold text-lg text-gray-900 mb-3 flex items-center"> <span class="inline-flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-700 rounded-full text-sm font-bold mr-3">1</span> Keyboard Shortcut Method </h4> <div class="pl-11"> <p class="text-gray-600 mb-3">Press the following key combination to open the source code view:</p> <div class="mb-4"> <p class="text-sm text-gray-600 mb-2">View source directly:</p> <div class="inline-flex items-center px-4 py-2 bg-blue-50 rounded-lg border border-blue-200"> <kbd class="text-sm font-semibold text-blue-700">â</kbd> <span class="mx-2 text-blue-500">+</span> <kbd class="text-sm font-semibold text-blue-700">Option</kbd> <span class="mx-2 text-blue-500">+</span> <kbd class="text-sm font-semibold text-blue-700">U</kbd> </div> </div> <div class="mb-4"> <p class="text-sm text-gray-600 mb-2">Open developer tools (includes source view):</p> <div class="inline-flex items-center px-4 py-2 bg-green-50 rounded-lg border border-green-200"> <kbd class="text-sm font-semibold text-green-700">â</kbd> <span class="mx-2 text-green-500">+</span> <kbd class="text-sm font-semibold text-green-700">Option</kbd> <span class="mx-2 text-green-500">+</span> <kbd class="text-sm font-semibold text-green-700">I</kbd> </div> </div> <div class="mt-4 rounded-lg overflow-hidden border border-gray-200"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/desktop-safari-debugging.webp" alt="Keyboard Shortcut Method" class="w-full h-auto"> <div class="bg-gray-50 px-3 py-2 text-xs text-gray-500 text-center">Demo Image (Development Phase)</div> </div> </div> </div> <div class="bg-white rounded-xl p-6 border border-gray-200"> <h4 class="font-semibold text-lg text-gray-900 mb-3 flex items-center"> <span class="inline-flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-700 rounded-full text-sm font-bold mr-3">2</span> Menu Bar Method </h4> <div class="pl-11"> <p class="text-gray-600 mb-3">Quickly access page source through the right-click context menu</p> <div class="bg-gray-50 rounded-lg p-4 border border-gray-200 mb-4"> <p class="text-sm text-gray-700"><span class="text-blue-600 font-semibold">Right-click</span> anywhere on the page â Select <span class="text-blue-600 font-semibold">"Show Page Source"</span></p> </div> <div class="mt-4 rounded-lg overflow-hidden border border-gray-200"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/desktop-safari-right-click.webp" alt="Menu Bar Method" class="w-full h-auto"> <div class="bg-gray-50 px-3 py-2 text-xs text-gray-500 text-center">Demo Image (Development Phase)</div> </div> </div> </div> </div> </div> </div> <div id="guide-chrome" class="mb-16 scroll-mt-20"> <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-2xl p-8 border border-green-100"> <div class="flex items-center mb-6"> <div class="text-4xl mr-4">ð</div> <div> <h3 class="text-2xl font-bold text-gray-900">View Page Source in Chrome</h3> <p class="text-gray-600">Three methods to View Source in Google Chrome browser</p> </div> </div> <div class="space-y-6"> <div class="bg-white rounded-xl p-6 border border-gray-200"> <h4 class="font-semibold text-lg text-gray-900 mb-3 flex items-center"> <span class="inline-flex items-center justify-center w-8 h-8 bg-green-100 text-green-700 rounded-full text-sm font-bold mr-3">1</span> Keyboard Shortcut Method </h4> <div class="pl-11"> <div class="flex flex-wrap gap-4 mb-4"> <div class="inline-flex items-center px-4 py-2 bg-gray-100 rounded-lg border border-gray-300"> <span class="text-xs text-gray-500 mr-2">Windows/Linux</span> <kbd class="text-sm font-semibold text-gray-700">Ctrl</kbd> <span class="mx-2 text-gray-500">+</span> <kbd class="text-sm font-semibold text-gray-700">U</kbd> </div> <div class="inline-flex items-center px-4 py-2 bg-gray-100 rounded-lg border border-gray-300"> <span class="text-xs text-gray-500 mr-2">macOS</span> <kbd class="text-sm font-semibold text-gray-700">â</kbd> <span class="mx-2 text-gray-500">+</span> <kbd class="text-sm font-semibold text-gray-700">Option</kbd> <span class="mx-2 text-gray-500">+</span> <kbd class="text-sm font-semibold text-gray-700">U</kbd> </div> </div> </div> </div> <div class="bg-white rounded-xl p-6 border border-gray-200"> <h4 class="font-semibold text-lg text-gray-900 mb-3 flex items-center"> <span class="inline-flex items-center justify-center w-8 h-8 bg-green-100 text-green-700 rounded-full text-sm font-bold mr-3">2</span> Right-Click Menu Method </h4> <div class="pl-11"> <ol class="text-gray-600 space-y-2 mb-4"> <li class="flex items-start"> <span class="text-green-600 mr-2">â</span> <span>
2Right-click anywhere on the page</span> </li> <li class="flex items-start"> <span class="text-green-600 mr-2">â</span> <span>Select "View page source"</span> </li> </ol> <div class="mt-4 rounded-lg overflow-hidden border border-gray-200"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/desktop-safari-right-click.webp" alt="Right-Click Menu Method" class="w-full h-auto"> <div class="bg-gray-50 px-3 py-2 text-xs text-gray-500 text-center">Demo Image (Development Phase)</div> </div> </div> </div> <div class="bg-white rounded-xl p-6 border border-gray-200"> <h4 class="font-semibold text-lg text-gray-900 mb-3 flex items-center"> <span class="inline-flex items-center justify-center w-8 h-8 bg-green-100 text-green-700 rounded-full text-sm font-bold mr-3">3</span> Menu Bar Method </h4> <div class="pl-11"> <ol class="text-gray-600 space-y-2 mb-4"> <li class="flex items-start"> <span class="text-green-600 mr-2">â</span> <span>Click the three-dot menu in the top-right corner</span> </li> <li class="flex items-start"> <span class="text-green-600 mr-2">â</span> <span>Select "More Tools"</span> </li> <li class="flex items-start"> <span class="text-green-600 mr-2">â</span> <span>Click "View page source"</span> </li> </ol> </div> </div> </div> </div> </div> <div id="guide-firefox" class="scroll-mt-20"> <div class="bg-gradient-to-r from-orange-50 to-amber-50 rounded-2xl p-8 border border-orange-100"> <div class="flex items-center mb-6"> <div class="text-4xl mr-4">ð¦</div> <div> <h3 class="text-2xl font-bold text-gray-900">View Page Source in Firefox</h3> <p class="text-gray-600">Three methods to View Source in Mozilla Firefox browser</p> </div> </div> <div class="space-y-6"> <div class="bg-white rounded-xl p-6 border border-gray-200"> <h4 class="font-semibold text-lg text-gray-900 mb-3 flex items-center"> <span class="inline-flex items-center justify-center w-8 h-8 bg-orange-100 text-orange-700 rounded-full text-sm font-bold mr-3">1</span> Keyboard Shortcut Method </h4> <div class="pl-11"> <div class="inline-flex items-center px-4 py-2 bg-gray-100 rounded-lg border border-gray-300 mb-4"> <kbd class="text-sm font-semibold text-gray-700">Ctrl</kbd> <span class="mx-2 text-gray-500">+</span> <kbd class="text-sm font-semibold text-gray-700">U</kbd> <span class="mx-4 text-gray-400">/</span> <kbd class="text-sm font-semibold text-gray-700">â</kbd> <span class="mx-2 text-gray-500">+</span> <kbd class="text-sm font-semibold text-gray-700">U</kbd> </div> </div> </div> <div class="bg-white rounded-xl p-6 border border-gray-200"> <h4 class="font-semibold text-lg text-gray-900 mb-3 flex items-center"> <span class="inline-flex items-center justify-center w-8 h-8 bg-orange-100 text-orange-700 rounded-full text-sm font-bold mr-3">2</span> Right-Click Menu Method </h4> <div class="pl-11"> <ol class="text-gray-600 space-y-2 mb-4"> <li class="flex items-start"> <span class="text-orange-600 mr-2">â</span> <span>Right-click anywhere on the page</span> </li> <li class="flex items-start"> <span class="text-orange-600 mr-2">â</span> <span>Select "View Page Source"</span> </li> </ol> <div class="mt-4 rounded-lg overflow-hidden border border-gray-200"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/desktop-firefox-right-click.webp" alt="Right-Click Menu Method" class="w-full h-auto"> </div> </div> </div> <div class="bg-white rounded-xl p-6 border border-gray-200"> <h4 class="font-semibold text-lg text-gray-900 mb-3 flex items-center"> <span class="inline-flex items-center justify-center w-8 h-8 bg-orange-100 text-orange-700 rounded-full text-sm font-bold mr-3">3</span> Menu Bar Method </h4> <div class="pl-11"> <ol class="text-gray-600 space-y-2 mb-4"> <li class="flex items-start"> <span class="text-orange-600 mr-2">â</span> <span>Click the three-line menu in the top-right corner</span> </li> <li class="flex items-start"> <span class="text-orange-600 mr-2">â</span> <span>Select "Web Developer"</span> </li> <li class="flex items-start"> <span class="text-orange-600 mr-2">â</span> <span>Click "Page Source"</span> </li> </ol> </div> </div> </div> </div> </div> </div> </section> <section id="guide-mobile" class="py-16 bg-gray-50"> <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-12"> <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-emerald-100 text-emerald-800 mb
2-4">Mobile Guide</span> <h2 class="text-3xl font-bold text-gray-900 mb-4">How to View Page Source on Mobile</h2> <p class="text-lg text-gray-600 max-w-3xl mx-auto">Complete guide to view source on Android and iPhone devices</p> </div> <div class="grid md:grid-cols-2 gap-8"> <div id="guide-android" class="scroll-mt-20"> <div class="bg-white rounded-2xl p-8 border border-gray-200 h-full"> <div class="flex items-center mb-6"> <div class="text-4xl mr-4">ð±</div> <div> <h3 class="text-2xl font-bold text-gray-900">View Page Source on Android</h3> <p class="text-gray-600">Multiple methods to View Source on Android devices</p> </div> </div> <div class="space-y-4"> <div class="bg-emerald-50 rounded-xl p-5 border border-emerald-100"> <h4 class="font-semibold text-gray-900 mb-2">ð¦ Firefox Mobile</h4> <p class="text-sm text-gray-600 mb-3">Firefox for Android supports direct source code viewing</p> <div class="bg-white rounded-lg p-3 mb-3 border border-emerald-200"> <code class="text-sm text-emerald-700">view-source:https://example.com</code> </div> <div class="text-xs text-gray-500 mb-3"> <p>Simply enter view-source: followed by the URL in the address bar to view the page source</p> </div> <div class="rounded-lg overflow-hidden border border-emerald-200"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/firefox-browser-view.webp" alt="Android Firefox" class="w-full h-auto"> <div class="bg-emerald-100 px-3 py-2 text-xs text-gray-500 text-center">Demo Image (Development Phase)</div> </div> </div> <div class="bg-gray-50 rounded-xl p-5 border border-gray-200"> <h4 class="font-semibold text-gray-900 mb-2">ð Chrome</h4> <p class="text-sm text-gray-600 mb-3">Chrome requires special URLs to access developer tools</p> <div class="bg-white rounded-lg p-3 mb-3 border border-gray-300"> <code class="text-sm text-gray-700">view-source:https://example.com</code> </div> <div class="text-xs text-gray-500 mb-3"> <p>Simply enter view-source: followed by the URL in the address bar to view the page source</p> </div> <div class="rounded-lg overflow-hidden border border-gray-200"> <img src="https://oris1.view-source.net/viewsource_k0m1/fa/img/index/chrome-browser-view.webp" alt="Android Chrome" class="w-full h-auto"> <div class="bg-gray-100 px-3 py-2 text-xs text-gray-500 text-center">Demo Image (Development Phase)</div> </div> </div> <div class="bg-purple-50 rounded-xl p-5 border border-purple-100"> <h4 class="font-semibold text-gray-900 mb-2">ð§ Safari & Other Browsers</h4> <p class="text-sm text-gray-600 mb-3">Safari and other system-based browsers can try the view-source: method</p> <div class="bg-white rounded-lg p-3 mb-3 border border-purple-200"> <code class="text-sm text-purple-700">view-source:https://example.com</code> </div> <div class="text-xs text-gray-500 mb-3"> <p>Support depends on the device manufacturer and browser kernel, some customized systems may not support it</p> </div> <div class="mt-3 p-3 bg-purple-100 rounded-lg border border-purple-200"> <p class="text-xs text-gray-700 mb-2"><strong>view-source: method not supported? Use our platform:</strong></p> <div class="bg-white rounded p-2 border border-purple-300"> <code class="text-xs text-purple-800">view-source.net/?q=https://example.com</code> </div> </div> </div> <div class="bg-blue-50 rounded-xl p-5 border border-blue-100"> <h4 class="font-semibold text-gray-900 mb-2">ð§ Recommended Third-Party Tools</h4> <ul class="text-sm text-gray-600 space-y-1"> <li>⢠HTML Source Viewer</li> <li>⢠View Web Source</li> <li>⢠Source Viewer</li> </ul> </div> </div> </div> </div> <div id="guide-iphone" class="scroll-mt-20"> <div class="bg-white rounded-2xl p-8 border border-gray-200 h-full"> <div class="flex items-center mb-6"> <div class="text-4xl mr-4">ð²</div> <div> <h3 class="text-2xl font-bold text-gray-900">View Page Source on iPhone</h3> <p class="text-gray-600">Complete guide to View Source on iPhone/iPad devices</p> </div> </div> <div class="space-y-4"> <div class="bg-indigo-50 rounded-xl p-5 border border-indigo-100"> <h4 class="font-semibold text-gray-900 mb-2">ð Safari</h4> <p class="text-sm text-gray-600 mb-3">Enable Web Inspector via Safari settings, then connect to Mac to view source</p> <div class="bg-white rounded-lg p-3 mb-3 border border-indigo-200"> <code class="text-sm text-indigo-700">view-source:https://example.com</code> </div> <div class="text-xs text-gray-500 mb-3"> <p>Due to iOS system restrictions, most browsers do not support the view-source: method</p> </div> <div class="mt-3 p-3 bg-indigo-100 rounded-lg border border-indigo-200"> <p class="text-xs text-gray-700 mb-2"><strong>Recommended to use our platform:</strong></p> <div class="bg-white rounded p-2 border border-indigo-300"> <code class="text-xs text-indigo-800">view-source.net/?q=https://example.com</code> </div> </div> </div> <div class="bg-gray-50 rounded-xl p-5 border border-gray-200"> <h4 class="font-semibold text-gray-900 mb-2">ð Chrome</h4> <p class="text-sm text-gray-600 mb-3">Enter special URL in Chrome address bar</p> <div class="bg-white rounded-lg p-3 mb-3 border border-gray-300"> <code class="text-sm text-gray-700">view-source:https://example.com</code> </div> <div class="text-xs text-gray-500 mb-3"> <p>Due to iOS system restrictions, most browsers do not support the view-source: method</p> </div> <div class="mt-3 p-3 bg-gray-100 rounded-lg border border-gray-200"> <p class="text-xs text-gray-700 mb-2"><strong>Recommended to use our platform:</strong></p> <div class="bg-white rounded p-2 border border-gray-300"> <code class="text-xs text-gray-800">view-source.net/?q=https://example.com</code> </div> </div> </div> <div class="bg-orange-50 rounded-xl p-5 border border-orange-100"> <h4 class="font-semibold text-gray-900 mb-2">ð¦ Firefox & Other Browsers</h4> <p class="text-sm text-gray-600 mb-3">Firefox and other third-party browsers can try the view-source: method</p> <div class="bg-white rounded-lg p-3 mb-3 border border-orange-200"> <code class="text-sm text-orange-700">view-source:https://example.com</code> </div> <div class="text-xs text-gray-500 mb-3"> <p>Due to iOS system restrictions, most browsers do not support the view-source: method</p> </div> <div class="mt-3 p-3 bg-orange-100 rounded-lg border border-orange-200"> <p class="text-xs text-gray-700 mb-2"><strong>Recommended to use our platform:</strong></p> <div class="bg-white rounded p-2 border border-orange-300"> <code class="text-xs text-orange-800">view-source.net/?q=https://example.com</code> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="py-16 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-12"> <h2 class="text-3xl font-bold text-gray-900 mb-4">Trusted by Professionals</h2> <p class="text-lg text-gray-600 max-w-3xl mx-auto">See what developers, designers, and security experts say about View Source.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-gray-50 rounded-xl p-6 border border-gray-100"> <div class="flex items-center mb-4"> <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center"> <span class="text-blue-600 font-semibold">GL</span> </div> <div class="ml-3"> <div class="font-semibold text-gray-900">Gary Lomas</div> <div class="text-sm text-gray-500">Cyber Security Expert</div> </div> </div> <p class="text-gray-600 italic">"A website's source code is one of the first things you check if it appears to be hacked or acting odd. View Source makes this
2step fast and simple. Love it."</p> </div> <div class="bg-gray-50 rounded-xl p-6 border border-gray-100"> <div class="flex items-center mb-4"> <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> <span class="text-purple-600 font-semibold">WP</span> </div> <div class="ml-3"> <div class="font-semibold text-gray-900">Wendy Peters</div> <div class="text-sm text-gray-500">Web Designer</div> </div> </div> <p class="text-gray-600 italic">"My work involves web design, nothing too technical. But when you find an inspirational design and wonder how they did it, this amazing source viewer helps me learn new techniques."</p> </div> <div class="bg-gray-50 rounded-xl p-6 border border-gray-100"> <div class="flex items-center mb-4"> <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center"> <span class="text-indigo-600 font-semibold">HJ</span> </div> <div class="ml-3"> <div class="font-semibold text-gray-900">Harold Jay</div> <div class="text-sm text-gray-500">Web Developer</div> </div> </div> <p class="text-gray-600 italic">"I use View Source to check the websites I create, just to make sure they work as intended. Highly recommended for any sort of web development."</p> </div> </div> </div> </section> <section id="faq" class="py-16 bg-gray-50"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-12"> <h2 class="text-3xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2> <p class="text-lg text-gray-600">Find answers to common questions about viewing source and website analysis.</p> </div> <div class="space-y-4"> <div class="bg-white border border-gray-200 rounded-lg"> <details class="group"> <summary class="flex justify-between items-center cursor-pointer p-4 font-medium text-gray-900 hover:bg-gray-50 rounded-lg"> What is View Source? <svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> </svg> </summary> <div class="px-4 pb-4 text-gray-600"> With this HTML Viewer, you can View and analyze the source code of any live URL. It instantly fetches the code and provides comprehensive SEO analysis on any device - Mac, PC, tablet, or mobile. </div> </details> </div> <div class="bg-white border border-gray-200 rounded-lg"> <details class="group"> <summary class="flex justify-between items-center cursor-pointer p-4 font-medium text-gray-900 hover:bg-gray-50 rounded-lg"> What is HTML? <svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> </svg> </summary> <div class="px-4 pb-4 text-gray-600"> HTML stands for Hypertext Markup Language. It helps create structured sections, headings, paragraphs, blockquotes, and links for web pages and applications. It builds the bones of any webpage, forming the skeleton structure. </div> </details> </div> <div class="bg-white border border-gray-200 rounded-lg"> <details class="group"> <summary class="flex justify-between items-center cursor-pointer p-4 font-medium text-gray-900 hover:bg-gray-50 rounded-lg"> Why is viewing the source code necessary? <svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> </svg> </summary> <div class="px-4 pb-4 text-gray-600"> Viewing the source code is helpful for programming troubleshooting, SEO analysis, and educational purposes. Programmers use it to solve problems, SEO experts check meta tags and standards, and students learn how code works. </div> </details> </div> <div class="bg-white border border-gray-200 rounded-lg"> <details class="group"> <summary class="flex justify-between items-center cursor-pointer p-4 font-medium text-gray-900 hover:bg-gray-50 rounded-lg"> How do I view the source code? <svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> </svg> </summary> <div class="px-4 pb-4 text-gray-600"> On desktop, use "Ctrl + U" in your browser or right-click and select "View Page Source". On mobile devices, you can use this online HTML viewer tool - just enter the URL and click the "View Source" button. </div> </details> </div> <div class="bg-white border border-gray-200 rounded-lg"> <details class="group"> <summary class="flex justify-between items-center cursor-pointer p-4 font-medium text-gray-900 hover:bg-gray-50 rounded-lg"> Is my viewing history stored? <svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> </svg> </summary> <div class="px-4 pb-4 text-gray-600"> No, we don't store your queries or the source code you view. Your browsing history stays completely private. </div> </details> </div> </div> </div> </section> <section class="py-20 bg-gradient-to-r from-blue-600 to-indigo-600"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <h2 class="text-3xl font-bold text-white mb-4">Ready to Analyze Any Website?</h2> <p class="text-lg text-blue-100 mb-8">Join millions of users who trust View Source for their website analysis needs.
2</p> <div class="flex flex-col sm:flex-row justify-center gap-4"> <a href="#view-source-tool" class="inline-flex items-center justify-center px-8 py-4 text-base font-semibold text-blue-600 bg-white rounded-lg hover:bg-gray-100 transition-colors"> Start Analyzing </a> </div> </div> </section> </div> <footer class="footer"> <div class="footer-container"> <div class="footer-grid"> <div> <div class="footer-brand"> <h2 class="footer-title">View Page Source</h2> <div class="language-selector"> <button type="button" class="language-btn" id="languageBtn"> <svg class="language-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/> <path d="M2 12h20" stroke="currentColor" stroke-width="1.5"/> <path d="M12 2c2.5 2.5 4 6 4 10s-1.5 7.5-4 10" stroke="currentColor" stroke-width="1.5"/> <path d="M12 2c-2.5 2.5-4 6-4 10s1.5 7.5 4 10" stroke="currentColor" stroke-width="1.5"/> </svg> <span class="current-language" id="currentLanguageText">English</span> <svg class="language-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div class="language-dropdown" id="languageDropdown"> <div class="language-section"> <div class="language-section-title">Page Versions</div> <a href="https://view-source.net/" class="language-option active" data-lang="en"> <span class="language-radio"></span> <span>English</span> </a> </div> </div> </div> </div> <p class="footer-description"> Instantly view and analyze any website's source code. Detect technologies, analyze SEO, and uncover insights - all in one place. </p> </div> <div class="footer-links-grid"> <div class="footer-section"> <p class="footer-section-title"></p> </div> <div class="footer-section"> <p class="footer-section-title">Contact us</p> <ul class="footer-links"> <li> <span class="email-obfuscate">support<span class="at-symbol"></span>view-source.net</span> </li> </ul> </div> </div> </div> <p class="footer-copyright"> © 2026 view-source.net All rights reserved. </p> </div></footer>
2<script src="https://oris1.view-source.net/viewsource_k0m1/fa/js/feature.min.260130v1.js"></script>
2<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"bdb9e3318ea24b5baf10ea9d2baa0e84","r":1,"spa":2}' crossorigin="anonymous"></script>
2 3</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.