1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" /> 8 <title>FAO Transboundary Breed Summary</title> 9 10 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 11 12 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> 13 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" 14 rel="stylesheet" /> 15 16 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 17 18 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous"> 19 20 <link rel="stylesheet" href="./assets/main.css"> 21</head> 22 23<body class="bg-light"> 24 25 <!-- <div id="faoHeader" class="d-flex align-items-center shadow-sm" style="display: none;"> 26 <img src="./assets/fao_header.PNG" alt="FAO Logo" style="padding-left: 2rem; max-height: 50px;"> 27 </div> --> 28 29 <h2 id="titleLabel" class="fao-primary-title">Transboundary Breed Summary</h2> 30 31 <div class="container py-4"> 32 33 <div id="breedSearchForm" style="display: none;"> 34 <div class="row justify-content-center mb-4"> 35 <div class="col-md-10 col-lg-8"> 36 <div class="card border-0 shadow-sm"> 37 <div class="card-body p-4"> 38 <div class="row g-4"> 39 <div class="col-md-6"> 40 <label id="speciesLabel" 41 class="form-label fw-bold text-secondary small text-uppercase">Species</label> 42 <select id="specieSelect" class="form-select form-select-lg" onchange="getTransboundary();"> 43 <option value="" selected id="chooseSpeciesLabel">Choose a species</option> 44 </select> 45 </div> 46 47 <div class="col-md-6"> 48 <label id="transboundaryLabel" 49 class="form-label fw-bold text-secondary small text-uppercase">Transboundary</label> 50 <select id="transboundarySelect" class="form-select form-select-lg" 51 onchange="getTransboundaryRisk();"> 52 <option value="" selected>Choose a transboundary</option> 53 </select> 54 </div> 55 </div> 56 </div> 57 </div> 58 </div> 59 </div> 60 </div> 61 62 <div id="spinner" class="text-center py-5"> 63 <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status"> 64 <span class="visually-hidden">Loading...</span> 65 </div> 66 </div> 67 68 <div id="messagesContainer" class="mb-4"> 69 <div id="searchBreedMessage" class="alert alert-info text-center border-0 shadow-sm" style="display: none;"> 70 <i class="material-icons align-middle me-2">info</i> <span id="selectSpeciesMessage">Please select a species and 71 then a tranboundary breed name to see a list of transboundary breeds</span> 72 </div> 73 <div id="missingBreeds" class="alert alert-warning text-center border-0 shadow-sm" style="display: none;"> 74 <i class="material-icons align-middle me-2">info</i> <span id="noTransboundaryBreedsFound">No transboundary 75 breeds found</span> 76 </div> 77 <div id="generalError" class="alert alert-danger text-center border-0 shadow-sm" style="display: none;"> 78 <i class="material-icons align-middle me-2">warning</i> <span id="error">Error</span> 79 </div> 80 <div id="breedError" class="alert alert-danger text-center border-0 shadow-sm" style="display: none;"> 81 <i class="material-icons align-middle me-2">warning</i> <span id="profileNotFound">Error: Transboundary breed 82 profile not found</span> 83 </div> 84 </div> 85 86 <div id="profileCard" class="row justify-content-center mb-4" style="display: none;"> 87 <div class="col-md-10 col-lg-8"> 88 <div class="card border-0 shadow-sm"> 89 <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-3"> 90 <h5 class="m-0 fw-normal">Summary</h5> 91 <button id="urlLinkTooltip" onclick="getURL()" title="Opens transboundary breed summary in a new tab" 92 class="btn btn-light btn-sm rounded-circle d-flex align-items-center justify-content-center" 93 style="width: 35px; height: 35px;"> 94 <i class="material-icons text-primary">open_in_new</i> 95 </button> 96 </div> 97 <div class="card-body p-0"> 98 <div class="table-responsive"> 99 <table class="table table-striped table-hover align-middle mb-0"> 100 <tbody> 101 <tr> 102 <td class="fw-bold text-secondary w-50" id="transboundaryBreed">Transboundary breed:</td> 103 <td id="card_transboundary_breed" class="fw-bold text-dark"></td> 104 </tr> 105 <tr> 106 <td class="fw-bold text-secondary" id="species">Species:</td> 107 <td id="card_species"></td> 108 </tr> 109 <tr> 110 <td class="fw-bold text-secondary" id="breedType">Breed Type:</td> 111 <td id="card_breed_type"></td> 112 </tr> 113 <tr> 114 <td class="fw-bold text-secondary" id="geoClassification">Geo Classification:</td> 115 <td id="card_geo_classification"></td> 116 </tr> 117 <tr> 118 <td class="fw-bold text-secondary" id="nmbCountriesReporting">Number of countries reporting the 119 breed:</td> 120 <td id="card_number_of_countries_reporting_the_breed"></td> 121 </tr> 122 <tr> 123 <td class="fw-bold text-secondary" id="nmbCountriesReportingPopulation">Number of countries 124 reporting population data:</td> 125 <td id="card_number_of_countries_reporting_the_population_data"></td> 126 </tr> 127 <tr> 128 <td class="fw-bold text-secondary" id="estimatedPopulationSize">Estimated population size:</td> 129 <td id="card_estimated_population_size" class="text-primary fw-bold"></td> 130 </tr> 131 </tbody> 132 </table> 133 </div> 134 </div> 135 </div> 136 </div> 137 </div> 138 139 <div id="transboundaryTableFields" class="row mb-5" style="display: none;"> 140 <div class="col-12"> 141 <div class="card border-0 shadow-sm"> 142 <div class="card-body p-4"> 143 144 <div class="d-flex justify-content-between align-items-center mb-4"> 145 <button class="btn btn-outline-info d-flex align-items-center" data-bs-toggle="modal" 146 data-bs-target="#helpModal"> 147 <i class="material-icons me-2">help_outline</i> Help (Risk Level) 148 </button> 149 150 <div class="export-container d-flex align-items-center bg-white p-2 border rounded shadow-sm">
151 <span class="me-3 fw-bold text-secondary small text-uppercase">Export as:</span> 152 <div class="btn-group export-toggle" role="group"> 153 <input type="radio" class="btn-check" name="exportFormat" id="formatCsv" value="csv" checked> 154 <label class="btn btn-outline-primary d-flex align-items-center" for="formatCsv"><i 155 class="material-icons fs-6 me-1">description</i> CSV</label> 156 157 <input type="radio" class="btn-check" name="exportFormat" id="formatExcel" value="excel"> 158 <label class="btn btn-outline-primary d-flex align-items-center" for="formatExcel"><i 159 class="material-icons fs-6 me-1">table_chart</i> Excel</label> 160 </div> 161 <button class="btn btn-primary ms-3 d-flex align-items-center" 162 onclick="handleExport('.exportTable', 'TransboundaryBreedSummary')"> 163 <i class="material-icons me-1">download</i> <span class="fw-bold">Download</span> 164 </button> 165 </div> 166 </div> 167 168 <div class="table-responsive"> 169 <table class="table table-striped table-hover align-middle exportTable text-center"> 170 <thead class="table-light text-secondary small"> 171 <tr> 172 <th id="mostCommonName">Most Common Name</th> 173 <th id="country">Country</th> 174 <th id="nationalRiskStatus">National Risk Status</th> 175 <th id="riskLevel">Risk level</th> 176 <th id="populationSizeMin">Population size Min</th> 177 <th id="populationSizeMax">Population size Max</th> 178 <th id="breedingFemale">Breeding Female</th> 179 <th id="breedingMale">Breeding Male</th> 180 <th id="femaleBreedPure">Female Bred Pure</th> 181 </tr> 182 </thead> 183 <tbody id="transboundaryTable"> 184 </tbody> 185 </table> 186 </div> 187 </div> 188 </div> 189 </div> 190 </div> 191 192 </div> 193 194 <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true"> 195 <div class="modal-dialog modal-dialog-centered"> 196 <div class="modal-content"> 197 <div class="modal-header bg-primary text-white"> 198 <h5 class="modal-title d-flex align-items-center" id="helpModalLabel"> 199 <i class="material-icons me-2">help</i> <span id="help">Help</span> 200 </h5> 201 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> 202 </div> 203 <div class="modal-body text-secondary"> 204 <ul class="list-unstyled lh-lg mb-0"> 205 <li><i class="material-icons text-primary fs-6 me-2 align-middle">adjust</i> <span id="help1">External 206 circle indicates global risk level.</span></li> 207 <li><i class="material-icons text-primary fs-6 me-2 align-middle">lens</i> <span id="help2">Internal circle 208 indicates national risk level.</span></li> 209 <li><i class="material-icons text-primary fs-6 me-2 align-middle">palette</i> <span id="help3">Color codes: 210 green = not at risk, orange = at risk, grey = unknown, black = extinct.</span></li> 211 <li><i class="material-icons text-primary fs-6 me-2 align-middle">trending_up</i> <span id="help4">The inner 212 arrow, if present, indicates the trend in number of national breed population.</span></li> 213 <li><i class="material-icons text-primary fs-6 me-2 align-middle">chat</i> <span id="help5">Comment: only 214 one circle means the breed is local.</span></li> 215 </ul> 216 </div> 217 <div class="modal-footer"> 218 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> 219 </div> 220 </div> 221 </div> 222 </div> 223 224
224<script src="https://code.jquery.com/jquery-3.7.1.min.js" 225 integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
225 226
226<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 227 integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" 228 crossorigin="anonymous"></script>
228 229
229<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
229 230
230<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>
230 231
231<script src="./assets/js/jquery.i18n.properties.js"></script>
231 232
232<script src="./assets/js/main.js"></script>
232 233</body> 234 235</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.