586 lines
26 KiB
HTML
586 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Which State Is Bigger?</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background-color: #f3f4f6;
|
|
min-height: 100vh;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 850px;
|
|
max-height: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.widget {
|
|
width: 100%;
|
|
max-width: 850px;
|
|
height: 100%;
|
|
max-height: 600px;
|
|
background-color: #6b46c1;
|
|
color: #ffffff;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #6b46c1;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
padding: 1.5rem 0;
|
|
border-bottom: 1px solid #553c9a;
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #ffffff;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.main-content {
|
|
display: flex;
|
|
height: calc(675px - 120px);
|
|
}
|
|
|
|
.left-panel {
|
|
width: 33.333%;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 1.125rem;
|
|
font-weight: 500;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.select-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.select {
|
|
width: 100%;
|
|
height: 3rem;
|
|
background-color: white;
|
|
color: black;
|
|
border: 1px solid white;
|
|
border-radius: 0.375rem;
|
|
padding: 0 1rem;
|
|
font-size: 1rem;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.select:focus {
|
|
outline: none;
|
|
ring: 2px solid #c4b5fd;
|
|
}
|
|
|
|
.select:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.select-arrow {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.compare-button {
|
|
width: 100%;
|
|
background-color: white;
|
|
color: black;
|
|
font-weight: 600;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 0.375rem;
|
|
border: none;
|
|
font-size: 1.125rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.compare-button:hover:not(:disabled) {
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.compare-button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.disclaimer {
|
|
background-color: rgba(139, 92, 246, 0.5);
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem;
|
|
border: 1px solid #7c3aed;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.disclaimer-text {
|
|
font-size: 0.875rem;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
|
|
.right-panel {
|
|
width: 66.667%;
|
|
max-height: 500px;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.results-container {
|
|
height: 100%;
|
|
max-height: 500px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.states-grid {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.state-card {
|
|
background-color: white;
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
max-height: 600px;
|
|
}
|
|
|
|
.state-image-container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.state-image {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.state-info {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.state-name {
|
|
font-weight: bold;
|
|
font-size: 1.125rem;
|
|
color: black;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.state-size {
|
|
font-size: 0.875rem;
|
|
color: #374151;
|
|
}
|
|
|
|
.comparison-summary {
|
|
text-align: center;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.comparison-text {
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.initial-state {
|
|
height: 100%;
|
|
max-height: 600px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.initial-content {
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.usa-silhouette {
|
|
max-width: 100%;
|
|
max-height: 320px;
|
|
object-fit: contain;
|
|
margin: 0 auto 1rem;
|
|
}
|
|
|
|
.initial-text {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="widget">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div class="title">Which State Is Bigger?</div>
|
|
<p class="subtitle">Pick any two states to compare their sizes.</p>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<!-- Left Panel - Controls -->
|
|
<div class="left-panel">
|
|
<div class="form-group">
|
|
<label for="state1-select" class="form-label">State 1</label>
|
|
<div class="select-wrapper">
|
|
<select id="state1-select" class="select">
|
|
<option value="" selected="selected">Select a state</option>
|
|
<option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pennsylvania</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option></select>
|
|
<span class="select-arrow">▼</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="state2-select" class="form-label">State 2</label>
|
|
<div class="select-wrapper">
|
|
<select id="state2-select" class="select">
|
|
<option value="" selected="selected">Select a state</option>
|
|
<option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pennsylvania</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option></select>
|
|
<span class="select-arrow">▼</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="compare-button" class="compare-button" disabled="disabled">
|
|
Compare States
|
|
</button>
|
|
|
|
<div class="disclaimer">
|
|
<p class="disclaimer-text">Note: State illustrations are not to scale.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel - Results -->
|
|
<div class="right-panel">
|
|
<div id="initial-state" class="initial-state">
|
|
<div class="initial-content">
|
|
<div>
|
|
<img src="default_data/usa-silhouette.webp" alt="United States Silhouette" class="usa-silhouette">
|
|
</div>
|
|
<p class="initial-text">Select two states to see their size comparison.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="results-container" class="results-container hidden">
|
|
<div class="states-grid">
|
|
<div class="state-card">
|
|
<div class="state-image-container">
|
|
<img id="state1-image" class="state-image" src="default_data/placeholder.svg" alt="">
|
|
</div>
|
|
<div class="state-info">
|
|
<h3 id="state1-name" class="state-name"></h3>
|
|
<p id="state1-size" class="state-size"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="state-card">
|
|
<div class="state-image-container">
|
|
<img id="state2-image" class="state-image" src="default_data/placeholder.svg" alt="">
|
|
</div>
|
|
<div class="state-info">
|
|
<h3 id="state2-name" class="state-name"></h3>
|
|
<p id="state2-size" class="state-size"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison-summary">
|
|
<p id="comparison-text" class="comparison-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// State data with square miles and SVG file paths
|
|
const stateData = {
|
|
Alabama: { size: 52420, svg: "assets/states/alabama.svg" },
|
|
Alaska: { size: 665384, svg: "assets/states/alaska.svg" },
|
|
Arizona: { size: 113990, svg: "assets/states/arizona.svg" },
|
|
Arkansas: { size: 53179, svg: "assets/states/arkansas.svg" },
|
|
California: { size: 163695, svg: "assets/states/california.svg" },
|
|
Colorado: { size: 104094, svg: "assets/states/colorado.svg" },
|
|
Connecticut: { size: 5543, svg: "assets/states/connecticut.svg" },
|
|
Delaware: { size: 2489, svg: "assets/states/delaware.svg" },
|
|
Florida: { size: 65758, svg: "assets/states/florida.svg" },
|
|
Georgia: { size: 59425, svg: "assets/states/georgia.svg" },
|
|
Hawaii: { size: 10932, svg: "assets/states/hawaii.svg" },
|
|
Idaho: { size: 83569, svg: "assets/states/idaho.svg" },
|
|
Illinois: { size: 57914, svg: "assets/states/illinois.svg" },
|
|
Indiana: { size: 36420, svg: "assets/states/indiana.svg" },
|
|
Iowa: { size: 56273, svg: "assets/states/iowa.svg" },
|
|
Kansas: { size: 82278, svg: "assets/states/kansas.svg" },
|
|
Kentucky: { size: 40408, svg: "assets/states/kentucky.svg" },
|
|
Louisiana: { size: 52378, svg: "assets/states/louisiana.svg" },
|
|
Maine: { size: 35380, svg: "assets/states/maine.svg" },
|
|
Maryland: { size: 12406, svg: "assets/states/maryland.svg" },
|
|
Massachusetts: { size: 10554, svg: "assets/states/massachusetts.svg" },
|
|
Michigan: { size: 96714, svg: "assets/states/michigan.svg" },
|
|
Minnesota: { size: 86936, svg: "assets/states/minnesota.svg" },
|
|
Mississippi: { size: 48432, svg: "assets/states/mississippi.svg" },
|
|
Missouri: { size: 69707, svg: "assets/states/missouri.svg" },
|
|
Montana: { size: 147040, svg: "assets/states/montana.svg" },
|
|
Nebraska: { size: 77348, svg: "assets/states/nebraska.svg" },
|
|
Nevada: { size: 110572, svg: "assets/states/nevada.svg" },
|
|
"New Hampshire": { size: 9349, svg: "assets/states/new_hampshire.svg" },
|
|
"New Jersey": { size: 8723, svg: "assets/states/new_jersey.svg" },
|
|
"New Mexico": { size: 121590, svg: "assets/states/new_mexico.svg" },
|
|
"New York": { size: 54555, svg: "assets/states/new_york.svg" },
|
|
"North Carolina": { size: 53819, svg: "assets/states/north_carolina.svg" },
|
|
"North Dakota": { size: 70698, svg: "assets/north_dakota.svg" },
|
|
Ohio: { size: 44826, svg: "assets/states/ohio.svg" },
|
|
Oklahoma: { size: 69899, svg: "assets/states/oklahoma.svg" },
|
|
Oregon: { size: 98379, svg: "assets/states/oregon.svg" },
|
|
Pennsylvania: { size: 46054, svg: "assets/states/pennsylvania.svg" },
|
|
"Rhode Island": { size: 1545, svg: "assets/states/rhode_island.svg" },
|
|
"South Carolina": { size: 32020, svg: "assets/states/south_carolina.svg" },
|
|
"South Dakota": { size: 77116, svg: "assets/south_dakota.svg" },
|
|
Tennessee: { size: 42144, svg: "assets/states/tennessee.svg" },
|
|
Texas: { size: 268596, svg: "assets/states/texas.svg" },
|
|
Utah: { size: 84897, svg: "assets/states/utah.svg" },
|
|
Vermont: { size: 9616, svg: "assets/states/vermont.svg" },
|
|
Virginia: { size: 42775, svg: "assets/states/virginia.svg" },
|
|
Washington: { size: 71298, svg: "assets/states/washington.svg" },
|
|
"West Virginia": { size: 24230, svg: "assets/states/west_virginia.svg" },
|
|
Wisconsin: { size: 65496, svg: "assets/states/wisconsin.svg" },
|
|
Wyoming: { size: 97813, svg: "assets/states/wyoming.svg" }
|
|
};
|
|
|
|
const stateNames = Object.keys(stateData).sort();
|
|
let comparisonResult = null;
|
|
|
|
// Initialize dropdowns
|
|
function initializeDropdowns() {
|
|
const state1Select = document.getElementById('state1-select');
|
|
const state2Select = document.getElementById('state2-select');
|
|
|
|
stateNames.forEach(state => {
|
|
const option1 = document.createElement('option');
|
|
option1.value = state;
|
|
option1.textContent = state;
|
|
state1Select.appendChild(option1);
|
|
|
|
const option2 = document.createElement('option');
|
|
option2.value = state;
|
|
option2.textContent = state;
|
|
state2Select.appendChild(option2);
|
|
});
|
|
}
|
|
|
|
// Update available options
|
|
function updateAvailableOptions() {
|
|
const state1Select = document.getElementById('state1-select');
|
|
const state2Select = document.getElementById('state2-select');
|
|
const state1Value = state1Select.value;
|
|
const state2Value = state2Select.value;
|
|
|
|
// Update state2 options
|
|
Array.from(state2Select.options).forEach(option => {
|
|
if (option.value === '') return;
|
|
option.disabled = option.value === state1Value;
|
|
});
|
|
|
|
// Update state1 options
|
|
Array.from(state1Select.options).forEach(option => {
|
|
if (option.value === '') return;
|
|
option.disabled = option.value === state2Value;
|
|
});
|
|
|
|
updateCompareButton();
|
|
}
|
|
|
|
// Update compare button state
|
|
function updateCompareButton() {
|
|
const state1Select = document.getElementById('state1-select');
|
|
const state2Select = document.getElementById('state2-select');
|
|
const compareButton = document.getElementById('compare-button');
|
|
|
|
const canCompare = state1Select.value && state2Select.value &&
|
|
state1Select.value !== state2Select.value;
|
|
compareButton.disabled = !canCompare;
|
|
}
|
|
|
|
// Format number with commas
|
|
function formatNumber(num) {
|
|
return num.toLocaleString();
|
|
}
|
|
|
|
// Get state plural form
|
|
function getStatePlural(stateName) {
|
|
if (stateName.endsWith('s')) {
|
|
return stateName;
|
|
}
|
|
return stateName + 's';
|
|
}
|
|
|
|
// Calculate scaled size for display
|
|
function calculateScaledSize(stateSize, largerSize, isLarger) {
|
|
const maxDisplaySize = 260;
|
|
|
|
if (isLarger) {
|
|
return maxDisplaySize;
|
|
} else {
|
|
const ratio = stateSize / largerSize;
|
|
return Math.max(maxDisplaySize * ratio, 50);
|
|
}
|
|
}
|
|
|
|
// Perform comparison
|
|
function performComparison() {
|
|
const state1Select = document.getElementById('state1-select');
|
|
const state2Select = document.getElementById('state2-select');
|
|
|
|
const firstState = state1Select.value;
|
|
const secondState = state2Select.value;
|
|
|
|
if (!firstState || !secondState || firstState === secondState) return;
|
|
|
|
const size1 = stateData[firstState].size;
|
|
const size2 = stateData[secondState].size;
|
|
|
|
let larger, smaller, largerSize, smallerSize;
|
|
|
|
if (size1 > size2) {
|
|
larger = firstState;
|
|
smaller = secondState;
|
|
largerSize = size1;
|
|
smallerSize = size2;
|
|
} else {
|
|
larger = secondState;
|
|
smaller = firstState;
|
|
largerSize = size2;
|
|
smallerSize = size1;
|
|
}
|
|
|
|
const ratio = Math.round(largerSize / smallerSize);
|
|
|
|
comparisonResult = {
|
|
larger,
|
|
smaller,
|
|
ratio,
|
|
largerSize,
|
|
smallerSize,
|
|
firstState,
|
|
secondState,
|
|
firstStateSize: size1,
|
|
secondStateSize: size2
|
|
};
|
|
|
|
displayResults();
|
|
}
|
|
|
|
// Display results
|
|
function displayResults() {
|
|
if (!comparisonResult) return;
|
|
|
|
// Hide initial state, show results
|
|
document.getElementById('initial-state').classList.add('hidden');
|
|
document.getElementById('results-container').classList.remove('hidden');
|
|
|
|
// Update first state
|
|
const state1Image = document.getElementById('state1-image');
|
|
const state1Name = document.getElementById('state1-name');
|
|
const state1Size = document.getElementById('state1-size');
|
|
|
|
const firstStateSize = calculateScaledSize(
|
|
comparisonResult.firstStateSize,
|
|
comparisonResult.largerSize,
|
|
comparisonResult.firstState === comparisonResult.larger
|
|
);
|
|
|
|
state1Image.src = stateData[comparisonResult.firstState].svg;
|
|
state1Image.alt = comparisonResult.firstState;
|
|
state1Image.style.width = firstStateSize + 'px';
|
|
state1Image.style.height = firstStateSize + 'px';
|
|
state1Name.textContent = comparisonResult.firstState;
|
|
state1Size.textContent = formatNumber(comparisonResult.firstStateSize) + ' square miles';
|
|
|
|
// Update second state
|
|
const state2Image = document.getElementById('state2-image');
|
|
const state2Name = document.getElementById('state2-name');
|
|
const state2Size = document.getElementById('state2-size');
|
|
|
|
const secondStateSize = calculateScaledSize(
|
|
comparisonResult.secondStateSize,
|
|
comparisonResult.largerSize,
|
|
comparisonResult.secondState === comparisonResult.larger
|
|
);
|
|
|
|
state2Image.src = stateData[comparisonResult.secondState].svg;
|
|
state2Image.alt = comparisonResult.secondState;
|
|
state2Image.style.width = secondStateSize + 'px';
|
|
state2Image.style.height = secondStateSize + 'px';
|
|
state2Name.textContent = comparisonResult.secondState;
|
|
state2Size.textContent = formatNumber(comparisonResult.secondStateSize) + ' square miles';
|
|
|
|
// Update comparison text
|
|
const comparisonText = document.getElementById('comparison-text');
|
|
|
|
if (comparisonResult.ratio < 2) {
|
|
comparisonText.textContent = `${comparisonResult.larger} is slightly bigger than ${comparisonResult.smaller}.`;
|
|
} else {
|
|
comparisonText.textContent = `${comparisonResult.larger} is about ${comparisonResult.ratio} times bigger than ${comparisonResult.smaller}!`;
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializeDropdowns();
|
|
|
|
document.getElementById('state1-select').addEventListener('change', updateAvailableOptions);
|
|
document.getElementById('state2-select').addEventListener('change', updateAvailableOptions);
|
|
document.getElementById('compare-button').addEventListener('click', performComparison);
|
|
});
|
|
</script>
|
|
<script defer="defer" src="vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"rayId":"9cc7f9c95ff0e763","serverTiming":{"name":{"cfExtPri":true,"cfEdge":true,"cfOrigin":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"version":"2025.9.1","token":"5cc7d7124de641b181da990fc8c9a0b6"}" crossorigin="anonymous"></script>
|
|
|
|
|
|
</body></html> |