Report Blog Entry
in undertale 
my widget :)
its located in the right corner of your page, takes some place but its not so bad. Is supposed to also appears on mobile but I haven't tested that part yet. Might update it later but it works for now, it took me so much time but I like making things I haven`t seen before and how mc. TwT
Tell me in the comments if they are any problems. :)
So copy paste the following code in ur about me section, and should work!
<style>
/*
INTERACTIVE MONSTER CANDY BOWL
*/
#candy-widget {
position: fixed !important;
right: 12px !important;
bottom: 12px !important;
top: auto !important;
left: auto !important;
z-index: 9999;
width: 280px;
box-sizing: border-box;
padding: 12px 12px 18px;
background: #000;
color: #fff;
border: 4px solid #fff;
box-shadow:
0 0 0 4px #000,
7px 7px 0 rgba(0, 0, 0, 0.45);
font-family: "Courier New", Courier, monospace;
font-size: 15px;
line-height: 1.4;
transform: scale(0.76);
transform-origin: bottom right;
margin: 0 !important;
}
/* Hide the checkbox controls */
#candy-widget input {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* ---------- Bowl scene ---------- */
.candy-scene {
position: relative;
height: 135px;
overflow: hidden;
margin-bottom: 8px;
background:
linear-gradient(
to bottom,
#151515 0%,
#151515 77%,
#393939 78%,
#222 100%
);
border: 2px solid #777;
}
/* ---------- Candy bowl ---------- */
/* Back/inside part of the bowl */
.candy-bowl-back {
position: absolute;
left: 50%;
bottom: 45px;
z-index: 1;
width: 115px;
height: 30px;
background: #252525;
border: 4px solid #fff;
border-radius: 50%;
transform: translateX(-50%);
box-shadow:
inset 0 5px 0 #555,
inset 0 -5px 0 #111;
}
/* Candy sits above the back but underneath the front */
.candy {
z-index: 2;
}
/* Front of the bowl */
.candy-bowl-front {
position: absolute;
left: 50%;
bottom: 18px;
z-index: 3;
width: 115px;
height: 48px;
background: #777;
border: 4px solid #fff;
border-top: 3px solid #d8d8d8;
border-radius: 8px 8px 55px 55px;
transform: translateX(-50%);
box-shadow:
inset 0 -12px 0 #444,
0 6px 0 rgba(0, 0, 0, 0.45);
}
/* Bright top edge of the bowl */
.candy-bowl-front::before {
content: "";
position: absolute;
top: -2px;
left: -4.1px;
width: 106px;
height: 2px;
border: 4px solid #fff;
border-top: 0;
border-radius: 0 0 50% 50%;
pointer-events: none;
}
/* ---------- Candy pieces ---------- */
.candy {
position: absolute;
width: 19px;
height: 12px;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 5px currentColor;
}
.candy::before,
.candy::after {
content: "";
position: absolute;
top: 2px;
width: 7px;
height: 7px;
background: currentColor;
border: 1px solid #fff;
transform: rotate(45deg);
}
.candy::before {
left: -8px;
}
.candy::after {
right: -8px;
}
.candy-pink {
left: 101px;
bottom: 68px;
color: #ff79bd;
background: #ff79bd;
transform: rotate(-7deg);
}
.candy-yellow {
left: 128px;
bottom: 66px;
color: #ffff55;
background: #ffff55;
transform: rotate(8deg);
}
.candy-blue {
left: 150px;
bottom: 59px;
color: #58d9ff;
background: #58d9ff;
transform: rotate(-4deg);
}
.candy-green {
left: 116px;
bottom: 63px;
color: #69ff82;
background: #69ff82;
transform: rotate(5deg);
}
.candy-red {
left: 80px;
bottom: 62px;
color: #ff5d5d;
background: #ff5d5d;
transform: rotate(-10deg);
}
/* Remove candies after each choice */
#take-candy-1:checked ~ .candy-scene .candy-pink {
display: none;
}
#take-candy-2:checked ~ .candy-scene .candy-yellow {
display: none;
}
#take-candy-3:checked ~ .candy-scene .candy-blue {
display: none;
}
/* ---------- Interaction buttons ---------- */
.candy-action {
position: absolute;
inset: 0;
z-index: 20;
display: none;
cursor: pointer;
}
.candy-action-text {
position: absolute;
top: 9px;
left: 12px;
padding: 3px 7px;
color: #ffff00;
background: #000;
border: 1px solid #ffff00;
font-size: 13px;
font-weight: bold;
}
/* First interaction is visible initially */
.candy-action-1 {
display: block;
}
/* After candy 1, show interaction 2 */
#take-candy-1:checked ~ .candy-scene .candy-action-1 {
display: none;
}
#take-candy-1:checked ~ .candy-scene .candy-action-2 {
display: block;
}
/* After candy 2, show interaction 3 */
#take-candy-2:checked ~ .candy-scene .candy-action-2 {
display: none;
}
#take-candy-2:checked ~ .candy-scene .candy-action-3 {
display: block;
}
/* After candy 3, show interaction 4 */
#take-candy-3:checked ~ .candy-scene .candy-action-3 {
display: none;
}
#take-candy-3:checked ~ .candy-scene .candy-action-4 {
display: block;
}
/* After spilling it, show final interaction */
#spill-candy:checked ~ .candy-scene .candy-action-4 {
display: none;
}
#spill-candy:checked ~ .candy-scene .candy-action-5 {
display: block;
}
/* ---------- Dialogue ---------- */
.candy-dialogue {
min-height: 70px;
padding: 2px 4px 0;
font-size: 14px;
line-height: 1.3;
}
.candy-message {
display: none;
}
.candy-message::before {
content: "* ";
color: #fff;
}
/* Initial message */
.candy-message-0 {
display: block;
}
/* First candy */
#take-candy-1:checked ~ .candy-dialogue .candy-message-0 {
display: none;
}
#take-candy-1:checked ~ .candy-dialogue .candy-message-1 {
display: block;
}
/* Second candy */
#take-candy-2:checked ~ .candy-dialogue .candy-message-1 {
display: none;
}
#take-candy-2:checked ~ .candy-dialogue .candy-message-2 {
display: block;
}
/* Third candy */
#take-candy-3:checked ~ .candy-dialogue .candy-message-2 {
display: none;
}
#take-candy-3:checked ~ .candy-dialogue .candy-message-3 {
display: block;
}
/* Spill message */
#spill-candy:checked ~ .candy-dialogue .candy-message-3 {
display: none;
}
#spill-candy:checked ~ .candy-dialogue .candy-message-4 {
display: block;
}
/* Final message */
#judge-candy:checked ~ .candy-dialogue .candy-message-4 {
display: none;
}
#judge-candy:checked ~ .candy-dialogue .candy-message-5 {
display: block;
color: #ff5b5b;
}
/* ---------- Bowl spill ---------- */
#spill-candy:checked ~ .candy-scene .candy-sparkle {
display: none;
}
#spill-candy:checked ~ .candy-scene .candy-bowl-back {
display: none;
}
#spill-candy:checked ~ .candy-scene .candy-bowl-front {
left: 90px;
animation: bowl-spill 0.6s steps(6, end) forwards;
}
@keyframes bowl-spill {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(72deg);
}
}
/* Hide original candy during spill */
#spill-candy:checked ~ .candy-scene .candy-pink,
#spill-candy:checked ~ .candy-scene .candy-yellow,
#spill-candy:checked ~ .candy-scene .candy-blue,
#spill-candy:checked ~ .candy-scene .candy-green,
#spill-candy:checked ~ .candy-scene .candy-red {
display: none;
}
/* ---------- Spilled candy pieces ---------- */
.spilled-candy {
display: none;
opacity: 0;
}
#spill-candy:checked ~ .candy-scene .spilled-candy {
display: block;
}
.spilled-1 {
color: #ff79bd;
background: #ff79bd;
animation: candy-spill-1 0.8s 0.15s steps(6, end) forwards;
}
.spilled-2 {
color: #ffff55;
background: #ffff55;
animation: candy-spill-2 0.75s 0.2s steps(6, end) forwards;
}
.spilled-3 {
color: #58d9ff;
background: #58d9ff;
animation: candy-spill-3 0.9s 0.1s steps(6, end) forwards;
}
.spilled-4 {
color: #69ff82;
background: #69ff82;
animation: candy-spill-4 0.85s 0.25s steps(6, end) forwards;
}
.spilled-5 {
color: #ff5d5d;
background: #ff5d5d;
animation: candy-spill-5 0.8s 0.18s steps(6, end) forwards;
}
@keyframes candy-spill-1 {
from {
left: 110px;
top: 67px;
opacity: 1;
}
to {
left: 150px;
top: 106px;
opacity: 1;
transform: rotate(55deg);
}
}
@keyframes candy-spill-2 {
from {
left: 110px;
top: 67px;
opacity: 1;
}
to {
left: 190px;
top: 110px;
opacity: 1;
transform: rotate(-30deg);
}
}
@keyframes candy-spill-3 {
from {
left: 110px;
top: 67px;
opacity: 1;
}
to {
left: 222px;
top: 96px;
opacity: 1;
transform: rotate(70deg);
}
}
@keyframes candy-spill-4 {
from {
left: 110px;
top: 67px;
opacity: 1;
}
to {
left: 118px;
top: 112px;
opacity: 1;
transform: rotate(-65deg);
}
}
@keyframes candy-spill-5 {
from {
left: 110px;
top: 67px;
opacity: 1;
}
to {
left: 245px;
top: 112px;
opacity: 1;
transform: rotate(20deg);
}
}
/* ---------- Tiny hover credit ---------- */
.soul-credit {
position: absolute;
right: 5px;
bottom: 4px;
z-index: 30;
display: block;
width: 14px;
height: 14px;
color: #777 !important;
background: transparent !important;
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 14px;
text-align: center;
text-decoration: none !important;
cursor: help;
opacity: 0.65;
}
/* Credit information displayed on hover or keyboard focus */
.soul-credit::after {
content: "credit: playback";
position: absolute;
right: 0;
bottom: 19px;
z-index: 31;
width: max-content;
padding: 3px 5px;
color: #fff;
background: #000;
border: 1px solid #fff;
font-family: "Courier New", Courier, monospace;
font-size: 11px;
font-weight: normal;
line-height: 1.2;
letter-spacing: 0;
text-decoration: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
white-space: nowrap;
}
.soul-credit:hover,
.soul-credit:focus {
color: #fff !important;
opacity: 1;
outline: none;
}
.soul-credit:hover::after,
.soul-credit:focus::after {
opacity: 1;
visibility: visible;
}
/* ---------- Phone sizing ---------- */
@media screen and (max-width: 800px) {
#candy-widget {
right: 5px !important;
bottom: 5px !important;
transform: scale(0.62);
transform-origin: bottom right;
}
}
</style>
<div id="candy-widget">
<!-- These invisible checkboxes remember each interaction -->
<input type="checkbox" id="take-candy-1">
<input type="checkbox" id="take-candy-2">
<input type="checkbox" id="take-candy-3">
<input type="checkbox" id="spill-candy">
<input type="checkbox" id="judge-candy">
<div class="candy-scene">
<!-- Back of the bowl -->
<span class="candy-bowl-back"></span>
<!-- Candy inside the bowl -->
<span class="candy candy-pink"></span>
<span class="candy candy-yellow"></span>
<span class="candy candy-blue"></span>
<span class="candy candy-green"></span>
<span class="candy candy-red"></span>
<!-- Front of the bowl -->
<span class="candy-bowl-front"></span>
<!-- Candy shown after the bowl spills -->
<span class="candy spilled-candy spilled-1"></span>
<span class="candy spilled-candy spilled-2"></span>
<span class="candy spilled-candy spilled-3"></span>
<span class="candy spilled-candy spilled-4"></span>
<span class="candy spilled-candy spilled-5"></span>
<!-- Click 1 -->
<label for="take-candy-1" class="candy-action candy-action-1">
<span class="candy-action-text">Take one :)</span>
</label>
<!-- Click 2 -->
<label for="take-candy-2" class="candy-action candy-action-2">
<span class="candy-action-text">Take another</span>
</label>
<!-- Click 3 -->
<label for="take-candy-3" class="candy-action candy-action-3">
<span class="candy-action-text">Take another</span>
</label>
<!-- Click 4 causes the spill -->
<label for="spill-candy" class="candy-action candy-action-4">
<span class="candy-action-text">Take another</span>
</label>
<!-- Click 5 shows the final message -->
<label for="judge-candy" class="candy-action candy-action-5">
<span class="candy-action-text">Check the bowl</span>
</label>
</div>
<div class="candy-dialogue">
<div class="candy-message candy-message-0">
A bowl filled with candy.<br>
</div>
<div class="candy-message candy-message-1">
You took a candy.
</div>
<div class="candy-message candy-message-2">
You took more candy.<br>
How disgusting...
</div>
<div class="candy-message candy-message-3">
You take another piece.<br>
You feel like the scum of the earth...
</div>
<div class="candy-message candy-message-4">
You took too much too fast.<br>
The candy spills onto the floor.
</div>
<div class="candy-message candy-message-5">
Look at what you've done.
</div>
</div>
<!-- Please keep the credit when reposting -->
<a
class="soul-credit"
href="https://spacehey.com/playback"
target="_blank"
title="Credit: playback"
aria-label="Credit: playback"
>ⓘ</a>
</div>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
Call_me_Ve
Oh my god, this is amazing!!!!
OMG THX!!!
by playback; ; Report
🩷🩷🩷
by Call_me_Ve; ; Report