Michael Skrynski
1956a09560
- Added error display section to edit modal form - Ensures validation errors are visible when updating commander - Matches error display styling of add commander form - JavaScript error parsing already in place for validation details
545 lines
23 KiB
HTML
545 lines
23 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="h-full bg-gray-50">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Commanders - EDH Stats Tracker</title>
|
|
<meta
|
|
name="description"
|
|
content="Manage your Magic: The Gathering EDH/Commander decks"
|
|
/>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="/css/styles.css" />
|
|
</head>
|
|
<body class="h-full" x-data="commanderManager()">
|
|
<!-- Navigation Header -->
|
|
<header class="bg-slate-900 text-white shadow-lg">
|
|
<nav class="container mx-auto px-4 py-4">
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold font-mtg">My Commanders</h1>
|
|
<div class="flex space-x-4">
|
|
<a
|
|
href="/dashboard.html"
|
|
class="hover:text-edh-accent transition-colors"
|
|
>
|
|
← Back to Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto px-4 py-8">
|
|
<!-- Add Commander Section -->
|
|
<div class="mb-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-2xl font-semibold">Add New Commander</h2>
|
|
<button @click="showAddForm = !showAddForm" class="btn btn-secondary">
|
|
<span x-show="!showAddForm">+ Add Commander</span>
|
|
<span x-show="showAddForm">Cancel</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Add Commander Form -->
|
|
<div x-show="showAddForm" x-transition class="card">
|
|
<form @submit.prevent="handleAddCommander">
|
|
<h3 class="text-lg font-semibold mb-4">Commander Details</h3>
|
|
|
|
<!-- Commander Name -->
|
|
<div class="mb-4">
|
|
<label for="name" class="form-label">Commander Name</label>
|
|
<input
|
|
id="name"
|
|
name="name"
|
|
type="text"
|
|
required
|
|
x-model="newCommander.name"
|
|
@input="validateCommanderName()"
|
|
:class="errors.name ? 'border-red-500 focus:ring-red-500' : ''"
|
|
class="form-input"
|
|
placeholder="Enter commander name"
|
|
/>
|
|
<p
|
|
x-show="errors.name"
|
|
x-text="errors.name"
|
|
class="form-error"
|
|
></p>
|
|
</div>
|
|
|
|
<!-- Color Identity -->
|
|
<div class="mb-6">
|
|
<label class="form-label">Color Identity</label>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<!-- MTG Color Selection -->
|
|
<div class="grid grid-cols-5 gap-2 mb-4">
|
|
<template x-for="color in mtgColors" :key="color.id">
|
|
<button
|
|
type="button"
|
|
@click="toggleNewColor(color.id)"
|
|
:class="getButtonClass(isNewColorSelected(color.id))"
|
|
:title="color.name"
|
|
class="w-12 h-12 rounded-lg transition-all duration-200 relative"
|
|
>
|
|
<div
|
|
class="absolute inset-0 rounded-lg opacity-80"
|
|
:style="`background-color: ${color.hex}`"
|
|
></div>
|
|
<span
|
|
x-show="isNewColorSelected(color.id)"
|
|
class="relative z-10 text-white font-bold text-shadow"
|
|
>✓</span
|
|
>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Selected Colors Display -->
|
|
<div
|
|
class="flex items-center space-x-2 p-3 bg-gray-100 rounded-lg"
|
|
>
|
|
<span class="text-sm text-gray-600">Selected:</span>
|
|
<div class="flex space-x-1">
|
|
<template
|
|
x-for="colorId in newCommander.colors"
|
|
:key="colorId"
|
|
>
|
|
<div
|
|
class="w-6 h-6 rounded"
|
|
:class="'color-' + colorId.toLowerCase()"
|
|
:title="getColorName(colorId)"
|
|
></div>
|
|
</template>
|
|
<span
|
|
x-show="newCommander.colors.length === 0"
|
|
class="text-gray-400 text-sm"
|
|
>No colors selected</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex justify-end space-x-4">
|
|
<button
|
|
type="button"
|
|
@click="resetAddForm"
|
|
class="btn btn-secondary"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
:disabled="submitting"
|
|
class="btn btn-primary"
|
|
>
|
|
<span x-show="!submitting">Add Commander</span>
|
|
<span
|
|
x-show="submitting"
|
|
class="loading-spinner w-5 h-5 mr-2 inline-block align-middle"
|
|
></span>
|
|
<span x-show="submitting">Adding...</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div
|
|
x-show="serverError"
|
|
x-transition
|
|
class="rounded-md bg-red-50 p-4 mt-4"
|
|
>
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg
|
|
class="h-5 w-5 text-red-400"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm text-red-800" x-text="serverError"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filter Section -->
|
|
<div class="mb-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-2xl font-semibold">My Commanders</h2>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
x-model="searchQuery"
|
|
@input="debounceSearch()"
|
|
placeholder="Search commanders..."
|
|
class="form-input pl-10 pr-4"
|
|
/>
|
|
<div
|
|
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 text-gray-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-2">
|
|
<button
|
|
@click="togglePopular()"
|
|
:class="showPopular ? 'btn btn-primary' : 'btn btn-secondary'"
|
|
>
|
|
<span x-show="!showPopular">Show Popular</span>
|
|
<span x-show="showPopular">Show All</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Commanders Grid -->
|
|
<div x-show="loading" class="flex justify-center py-8">
|
|
<div class="loading-spinner w-8 h-8"></div>
|
|
</div>
|
|
|
|
<div
|
|
x-show="!loading"
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
|
|
>
|
|
<template x-for="commander in commanders" :key="commander.id">
|
|
<div class="card hover:shadow-lg transition-shadow">
|
|
<!-- Commander Header -->
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3
|
|
class="text-lg font-semibold text-gray-900"
|
|
x-text="commander.name"
|
|
></h3>
|
|
<div class="flex space-x-1 mt-1">
|
|
<template x-for="color in commander.colors" :key="color">
|
|
<div
|
|
class="w-6 h-6 rounded"
|
|
:class="'color-' + color.toLowerCase()"
|
|
:title="getColorName(color)"
|
|
></div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-2">
|
|
<button
|
|
@click="editCommander(commander)"
|
|
class="text-edh-accent hover:text-edh-primary transition-colors"
|
|
title="Edit commander"
|
|
>
|
|
<svg
|
|
class="w-6 h-6"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M12 21C12 20.4477 12.4477 20 13 20H21C21.5523 20 22 20.4477 22 21C22 21.5523 21.5523 22 21 22H13C12.4477 22 12 21.5523 12 21Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M20.7736 8.09994C22.3834 6.48381 22.315 4.36152 21.113 3.06183C20.5268 2.4281 19.6926 2.0233 18.7477 2.00098C17.7993 1.97858 16.8167 2.34127 15.91 3.09985C15.8868 3.11925 15.8645 3.13969 15.8432 3.16111L2.87446 16.1816C2.31443 16.7438 2 17.5051 2 18.2987V19.9922C2 21.0937 2.89197 22 4.00383 22H5.68265C6.48037 22 7.24524 21.6823 7.80819 21.1171L20.7736 8.09994ZM17.2071 5.79295C16.8166 5.40243 16.1834 5.40243 15.7929 5.79295C15.4024 6.18348 15.4024 6.81664 15.7929 7.20717L16.7929 8.20717C17.1834 8.59769 17.8166 8.59769 18.2071 8.20717C18.5976 7.81664 18.5976 7.18348 18.2071 6.79295L17.2071 5.79295Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
@click="deleteCommander(commander)"
|
|
class="text-red-600 hover:text-red-800 transition-colors"
|
|
title="Delete commander"
|
|
>
|
|
<svg
|
|
class="w-6 h-6"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M18 6V16.2C18 17.8802 18 18.7202 17.673 19.362C17.3854 19.9265 16.9265 20.3854 16.362 20.673C15.7202 21 14.8802 21 13.2 21H10.8C9.11984 21 8.27976 21 7.63803 20.673C7.07354 20.3854 6.6146 19.9265 6.32698 19.362C6 18.7202 6 17.8802 6 16.2V6M14 10V17M10 10V17"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Commander Stats -->
|
|
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
<div class="text-center">
|
|
<p
|
|
class="text-2xl font-bold text-edh-primary"
|
|
x-text="commander.totalGames || 0"
|
|
></p>
|
|
<p class="text-sm text-gray-600">Games Played</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p
|
|
class="text-2xl font-bold"
|
|
x-text="Math.round(commander.winRate || 0) + '%'"
|
|
></p>
|
|
<p class="text-sm text-gray-600">Win Rate</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p
|
|
class="text-2xl font-bold"
|
|
x-text="Math.round(commander.avgRounds || 0)"
|
|
></p>
|
|
<p class="text-sm text-gray-600">Avg Rounds</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="text-xs text-gray-500">Added</p>
|
|
<p
|
|
class="text-sm text-gray-400"
|
|
x-text="formatDate(commander.createdAt)"
|
|
></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- No Commanders Message -->
|
|
<div
|
|
x-show="!loading && commanders.length === 0"
|
|
class="col-span-full text-center py-12"
|
|
>
|
|
<div class="card max-w-md mx-auto">
|
|
<svg
|
|
class="w-16 h-16 mx-auto text-gray-800 mb-4"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M21.8382 11.1263L21.609 13.5616C21.2313 17.5742 21.0425 19.5805 19.8599 20.7902C18.6773 22 16.9048 22 13.3599 22H10.6401C7.09517 22 5.32271 22 4.14009 20.7902C2.95748 19.5805 2.76865 17.5742 2.391 13.5616L2.16181 11.1263C1.9818 9.2137 1.8918 8.25739 2.21899 7.86207C2.39598 7.64823 2.63666 7.5172 2.89399 7.4946C3.36968 7.45282 3.96708 8.1329 5.16187 9.49307C5.77977 10.1965 6.08872 10.5482 6.43337 10.6027C6.62434 10.6328 6.81892 10.6018 6.99526 10.5131C7.31351 10.3529 7.5257 9.91812 7.95007 9.04852L10.1869 4.46486C10.9888 2.82162 11.3898 2 12 2C12.6102 2 13.0112 2.82162 13.8131 4.46485L16.0499 9.04851C16.4743 9.91812 16.6865 10.3529 17.0047 10.5131C17.1811 10.6018 17.3757 10.6328 17.5666 10.6027C17.9113 10.5482 18.2202 10.1965 18.8381 9.49307C20.0329 8.1329 20.6303 7.45282 21.106 7.4946C21.3633 7.5172 21.604 7.64823 21.781 7.86207C22.1082 8.25739 22.0182 9.2137 21.8382 11.1263ZM12.9524 12.699L12.8541 12.5227C12.4741 11.841 12.2841 11.5002 12 11.5002C11.7159 11.5002 11.5259 11.841 11.1459 12.5227L11.0476 12.699C10.9397 12.8927 10.8857 12.9896 10.8015 13.0535C10.7173 13.1174 10.6125 13.1411 10.4028 13.1886L10.2119 13.2318C9.47396 13.3987 9.10501 13.4822 9.01723 13.7645C8.92945 14.0468 9.18097 14.3409 9.68403 14.9291L9.81418 15.0813C9.95713 15.2485 10.0286 15.3321 10.0608 15.4355C10.0929 15.5389 10.0821 15.6504 10.0605 15.8734L10.0408 16.0765C9.96476 16.8613 9.92674 17.2538 10.1565 17.4282C10.3864 17.6027 10.7318 17.4436 11.4227 17.1255L11.6014 17.0432C11.7978 16.9528 11.8959 16.9076 12 16.9076C12.1041 16.9076 12.2022 16.9528 12.3986 17.0432L12.5773 17.1255C13.2682 17.4436 13.6136 17.6027 13.8435 17.4282C14.0733 17.2538 14.0352 16.8613 13.9592 16.0765L13.9395 15.8734C13.9179 15.6504 13.9071 15.5389 13.9392 15.4355C13.9714 15.3321 14.0429 15.2485 14.1858 15.0813L14.316 14.9291C14.819 14.3409 15.0706 14.0468 14.9828 13.7645C14.895 13.4822 14.526 13.3987 13.7881 13.2318L13.5972 13.1886C13.3875 13.1411 13.2827 13.1174 13.1985 13.0535C13.1143 12.9896 13.0603 12.8927 12.9524 12.699Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">
|
|
No Commanders Yet
|
|
</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
You haven't added any commanders yet. Start by adding your first
|
|
commander to begin tracking your EDH games!
|
|
</p>
|
|
<button @click="showAddForm = true" class="btn btn-primary w-full">
|
|
Add Your First Commander
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div
|
|
x-show="editingCommander"
|
|
x-transition
|
|
class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50"
|
|
>
|
|
<template x-if="editingCommander">
|
|
<div class="card max-w-md w-full mx-4">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-semibold">Edit Commander</h3>
|
|
<button
|
|
@click="cancelEdit()"
|
|
class="text-gray-400 hover:text-gray-600"
|
|
>
|
|
<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="M6 18L18.571 5.429a1 1 0 0-.658-.353-1.154-.828-1.154l-4.428-4.429a1 1 0 0 .417-.23.217.474-1.474L6 18z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form @submit.prevent="handleUpdateCommander">
|
|
<!-- Commander Name -->
|
|
<div class="mb-4">
|
|
<label for="edit-name" class="form-label">Commander Name</label>
|
|
<input
|
|
id="edit-name"
|
|
name="name"
|
|
type="text"
|
|
required
|
|
x-model="editingCommander.name"
|
|
@input="validateEditCommanderName()"
|
|
:class="editErrors.name ? 'border-red-500 focus:ring-red-500' : ''"
|
|
class="form-input"
|
|
/>
|
|
<p
|
|
x-show="editErrors.name"
|
|
x-text="editErrors.name"
|
|
class="form-error"
|
|
></p>
|
|
</div>
|
|
|
|
<!-- Color Identity -->
|
|
<div class="mb-6">
|
|
<label class="form-label">Color Identity</label>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<!-- MTG Color Selection -->
|
|
<div class="grid grid-cols-5 gap-2 mb-4">
|
|
<template x-for="color in mtgColors" :key="color.id">
|
|
<button
|
|
type="button"
|
|
@click="toggleEditColor(color.id)"
|
|
:class="getButtonClass(isEditColorSelected(color.id))"
|
|
:title="color.name"
|
|
class="w-12 h-12 rounded-lg transition-all duration-200 relative"
|
|
>
|
|
<div
|
|
class="absolute inset-0 rounded-lg opacity-80"
|
|
:style="`background-color: ${color.hex}`"
|
|
></div>
|
|
<span
|
|
x-show="isEditColorSelected(color.id)"
|
|
class="relative z-10 text-white font-bold text-shadow"
|
|
>✓</span
|
|
>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Selected Colors Display -->
|
|
<div
|
|
class="flex items-center space-x-2 p-3 bg-gray-100 rounded-lg"
|
|
>
|
|
<span class="text-sm text-gray-600">Selected:</span>
|
|
<div class="flex space-x-1">
|
|
<template
|
|
x-for="colorId in editingCommander.colors"
|
|
:key="colorId"
|
|
>
|
|
<div
|
|
class="w-6 h-6 rounded"
|
|
:class="'color-' + colorId.toLowerCase()"
|
|
:title="getColorName(colorId)"
|
|
></div>
|
|
</template>
|
|
<span
|
|
x-show="!editingCommander.colors || editingCommander.colors.length === 0"
|
|
class="text-gray-400 text-sm"
|
|
>No colors selected</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex justify-end space-x-4">
|
|
<button
|
|
type="button"
|
|
@click="cancelEdit()"
|
|
class="btn btn-secondary"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
:disabled="editSubmitting"
|
|
class="btn btn-primary"
|
|
>
|
|
<span x-show="!editSubmitting">Update Commander</span>
|
|
<span
|
|
x-show="editSubmitting"
|
|
class="loading-spinner w-5 h-5 mr-2 inline-block align-middle"
|
|
></span>
|
|
<span x-show="editSubmitting">Updating...</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div
|
|
x-show="serverError"
|
|
x-transition
|
|
class="rounded-md bg-red-50 p-4 mt-4"
|
|
>
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg
|
|
class="h-5 w-5 text-red-400"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm text-red-800" x-text="serverError"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts -->
|
|
<script
|
|
defer
|
|
src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
|
|
></script>
|
|
<script src="/js/auth-guard.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
<script src="/js/commanders.js"></script>
|
|
<script src="/js/footer-loader.js"></script>
|
|
</body>
|
|
</html>
|