final
This commit is contained in:
Executable
+42
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>cannamatch about</title>
|
||||
<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">
|
||||
<p style="display:none">HUEEEEEEEEEEEEED 42069</p>
|
||||
<div class="logo-container">
|
||||
<a href="{{ url_for('index') }}">
|
||||
<img src="{{ url_for('static', filename='cm.png') }}" alt="Logo" class="logo">
|
||||
</a>
|
||||
</div>
|
||||
<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="aboutbody">
|
||||
<div class="abouttextcontainer">
|
||||
<p class="abouttext">Made for:</p>
|
||||
<div class="aboutlogocontainer">
|
||||
<a target="_blank" href="https://cicada.je"><img class="aboutlogo" src="static/scc.png" alt="scc"></img></a>
|
||||
</div>
|
||||
<p class="abouttext">Learn about Swiss Cannabis Research <a class="aboutlink" target="_blank" href="https://swisscannabis-research.ch">here</a>.</p>
|
||||
</div>
|
||||
<div class="abouttextcontainer">
|
||||
<p class="abouttext">Inspired by:</p>
|
||||
<div class="aboutlogocontainer">
|
||||
<a target="blank" href="https://cicada.je"><img class="aboutlogo" src="static/cic.png" alt="cic"></img></a>
|
||||
</div>
|
||||
<p class="abouttext">Learn about the Terpene Wheel <a class="aboutlink" target="blank" href="https://cicada.je/terpene-wheel/">here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+139
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>cannamatch interactive</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-dragdata.min.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/popup.js') }}"></script>
|
||||
<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">
|
||||
<div class="logo-container">
|
||||
<a href="{{ url_for('index') }}">
|
||||
<img src="{{ url_for('static', filename='cm.png') }}" alt="Logo" class="logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<button type="button" class="magenta-button" id="resetBtn" style="display:none">Reset</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"></h2>
|
||||
<span class="info-icon glow-text" onclick="togglePopup(event, 'popup-1')"></span>
|
||||
</div>
|
||||
<p class="info-text" id="info0-1"></p>
|
||||
<p class="info-text" id="info2-1"></p>
|
||||
</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 glow-info" id="popup-name-1"></h3>
|
||||
<h4 class="info-text glow-info">THC</h4>
|
||||
<p class="info-text" id="popup-info0-1"></p>
|
||||
<h4 class="info-text glow-info">CBD</h4>
|
||||
<p class="info-text" id="popup-info1-1"></p>
|
||||
<h4 class="info-text glow-info">GENETICS</h4>
|
||||
<p class="info-text" id="popup-info2-1"></p>
|
||||
<h4 class="info-text glow-info">TASTE</h4>
|
||||
<p class="info-text" id="popup-info3-1"></p>
|
||||
<h4 class="info-text glow-info">EFFECT</h4>
|
||||
<p class="info-text" id="popup-info4-1"></p>
|
||||
</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"></h2>
|
||||
<span class="info-icon glow-text" onclick="togglePopup(event, 'popup-2')"></span>
|
||||
</div>
|
||||
<p class="info-text" id="info0-2"></p>
|
||||
<p class="info-text" id="info2-2"></p>
|
||||
</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 glow-info" id="popup-name-2"></h3>
|
||||
<h4 class="info-text glow-info">THC</h4>
|
||||
<p class="info-text" id="popup-info0-2"></p>
|
||||
<h4 class="info-text glow-info">CBD</h4>
|
||||
<p class="info-text" id="popup-info1-2"></p>
|
||||
<h4 class="info-text glow-info">GENETICS</h4>
|
||||
<p class="info-text" id="popup-info2-2"></p>
|
||||
<h4 class="info-text glow-info">TASTE</h4>
|
||||
<p class="info-text" id="popup-info3-2"></p>
|
||||
<h4 class="info-text glow-info">EFFECT</h4>
|
||||
<p class="info-text" id="popup-info4-2"></p>
|
||||
</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"></h2>
|
||||
<span class="info-icon glow-text" onclick="togglePopup(event, 'popup-3')"></span>
|
||||
</div>
|
||||
<p class="info-text" id="info0-3"></p>
|
||||
<p class="info-text" id="info2-3"></p>
|
||||
</div>
|
||||
<canvas id="chart-3"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Popup for Maybe -->
|
||||
<div class="popup" id="popup-3">
|
||||
<div class="popup-content">
|
||||
<h3 class="info-text glow-info" id="popup-name-3"></h3>
|
||||
<h4 class="info-text glow-info">THC</h4>
|
||||
<p class="info-text" id="popup-info0-3"></p>
|
||||
<h4 class="info-text glow-info">CBD</h4>
|
||||
<p class="info-text" id="popup-info1-3"></p>
|
||||
<h4 class="info-text glow-info">GENETICS</h4>
|
||||
<p class="info-text" id="popup-info2-3"></p>
|
||||
<h4 class="info-text glow-info">TASTE</h4>
|
||||
<p class="info-text" id="popup-info3-3"></p>
|
||||
<h4 class="info-text glow-info">EFFECT</h4>
|
||||
<p class="info-text" id="popup-info4-3"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.appData = {
|
||||
profiles: {{ profiles | tojson }},
|
||||
initialUserData: [39,39,39,39,39,39]
|
||||
};
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/inactive.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+102
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>cannamatch profiles</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<!-- Popup helper (same as inactive) -->
|
||||
<script src="{{ url_for('static', filename='js/popup.js') }}"></script>
|
||||
<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">
|
||||
<div class="logo-container">
|
||||
<a href="{{ url_for('index') }}">
|
||||
<img src="{{ url_for('static', filename='cm.png') }}" alt="Logo" class="logo">
|
||||
</a>
|
||||
</div>
|
||||
<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="profile-grid">
|
||||
{% for name, values in profiles.items() %}
|
||||
<div class="profile-profile-card">
|
||||
<div class="info-block profile-info-block">
|
||||
<div class="title-with-icon">
|
||||
<div class="profile-name"><h2 class="glow-info">{{ name }}</h2></div>
|
||||
<span class="info-icon profile-info-icon glow-text" onclick="togglePopup(event, 'popup-{{ loop.index }}')"></span>
|
||||
<p class="info-text">{{ values.info_text0 }}</p>
|
||||
<p class="info-text">{{ values.info_text2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="chart-{{ loop.index }}"></canvas>
|
||||
<div class="popup" id="popup-{{ loop.index }}">
|
||||
<div class="popup-content profile-popup-content">
|
||||
<h3 class="info-text" id="popup-name-{{ loop.index }}">{{ name }}</h3>
|
||||
<h4 class="info-text glow-info">THC</h4>
|
||||
<p class="info-text" id="popup-info0-1">{{ values.info_text0 }}</p>
|
||||
<h4 class="info-text glow-info">CBD</h4>
|
||||
<p class="info-text" id="popup-info1-1">{{ values.info_text1 }}</p>
|
||||
<h4 class="info-text glow-info">GENETICS</h4>
|
||||
<p class="info-text" id="popup-info2-1">{{ values.info_text2 }}</p>
|
||||
<h4 class="info-text glow-info">TASTE</h4>
|
||||
<p class="info-text" id="popup-info3-1">{{ values.info_text3 }}</p>
|
||||
<h4 class="info-text glow-info">EFFECT</h4>
|
||||
<p class="info-text" id="popup-info4-1">{{ values.info_text4 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const labels = ['Energy', 'Calm', 'Relax', 'Sleep', 'Focus', 'Inspire'];
|
||||
|
||||
const profiles = {{ profiles | tojson }};
|
||||
|
||||
Object.entries(profiles).forEach(([name, data], index) => {
|
||||
const ctx = document.getElementById(`chart-${index + 1}`).getContext('2d');
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: name,
|
||||
data: data.values,
|
||||
fill: true,
|
||||
borderColor: 'rgba(191,181,49,1)',
|
||||
pointBackgroundColor: 'rgba(0,0,0,0)',
|
||||
pointBorderColor: 'rgba(191,181,49,1)',
|
||||
backgroundColor: 'rgba(191,181,49,0.420)',
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 0
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
r: {
|
||||
min: 0,
|
||||
max: 80,
|
||||
ticks: { stepSize: 20, display: false },
|
||||
pointLabels: { font: { size: 15, weight: 'bold' }, color: '#FFF' },
|
||||
grid: { color: 'rgba(255,255,255,0.420)', circular: false },
|
||||
angleLines: { color: 'rgba(255,255,255,0.69)' }
|
||||
}
|
||||
},
|
||||
plugins: { tooltip: { enabled: false}, legend: { display: false } }
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Executable
+67
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>cannamatch quiz</title>
|
||||
<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">
|
||||
<div class="logo-container">
|
||||
<a href="{{ url_for('index') }}">
|
||||
<img src="{{ url_for('static', filename='cm.png') }}" alt="Logo" class="logo">
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
<h2>What are you looking for?</h2>
|
||||
<form method="POST">
|
||||
<div class="cards-container">
|
||||
{% set categories = [
|
||||
{'name': 'Energy', 'desc': 'Boost endurance and alertness.'},
|
||||
{'name': 'Calm', 'desc': 'Stay grounded and centered.'},
|
||||
{'name': 'Relax', 'desc': 'Ease tension in body and mind.'},
|
||||
{'name': 'Sleep', 'desc': 'Support restfulness and recovery.'},
|
||||
{'name': 'Focus', 'desc': 'Enhance concentration and clarity.'},
|
||||
{'name': 'Inspire', 'desc': 'Spark creativity and new ideas.'}
|
||||
] %}
|
||||
{% for cat in categories %}
|
||||
<div class="category-card" onclick="toggleCard(this, {{ loop.index }})">
|
||||
<h3>{{ cat.name }}</h3>
|
||||
<p>{{ cat.desc }}</p>
|
||||
<input type="hidden" id="point{{ loop.index }}" name="point{{ loop.index }}" value="20">
|
||||
<div class="checkmark">
|
||||
<span class="first">+</span><span class="second">+</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
function toggleCard(card, index) {
|
||||
const input = document.getElementById(`point${index}`);
|
||||
const values = [20, 40, 80];
|
||||
let value = parseInt(input.value, 10);
|
||||
if (isNaN(value)) value = 20;
|
||||
|
||||
// Find next value in the cycle
|
||||
const nextValue = values[(values.indexOf(value) + 1) % values.length];
|
||||
input.value = nextValue;
|
||||
|
||||
card.classList.remove("active", "emphasis");
|
||||
if (nextValue === 40) card.classList.add("active");
|
||||
else if (nextValue === 80) card.classList.add("emphasis");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+299
@@ -0,0 +1,299 @@
|
||||
<!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/[email protected]/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>
|
||||
Reference in New Issue
Block a user