A little something for when you don't know what you need today. ♡ Visitors can spin the wheel and get a random suggestion or message.
You can make the options anything you like — activities, affirmations, self-care ideas, or even little prompts for the day.
Code:
<style>
/* =========================================
WHAT DO YOU NEED TODAY?
========================================= */
.need-wheel {
width: 100%;
max-width: 300px;
margin: 15px auto;
padding: 12px;
box-sizing: border-box;
background: linear-gradient(
to bottom,
#FFFFFF,
#FFF4FC
);
border: 2px solid #C66BC2;
border-radius: 14px;
font-family: VERDANA;
text-align: center;
color: #70416F;
box-shadow:
4px 4px 0 #E4ACDF;
}
/* TITLE */
.need-wheel-title {
font-family: Unkempt, cursive;
font-size: 20px;
font-weight: bold;
color: #8E4C88;
margin-bottom: 2px;
}
.need-wheel-subtitle {
font-size: 14px;
color: #A477A1;
margin-bottom: 12px;
}
/* =========================================
WHEEL AREA
========================================= */
.wheel-area {
position: relative;
width: 210px;
height: 210px;
margin: 0 auto 12px;
}
/* POINTER */
.wheel-pointer {
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 18px solid #8E4C88;
}
/* =========================================
WHEEL
========================================= */
.wheel {
position: absolute;
top: 0;
left: 0;
width: 210px;
height: 210px;
border-radius: 50%;
border: 4px solid #ba4395;
box-sizing: border-box;
background: conic-gradient(
#F7C8F0 0deg 45deg,
#FFFFFF 45deg 90deg,
#EBC4E7 90deg 135deg,
#FFF8FD 135deg 180deg,
#F5C7EE 180deg 225deg,
#FFFFFF 225deg 270deg,
#E6B8E2 270deg 315deg,
#FFF8FD 315deg 360deg
);
/* NO SHADOW */
transition: transform 4s cubic-bezier(
0.15,
0.85,
0.25,
1
);
}
/* =========================================
QUESTION MARKS
========================================= */
.wheel-question {
position: absolute;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
font-family: Unkempt, cursive;
font-size: 24px;
font-weight: bold;
color: #8E4C88;
pointer-events: none;
}
/* QUESTION MARK POSITIONS */
.question-1 {
top: 13px;
left: 87px;
}
.question-2 {
top: 35px;
right: 34px;
}
.question-3 {
top: 88px;
right: 12px;
}
.question-4 {
bottom: 25px;
right: 43px;
}
.question-5 {
bottom: 13px;
left: 87px;
}
.question-6 {
bottom: 37px;
left: 35px;
}
.question-7 {
top: 88px;
left: 12px;
}
.question-8 {
top: 35px;
left: 34px;
}
/* =========================================
CENTER BUTTON
========================================= */
.spin-button {
position: absolute;
z-index: 20;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 62px;
height: 62px;
border-radius: 50%;
border: 3px solid #ba4395;
background: linear-gradient(
to bottom,
#FFFFFF,
#E9B8E3
);
color: #7D3E76;
font-family: Unkempt, cursive;
font-size: 13px;
font-weight: bold;
cursor: pointer;
box-shadow:
2px 3px 0 #C98BC4;
}
.spin-button:hover {
background: linear-gradient(
to bottom,
#FFFFFF,
#F0C9EC
);
}
.spin-button:active {
transform: translate(-50%, -47%);
box-shadow:
1px 1px 0 #C98BC4;
}
/* =========================================
RESULT
========================================= */
.need-result {
width: 100%;
min-height: 55px;
box-sizing: border-box;
padding: 10px;
background: #FFFFFF;
border: 1px dotted #C66BC2;
border-radius: 9px;
color: #70416F;
font-size: 10px;
line-height: 1.45;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
/* RESULT CATEGORY */
.need-result #needCategory {
font-family: Unkempt, cursive;
font-size: 17px;
font-weight: bold;
color: #A05298;
margin-bottom: 3px;
}
/* RESULT MESSAGE */
.need-result #needMessage {
width: 100%;
color: #8B6688;
font-family: Verdana;
font-size: 14px;
line-height: 1.45;
text-align: center;
}
/* FOOTER */
.need-footer {
margin-top: 7px;
font-size: 8px;
color: #B17BAB;
letter-spacing: 0.5px;
}
</style>
<div class="need-wheel">
<div class="need-wheel-subtitle">
What do you need today?
</div>
<!-- WHEEL -->
<div class="wheel-area">
<div class="wheel-pointer"></div>
<div id="needWheel" class="wheel">
<div class="wheel-question question-1">?</div>
<div class="wheel-question question-2">?</div>
<div class="wheel-question question-3">?</div>
<div class="wheel-question question-4">?</div>
<div class="wheel-question question-5">?</div>
<div class="wheel-question question-6">?</div>
<div class="wheel-question question-7">?</div>
<div class="wheel-question question-8">?</div>
</div>
<!-- SPIN BUTTON -->
<button
class="spin-button"
onclick="spinNeedWheel()"
>
SPIN
</button
></div>
<!-- RESULT BOX -->
<div class="need-result">
<div id="needCategory">
YOUR MESSAGE
</div>
<div id="needMessage">
Spin the wheel to see what you need today
</div>
</div>
<div class="need-footer">
Come back whenever you need a little something
</div>
</div>
<script>
const needResults = [
{
category: "REST",
message: "You do not have to be productive today. Give yourself permission to slow down."
},
{
category: "COMFORT",
message: "Put on something cozy, make your favorite drink, and give yourself a little softness."
},
{
category: "COURAGE",
message: "You do not have to feel ready. Take the first small step anyway."
},
{
category: "CONFIDENCE",
message: "Remember who you are. You are more capable than you give yourself credit for."
},
{
category: "JOY",
message: "Do something simply because it makes you happy. You do not need a reason."
},
{
category: "PATIENCE",
message: "Not everything has to happen right now. Let things unfold in their own time."
},
{
category: "MOTIVATION",
message: "Start with one tiny thing. Momentum can come after you begin."
},
{
category: "INSPIRATION",
message: "Go somewhere, read something, or listen to something that makes you curious."
}
];
let wheelRotation = 0;
let spinning = false;
function spinNeedWheel() {
if (spinning) return;
spinning = true;
const resultIndex =
Math.floor(
Math.random() * needResults.length
);
const result =
needResults[resultIndex];
const extraSpins =
5 + Math.floor(Math.random() * 4);
const sectionAngle = 45;
const targetAngle =
360 -
(resultIndex * sectionAngle + sectionAngle / 2);
wheelRotation +=
extraSpins * 360 +
targetAngle;
const wheel =
document.getElementById("needWheel");
wheel.style.transform =
"rotate(" + wheelRotation + "deg)";
setTimeout(function() {
document.getElementById(
"needCategory"
).textContent =
result.category;
document.getElementById(
"needMessage"
).textContent =
result.message;
spinning = false;
}, 4100);
}
</script>
No comments:
Post a Comment