index-copy.php

<?php

/**
 * ================================
 * Localhost Project Explorer
 * ================================
 *
 * A modern, responsive project browser for local development environments.
 * Features automatic framework detection, dark mode, and intuitive navigation.
 *
 * @version 2.0
 * @author Developer
 */

// ================================
// Configuration & Security
// ================================
$root = realpath($_SERVER['DOCUMENT_ROOT']);
$path = $_GET['path'] ?? '';
$currentDir = realpath($root . '/' . $path);

/**
 * Security: Prevent path traversal attacks
 * Ensures users can only access directories within the root
 */
if (!$currentDir || strpos($currentDir, $root) !== 0) {
  $currentDir = $root;
  $path = '';
}

/**
 * Calculate parent directory path for breadcrumb navigation
 */
$parentPath = '';
if ($path) {
  $parts = explode('/', trim($path, '/'));
  array_pop($parts);
  $parentPath = implode('/', $parts);
}

// ================================
// Framework Detection System
// ================================

/**
 * Detect project framework and entry point
 *
 * Scans the directory for framework-specific files and returns
 * metadata about the detected framework including entry point,
 * display label, and badge color.
 *
 * @param string $dir Directory path to scan
 * @return array|null Framework metadata or null if no framework detected
 */
function getProjectEntry(string $dir): ?array
{
  // Framework detection map: [marker_file, entry_dir, display_name, badge_class]

  $frameworkIcons = [
    'laravel' => '<svg fill="currentColor" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M13.143 23.585l10.46-5.97-4.752-2.736-10.453 6.019zM24.084 11.374l-4.757-2.736v5.417l4.758 2.737zM24.559 5.078l-4.756 2.736 4.756 2.736 4.755-2.737zM9.911 18.928l2.76-1.589v-11.934l-4.758 2.738v11.934zM7.437 1.846l-4.756 2.737 4.756 2.737 4.753-2.737zM2.204 5.406v18.452l10.464 6.022v-5.471l-5.472-3.096c-0.018-0.013-0.032-0.027-0.051-0.039-0.014-0.013-0.030-0.023-0.044-0.034l-0.001-0.003c-0.015-0.015-0.028-0.031-0.039-0.049l-0.001-0.001c-0.014-0.013-0.025-0.028-0.035-0.045l-0.001-0.001h-0.003c-0.008-0.015-0.016-0.035-0.024-0.055l-0.001-0.004c-0.007-0.015-0.015-0.032-0.022-0.051l-0.001-0.003c-0.004-0.020-0.008-0.045-0.010-0.070l-0-0.002c-0.003-0.015-0.006-0.033-0.008-0.051l-0-0.001v-12.759l-2.757-1.59zM24.085 23.857v-5.422l-10.464 5.974v5.47zM29.789 14.055v-5.417l-4.756 2.737v5.417zM30.725 7.69c0.011 0.038 0.018 0.081 0.018 0.126v0 6.513c-0 0.176-0.095 0.329-0.237 0.411l-0.002 0.001-5.468 3.149v6.241c-0 0.175-0.095 0.328-0.236 0.411l-0.002 0.001-11.416 6.57c-0.024 0.013-0.052 0.025-0.081 0.033l-0.003 0.001-0.030 0.013c-0.036 0.011-0.078 0.017-0.121 0.017s-0.085-0.006-0.125-0.018l0.003 0.001c-0.015-0.004-0.027-0.009-0.039-0.016l0.001 0.001c-0.031-0.011-0.057-0.021-0.082-0.033l0.004 0.002-11.413-6.57c-0.144-0.084-0.239-0.237-0.239-0.412v0-19.548c0-0.044 0.007-0.087 0.019-0.127l-0.001 0.003c0.004-0.015 0.013-0.025 0.018-0.040 0.009-0.029 0.019-0.053 0.030-0.076l-0.001 0.003c0.008-0.016 0.018-0.030 0.029-0.042l-0 0 0.042-0.057 0.047-0.034c0.018-0.015 0.034-0.030 0.052-0.043h0.001l5.708-3.285c0.068-0.040 0.15-0.064 0.237-0.064s0.169 0.024 0.239 0.065l-0.002-0.001 5.71 3.285c0.019 0.013 0.035 0.027 0.051 0.042l-0-0 0.048 0.034c0.016 0.018 0.025 0.038 0.042 0.057 0.012 0.012 0.022 0.026 0.031 0.041l0.001 0.001c0.010 0.020 0.020 0.044 0.029 0.069l0.001 0.004 0.016 0.040c0.011 0.035 0.018 0.076 0.018 0.118 0 0.002 0 0.004-0 0.006v-0 12.208l4.756-2.737v-6.241c0-0.001 0-0.002 0-0.002 0-0.043 0.006-0.085 0.017-0.125l-0.001 0.003c0.004-0.013 0.013-0.025 0.016-0.040 0.010-0.030 0.020-0.054 0.032-0.078l-0.002 0.004c0.009-0.015 0.023-0.025 0.032-0.042 0.015-0.019 0.027-0.038 0.042-0.054 0.014-0.013 0.029-0.025 0.045-0.035l0.001-0.001c0.018-0.013 0.033-0.029 0.052-0.040h0.001l5.708-3.286c0.068-0.040 0.15-0.064 0.237-0.064s0.169 0.024 0.239 0.065l-0.002-0.001 5.708 3.286c0.020 0.013 0.034 0.027 0.053 0.039 0.015 0.013 0.032 0.023 0.046 0.035 0.016 0.018 0.028 0.038 0.043 0.056 0.011 0.012 0.021 0.026 0.030 0.040l0.001 0.001c0.012 0.022 0.022 0.047 0.030 0.073l0.001 0.003c0.008 0.012 0.014 0.025 0.019 0.039l0 0.001z"></path></svg>',
    'ci'      => '<svg fill="currentColor" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M15.333 1.004c1.1 1.778-0.35 4.131-1.508 5.446-1.123 1.275-2.489 2.341-3.73 3.499-1.344 1.223-2.559 2.536-3.655 3.945l-0.052 0.070c-1.75 2.074-2.814 4.776-2.814 7.727 0 0.892 0.097 1.762 0.282 2.599l-0.015-0.080c1.123 3.498 4.043 6.111 7.646 6.775l0.061 0.009c-1.922-0.827-3.285-2.62-3.485-4.751l-0.002-0.023c0.13-2.236 1.336-4.165 3.103-5.29l0.027-0.016c-0.117 0.273-0.185 0.59-0.185 0.923 0 0.48 0.141 0.928 0.384 1.303l-0.006-0.009c0.381 0.518 0.988 0.85 1.673 0.85 1.143 0 2.070-0.927 2.070-2.070 0-0.654-0.303-1.237-0.777-1.616l-0.004-0.003c-1.079-0.86-1.765-2.174-1.765-3.648 0-0.202 0.013-0.401 0.038-0.596l-0.002 0.023c0.241-0.898 0.733-1.66 1.395-2.228l0.006-0.005c-0.512 1.347 0.943 2.674 1.903 3.337 1.937 1.142 3.575 2.251 5.142 3.449l-0.123-0.090c1.567 1.206 2.567 3.083 2.567 5.194 0 0.123-0.003 0.244-0.010 0.365l0.001-0.017c-0.42 2.337-2.083 4.202-4.267 4.906l-0.045 0.012c4.526-1 9.204-4.511 9.297-9.531 0.116-3.789-2.378-7.144-6.446-9.227 0.081 0.15 0.129 0.329 0.129 0.518 0 0.238-0.075 0.459-0.204 0.64l0.002-0.003c-0.397 0.616-1.079 1.018-1.856 1.018-0.676 0-1.281-0.305-1.684-0.785l-0.003-0.003c-1.506-1.934 0.031-4.019 0.246-6.067 0.002-0.068 0.003-0.147 0.003-0.227 0-2.616-1.312-4.926-3.314-6.307l-0.026-0.017z"></path></svg>',
    'yii'     => '<svg fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M494.657,127.735c-4.55,77.706-60.874,144.672-122.181,206.362 c-3.419-75.23-19.783-123.187-45.333-190.611C303.023,75.533,373.537,2.676,431.549,0.5 C466.303,18.201,496.153,64.677,494.657,127.735z M278.585,280.458c-8.703,15.572-20.134,32.473-35.025,51.002 c-31.312,39.463-62.872,104.172-53.174,180.04c129.33-14.267,169.713-111.337,173.256-164.674 C339.27,310.056,295.047,287.412,278.585,280.458z M17.797,47.66c-4.596,59.359,20.802,147.617,123.727,175.712 c43.34,12.833,73.696,20.739,106.577,32.679c48.065,17.46,85.795,39.754,115.68,78.233c-5.544-66.205-32.807-142.061-76.35-201.242 C225.322,48.631,117.75,8.107,17.797,47.66z"></path></svg>',
    'symfony' => '<svg fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M255.991,0.5C114.889,0.5,0.5,114.882,0.5,255.985C0.5,397.105,114.889,511.5,255.991,511.5 C397.11,511.5,511.5,397.105,511.5,255.985C511.5,114.882,397.11,0.5,255.991,0.5z M393.788,148.373 c-11.83,0.416-19.993-6.649-20.376-17.391c-0.121-3.941,0.89-7.368,3.597-11.402c2.633-5.16,3.202-5.759,3.136-8.013 c-0.245-6.758-10.463-7.012-13.257-6.883c-38.354,1.272-48.464,53.028-56.656,95.12l-4.009,22.193 c22.082,3.231,37.759-0.752,46.509-6.412c12.31-7.988-3.452-16.205-1.473-25.296c2.029-9.265,10.451-13.739,17.143-13.918 c9.377-0.245,16.072,9.489,15.86,19.357c-0.329,16.322-21.981,38.74-65.293,37.821c-5.273-0.117-10.127-0.495-14.646-1.044 l-8.176,45.102c-7.311,34.133-17.024,80.79-51.795,121.493c-29.87,35.529-60.178,41.031-73.747,41.492 c-25.4,0.874-42.229-12.675-42.841-30.747c-0.582-17.507,14.891-27.071,25.051-27.388c13.549-0.449,22.93,9.373,23.292,20.692 c0.345,9.564-4.653,12.559-7.972,14.363c-2.204,1.784-5.527,3.605-5.402,7.544c0.079,1.68,1.884,5.563,7.522,5.381 c10.741-0.366,17.874-5.677,22.852-9.231c24.739-20.602,34.258-56.53,46.725-121.926l2.611-15.839 c4.259-21.271,8.967-44.974,16.161-68.602c-17.434-13.128-27.892-29.4-51.342-35.767c-16.077-4.37-25.883-0.661-32.77,8.055 c-8.162,10.321-5.455,23.753,2.429,31.629l13.029,14.405c15.96,18.455,24.705,32.813,21.408,52.113 c-5.211,30.847-41.951,54.491-85.379,41.143c-37.073-11.419-44.001-37.667-39.544-52.138c3.926-12.721,14.035-15.124,23.925-12.102 c10.587,3.285,14.741,16.156,11.71,26.023c-0.346,1.057-0.886,2.845-1.988,5.198c-1.234,2.729-3.505,5.119-4.495,8.292 c-2.379,7.768,8.259,13.282,15.67,15.561c16.588,5.106,32.777-3.567,36.878-16.991c3.813-12.338-3.988-20.945-7.224-24.243 l-15.707-16.817c-7.182-8.009-22.98-30.311-15.282-55.364c2.973-9.656,9.24-19.902,18.318-26.689 c19.179-14.288,40.034-16.642,59.896-10.924c25.687,7.386,38.038,24.381,54.048,37.496c8.953-26.269,21.375-51.992,40.047-73.703 c16.867-19.778,39.522-34.096,65.477-34.985c25.936-0.856,45.539,10.899,46.184,29.504 C414.153,132.455,409.604,147.846,393.788,148.373z"></path></svg>',
    'cake'    => '<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 13.875v3.745c0 2.067 5.37 3.743 12 3.743V17.62c-6.63 0-12-1.68-12-3.743v-.002zm21.384 2.333L12 13.875v3.745l9.384 2.333C23.02 19.313 24 18.503 24 17.62v-3.745c0 .882-.98 1.692-2.616 2.333zM12 10.133v3.742c-6.627 0-12-1.677-12-3.744V6.38c0-2.064 5.37-3.743 12-3.743 6.625 0 12 1.68 12 3.744v3.75c0 .883-.98 1.69-2.616 2.334L12 10.13v.003z"></path></svg>',
    'wp'      => '<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 21.6c-1.571 0-3.033-.429-4.286-1.171l3.543-9.714 2.143 5.886 1.029 2.829c-1.143.742-2.4 1.17-3.614 1.171zm-9.314-9.6c0-1.286.257-2.514.714-3.657l4.314 11.686c-3.029-1.914-5.028-5.229-5.028-8.029zm14.371 1.029l-1.429-4.2c1.286-.114 2.143-.114 2.143-.114.657 0 .6-1-.057-.971 0 0-.629.057-1.371.057-.743 0-1.543-.057-1.543-.057-.657-.029-.714.971-.057.971 0 0 .429 0 .8.029l1.4 4-2.171 6.543-3.6-10.543c.4-.029.743-.029.743-.029.657-.029.6-1-.057-.971 0 0-.629.057-1.429.057s-1.429-.057-1.429-.057c-.657-.029-.714.971-.057.971 0 0 .4.029.714.029l3.543 10.143-3.4 9.143c-3.657-1.257-6.286-4.714-6.286-8.8 0-1.743.486-3.343 1.314-4.714l.057.029c.8.314 1.371 1.057 1.371 1.914 0 .6-.229 1.143-.457 1.629l-.029.057c-.229.457-.457.943-.457 1.571 0 .971.771 2.371 2.2 2.371.857 0 1.6-.457 2.143-1.057.486-.543.886-1.429 1.257-2.314l3.114-8.8c-.371-.029-.714-.029-.714-.029-.657-.029-.6-1 .057-.971 0 0 .629.057 1.371.057s1.371-.057 1.371-.057c.657-.029.6 1-.057.971 0 0-.343 0-.657.029l.029.086c2.429 6.857 3.829 10.943 3.829 10.943l1.514 4.571c2.429-2.029 4-5.057 4-8.486 0-2.457-.8-4.714-2.143-6.514z"></path></svg>',
    'php'     => '<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.001 0C5.372 0 0 5.373 0 12s5.372 12 12.001 12c6.627 0 11.999-5.373 11.999-12s-5.372-12-11.999-12zm5.794 15.688c-.339.638-.854 1.134-1.545 1.488-.691.354-1.528.531-2.512.531-.884 0-1.637-.145-2.258-.435-.621-.289-1.104-.674-1.449-1.155-.345-.48-.518-1.02-.518-1.616 0-.792.274-1.474.823-2.043.548-.57 1.332-1.026 2.348-1.368 1.018-.342 2.23-.513 3.639-.513.141 0 .28.004.417.012l.144-.804c0-.521-.137-.92-.412-1.201-.275-.28-.707-.421-1.297-.421-.512 0-.918.115-1.218.344-.301.23-.496.536-.587.919l-1.74-.251c.148-.793.535-1.419 1.159-1.876.624-.457 1.487-.686 2.587-.686 1.171 0 2.052.28 2.641.841.59.56 1.185 1.43 1.185 2.611l-.438 4.293c-.041.405.011.666.155.782.145.117.387.175.729.175l.132.003-0.088 1.402zm-1.801-2.903c-.663 0-1.212.083-1.646.251-.435.167-.76.4-.976.697-.215.297-.323.635-.323 1.012 0 .385.114.7.342.946.228.245.568.368 1.019.368.56 0 1.009-.174 1.348-.521.338-.348.552-.823.642-1.425l.135-1.328h-.541zm-9.52 4.148l.944-9.281h1.865l-.364 3.578h2.094l.364-3.578h1.865l-.944 9.281h-1.865l.405-3.985h-2.094l-.405 3.985h-1.865z"></path></svg>',
    'js'      => '<svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" enable-background="new 0 0 512 512" "><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="5151e0c8492e5103c096af88a51e75c7"> <path display="inline" fill-rule="evenodd" clip-rule="evenodd" d="M1.008,0.5C0.438,0.583,0.48,1.27,0.521,1.958 c0,169.668,0,339.31,0,508.974c169.364,1.135,340.808,0.162,510.979,0.486c0-170.309,0-340.61,0-510.918 C341.342,0.5,171.167,0.5,1.008,0.5z M259.893,452.167c-11.822,11.919-30.478,18.938-53.429,18.938 c-37.643,0-58.543-18.34-71.884-43.711c12.842-8.2,25.966-16.122,39.344-23.795c5.456,15.262,23.886,32.42,44.683,21.857 c13.183-6.699,11.661-27.01,11.661-49.054c0-45.773,0-98.578,0-139.872c-0.042-0.688-0.083-1.375,0.482-1.458 c15.707,0,31.413,0,47.116,0c0,36.788,0,78.402,0,117.529C277.866,395.199,280.91,430.988,259.893,452.167z M470.696,409.917 c-2.674,39.884-35.243,61.063-79.17,61.188c-43.062,0.124-70.624-19.013-87.433-48.567c12.085-8.317,25.778-15.017,38.375-22.822 c10.08,15.761,27.537,30.91,53.429,28.652c16.131-1.406,34.856-14.555,24.285-34.482c-5.127-9.66-17.516-14.567-28.656-19.425 c-35.352-15.424-76.828-29.571-72.861-84.992c1.327-18.514,9.852-31.525,20.889-40.796c11.311-9.5,26.46-15.867,46.629-16.511 c36.629-1.173,56.723,15.12,70.429,37.884c-11.664,8.891-24.514,16.608-37.401,24.281c-4.229-12.995-24.644-25.658-41.772-17.969 c-7.789,3.493-14.788,13.761-10.684,26.224c3.66,11.115,18.589,17.199,30.599,22.344 C433.706,340.486,474.331,355.693,470.696,409.917z"> </path> </g> </g></svg>',
    'html'    => '<svg fill="currentColor" viewBox="-1 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>html [#124]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-61.000000, -7639.000000)" fill="currentColor"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M19.4350881,7485 L19.4279481,7485 L10.8119794,7485 L11.0180201,7487 L19.2300674,7487 C19.109707,7488.752 18.7455658,7492.464 18.6119454,7494.153 L13.99949,7495.451 L13.99949,7495.455 L13.98929,7495.46 L9.37377458,7493.836 L9.05757353,7490 L11.3199411,7490 L11.4800816,7492.063 L13.99337,7493 L13.99949,7493 L16.5086984,7492.1 L16.7667592,7489 L8.95659319,7489 C8.91885306,7488.599 8.43333144,7483.392 8.34867116,7483 L19.6370488,7483 C19.5738086,7483.66 19.5095484,7484.338 19.4350881,7485 L19.4350881,7485 Z M5,7479 L6.63812546,7497.148 L13.98929,7499 L21.3598345,7497.111 L23,7479 L5,7479 Z" id="html-[#124]"> </path> </g> </g> </g> </g></svg>',
    'wp' => '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>wordpress [#139]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-260.000000, -7559.000000)" fill="currentColor"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M222.775,7404.202 C222.818,7404.521 222.842,7404.862 222.842,7405.23 C222.842,7406.988 222.679,7407.087 219.027,7417.644 C222,7415.91 224,7412.689 224,7409 C224,7407.261 223.556,7405.626 222.775,7404.202 L222.775,7404.202 Z M214.176,7409.875 L211.175,7418.593 C213.2,7419.189 215.346,7419.128 217.321,7418.434 C217.294,7418.391 217.27,7418.345 217.25,7418.296 L214.176,7409.875 Z M220.751,7408.495 C220.751,7407.259 220.307,7406.403 219.926,7405.737 C219.42,7404.913 218.944,7404.216 218.944,7403.392 C218.944,7402.473 219.642,7401.617 220.624,7401.617 C220.668,7401.617 220.71,7401.623 220.753,7401.625 C218.974,7399.995 216.604,7399 214,7399 C210.507,7399 207.433,7400.792 205.645,7403.507 C206.282,7403.527 207.137,7403.535 208.954,7403.393 C209.493,7403.361 209.556,7404.153 209.018,7404.216 C209.018,7404.216 208.476,7404.28 207.873,7404.312 L211.515,7415.144 L213.703,7408.58 L212.145,7404.311 C211.607,7404.28 211.097,7404.216 211.097,7404.216 C210.558,7404.184 210.621,7403.36 211.16,7403.392 C213.227,7403.551 214.285,7403.563 216.459,7403.392 C216.998,7403.36 217.062,7404.152 216.523,7404.216 C216.523,7404.216 215.98,7404.28 215.378,7404.311 L218.992,7415.061 C220.419,7410.293 220.751,7409.495 220.751,7408.495 L220.751,7408.495 Z M204,7409 C204,7412.958 206.3,7416.379 209.636,7418 L204.866,7404.93 C204.311,7406.174 204,7407.55 204,7409 L204,7409 Z" id="wordpress-[#139]"> </path> </g> </g> </g> </g></svg>',
    'php' => '<svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="5151e0c8492e5103c096af88a51e2ea6"> <path display="inline" d="M401.054,224c3.714,4.115,4.595,11.181,2.653,21.19c-2.029,10.425-5.935,17.862-11.723,22.32 c-5.793,4.458-14.602,6.687-26.432,6.687h-17.849l10.957-56.37h20.103C389.913,217.827,397.34,219.886,401.054,224z M149.754,217.827h-20.103l-10.958,56.37h17.848c11.827,0,20.639-2.229,26.432-6.687c5.789-4.458,9.694-11.896,11.723-22.32 c1.942-10.01,1.06-17.075-2.653-21.19C168.33,219.886,160.903,217.827,149.754,217.827z M511.5,256 c0,74.229-114.393,134.403-255.5,134.403S0.5,330.229,0.5,256c0-74.228,114.393-134.403,255.5-134.403S511.5,181.772,511.5,256z M198.542,265.286c3.04-5.448,5.203-11.461,6.483-18.037c3.102-15.967,0.761-28.403-7.024-37.313 c-7.781-8.91-20.165-13.363-37.136-13.363h-56.423L78.265,331.261h29.342l6.958-35.805h25.134c11.087,0,20.21-1.164,27.372-3.497 c7.161-2.329,13.669-6.233,19.528-11.719C191.514,275.72,195.493,270.738,198.542,265.286z M301.814,295.456l12.181-62.682 c2.479-12.747,0.619-21.971-5.572-27.664c-6.196-5.688-17.449-8.537-33.768-8.537h-25.933l6.961-35.81h-29.11l-26.182,134.692 h29.11l14.996-77.165h23.267c7.448,0,12.317,1.232,14.604,3.698c2.287,2.467,2.773,7.091,1.455,13.869l-11.581,59.598H301.814z M427.011,209.937c-7.78-8.91-20.164-13.363-37.135-13.363h-56.424l-26.178,134.688h29.343l6.957-35.805h25.135 c11.086,0,20.21-1.164,27.371-3.497c7.161-2.329,13.669-6.233,19.528-11.719c4.92-4.521,8.896-9.502,11.943-14.954 c3.044-5.448,5.202-11.461,6.483-18.037C437.137,231.282,434.796,218.846,427.011,209.937z"> </path> </g> </g></svg>',
  ];


  $frameworkMap = [
    ['yii', 'web', 'Yii2', 'yii'],
    ['artisan', 'public', 'Laravel', 'laravel'],
    ['spark', 'public', 'CodeIgniter 4', 'ci'],
    ['bin/console', 'public', 'Symfony', 'symfony'],
    ['bin/cake', 'webroot', 'CakePHP', 'cake'],
  ];

  // Check for PHP frameworks
  foreach ($frameworkMap as [$markerFile, $entryDir, $label, $badge]) {
    if (file_exists("$dir/$markerFile") && is_dir("$dir/$entryDir")) {
      return [
        'entryDir' => $entryDir,
        'label' => $label,
        'badge' => $badge,
        'icon' => $frameworkIcons[$badge] ?? null,
        'isFramework' => true
      ];
    }
  }

  // Check for WordPress
  if (file_exists("$dir/wp-config.php")) {
    return [
      'entryDir' => "$dir/wp-config.php",
      'label' => 'WordPress',
      'badge' => 'wp',
      'icon' => $frameworkIcons['wp'],
    ];
  }

  // Check PHP project
  if (file_exists("$dir/index.php")) {
    return [
      'entryDir' => "$dir/index.php",
      'label' => 'PHP',
      'badge' => 'php',
      'icon' => $frameworkIcons['php'],
    ];
  }

  // Check Native HTML/CSS/JS project
  if (file_exists("$dir/index.html")) {
    return [
      'entryDir' => "$dir/index.html",
      'label' => 'Static HTML',
      'badge' => 'html',
      'icon' => $frameworkIcons['html'],
    ];
  }

  // JavaScript project detection
  if (file_exists("$dir/package.json")) {
    $buildDir = is_dir("$dir/dist") ? 'dist' : (is_dir("$dir/build") ? 'build' : null);
    return [
      'entryDir' => $buildDir,
      'label' => 'Node.js',
      'badge' => 'js',
      'icon' => $frameworkIcons['js']
    ];
  }

  return null;
}

// ================================
// Directory Listing
// ================================

/**
 * Get list of folders in current directory
 * Filters out . and .. and returns only directories
 */
$folders = array_values(array_filter(
  scandir($currentDir),
  fn($f) => $f !== 'localhost-explorer' && $f !== '.' && $f !== '..' && is_dir("$currentDir/$f")
));

/**
 * Convert PHP SAPI name to human-readable format
 *
 * @return string Human-friendly PHP execution mode
 */
function getPhpMode(): string
{
  $modes = [
    'apache2handler' => 'Apache Module',
    'fpm-fcgi' => 'PHP-FPM',
    'cgi-fcgi' => 'CGI',
    'cli' => 'CLI (Command Line)',
  ];

  return $modes[php_sapi_name()] ?? php_sapi_name();
}

// ================================
// System Information
// ================================

$systemInfo = [
  'PHP Version' => PHP_VERSION,
  'PHP Mode' => getPhpMode(),
  'Server' => explode(' ', $_SERVER['SERVER_SOFTWARE'] ?? 'CLI')[0],
  'Document Root' => $_SERVER['DOCUMENT_ROOT'] ?? '-',
  'Operating System' => PHP_OS_FAMILY,
  'Memory Limit' => ini_get('memory_limit'),
  'Max Execution' => ini_get('max_execution_time') . 's',
  'Upload Max Size' => ini_get('upload_max_filesize'),
  'Timezone' => date_default_timezone_get(),
  'Server Time' => time(),
];
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/x-icon" href="/folders.png">
  <title>Localhost Explorer - <?= htmlspecialchars($path ?: 'Root') ?></title>

  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Phosphor Icons -->
  <script src="https://unpkg.com/@phosphor-icons/web"></script>

  <!-- Alpine.js for interactivity -->
  <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

  <script>
    // Tailwind configuration
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>

  <style>
    /* Dark mode transitions */
    * {
      transition-property: background-color, border-color, color;
      transition-duration: 200ms;
    }
  </style>
</head>

<body
  class="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900 min-h-screen"
  x-data="{
    searchQuery: '',
    darkMode: localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches),
    init() {
      this.$watch('darkMode', val => {
        localStorage.setItem('theme', val ? 'dark' : 'light');
        document.documentElement.classList.toggle('dark', val);
      });
      document.documentElement.classList.toggle('dark', this.darkMode);
    }
  }">
  <div class="container mx-auto px-4 py-8 max-w-7xl">

    <!-- Header Section -->
    <div class="mb-8">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div class="flex-1">
          <div class="flex items-center gap-3 mb-2">
            <img src="/folders.png" width="56" />
            <div>
              <h1 class="text-3xl font-bold text-slate-900 dark:text-white">
                Localhost Explorer
              </h1>
              <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">
                Manage your local development projects
              </p>
            </div>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex items-center gap-2">
          <button
            @click="darkMode = !darkMode"
            class="inline-flex items-center gap-2 px-4 py-2.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-medium transition-colors shadow-sm">
            <i class="ph-duotone ph-sun" x-show="darkMode"></i>
            <i class="ph-duotone ph-moon" x-show="!darkMode"></i>
          </button>
        </div>
      </div>

      <!-- Breadcrumb -->
      <div class="flex items-center gap-3 w-full h-full">

        <a
          <?php if ($path): ?>
          href="?path=<?= urlencode($parentPath) ?>"
          <?php endif; ?>
          class="h-full inline-flex items-center gap-2 px-4 py-3 rounded-lg border
    transition-colors shadow-sm
    <?= $path
      ? 'text-slate-700 dark:text-slate-200 cursor-pointer'
      : 'text-slate-700 dark:text-slate-500 cursor-not-allowed'
    ?> bg-white dark:bg-slate-800
            border border-slate-200 dark:border-slate-700">
          <i class="ph-bold ph-arrow-left"></i>
        </a>

        <?php
        $segments = array_filter(explode('/', trim($path, '/')));
        $currentPath = '';
        ?>

        <div class="flex flex-1  items-center gap-2 text-sm bg-white dark:bg-slate-800
            border border-slate-200 dark:border-slate-700
            rounded-md px-3 py-2 shadow-sm">

          <!-- Folder icon -->
          <i class="ph-fill ph-folder text-yellow-500 text-base"></i>

          <!-- Breadcrumb -->
          <div class="flex items-center flex-wrap gap-1 text-slate-600 dark:text-slate-400">

            <!-- Root -->
            <a href="?path=" class="hover:text-indigo-600 dark:hover:text-indigo-400 font-medium">
              Root
            </a>

            <?php foreach ($segments as $seg): ?>
              <?php $currentPath .= '/' . $seg; ?>

              <i class="ph-bold ph-caret-right text-xs opacity-60"></i>

              <a href="?path=<?= urlencode(trim($currentPath, '/')) ?>"
                class="hover:text-indigo-600 dark:hover:text-indigo-400 font-medium">
                <?= htmlspecialchars($seg) ?>
              </a>
            <?php endforeach; ?>

          </div>
        </div>

      </div>
    </div>

    <!-- System Information Cards -->
    <div class="mb-8">
      <h2 class="text-lg font-semibold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
        <i class="ph-duotone ph-info text-red-500 dark:text-red-300"></i>
        System Information
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
        <?php foreach ($systemInfo as $label => $value): ?>
          <div class="bg-white dark:bg-slate-800 rounded-lg p-4 border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-shadow">
            <div class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1">
              <?= htmlspecialchars($label) ?>
            </div>

            <?php if ($label === 'Server Time'): ?>
              <div
                x-data="{ t: <?= (int) $value ?> }"
                x-init="setInterval(() => t++, 1000)"
                class="text-sm font-semibold text-slate-900 dark:text-white"
                x-text="new Date(t * 1000).toLocaleString()">
              </div>
            <?php else: ?>
              <div class="text-sm font-semibold text-slate-900 dark:text-white break-all">
                <?= htmlspecialchars($value) ?>
              </div>
            <?php endif; ?>

          </div>
        <?php endforeach; ?>

      </div>
    </div>

    <!-- Search Bar -->
    <div class="mb-6">
      <div class="relative">
        <i class="ph-bold ph-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xl"></i>
        <input
          type="text"
          x-model="searchQuery"
          placeholder="Search projects by name..."
          class="w-full pl-12 pr-4 py-3.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent shadow-sm">
      </div>
    </div>

    <!-- Projects Grid -->
    <div x-data="{
    get visibleCount() {
        return Array.from($el.querySelectorAll('.project-card')).filter(el => el.style.display !== 'none').length
    }
}">
      <h2 class="text-lg font-semibold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
        <i class="ph-duotone ph-folders text-yellow-500"></i>
        Projects (<?= count($folders) ?>)
      </h2>

      <?php if (empty($folders)): ?>
        <div
          class="flex flex-col items-center justify-center py-20 px-4 text-center
          bg-white/60 dark:bg-slate-800/60
          rounded-2xl border-2 border-dashed
          border-slate-200 dark:border-slate-700">

          <!-- Icon -->
          <div class="relative mb-6">
            <i class="ph-duotone ph-folder-open text-8xl text-slate-200 dark:text-slate-700"></i>
            <i class="ph-bold ph-plus-circle absolute -bottom-1 -right-1 text-3xl text-indigo-500"></i>
          </div>

          <!-- Title -->
          <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
            No Projects Yet
          </h3>

          <!-- Description -->
          <p class="text-slate-500 dark:text-slate-400 max-w-sm mx-auto">
            This directory doesn’t contain any projects.
            Add a new folder or upload files to get started.
          </p>

          <!-- Hint -->
          <div class="mt-6 text-sm text-slate-400 dark:text-slate-500 flex items-center gap-2">
            <i class="ph-bold ph-info"></i>
            <span>Tip: Each folder will be treated as a project</span>
          </div>

        </div>

      <?php else: ?>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
          <?php foreach ($folders as $folder): ?>
            <?php
            $project = getProjectEntry("$currentDir/$folder");
            $url = trim($path . '/' . $folder, '/');
            $link = '?path=' . urlencode($url);

            if ($project && isset($project['entryDir']) && $project['entryDir'] !== null) {
              $link = '/' . $url . ($project['entryDir'] ? '/' . $project['entryDir'] : '');
            }

            $badgeColors = [
              'laravel' => 'bg-red-500',
              'yii' => 'bg-blue-500',
              'ci' => 'bg-orange-600',
              'symfony' => 'bg-slate-900',
              'cake' => 'bg-pink-600',
              'wp' => 'bg-cyan-600',
              'php' => 'bg-indigo-500',
              'js' => 'bg-yellow-400 text-gray-900'
            ];
            $badgeColor = $badgeColors[$project['badge'] ?? ''] ?? 'bg-slate-500';
            ?>

            <a
              href="<?= htmlspecialchars($link) ?>"
              class="project-card group relative bg-white dark:bg-slate-800 rounded-xl p-6 border border-slate-200 dark:border-slate-700 hover:border-indigo-300 dark:hover:border-indigo-600 shadow-sm hover:shadow-xl transition-all duration-200 hover:-translate-y-1"
              x-data="{ folderName: '<?= strtolower(addslashes($folder)) ?>' }"
              x-show="folderName.includes(searchQuery.toLowerCase())"
              x-transition>

              <div class="mb-4 inline-flex items-center justify-center w-14 h-14 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-900/30 dark:to-purple-900/30 rounded-xl group-hover:scale-110 transition-transform">
                <?php if ($project && isset($project['icon'])): ?>
                  <div class="w-8 h-8 text-indigo-600 dark:text-indigo-400">
                    <?= $project['icon'] ?>
                  </div>
                <?php else: ?>
                  <i class="ph-fill ph-folder text-3xl text-indigo-600 dark:text-indigo-400"></i>
                <?php endif; ?>
              </div>

              <h3 class="text-base font-semibold text-slate-900 dark:text-white mb-2 truncate pr-16">
                <?= htmlspecialchars($folder) ?>
              </h3>

              <div class="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
                <i class="ph-bold ph-<?= $project ? 'check-circle' : 'folder' ?> <?= $project ? 'text-green-500' : 'text-slate-400' ?>"></i>
                <span><?= $project ? 'Framework Detected' : 'Standard Folder' ?></span>
              </div>
            </a>
          <?php endforeach; ?>
        </div>

        <div
          x-show="searchQuery !== '' && visibleCount === 0"
          x-transition.opacity
          class="flex flex-col items-center justify-center py-20 px-4 text-center bg-white/50 dark:bg-slate-800/50 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-700 mt-4">
          <div class="relative mb-6">
            <i class="ph-duotone ph-magnifying-glass text-8xl text-slate-200 dark:text-slate-700"></i>
            <i class="ph-bold ph-question absolute bottom-2 right-2 text-3xl text-indigo-500 animate-bounce"></i>
          </div>
          <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
            Project "<span x-text="searchQuery" class="text-indigo-500"></span>" Not Found
          </h3>
          <p class="text-slate-500 dark:text-slate-400 max-w-xs mx-auto">
            We couldn't find any folder matching your search. Try checking for typos or use a different keyword.
          </p>
          <button
            @click="searchQuery = ''"
            class="mt-6 px-6 py-2 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-full text-sm font-semibold hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition-colors">
            Clear Search
          </button>
        </div>
      <?php endif; ?>
    </div>

    <!-- Footer -->
    <div class="mt-12 pt-8 border-t border-slate-200 dark:border-slate-700">
      <div class="flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-slate-600 dark:text-slate-400">
        <div class="flex items-center gap-2">
          <i class="ph-bold ph-code text-indigo-500"></i>
          <span>Localhost Explorer v2.0</span>
        </div>
        <div class="flex items-center gap-4">
          <span class="flex items-center gap-2">
            <i class="ph-fill ph-circle text-green-500 animate-pulse"></i>
            Server Running
          </span>
          <span>•</span>
          <span><?= count($folders) ?> project<?= count($folders) !== 1 ? 's' : '' ?> found</span>
        </div>
      </div>
    </div>

  </div>
</body>

</html>