140 lines
5.9 KiB
HTML
Executable File
140 lines
5.9 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 interactive</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@2.0.2/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>
|