<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Addiction Recovery Spinner</title>
<style>
.spinner-container {
position: relative;
width: 500px;
height: 500px;
border: 10px solid #333;
border-radius: 50%;
margin: 50px auto;
overflow: hidden;
}
.spinner {
width: 100%;
height: 100%;
transition: transform 4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
transform-origin: 50% 50%;
}
.spinner div {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(50% 50%, 100% 0, 100% 100%);
transform-origin: 50% 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: Arial, sans-serif;
font-size: 14px;
color: #fff;
}
/* Add individual styles for segments here */
/* ... */
#spin-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#result {
text-align: center;
margin-top: 20px;
font-family: Arial, sans-serif;
font-size: 24px;
}
</style>
</head>
<body>
<div class="spinner-container">
<div class="spinner" id="spinner">
<!-- Segments will be added by JavaScript -->
</div>
</div>
<button id="spin-button">Spin</button>
<div id="result"></div>
<script>
const segments = [
"Self-Care", "Gratitude", "Community", "Honesty", "Accountability", "Courage",
"Forgiveness", "Compassion", "Resilience", "Hope", "Spirituality", "Discipline",
"Awareness", "Patience", "Humility", "Perseverance", "Curiosity", "Kindness",
"Acceptance", "Wisdom", "Trust", "Freedom", "Love", "Joy"
];
const spinner = document.getElementById('spinner');
const resultDisplay = document.getElementById('result');
// Generate segments and append to the spinner
segments.forEach((segment, index) => {
const segmentDiv = document.createElement('div');
segmentDiv.style.transform = `rotate(${index * (360 / segments.length)}deg)`;
segmentDiv.style.backgroundColor = `hsl(${index * (360 / segments.length)}, 100%, 50%)`; // Color varies by hue
segmentDiv.innerText = segment;
spinner.appendChild(segmentDiv);
});
document.getElementById('spin-button').addEventListener('click', () => {
const degree = Math.floor(Math.random() * 360) + 1440; // Ensure at least 4 rotations
spinner.style.transform = `rotate(${degree}deg)`;
// Determine the segment it landed on after the spin
spinner.addEventListener('transitionend', () => {
const actualDegree = degree % 360;
const segmentDegree = 360 / segments.length;
const landedSegment = Math.floor((360 - actualDegree) / segmentDegree);
resultDisplay.innerText = `You landed on: ${segments[landedSegment]}`;
// Handle if landed on border between segments, if necessary
}, {once: true});
});
</script>
</body>
</html>