300 lines
12 KiB
HTML
Executable File
300 lines
12 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>cannamatch result</title>
|
|
|
|
<!-- Chart.js & confetti -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
|
|
|
|
<!-- Popup helper (same as inactive) -->
|
|
<script src="{{ url_for('static', filename='js/popup.js') }}"></script>
|
|
|
|
<!-- Shared styles / favicon (same as inactive) -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
|
|
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}" />
|
|
</head>
|
|
<body class="profiles-page">
|
|
<div class="page-container">
|
|
|
|
<!-- Logo (same block as inactive) -->
|
|
<div class="logo-container">
|
|
<a href="{{ url_for('index') }}">
|
|
<img src="{{ url_for('static', filename='cm.png') }}" alt="Logo" class="logo">
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Buttons row (kept minimal for results page) -->
|
|
<div class="button-row">
|
|
<button type="button" class="magenta-button" onclick="location.href='{{ url_for('index') }}'">About</button>
|
|
<button type="button" class="magenta-button" onclick="location.href='{{ url_for('profiles_page') }}'">All Profiles</button>
|
|
<button type="button" class="magenta-button" onclick="location.href='{{ url_for('inactive') }}'">Interactive</button>
|
|
<button type="button" class="magenta-button" onclick="location.href='{{ url_for('quiz') }}'">Quiz</button>
|
|
</div>
|
|
|
|
<div class="matches-container">
|
|
<!-- Top Match -->
|
|
<div class="matches-row best-row">
|
|
<div class="profile-card best-card top-match" id="card-1">
|
|
<h3>Best</h3>
|
|
<div class="info-block">
|
|
<div class="title-with-icon">
|
|
<h2 class="glow-info" id="name-1">{{ top_matches[0][0] if top_matches|length > 0 else '' }}</h2>
|
|
<span class="info-icon glow-text" onclick="togglePopup(event, 'popup-1')"></span>
|
|
</div>
|
|
{% if top_matches|length > 0 %}
|
|
<p class="info-text" id="info0-1">{{ top_matches[0][1].get('info_text0','') }}</p>
|
|
<p class="info-text" id="info2-1">{{ top_matches[0][1].get('info_text2','') }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<canvas id="chart-1"></canvas>
|
|
</div>
|
|
|
|
<!-- Popup for Top Match -->
|
|
<div class="popup" id="popup-1">
|
|
<div class="popup-content">
|
|
<h3 class="info-text" id="popup-name-1">{{ top_matches[0][0] if top_matches|length > 0 else '' }}</h3>
|
|
{% if top_matches|length > 0 %}
|
|
<h4 class="info-text glow-info">THC</h4>
|
|
<p class="info-text" id="popup-info0-1">{{ top_matches[0][1].get('info_text0','') }}</p>
|
|
<h4 class="info-text glow-info">CBD</h4>
|
|
<p class="info-text" id="popup-info1-1">{{ top_matches[0][1].get('info_text1','') }}</p>
|
|
<h4 class="info-text glow-info">GENETICS</h4>
|
|
<p class="info-text" id="popup-info2-1">{{ top_matches[0][1].get('info_text2','') }}</p>
|
|
<h4 class="info-text glow-info">TASTE</h4>
|
|
<p class="info-text" id="popup-info3-1">{{ top_matches[0][1].get('info_text3','') }}</p>
|
|
<h4 class="info-text glow-info">EFFECT</h4>
|
|
<p class="info-text" id="popup-info4-1">{{ top_matches[0][1].get('info_text4','') }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Row Matches -->
|
|
<div class="matches-row bottom-row">
|
|
<!-- Runner-up -->
|
|
<div class="profile-card side-match" id="card-2">
|
|
<h3>Runner-up</h3>
|
|
<div class="info-block">
|
|
<div class="title-with-icon">
|
|
<h2 class="glow-info" id="name-2">{{ top_matches[1][0] if top_matches|length > 1 else '' }}</h2>
|
|
<span class="info-icon glow-text" onclick="togglePopup(event, 'popup-2')"></span>
|
|
</div>
|
|
{% if top_matches|length > 1 %}
|
|
<p class="info-text" id="info0-2">{{ top_matches[1][1].get('info_text0','') }}</p>
|
|
<p class="info-text" id="info2-2">{{ top_matches[1][1].get('info_text2','') }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<canvas id="chart-2"></canvas>
|
|
</div>
|
|
|
|
<!-- Popup for Runner-up -->
|
|
<div class="popup" id="popup-2">
|
|
<div class="popup-content">
|
|
<h3 class="info-text" id="popup-name-2">{{ top_matches[1][0] if top_matches|length > 1 else '' }}</h3>
|
|
{% if top_matches|length > 1 %}
|
|
<h4 class="info-text glow-info">THC</h4>
|
|
<p class="info-text" id="popup-info0-2">{{ top_matches[1][1].get('info_text0','') }}</p>
|
|
<h4 class="info-text glow-info">CBD</h4>
|
|
<p class="info-text" id="popup-info1-2">{{ top_matches[1][1].get('info_text1','') }}</p>
|
|
<h4 class="info-text glow-info">GENETICS</h4>
|
|
<p class="info-text" id="popup-info2-2">{{ top_matches[1][1].get('info_text2','') }}</p>
|
|
<h4 class="info-text glow-info">TASTE</h4>
|
|
<p class="info-text" id="popup-info3-2">{{ top_matches[1][1].get('info_text3','') }}</p>
|
|
<h4 class="info-text glow-info">EFFECT</h4>
|
|
<p class="info-text" id="popup-info4-2">{{ top_matches[1][1].get('info_text4','') }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Maybe -->
|
|
<div class="profile-card side-match" id="card-3">
|
|
<h3>Maybe...</h3>
|
|
<div class="info-block">
|
|
<div class="title-with-icon">
|
|
<h2 class="glow-info" id="name-3">{{ top_matches[2][0] if top_matches|length > 2 else '' }}</h2>
|
|
<span class="info-icon glow-text" onclick="togglePopup(event, 'popup-3')"></span>
|
|
</div>
|
|
{% if top_matches|length > 2 %}
|
|
<p class="info-text" id="info0-3">{{ top_matches[2][1].get('info_text0','') }}</p>
|
|
<p class="info-text" id="info2-3">{{ top_matches[2][1].get('info_text2','') }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<canvas id="chart-3"></canvas>
|
|
</div>
|
|
|
|
<!-- Popup for Maybe -->
|
|
<div class="popup" id="popup-3">
|
|
<div class="popup-content">
|
|
<h3 class="info-text" id="popup-name-3">{{ top_matches[2][0] if top_matches|length > 2 else '' }}</h3>
|
|
{% if top_matches|length > 2 %}
|
|
<h4 class="info-text glow-info">THC</h4>
|
|
<p class="info-text" id="popup-info0-3">{{ top_matches[2][1].get('info_text0','') }}</p>
|
|
<h4 class="info-text glow-info">CBD</h4>
|
|
<p class="info-text" id="popup-info1-3">{{ top_matches[2][1].get('info_text1','') }}</p>
|
|
<h4 class="info-text glow-info">GENETICS</h4>
|
|
<p class="info-text" id="popup-info2-3">{{ top_matches[2][1].get('info_text2','') }}</p>
|
|
<h4 class="info-text glow-info">TASTE</h4>
|
|
<p class="info-text" id="popup-info3-3">{{ top_matches[2][1].get('info_text3','') }}</p>
|
|
<h4 class="info-text glow-info">EFFECT</h4>
|
|
<p class="info-text" id="popup-info4-3">{{ top_matches[2][1].get('info_text4','') }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Same visual language as inactive.js
|
|
const labels = ['Energy','Calm','Relax','Sleep','Focus','Inspire'];
|
|
const userData = {{ user | tojson }};
|
|
const matches = {{ top_matches | tojson }};
|
|
|
|
const youLineColor = 'rgba(255,255,255,0.5)';
|
|
const youFillColor = 'rgba(255,255,255,0.1)';
|
|
const matchLineColor = 'rgb(191,181,49)';
|
|
const matchFillColor = 'rgba(191,181,49,0.420)';
|
|
const radialLineColor= 'rgba(255,255,255,0.420)';
|
|
|
|
function getFontSize(){ return window.innerWidth < 600 ? 10 : 42; }
|
|
function getBottomChartFontSize(){ return window.innerWidth < 600 ? 8 : 24; }
|
|
function getPointRadius(){ return window.innerWidth < 600 ? 11 : 24; }
|
|
function getPointHoverRadius(){ return window.innerWidth < 600 ? 12 : 39; }
|
|
|
|
const charts = [];
|
|
|
|
// Build top chart (You + best match), if present
|
|
if (matches.length > 0) {
|
|
const [bestName, bestProf] = matches[0];
|
|
const ctx1 = document.getElementById('chart-1').getContext('2d');
|
|
charts[0] = new Chart(ctx1, {
|
|
type: 'radar',
|
|
data: {
|
|
labels,
|
|
datasets: [
|
|
{
|
|
label: bestName,
|
|
data: bestProf.values,
|
|
fill: true,
|
|
borderColor: matchLineColor,
|
|
backgroundColor: matchFillColor,
|
|
pointBackgroundColor: matchLineColor,
|
|
pointRadius: 0
|
|
},
|
|
{
|
|
label: 'You',
|
|
data: userData,
|
|
fill: true,
|
|
borderColor: youLineColor,
|
|
backgroundColor: youFillColor,
|
|
pointBackgroundColor: youLineColor,
|
|
pointBorderColor: matchLineColor,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 0
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
r: {
|
|
min: 0,
|
|
max: 80,
|
|
ticks: { display: false, stepSize: 20 },
|
|
pointLabels: { font: { size: getFontSize(), weight: 'bold' }, color: '#FFF' },
|
|
angleLines: { color: radialLineColor },
|
|
grid: { drawticks: false, drawOnChartArea: false, circular: false }
|
|
}
|
|
},
|
|
plugins: { tooltip: { enabled: false }, legend: { display: false } }
|
|
}
|
|
});
|
|
}
|
|
|
|
// Build bottom charts (matches only)
|
|
for (let i = 1; i < Math.min(matches.length, 3); i++) {
|
|
const [name, prof] = matches[i];
|
|
const ctx = document.getElementById(`chart-${i+1}`).getContext('2d');
|
|
charts[i] = new Chart(ctx, {
|
|
type: 'radar',
|
|
data: {
|
|
labels,
|
|
datasets: [{
|
|
label: name,
|
|
data: prof.values,
|
|
fill: true,
|
|
borderColor: matchLineColor,
|
|
backgroundColor: matchFillColor,
|
|
pointBackgroundColor: matchLineColor,
|
|
pointRadius: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
r: {
|
|
min: 0,
|
|
max: 80,
|
|
ticks: { display: false, stepSize: 20 },
|
|
pointLabels: { font: { size: getBottomChartFontSize(), weight: 'bold' }, color: '#FFF' },
|
|
angleLines: { color: radialLineColor },
|
|
grid: { drawticks: false, drawOnChartArea: false, circular: false }
|
|
}
|
|
},
|
|
plugins: { tooltip: { enabled: false }, legend: { display: false } }
|
|
}
|
|
});
|
|
}
|
|
|
|
// Adjust label font sizes on resize to mirror inactive page
|
|
window.addEventListener('resize', () => {
|
|
if (charts[0]) {
|
|
charts[0].options.scales.r.pointLabels.font.size = getFontSize();
|
|
charts[0].update('none');
|
|
}
|
|
if (charts[1]) {
|
|
charts[1].options.scales.r.pointLabels.font.size = getBottomChartFontSize();
|
|
charts[1].update('none');
|
|
}
|
|
if (charts[2]) {
|
|
charts[2].options.scales.r.pointLabels.font.size = getBottomChartFontSize();
|
|
charts[2].update('none');
|
|
}
|
|
});
|
|
|
|
// Confetti like your previous result page: from left & right of best card
|
|
window.addEventListener('load', () => {
|
|
const bestCard = document.querySelector('.best-card');
|
|
if (!bestCard) return;
|
|
|
|
const rect = bestCard.getBoundingClientRect();
|
|
const colors = ['#BFB531', '#FFFFFF'];
|
|
|
|
function fire(xOrigin) {
|
|
confetti({
|
|
particleCount: 69,
|
|
angle: xOrigin < 0.5 ? 60 : 120,
|
|
spread: 69,
|
|
origin: {
|
|
x: xOrigin,
|
|
y: (rect.top + rect.height / 2) / window.innerHeight
|
|
},
|
|
colors
|
|
});
|
|
}
|
|
|
|
const leftOrigin = (rect.left) / window.innerWidth;
|
|
const rightOrigin = (rect.right) / window.innerWidth;
|
|
|
|
fire(leftOrigin);
|
|
fire(rightOrigin);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|