Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HTTP Status Explorer</title> | |
| <!-- Icons --> | |
| <script src="https://unpkg.com/@phosphor-icons/web"></script> | |
| <style> | |
| :root { | |
| --bg-dark: #0f1115; | |
| --bg-card: #161b22; | |
| --bg-card-hover: #1c242e; | |
| --text-main: #e6e6e6; | |
| --text-muted: #8899a6; | |
| --accent-blue: #3b82f6; | |
| --accent-green: #10b981; | |
| --accent-yellow: #f59e0b; | |
| --accent-red: #ef4444; | |
| --accent-purple: #8b5cf6; | |
| --border: #30363d; | |
| --font-family: 'Inter', system-ui, -apple-system, sans-serif; | |
| } | |
| * { | |
| box-sizing: box-box; | |
| margin: 0; | |
| padding: 0; | |
| outline: none; | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| font-family: var(--font-family); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Header & Navigation */ | |
| header { | |
| background: rgba(15, 17, 21, 0.95); | |
| border-bottom: 1px solid var(--border); | |
| padding: 1rem 2rem; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(10px); | |
| } | |
| .header-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo i { | |
| color: var(--accent-blue); | |
| font-size: 1.8rem; | |
| } | |
| .search-container { | |
| position: relative; | |
| width: 300px; | |
| } | |
| .search-input { | |
| width: 100%; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| padding: 0.7rem 1rem 0.7rem 2.5rem; | |
| color: var(--text-main); | |
| border-radius: 8px; | |
| font-size: 0.9rem; | |
| transition: all 0.2s; | |
| } | |
| .search-input:focus { | |
| border-color: var(--accent-blue); | |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| } | |
| .builder-link { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| border: 1px solid var(--border); | |
| padding: 0.4rem 0.8rem; | |
| border-radius: 6px; | |
| transition: 0.2s; | |
| } | |
| .builder-link:hover { | |
| border-color: var(--accent-blue); | |
| color: var(--accent-blue); | |
| } | |
| /* Filter Tabs */ | |
| .filters { | |
| max-width: 1200px; | |
| margin: 2rem auto 1rem; | |
| padding: 0 2rem; | |
| display: flex; | |
| gap: 1rem; | |
| overflow-x: auto; | |
| } | |
| .filter-btn { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--text-muted); | |
| padding: 0.5rem 1.2rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| transition: 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .filter-btn.active { | |
| background: var(--bg-card); | |
| color: var(--text-main); | |
| border-color: var(--text-main); | |
| } | |
| .filter-btn:hover:not(.active) { | |
| border-color: var(--text-main); | |
| } | |
| /* Grid Layout */ | |
| .grid-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem 4rem; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| /* Card Styles */ | |
| .status-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .status-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 30px -10px rgba(0,0,0, 0.5); | |
| border-color: var(--text-muted); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 1rem; | |
| } | |
| .code-badge { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| font-family: monospace; | |
| padding: 0.2rem 0.6rem; | |
| border-radius: 4px; | |
| background: rgba(0,0,0, 0.2); | |
| } | |
| .card-icon { | |
| font-size: 1.5rem; | |
| opacity: 0.7; | |
| } | |
| .card-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-main); | |
| } | |
| .card-desc { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| overflow: hidden; | |
| } | |
| /* Category Colors */ | |
| .cat-1xx { color: var(--accent-blue); } | |
| .cat-2xx { color: var(--accent-green); } | |
| .cat-3xx { color: var(--accent-yellow); } | |
| .cat-4xx { color: var(--accent-red); } | |
| .cat-5xx { color: var(--accent-purple); } | |
| .bg-1xx { border-top: 3px solid var(--accent-blue); } | |
| .bg-2xx { border-top: 3px solid var(--accent-green); } | |
| .bg-3xx { border-top: 3px solid var(--accent-yellow); } | |
| .bg-4xx { border-top: 3px solid var(--accent-red); } | |
| .bg-5xx { border-top: 3px solid var(--accent-purple); } | |
| /* Modal */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(15, 17, 21, 0.8); | |
| backdrop-filter: blur(5px); | |
| z-index: 500; | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 1rem; | |
| } | |
| .modal-content { | |
| background: var(--bg-card); | |
| width: 100%; | |
| max-width: 600px; | |
| border-radius: 16px; | |
| border: 1px solid var(--border); | |
| padding: 2rem; | |
| position: relative; | |
| transform: scale(0.95); | |
| opacity: 0; | |
| transition: 0.3s; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| box-shadow: 0 20px 50px rgba(0,0,0, 0.5); | |
| } | |
| .modal-content.active { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| .close-btn { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| transition: 0.2s; | |
| } | |
| .close-btn:hover { | |
| color: var(--text-main); | |
| } | |
| .modal-header { | |
| margin-bottom: 1.5rem; | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 1rem; | |
| } | |
| .modal-code { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| font-family: monospace; | |
| margin-bottom: 0.5rem; | |
| } | |
| .modal-desc { | |
| color: var(--text-muted); | |
| font-size: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .modal-details { | |
| display: grid; | |
| gap: 1rem; | |
| } | |
| .detail-box { | |
| background: rgba(0,0,0, 0.2); | |
| padding: 1rem; | |
| border-radius: 8px; | |
| border-left: 3px solid var(--border); | |
| } | |
| .detail-box h4 { | |
| font-size: 0.8rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-muted); | |
| } | |
| .detail-box p { | |
| font-size: 0.9rem; | |
| color: var(--text-main); | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-muted); | |
| border-top: 1px solid var(--border); | |
| margin-top: auto; | |
| font-size: 0.8rem; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .header-content { | |
| justify-content: center; | |
| } | |
| .search-container { | |
| width: 100%; | |
| order: 3; | |
| margin-top: 1rem; | |
| } | |
| .filters { | |
| padding: 0 1rem; | |
| justify-content: center; | |
| } | |
| .grid-container { | |
| padding: 0 1rem 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="ph ph-globe"></i> | |
| HTTP Explorer | |
| </div> | |
| <div class="search-container"> | |
| <i class="ph ph-magnifying-glass search-icon"></i> | |
| <input type="text" id="searchInput" class="search-input" placeholder="Search codes (e.g. 404)..."> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="builder-link"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <div class="filters"> | |
| <button class="filter-btn active" data-filter="all"> | |
| <i class="ph ph-squares-four"></i> All | |
| </button> | |
| <button class="filter-btn" data-filter="1xx"> | |
| <i class="ph ph-info"></i> 1xx Info | |
| </button> | |
| <button class="filter-btn" data-filter="2xx"> | |
| <i class="ph ph-check-circle"></i> 2xx Success | |
| </button> | |
| <button class="filter-btn" data-filter="3xx"> | |
| <i class="ph ph-arrow-right"></i> 3xx Redirect | |
| </button> | |
| <button class="filter-btn" data-filter="4xx"> | |
| <i class="ph ph-warning"></i> 4xx Client | |
| </button> | |
| <button class="filter-btn" data-filter="5xx"> | |
| <i class="ph ph-x-circle"></i> 5xx Server | |
| </button> | |
| </div> | |
| <div class="grid-container" id="cardGrid"> | |
| <!-- Cards will be injected here via JS --> | |
| </div> | |
| <!-- Modal Template --> | |
| <div class="modal-overlay" id="modalOverlay"> | |
| <div class="modal-content" id="modalContent"> | |
| <button class="close-btn" id="closeModal"> | |
| <i class="ph ph-x"></i> | |
| </button> | |
| <div class="modal-header"> | |
| <div class="modal-code" id="modalCode">200</div> | |
| <h2 class="modal-title" id="modalTitle">OK</h2> | |
| <p class="modal-desc" id="modalDesc">Standard response for successful HTTP requests.</p> | |
| </div> | |
| <div class="modal-details"> | |
| <div class="detail-box"> | |
| <h4>Meaning</h4> | |
| <p id="modalMeaning">The request has succeeded. The information returned on the response is dependent on the method used in the request.</p> | |
| </div> | |
| <div class="detail-box"> | |
| <h4>Common Use Case</h4> | |
| <p id="modalUseCase">Used when a GET request successfully retrieves data, or a POST request successfully creates a resource.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>Interactive HTTP Status Code Reference</p> | |
| </footer> | |
| <script> | |
| // Data Source | |
| const httpCodes = [ | |
| { code: 100, title: "Continue", cat: "1xx", desc: "The server has received the request headers and indicates that the client should continue.", meaning: "The server is waiting for the request body.", useCase: "Used for Expect: 100-continue header." }, | |
| { code: 101, title: "Switching Protocols", cat: "1xx", desc: "The server understands and is willing to comply with the client's request to switch protocols.", meaning: "The server will switch protocols (e.g., to WebSocket).", useCase: "Upgrading to WebSocket connections." }, | |
| { code: 200, title: "OK", cat: "2xx", desc: "The request has succeeded.", meaning: "Standard success response.", useCase: "Successful GET or POST requests." }, | |
| { code: 201, title: "Created", cat: "2xx", desc: "The request has succeeded and a new resource has been created.", meaning: "A new resource was successfully created.", useCase: "POST request creating a new user or item." }, | |
| { code: 204, title: "No Content", cat: "2xx", desc: "The server has successfully fulfilled the request but there is no additional content to send.", meaning: "Success, but no body returned.", useCase: "Successful DELETE requests." }, | |
| { code: 301, title: "Moved Permanently", cat: "3xx", desc: "The target resource has been assigned a new permanent URI.", meaning: "Redirect to a new permanent location.", useCase: "Changing URL structures (SEO)." }, | |
| { code: 304, title: "Not Modified", cat: "3xx", desc: "Indicates that the resource has not been modified since the version specified by the request headers.", meaning: "Cache validation passed.", useCase: "Optimizing bandwidth by serving cached content." }, | |
| { code: 400, title: "Bad Request", cat: "4xx", desc: "The server cannot or will not process the request due to an apparent client error.", meaning: "Malformed syntax or invalid parameters.", useCase: "Sending invalid JSON or missing required fields." }, | |
| { code: 401, title: "Unauthorized", cat: "4xx", desc: "The client must authenticate itself to get the requested response.", meaning: "Authentication credentials are missing.", useCase: "Accessing a protected route without logging in." }, | |
| { code: 403, title: "Forbidden", cat: "4xx", desc: "The client does not have access rights to the content.", meaning: "Authentication failed or insufficient permissions.", useCase: "Trying to access admin panel as a user." }, | |
| { code: 404, title: "Not Found", cat: "4xx", desc: "The server cannot find the requested resource.", meaning: "The URI does not exist.", useCase: "Broken links or deleted pages." }, | |
| { code: 405, title: "Method Not Allowed", cat: "4xx", desc: "The method received in the request-line is known by the server but has been disabled.", meaning: "The HTTP method (GET/POST) is not supported.", useCase: "Trying to DELETE a resource that can only be READ." }, | |
| { code: 418, title: "I'm a teapot", cat: "4xx", desc: "The server refuses to brew coffee because it is, permanently, a teapot.", meaning: "A joke error code from RFC 2324.", useCase: "April Fools or Easter eggs." }, | |
| { code: 429, title: "Too Many Requests", cat: "4xx", desc: "The user has sent too many requests in a given amount of time.", meaning: "Rate limiting triggered.", useCase: "API throttling." }, | |
| { code: 500, title: "Internal Server Error", cat: "5xx", desc: "The server has encountered a generic error condition.", meaning: "Server crashed or logic failed.", useCase: "Unhandled exceptions in backend code." }, | |
| { code: 502, title: "Bad Gateway", cat: "5xx", desc: "The server, while acting as a gateway or proxy, received an invalid response.", meaning: "Upstream server failed.", useCase: "Database connection failure." }, | |
| { code: 503, title: "Service Unavailable", cat: "5xx", desc: "The server is not ready to handle the request.", meaning: "Server is overloaded or down.", useCase: "Maintenance mode." }, | |
| { code: 504, title: "Gateway Timeout", cat: "5xx", desc: "The server, while acting as a gateway, did not receive a timely response.", meaning: "Upstream server took too long.", useCase: "Slow database queries." } | |
| ]; | |
| // DOM Elements | |
| const grid = document.getElementById('cardGrid'); | |
| const searchInput = document.getElementById('searchInput'); | |
| const filterBtns = document.querySelectorAll('.filter-btn'); | |
| const modalOverlay = document.getElementById('modalOverlay'); | |
| const modalContent = document.getElementById('modalContent'); | |
| const closeModal = document.getElementById('closeModal'); | |
| // Render Cards | |
| function renderCards(filter = 'all', search = '') { | |
| grid.innerHTML = ''; | |
| const filtered = httpCodes.filter(item => { | |
| const matchesFilter = filter === 'all' || item.cat === filter; | |
| const matchesSearch = item.code.toString().includes(search) || item.title.toLowerCase().includes(search.toLowerCase()); | |
| return matchesFilter && matchesSearch; | |
| }); | |
| filtered.forEach(item => { | |
| const card = document.createElement('div'); | |
| card.className = `status-card bg-${item.cat}`; | |
| card.onclick = () => openModal(item); | |
| // Determine icon based on category | |
| let iconClass = 'ph-cube'; | |
| if(item.cat === '1xx') iconClass = 'ph-info'; | |
| if(item.cat === '2xx') iconClass = 'ph-check-circle'; | |
| if(item.cat === '3xx') iconClass = 'ph-arrow-right'; | |
| if(item.cat === '4xx') iconClass = 'ph-warning'; | |
| if(item.cat === '5xx') iconClass = 'ph-x-circle'; | |
| card.innerHTML = ` | |
| <div class="card-header"> | |
| <span class="code-badge cat-${item.cat}">${item.code}</span> | |
| <i class="ph ${iconClass} card-icon cat-${item.cat}"></i> | |
| </div> | |
| <h3 class="card-title">${item.title}</h3> | |
| <p class="card-desc">${item.desc}</p> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| } | |
| // Modal Logic | |
| function openModal(item) { | |
| document.getElementById('modalCode').innerText = item.code; | |
| document.getElementById('modalCode').className = `modal-code cat-${item.cat}`; | |
| document.getElementById('modalTitle').innerText = item.title; | |
| document.getElementById('modalDesc').innerText = item.desc; | |
| document.getElementById('modalMeaning').innerText = item.meaning; | |
| document.getElementById('modalUseCase').innerText = item.useCase; | |
| modalOverlay.style.display = 'flex'; | |
| setTimeout(() => { | |
| modalContent.classList.add('active'); | |
| }, 10); | |
| } | |
| function closeModalFunc() { | |
| modalContent.classList.remove('active'); | |
| modalOverlay.style.display = 'none'; | |
| } | |
| // Filter Logic | |
| filterBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| // Update UI active state | |
| filterBtns.forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| // Render | |
| renderCards(btn.dataset.filter, searchInput.value); | |
| }); | |
| }); | |
| // Search Logic | |
| searchInput.addEventListener('input', (e) => { | |
| const activeFilter = document.querySelector('.filter-btn.active').dataset.filter; | |
| renderCards(activeFilter, e.target.value); | |
| }); | |
| // Close Modal on click outside or button | |
| closeModal.addEventListener('click', closeModalFunc); | |
| modalOverlay.addEventListener('click', (e) => { | |
| if(e.target === modalOverlay) closeModalFunc(); | |
| }); | |
| // Initial Render | |
| renderCards(); | |
| </script> | |
| </body> | |
| </html> |