Temperature Management Copy
/* CLASSIC TRADITIONAL BROWSER-STYLE TABS */
.tab-nav-container {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #aaa;
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.classic-tab {
background: #e1e1e1;
border: 1px solid #aaa;
border-bottom: none;
border-radius: 4px 4px 0 0;
padding: 8px 16px;
margin-right: 4px;
margin-bottom: -1px;
cursor: pointer;
font-size: 0.9rem;
font-weight: normal;
color: #333;
outline: none;
}
.classic-tab:hover:not(.active) {
background: #ebebe0;
}
/* ACTIVE TAB: Attached seamlessly to the top of the card below */
.classic-tab.active {
background: #ffffff;
border-color: #aaa #aaa #ffffff #aaa;
border-bottom: 1px solid #ffffff;
font-weight: bold;
color: #000;
z-index: 12;
}
/* Card Container styling to integrate with active tab */
.tab-content-card {
/* display: none; */
background: #ffffff;
border: 1px solid #aaa;
border-top: none;
padding: 20px;
border-radius: 0 0 4px 4px;
}
.table-wrapper {
width: 100%;
overflow-x: auto;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
max-height: 600px; /* Adjust to your desired height */
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 0.82rem;
}
th, td {
padding: 10px 12px;
border: 1px solid #ddd;
vertical-align: top;
}
th {
background-color: #f1f3f5;
color: #212529;
font-weight: bold;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.5px;
position: sticky;
top: 0;
z-index: 1; /* Keeps the header above the rows */
}
tr:nth-child(even) {
background-color: #f8f9fa;
}
tr:hover {
background-color: #f1f3f5;
}
.species-cell {
font-weight: bold;
/* color: #111;
background-color: #fff !important;
white-space: nowrap; */
}
.temp-badge {
display: inline-block;
padding: 0.25rem 0.75rem; /* py-1 px-3 */
border-radius: 9999px; /* rounded-full */
font-weight: 700; /* font-bold */
font-size: 0.75rem; /* text-xs */
line-height: 1rem;
}
@media (min-width: 640px) {
.tem-badge {
font-size: 0.875rem; /* sm:text-sm */
line-height: 1.25rem;
}
}
// FREEZE PROTECT DATASET (30 Species – Ordered strictly from HIGHEST 55°F to LOWEST 0°F)
const freezeData = [
{ species: “Habanero Pepper”, scientific: “(Capsicum chinense)”, tempStr: “55°F”, tempVal: 55, note: “Ultra-tender bonchi. Move indoors under grow lights prior to cool autumn nights.” },
{ species: “Cayenne Pepper”, scientific: “(Capsicum annuum)”, tempStr: “50°F”, tempVal: 50, note: “Tender bonchi. Growth stalls below 55°F; bring indoors to avoid leaf drop.” },
{ species: “Kaffir Lime”, scientific: “(Citrus hystrix)”, tempStr: “50°F”, tempVal: 50, note: “Tropical Citrus. Sensitive to cold drops; overwinter indoors in sunny warm spot.” },
{ species: “Bougainvillea”, scientific: “(Bougainvillea glabra)”, tempStr: “45°F”, tempVal: 45, note: “Tropical Broadleaf. Drops leaves if chilled. Winter inside warm sunny window.” },
{ species: “Ficus retusa”, scientific: “(Ficus retusa)”, tempStr: “45°F”, tempVal: 45, note: “Tropical Ficus. Susceptible to leaf drop from drafts or chill. Keep indoors with good humidity.” },
{ species: “Dwarf Jade”, scientific: “(Portulacaria afra)”, tempStr: “40°F”, tempVal: 40, note: “Succulent. Water-filled stems burst in freeze. Bring inside before frost.” },
{ species: “Lantana”, scientific: “(Lantana camara)”, tempStr: “40°F”, tempVal: 40, note: “Sub-tropical. Sensitive roots in shallow pots. Overwinter in frost-free greenhouse or indoors.” },
{ species: “White Lead Tree”, scientific: “(Leucaena leucocephala)”, tempStr: “40°F”, tempVal: 40, note: “Sub-tropical Legume. Fails quickly in cold soil. Requires frost-free indoors.” },
{ species: “Australian Willow”, scientific: “(Geijera parviflora)”, tempStr: “35°F”, tempVal: 35, note: “Sub-tropical Evergreen. Tolerates mild chill, but roots must not freeze solid.” },
{ species: “Sweet Olive”, scientific: “(Osmanthus fragrans)”, tempStr: “35°F”, tempVal: 35, note: “Sub-tropical Broadleaf. Prefers cool rest (35°F-50°F) but cannot endure pot freeze.” },
{ species: “Lemon Cypress”, scientific: “(Cupressus macrocarpa)”, tempStr: “32°F”, tempVal: 32, note: “Cool Conifer. Protect foliage from freezing winds and frozen root ball.” },
{ species: “Pineapple Guava”, scientific: “(Acca sellowiana)”, tempStr: “32°F”, tempVal: 32, note: “Sub-tropical Evergreen. Withstands light frost; store in cold frame or sunroom.” },
{ species: “Arbequina Olive”, scientific: “(Olea europaea ‘Arbequina’)”, tempStr: “30°F”, tempVal: 30, note: “Mediterranean. Thrives with cool rest; protect pot from hard freeze.” },
{ species: “Glossy Ligustrum”, scientific: “(Ligustrum lucidum)”, tempStr: “25°F”, tempVal: 25, note: “Semi-Evergreen. Protect roots in garage or shelter during hard sub-freezing weather.” },
{ species: “Crepe Myrtle”, scientific: “(Lagerstroemia)”, tempStr: “20°F”, tempVal: 20, note: “Deciduous. Requires dormancy. Protect container in unheated structure below 20°F.” },
{ species: “Japanese Green Maple”, scientific: “(Acer palmatum)”, tempStr: “20°F”, tempVal: 20, note: “Deciduous. Needs winter dormancy. Shallow roots suffer if soil drops below 20°F.” },
{ species: “Japanese Red Maple”, scientific: “(Acer palmatum)”, tempStr: “20°F”, tempVal: 20, note: “Deciduous. Protect shallow root system from freeze-thaw cycles.” },
{ species: “Dragon Willow”, scientific: “(Salix matsudana ‘Tortuosa’)”, tempStr: “20°F”, tempVal: 20, note: “Deciduous. Hardy top growth, but pot roots need mulch or soil burial below 20°F.” },
{ species: “Judas Tree”, scientific: “(Cercis siliquastrum)”, tempStr: “20°F”, tempVal: 20, note: “Deciduous. Dormant wood handles cold, but container soil needs wind/freeze shelter.” },
{ species: “Chinese Elm”, scientific: “(Ulmus parvifolia)”, tempStr: “20°F”, tempVal: 20, note: “Semi-Evergreen/Deciduous. Adaptable; protect pot in cold frame during hard freezes.” },
{ species: “Rose of Sharon Hibiscus”, scientific: “(Hibiscus syriacus)”, tempStr: “15°F”, tempVal: 15, note: “Deciduous. Very hardy wood; protect pot soil from deep freezes.” },
{ species: “Japanese Okame Cherry”, scientific: “(Prunus x incisa ‘Okame’)”, tempStr: “15°F”, tempVal: 15, note: “Deciduous. Needs cold dormancy for flower set. Protect roots below 15°F.” },
{ species: “Japanese Kwanzan Cherry”, scientific: “(Prunus serrulata ‘Kwanzan’)”, tempStr: “15°F”, tempVal: 15, note: “Deciduous. Dormant buds tolerate cold; keep roots insulated.” },
{ species: “Japanese Boxwood”, scientific: “(Buxus microphylla)”, tempStr: “15°F”, tempVal: 15, note: “Broadleaf Evergreen. Leaves bronze in wind. Store in shelter to protect roots.” },
{ species: “Japanese Garden Juniper”, scientific: “(Juniperus procumbens ‘Nana’)”, tempStr: “10°F”, tempVal: 10, note: “Hardy Conifer. Outdoor winter dormancy required. Bury pot in mulch.” },
{ species: “Bald Cypress”, scientific: “(Taxodium distichum)”, tempStr: “10°F”, tempVal: 10, note: “Deciduous Conifer. Very cold tolerant when dormant. Protect pot from solid deep freeze.” },
{ species: “Japanese Black Pine”, scientific: “(Pinus thunbergii)”, tempStr: “10°F”, tempVal: 10, note: “Hardy Conifer. Must stay outdoors. Protect roots from extreme sub-10°F winds.” },
{ species: “American Blue Moon Wisteria”, scientific: “(Wisteria frutescens)”, tempStr: “5°F”, tempVal: 5, note: “Ultra-Hardy Vine. Extremely hardy roots; protect pot in severe deep freezes.” },
{ species: “Chinese Wisteria”, scientific: “(Wisteria sinensis)”, tempStr: “5°F”, tempVal: 5, note: “Ultra-Hardy Vine. Robust roots handle cold; shield ceramic pots from cracking.” },
{ species: “Weeping Willow”, scientific: “(Salix babylonica)”, tempStr: “0°F”, tempVal: 0, note: “Ultra-Hardy Deciduous. Extremely resilient. Mulch pot or place in cold shed in sub-zero temps.” }
];
// HEAT PROTECT DATASET (30 Species – Ordered strictly from LOWEST 80°F to HIGHEST 100°F)
const heatData = [
{ species: “Japanese Green Maple”, scientific: “(Acer palmatum)”, tempStr: “80°F”, tempVal: 80, note: “Delicate foliage scorches easily in afternoon sun. Move to filter or morning sun only.” },
{ species: “Japanese Red Maple”, scientific: “(Acer palmatum)”, tempStr: “80°F”, tempVal: 80, note: “Red leaf pigments fade and tips crisp in direct summer heat. Provide dappled shade.” },
{ species: “Weeping Willow”, scientific: “(Salix babylonica)”, tempStr: “80°F”, tempVal: 80, note: “Extreme water intake; direct afternoon sun cooks shallow roots and causes desiccation.” },
{ species: “Dragon Willow”, scientific: “(Salix matsudana ‘Tortuosa’)”, tempStr: “80°F”, tempVal: 80, note: “Needs moisture-retentive care; shade from intense afternoon sun to prevent leaf tip scorch.” },
{ species: “Lemon Cypress”, scientific: “(Cupressus macrocarpa)”, tempStr: “80°F”, tempVal: 80, note: “Foliage turns brown and brittle under harsh sunlight. Provide bright afternoon shade.” },
{ species: “Cayenne Pepper”, scientific: “(Capsicum annuum)”, tempStr: “85°F”, tempVal: 85, note: “Thrives in warmth, but small pots dry out rapidly; shade roots during intense noon heat.” },
{ species: “Habanero Pepper”, scientific: “(Capsicum chinense)”, tempStr: “85°F”, tempVal: 85, note: “Loves heat; keep pot cool to prevent root scorching and blossom drop.” },
{ species: “Sweet Olive”, scientific: “(Osmanthus fragrans)”, tempStr: “85°F”, tempVal: 85, note: “Broadleaf foliage prefers gentle morning sun and shaded shelter from summer afternoon heat.” },
{ species: “Japanese Boxwood”, scientific: “(Buxus microphylla)”, tempStr: “85°F”, tempVal: 85, note: “Foliage can discolor or yellow in full sun during hot spells. Provide partial shade.” },
{ species: “Japanese Kwanzan Cherry”, scientific: “(Prunus serrulata ‘Kwanzan’)”, tempStr: “85°F”, tempVal: 85, note: “Broad spring leaves dry out quickly in shallow pots. Shield from severe afternoon sun.” },
{ species: “Japanese Okame Cherry”, scientific: “(Prunus x incisa ‘Okame’)”, tempStr: “85°F”, tempVal: 85, note: “Protect delicate foliage in late summer to ensure healthy bud set for next spring’s bloom.” },
{ species: “Chinese Elm”, scientific: “(Ulmus parvifolia)”, tempStr: “85°F”, tempVal: 85, note: “Tolerates sun well, but shallow dark ceramic pots overheat rapidly above 85°F.” },
{ species: “American Blue Moon Wisteria”, scientific: “(Wisteria frutescens)”, tempStr: “85°F”, tempVal: 85, note: “High transpiration rate; shade afternoon roots to prevent severe water stress.” },
{ species: “Chinese Wisteria”, scientific: “(Wisteria sinensis)”, tempStr: “85°F”, tempVal: 85, note: “Thirsty vine; protect container soil from baking in extreme sun to avoid leaf wilt.” },
{ species: “Rose of Sharon Hibiscus”, scientific: “(Hibiscus syriacus)”, tempStr: “85°F”, tempVal: 85, note: “Flowers and broad leaves droop quickly in baked pot soil. Provide light afternoon shade.” },
{ species: “Judas Tree”, scientific: “(Cercis siliquastrum)”, tempStr: “85°F”, tempVal: 85, note: “Heart-shaped foliage shows edge-burn when pot temperatures climb above 85°F.” },
{ species: “Pineapple Guava”, scientific: “(Acca sellowiana)”, tempStr: “85°F”, tempVal: 85, note: “Leathery foliage is tough, but small pot volume benefits from root cooling in peak summer.” },
{ species: “Glossy Ligustrum”, scientific: “(Ligustrum lucidum)”, tempStr: “85°F”, tempVal: 85, note: “Broadleaf evergreen foliage stays healthier with shade protection during heatwaves.” },
{ species: “Australian Willow”, scientific: “(Geijera parviflora)”, tempStr: “85°F”, tempVal: 85, note: “Foliage tolerates sun, but shallow soil volume requires protection against overheating.” },
{ species: “Crepe Myrtle”, scientific: “(Lagerstroemia)”, tempStr: “90°F”, tempVal: 90, note: “Heat-loving bloomer; needs full sun, but shade pot during prolonged 90°F+ heatwaves.” },
{ species: “Kaffir Lime”, scientific: “(Citrus hystrix)”, tempStr: “90°F”, tempVal: 90, note: “Enjoys warm weather, but feeder roots near pot walls suffer thermal damage above 90°F.” },
{ species: “White Lead Tree”, scientific: “(Leucaena leucocephala)”, tempStr: “90°F”, tempVal: 90, note: “Highly drought and heat tolerant; move to afternoon shade only during extreme heat spikes.” },
{ species: “Lantana”, scientific: “(Lantana camara)”, tempStr: “90°F”, tempVal: 90, note: “Loves baking sun for profuse blooming. Provide afternoon shade only in severe heatwaves.” },
{ species: “Japanese Black Pine”, scientific: “(Pinus thunbergii)”, tempStr: “90°F”, tempVal: 90, note: “Full-sun pine species, but shield container soil from baking to maintain mycorrhizae.” },
{ species: “Japanese Garden Juniper”, scientific: “(Juniperus procumbens ‘Nana’)”, tempStr: “90°F”, tempVal: 90, note: “Sun hardy conifer; ensure good airflow and shield pot from direct thermal baking.” },
{ species: “Bald Cypress”, scientific: “(Taxodium distichum)”, tempStr: “95°F”, tempVal: 95, note: “High heat tolerance if roots stay soaked in water trays. Protect foliage in harsh heat.” },
{ species: “Ficus retusa”, scientific: “(Ficus retusa)”, tempStr: “95°F”, tempVal: 95, note: “Loves warmth, but tender potted roots overheat in extreme direct heatwaves. Shade midday.” },
{ species: “Arbequina Olive”, scientific: “(Olea europaea ‘Arbequina’)”, tempStr: “95°F”, tempVal: 95, note: “Thrives in dry Mediterranean heat; protect container roots during intense midsummer.” },
{ species: “Bougainvillea”, scientific: “(Bougainvillea glabra)”, tempStr: “100°F”, tempVal: 100, note: “Thrives in intense heat and full sun; shade only if soil dries faster than you can water.” },
{ species: “Dwarf Jade”, scientific: “(Portulacaria afra)”, tempStr: “100°F”, tempVal: 100, note: “Succulent leaves store water. Handles extreme heat effortlessly with adequate soil hydration.” }
];
// Freeze Protect Badge Color Gradient Mapping (Light Green -> Mint -> Teal -> Cyan -> Blue -> Indigo -> Purple)
function getFreezeBadgeClasses(temp) {
if (temp >= 50) {
// 55°F – 50°F: Light Green
return “bg-[#dcfce7] text-[#14532d] border border-green-200”;
} else if (temp >= 45) {
// 45°F: Mint / Emerald
return “bg-[#d1fae5] text-[#064e3b] border border-emerald-200”;
} else if (temp >= 40) {
// 40°F: Light Teal
return “bg-[#ccfbf1] text-[#134e4a] border border-teal-200”;
} else if (temp >= 35) {
// 35°F: Cyan / Light Blue
return “bg-[#cffafe] text-[#164e63] border border-cyan-200”;
} else if (temp >= 32) {
// 32°F: Soft Blue
return “bg-[#e0f2fe] text-[#0c4a6e] border border-sky-200”;
} else if (temp >= 30) {
// 30°F: Sky / Royal Blue
return “bg-[#dbeafe] text-[#1e40af] border border-blue-200”;
} else if (temp >= 20) {
// 25°F – 20°F: Indigo
return “bg-[#e0e7ff] text-[#312e81] border border-indigo-200”;
} else if (temp >= 10) {
// 15°F – 10°F: Lavender / Purple
return “bg-[#f3e8ff] text-[#581c87] border border-purple-200”;
} else if (temp >= 5) {
// 5°F: Rich Violet/Purple
return “bg-[#fae8ff] text-[#701a75] border border-fuchsia-200”;
} else {
// 0°F: Deepest Violet
return “bg-[#f5d0fe] text-[#4a044e] border border-fuchsia-300”;
}
}
// Heat Protect Badge Color Mapping
function getHeatBadgeClasses(temp) {
if (temp >= 100) {
// 100°F: Rose / High Heat Red
return “bg-[#fce7f3] text-[#831843] border border-rose-200”;
} else if (temp >= 95) {
// 95°F: Deep Orange / Warm Red
return “bg-[#fee2e2] text-[#991b1b] border border-red-200”;
} else if (temp >= 90) {
// 90°F: Warm Orange
return “bg-[#ffedd5] text-[#9a3412] border border-orange-200”;
} else {
// 80°F – 85°F: Warm Yellow / Amber
return “bg-[#fef3c7] text-[#78350f] border border-amber-200″;
}
}
function renderTables() {
// 1. Render Freeze Protect Table
const freezeBody = document.getElementById(‘freezeTableBody’);
freezeBody.innerHTML = ”;
freezeData.forEach((item) => {
const badgeClass = getFreezeBadgeClasses(item.tempVal);
const tr = document.createElement(‘tr’);
tr.innerHTML = `
${item.species}
${item.tempStr}
${item.note}
`;
freezeBody.appendChild(tr);
});
// 2. Render Heat Protect Table
const heatBody = document.getElementById(‘heatTableBody’);
heatBody.innerHTML = ”;
heatData.forEach((item) => {
const badgeClass = getHeatBadgeClasses(item.tempVal);
const tr = document.createElement(‘tr’);
tr.innerHTML = `
${item.species}
${item.tempStr}
${item.note}
`;
heatBody.appendChild(tr);
});
}
// Tab Switching Logic
function switchTab(tab) {
const tabFreeze = document.getElementById(‘tab-freeze’);
const tabHeat = document.getElementById(‘tab-heat’);
const viewFreeze = document.getElementById(‘view-freeze’);
const viewHeat = document.getElementById(‘view-heat’);
if (tab === ‘freeze’) {
tabFreeze.classList.add(‘active’);
tabHeat.classList.remove(‘active’);
viewFreeze.classList.remove(‘hidden’);
viewHeat.classList.add(‘hidden’);
} else {
tabHeat.classList.add(‘active’);
tabFreeze.classList.remove(‘active’);
viewHeat.classList.remove(‘hidden’);
viewFreeze.classList.add(‘hidden’);
}
}
// Initial Load Event
window.onload = function() {
renderTables();
};
| Species Name | Limit | Instructions |
|---|
| Species Name | Limit | Instructions |
|---|