Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cloud Commander Dashboard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#3b82f6', | |
| }, | |
| secondary: { | |
| 500: '#f59e0b', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 80px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-text { | |
| display: none; | |
| } | |
| .instance-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| #vanta-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.15; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div id="vanta-bg"></div> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white shadow-lg flex flex-col h-full w-64"> | |
| <div class="flex items-center justify-between p-4 border-b"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="cloud" class="text-primary-500 w-6 h-6"></i> | |
| <span class="logo-text font-bold text-xl text-gray-800">Cloud Commander</span> | |
| </div> | |
| <button id="toggle-sidebar" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="chevron-left" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto py-4"> | |
| <div class="px-4 space-y-1"> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg bg-primary-50 text-primary-600"> | |
| <i data-feather="server" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Instances</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="activity" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Monitoring</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="settings" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Settings</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="file-text" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Documentation</span> | |
| </a> | |
| </div> | |
| <div class="mt-8 px-4"> | |
| <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">Resources</h3> | |
| <div class="mt-1 space-y-1"> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="database" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Database</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="hard-drive" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Storage</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="lock" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Security</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t"> | |
| <div class="flex items-center"> | |
| <img class="w-8 h-8 rounded-full" src="http://static.photos/people/200x200/1" alt="User avatar"> | |
| <div class="ml-3 sidebar-text"> | |
| <p class="text-sm font-medium text-gray-700">Admin User</p> | |
| <p class="text-xs text-gray-500">admin@example.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 overflow-y-auto"> | |
| <header class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center"> | |
| <h1 class="text-xl font-semibold text-gray-900">Instance Dashboard</h1> | |
| <div class="relative"> | |
| <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i data-feather="plus" class="mr-2 w-4 h-4"></i> | |
| Launch New Instance | |
| </button> | |
| <div class="absolute hidden group-hover:block mt-2 w-64 bg-white shadow-lg rounded-lg p-4 z-10"> | |
| <h4 class="font-medium mb-2">Select LLM Model</h4> | |
| <select class="w-full border rounded p-2 mb-2"> | |
| <option>llama3:70b</option> | |
| <option>llama3:8b</option> | |
| <option>mistral:7b</option> | |
| <option>phi3:3.8b</option> | |
| <option>gemma:7b</option> | |
| <option>codellama:7b</option> | |
| </select> | |
| <button class="w-full bg-primary-500 text-white py-2 rounded">Confirm</button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8 "> | |
| <div class="mt-8 mb-6 gap-6"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">LLM Resources Overview</h2> | |
| <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary-500 rounded-md p-3"> | |
| <i data-feather="server" class="text-white w-6 h-6"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Active LLM Models</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">2</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-secondary-500 rounded-md p-3"> | |
| <i data-feather="cpu" class="text-white w-6 h-6"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">LLM vCPUs Used</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">8</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i data-feather="hard-drive" class="text-white w-6 h-6"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">LLM Storage Used</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">320 GB</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i data-feather="dollar-sign" class="text-white w-6 h-6"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Estimated Cost</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">$245.80</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-6 gap-6 mb-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search instances..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 w-64"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="search" class="text-gray-400"></i> | |
| </div> | |
| </div> | |
| <select class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-primary-500 focus:border-primary-500"> | |
| <option>All Regions</option> | |
| <option>us-east-1</option> | |
| <option>us-west-2</option> | |
| <option>eu-west-1</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 rounded-lg hover:bg-gray-100"> | |
| <i data-feather="refresh-cw"></i> | |
| </button> | |
| <button class="p-2 rounded-lg hover:bg-gray-100"> | |
| <i data-feather="filter"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Instance Card 1 --> | |
| <div class="instance-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="px-4 py-5 sm:px-6 border-b flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Production Web Server</h3> | |
| <p class="mt-1 text-sm text-gray-500">Instance ID: i-0a1234567890abcde</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| Running | |
| </span> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6 "> | |
| <div class="col-span-2 text-center gap-4 mb-4"> | |
| <p class="text-sm font-medium text-gray-500">LLM Model</p> | |
| <p class="mt-1 text-lg font-bold text-primary-600 bg-blue-50 px-4 py-2 rounded-lg">llama3:70b</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Public IP</p> | |
| <p class="mt-1 text-sm text-gray-900">54.210.167.204</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Instance Type</p> | |
| <p class="mt-1 text-sm text-gray-900">t3.xlarge</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Availability Zone</p> | |
| <p class="mt-1 text-sm text-gray-900">us-east-1a</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Launch Time</p> | |
| <p class="mt-1 text-sm text-gray-900">2023-06-15 08:23</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <div class="flex space-x-3"> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i data-feather="pause" class="mr-1 w-3 h-3"></i> | |
| Stop | |
| </button> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i data-feather="terminal" class="mr-1 w-3 h-3"></i> | |
| Connect | |
| </button> | |
| </div> | |
| <a href="#" class="inline-flex items-center text-sm font-medium text-primary-500 hover:text-primary-700"> | |
| Details | |
| <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Instance Card 2 --> | |
| <div class="instance-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="px-4 py-5 sm:px-6 border-b flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Database Server</h3> | |
| <p class="mt-1 text-sm text-gray-500">Instance ID: i-0b9876543210fedcb</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"> | |
| Stopped | |
| </span> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Public IP</p> | |
| <p class="mt-1 text-sm text-gray-900">52.87.215.123</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Instance Type</p> | |
| <p class="mt-1 text-sm text-gray-900">r5.2xlarge</p> | |
| </div> | |
| <div class="col-span-2 text-center"> | |
| <p class="text-sm font-medium text-gray-500">LLM Model</p> | |
| <p class="mt-1 text-lg font-bold text-primary-600 bg-blue-50 px-4 py-2 rounded-lg">mistral:7b</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Availability Zone</p> | |
| <p class="mt-1 text-sm text-gray-900">us-west-2b</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Launch Time</p> | |
| <p class="mt-1 text-sm text-gray-900">2023-06-10 14:45</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <div class="flex space-x-3"> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i data-feather="play" class="mr-1 w-3 h-3"></i> | |
| Start | |
| </button> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i data-feather="trash-2" class="mr-1 w-3 h-3"></i> | |
| Terminate | |
| </button> | |
| </div> | |
| <a href="#" class="inline-flex items-center text-sm font-medium text-primary-500 hover:text-primary-700"> | |
| Details | |
| <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Instance Card 3 --> | |
| <div class="instance-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="px-4 py-5 sm:px-6 border-b flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">CI/CD Runner</h3> | |
| <p class="mt-1 text-sm text-gray-500">Instance ID: i-0c112233445566778</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| Running | |
| </span> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Public IP</p> | |
| <p class="mt-1 text-sm text-gray-900">34.228.76.91</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Instance Type</p> | |
| <p class="mt-1 text-sm text-gray-900">t3.medium</p> | |
| </div> | |
| <div class="col-span-2 text-center"> | |
| <p class="text-sm font-medium text-gray-500">LLM Model</p> | |
| <p class="mt-1 text-lg font-bold text-primary-600 bg-blue-50 px-4 py-2 rounded-lg">phi3:3.8b</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Availability Zone</p> | |
| <p class="mt-1 text-sm text-gray-900">eu-west-1a</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Launch Time</p> | |
| <p class="mt-1 text-sm text-gray-900">2023-06-18 09:12</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <div class="flex space-x-3"> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i data-feather="pause" class="mr-1 w-3 h-3"></i> | |
| Stop | |
| </button> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i data-feather="terminal" class="mr-1 w-3 h-3"></i> | |
| Connect | |
| </button> | |
| </div> | |
| <a href="#" class="inline-flex items-center text-sm font-medium text-primary-500 hover:text-primary-700"> | |
| Details | |
| <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex items-center justify-between border-t border-gray-200 px-4 py-6 sm:px-6"> | |
| <div class="flex flex-1 justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a> | |
| <a href="#" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a> | |
| </div> | |
| <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">12</span> instances | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"> | |
| <span class="sr-only">Previous</span> | |
| <i data-feather="chevron-left" class="h-5 w-5"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="relative z-10 inline-flex items-center bg-primary-500 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500">1</a> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">2</a> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">3</a> | |
| <a href="#" class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"> | |
| <span class="sr-only">Next</span> | |
| <i data-feather="chevron-right" class="h-5 w-5"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0xf8fafc, | |
| points: 12.00, | |
| maxDistance: 22.00, | |
| spacing: 18.00 | |
| }); | |
| // Toggle sidebar | |
| document.getElementById('toggle-sidebar').addEventListener('click', function() { | |
| const sidebar = document.querySelector('.sidebar'); | |
| sidebar.classList.toggle('collapsed'); | |
| const icon = this.querySelector('i'); | |
| if (sidebar.classList.contains('collapsed')) { | |
| icon.setAttribute('data-feather', 'chevron-right'); | |
| } else { | |
| icon.setAttribute('data-feather', 'chevron-left'); | |
| } | |
| feather.replace(); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Pagination functionality | |
| document.querySelectorAll('.pagination a').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Here you would typically fetch the next page of results | |
| // For demo purposes we'll just show an alert | |
| if(this.textContent.trim() === '2' || this.textContent.trim() === '3') { | |
| alert('Loading page ' + this.textContent.trim()); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |