<!DOCTYPE html>
<html>
<style>
/* Common draggable container styling */
.draggable {
position: absolute;
text-align: center;
padding: 10px;
cursor: move;
z-index: 10;
color: #fff;
}
/* Set image size */
.draggable img {
width: 200px; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
</style>
<body>
<!-- First Draggable Image -->
<div id="image1" class="draggable">
<div id="image1header">
<img src="https://64.media.tumblr.com/02bb6b9961ff94e36daeaec97d9b2444/04a1bc51c0d6e74c-df/s640x960/984ef2e6ce037110c6742144dcae31037a641bf9.pnj" alt="Image 1">
</div>
</div>
<div id="image2" class="draggable">
<div id="image2header">
<img src=https://64.media.tumblr.com/db725d25aa3a9b2b9f6fc6451594aed3/04a1bc51c0d6e74c-b2/s540x810/e5ed73022c7fe552c3985aad173d1645bfe3e42f.pnj>
</div>
</div>
<div id="image3" class="draggable">
<div id="image3header">
<img src=https://64.media.tumblr.com/7d81ba5da7a4939d5b1695f4f0548c9c/04a1bc51c0d6e74c-7c/s1280x1920/bb7f4b8f3bf932f77822ff13ec502e407257d805.pnj>
</div>
</div>
<script>
dragElement(document.getElementById("image1"));
dragElement(document.getElementById("image2"));
dragElement(document.getElementById("image3"));
function dragElement(elmnt) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
Your parents have to work long hours every day, and their jobs are particularly challenging because they are police officers. Your birth added some extra difficulty for them, as this was the second year China’s One-Child Policy had been implemented.
Many Chinese people were anxious—worried that no one would care for them in old age, or that a single child might struggle to manage. Overpopulation had become a significant issue, meaning each family could only have one child, and your family wasn’t eligible for any exemptions.
Your older brother is two years older than you, making you the second child. Gradually, you came to understand the risky choice your parents had made. In some ways, you were the clearest proof of their defiance. From the moment you were born, you carried the weight of potentially having to escape massive government fines, which could reach hundreds of thousands of yuan. Can you do it?
[[Yes! I can do it. I was born to run from the law.]]
[[No, I can't.]]Despite the challenges, your parents have no regrets about having you. They look at you with determination and decide to register you as the only member of the seperate household, meaning that, according to official records, your family consists of just you. You think it’s not a big deal because you know that you all still live together and will always be a family.
[[Go to school]]This photo was framed, and every guest who visited your home could see this happy family photo.
[[Suddenly, there was a knock at the door]]
<!DOCTYPE html>
<html>
<style>
/* Common draggable container styling */
.draggable {
position: absolute;
text-align: center;
padding: 10px;
cursor: move;
z-index: 10;
color: #fff;
}
/* Set image size */
.draggable img {
width: 1000px; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
</style>
<body>
<!-- First Draggable Image -->
<div id="image1" class="draggable">
<div id="image1header">
<img src="https://64.media.tumblr.com/1ac561c39d6ff032860aa5d89acb23ab/04a1bc51c0d6e74c-79/s2048x3072/7c0e4d9214d20a8a692219fd8a3bd17dfb47a2a1.pnj" alt="Image 1">
</div>
</div>
<!-- Second Draggable Image -->
<div id="image2" class="draggable">
<div id="image2header">
<img src=https://64.media.tumblr.com/31a9fff3dbdad5e4055ecef10ddb4c3c/04a1bc51c0d6e74c-63/s2048x3072/c1a343413f2f64fec7d19e3743f7d3ad29b45aee.pnj>
</div>
</div>
<script>
// Make the first and second image containers draggable
dragElement(document.getElementById("image1"));
dragElement(document.getElementById("image2"));
function dragElement(elmnt) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from: */
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV: */
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// Get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// Call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// Calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// Set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* Stop moving when mouse button is released: */
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
''You were born in 1980.''
A soft, bright light filtered through a crack, and as you opened your eyes, a warm glow around you. Your life officially began. Your Mom, Dad, and brother gathered around you, the operation room filled with joy. You felt hopeful about becoming the newest member of the family. At this moment, you choose to...
[[Cry]]
[[Smile]]
<!DOCTYPE html>
<html>
<style>
#mydiv {
position: absolute;
text-align: center;
padding: 10px;
cursor: move;
z-index: 10;
}
/* Set image size */
#mydiv img {
width: 1000px; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
</style>
<body>
<div id="mydiv">
<div id="mydivheader">
<img src=https://64.media.tumblr.com/5e693169fd6631745af4fce6181619d8/04a1bc51c0d6e74c-03/s2048x3072/92e814e7fac526be068e46cbd0337601351908c7.pnj>
</div>
</div>
<script>
// Make the DIV element draggable
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from: */
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV: */
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released: */
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
The nurse thought you were suffocating and quickly patted your back until you started to cry.
[[Cry]] <!DOCTYPE html>
<html>
<style>
#mydiv {
position: absolute;
text-align: center;
padding: 10px;
cursor: move;
z-index: 10;
}
/* Set image size */
#mydiv img {
width: 500px; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
</style>
<body>
<div id="mydiv">
<div id="mydivheader">
<img src=https://64.media.tumblr.com/452db9998d9059a84ef7b688e722b107/04a1bc51c0d6e74c-c7/s2048x3072/a58c70dceafee08988543bf1621f97850d26971d.pnj>
</div>
</div>
<script>
// Make the DIV element draggable
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from: */
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV: */
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released: */
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
You still don't have a birth certificate, nor have you been added to the household registration (your family's official records). You thought it didn't really matter—until it was time to go to kindergarten, and you needed an ID card.
[[Go get one]]<!DOCTYPE html>
<html>
<style>
#mydiv {
position: absolute;
text-align: center;
padding: 10px;
cursor: move;
z-index: 10;
}
/* Set image size */
#mydiv img {
width: 1000px; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
</style>
<body>
<div id="mydiv">
<div id="mydivheader">
<img src=https://64.media.tumblr.com/5e693169fd6631745af4fce6181619d8/04a1bc51c0d6e74c-03/s2048x3072/92e814e7fac526be068e46cbd0337601351908c7.pnj>
</div>
</div>
<script>
// Make the DIV element draggable
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from: */
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV: */
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released: */
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
But you’ve already been born, and this is a fate you cannot escape.
[[Yes! I can do it. I was born to run from the law.]] Your parents took you to the government office to verify your birth and family information. However, they also discovered that you had an older brother, which resulted in a fine of 200,000 yuan.
[[NO!!]]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Randomly Bouncing Texts</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
height: 100vh;
}
.bouncing-text {
position: absolute;
font-size: 36px;
}
</style>
</head>
<body>
<div class="bouncing-text" id="text1">💸</div>
<div class="bouncing-text" id="text2">💸</div>
<div class="bouncing-text" id="text3">💸</div>
<div class="bouncing-text" id="text4">💸</div>
<div class="bouncing-text" id="text5">💸</div>
<script>
// Function to initialize and animate a text element
function createBouncingText(elementId) {
const element = document.getElementById(elementId);
// Screen dimensions
let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;
// Text dimensions
let textWidth = element.offsetWidth;
let textHeight = element.offsetHeight;
// Random initial position and speed
let x = Math.random() * (screenWidth - textWidth);
let y = Math.random() * (screenHeight - textHeight);
let xSpeed = (Math.random() < 0.5 ? 1 : -1) * (2 + Math.random() * 4);
let ySpeed = (Math.random() < 0.5 ? 1 : -1) * (2 + Math.random() * 4);
// Function to update position
function updatePosition() {
x += xSpeed;
y += ySpeed;
// Bounce off left and right edges
if (x <= 0 || x >= screenWidth - textWidth) {
xSpeed = -xSpeed;
randomizeColor();
}
// Bounce off top and bottom edges
if (y <= 0 || y >= screenHeight - textHeight) {
ySpeed = -ySpeed;
randomizeColor();
}
// Update element position
element.style.left = `${x}px`;
element.style.top = `${y}px`;
// Continue animation
requestAnimationFrame(updatePosition);
}
// Randomize text color
function randomizeColor() {
const randomColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
element.style.color = randomColor;
}
// Adjust dimensions on resize
window.addEventListener('resize', () => {
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
textWidth = element.offsetWidth;
textHeight = element.offsetHeight;
});
// Start animation
element.style.left = `${x}px`;
element.style.top = `${y}px`;
updatePosition();
}
createBouncingText("text1");
createBouncingText("text2");
createBouncingText("text3");
createBouncingText("text4");
createBouncingText("text5");
</script>
</body>
</html><!DOCTYPE html>
<html>
<style>
#mydiv {
position: absolute;
text-align: center;
padding: 10px;
cursor: move;
z-index: 10;
}
/* Set image size */
#mydiv img {
width: 500px; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
</style>
<body>
<div id="mydiv">
<div id="mydivheader">
<img src=https://64.media.tumblr.com/452db9998d9059a84ef7b688e722b107/04a1bc51c0d6e74c-c7/s2048x3072/a58c70dceafee08988543bf1621f97850d26971d.pnj>
</div>
</div>
<script>
// Make the DIV element draggable
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from: */
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV: */
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released: */
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
You still don't have a birth certificate, nor have you been added to the household registration (your family's official records). You thought it didn't really matter—until it was time to go to kindergarten, and you needed an ID card.
[[Your parents decided to take matters into their own hands.]]
You successfully got into a good school in the area. As the years went by, the busyness of your studies and daily life gradually consumed all your time, and you even became the president of the student council. Your math teacher, Mr. Li, came over to tell you that the school plans to recognize your achievements at the next parent-teacher conference and congratulate your parents!
[[Go to the parent-teacher conference]]
[[I'm a bit shy, so I’ve decided not to let my parents come to the conference]]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Randomly Bouncing Texts</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
height: 100vh;
}
.bouncing-text {
position: absolute;
font-size: 36px;
}
</style>
</head>
<body>
<div class="bouncing-text" id="text1">💯</div>
<div class="bouncing-text" id="text2">💯</div>
<div class="bouncing-text" id="text3">💯</div>
<div class="bouncing-text" id="text4">💯</div>
<div class="bouncing-text" id="text5">💯</div>
<script>
// Function to initialize and animate a text element
function createBouncingText(elementId) {
const element = document.getElementById(elementId);
// Screen dimensions
let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;
// Text dimensions
let textWidth = element.offsetWidth;
let textHeight = element.offsetHeight;
// Random initial position and speed
let x = Math.random() * (screenWidth - textWidth);
let y = Math.random() * (screenHeight - textHeight);
let xSpeed = (Math.random() < 0.5 ? 1 : -1) * (2 + Math.random() * 4);
let ySpeed = (Math.random() < 0.5 ? 1 : -1) * (2 + Math.random() * 4);
// Function to update position
function updatePosition() {
x += xSpeed;
y += ySpeed;
// Bounce off left and right edges
if (x <= 0 || x >= screenWidth - textWidth) {
xSpeed = -xSpeed;
randomizeColor();
}
// Bounce off top and bottom edges
if (y <= 0 || y >= screenHeight - textHeight) {
ySpeed = -ySpeed;
randomizeColor();
}
// Update element position
element.style.left = `${x}px`;
element.style.top = `${y}px`;
// Continue animation
requestAnimationFrame(updatePosition);
}
// Randomize text color
function randomizeColor() {
const randomColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
element.style.color = randomColor;
}
// Adjust dimensions on resize
window.addEventListener('resize', () => {
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
textWidth = element.offsetWidth;
textHeight = element.offsetHeight;
});
// Start animation
element.style.left = `${x}px`;
element.style.top = `${y}px`;
updatePosition();
}
createBouncingText("text1");
createBouncingText("text2");
createBouncingText("text3");
createBouncingText("text4");
createBouncingText("text5");
</script>
</body>
</html>
The parent-teacher conference is also an opportunity for parents to get to know each other. Today, your mom wore her best dress, the one she only puts on outside of her police uniform, while your dad donned the suit he had only worn once before, at their wedding. They seemed even more nervous than you.
The event began, and the teacher invited you and your parents to the front so everyone could applaud your hard work. You felt really happy, but at the same time, you sensed someone watching you from the shadows. The intense gaze was hard to ignore.
[[Next]]
Later, you learned from your parents that their colleague’s son is actually your classmate, and he managed to escape any trouble.
Before you knew it, the end of the year had arrived, and it was time to start preparing for the Chinese New Year, the most important holiday for Chinese people. Relatives from all over would return home to celebrate together. During this rare opportunity, your whole family and your grandparents decided to take a warm family photo.
[[Go take the family photo]]Finally, as you and your parents happily prepared to leave the school, your dad was tapped on the shoulder by another dad from your class. "Sheriff, your daughter is doing so well in school!"
Your dad was momentarily taken aback, realizing it was a colleague from the police station, and he thanked him. "But I thought you had a son as well?"
[[Oops]]
The news about your dad having another daughter quickly spread throughout the police station. His supervisor came to ask questions, and not only did they impose a fine of 200,000 yuan, but to settle the controversy, they also revoked your dad's promotion application.
[[Let me try again]]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Randomly Bouncing Texts</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
height: 100vh;
}
.bouncing-text {
position: absolute;
font-size: 36px;
}
</style>
</head>
<body>
<div class="bouncing-text" id="text1">💸</div>
<div class="bouncing-text" id="text2">💸</div>
<div class="bouncing-text" id="text3">💸</div>
<div class="bouncing-text" id="text4">💸</div>
<div class="bouncing-text" id="text5">💸</div>
<script>
// Function to initialize and animate a text element
function createBouncingText(elementId) {
const element = document.getElementById(elementId);
// Screen dimensions
let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;
// Text dimensions
let textWidth = element.offsetWidth;
let textHeight = element.offsetHeight;
// Random initial position and speed
let x = Math.random() * (screenWidth - textWidth);
let y = Math.random() * (screenHeight - textHeight);
let xSpeed = (Math.random() < 0.5 ? 1 : -1) * (2 + Math.random() * 4);
let ySpeed = (Math.random() < 0.5 ? 1 : -1) * (2 + Math.random() * 4);
// Function to update position
function updatePosition() {
x += xSpeed;
y += ySpeed;
// Bounce off left and right edges
if (x <= 0 || x >= screenWidth - textWidth) {
xSpeed = -xSpeed;
randomizeColor();
}
// Bounce off top and bottom edges
if (y <= 0 || y >= screenHeight - textHeight) {
ySpeed = -ySpeed;
randomizeColor();
}
// Update element position
element.style.left = `${x}px`;
element.style.top = `${y}px`;
// Continue animation
requestAnimationFrame(updatePosition);
}
// Randomize text color
function randomizeColor() {
const randomColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
element.style.color = randomColor;
}
// Adjust dimensions on resize
window.addEventListener('resize', () => {
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
textWidth = element.offsetWidth;
textHeight = element.offsetHeight;
});
// Start animation
element.style.left = `${x}px`;
element.style.top = `${y}px`;
updatePosition();
}
createBouncingText("text1");
createBouncingText("text2");
createBouncingText("text3");
createBouncingText("text4");
createBouncingText("text5");
</script>
</body>
</html>Back to
[[Go to school]] <!DOCTYPE html>
<html>
<style>
#mydiv {
position: absolute;
text-align: center;
padding: 10px;
cursor: move;
z-index: 10;
}
/* Set image size */
#mydiv img {
width: 500px; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
</style>
<body>
<div id="mydiv">
<div id="mydivheader">
<img src=https://64.media.tumblr.com/13374d98adc5fbbadf6e372566a1a111/04a1bc51c0d6e74c-20/s1280x1920/a9900140bb0c3c376a9fe5fbe425177c299d6922.pnj>
</div>
</div>
<script>
// Make the DIV element draggable
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from: */
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV: */
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released: */
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
Everyone has returned home, and everyone is dressed in their finest clothes to capture this precious memory, which will later be displayed consipiciously in the house. The photographer is directing everyone on where to sit, and you’re standing with your parents and brother when, suddenly, the photographer says that his camera is broken...
[[After waiting for half an hour, he finally fixed it]]
[[I don’t want to wait]]Mom suggested that you should take the photo instead, explaining that it would be better if you didn’t appear in the family portrait—if someone saw it, they might notice something was off.
[[Although you felt a bit sad, you couldn’t argue with your mom’s request]]Mom opened the door and found the neighbors had come over to wish the family a happy New Year, so she warmly invited them in for a meal. The neighbors glanced at the photo and asked, “Who is this little girl?”
Mom replied, “This is our little sister (Mei Mei).”
[[The neighbors left]]Before long, news of your family having a second child spread throughout the neighborhood. The government came to investigate and confirmed the situation, resulting in a fine of 200,000 yuan. As a consequence, your parents resigned from their jobs.
[[If I could do it over, I would choose not to take the family photo]]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Randomly Bouncing Texts</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
height: 100vh;
}
.bouncing-text {
position: absolute;
font-size: 36px;
}
</style>
</head>
<body>
<div class="bouncing-text" id="text1">💸</div>
<div class="bouncing-text" id="text2">💸</div>
<div class="bouncing-text" id="text3">💸</div>
<div class="bouncing-text" id="text4">💸</div>
<div class="bouncing-text" id="text5">💸</div>
<script>
// Function to initialize and animate a text element
function createBouncingText(elementId) {
const element = document.getElementById(elementId);
// Screen dimensions
let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;
// Text dimensions
let textWidth = element.offsetWidth;
let textHeight = element.offsetHeight;
// Random initial position and speed
let x = Math.random() * (screenWidth - textWidth);
let y = Math.random() * (screenHeight - textHeight);
let xSpeed = (Math.random() < 0.5 ? 1 : -1) * (2 + Math.random() * 4);
let ySpeed = (Math.random() < 0.5 ? 1 : -1) * (2 + Math.random() * 4);
// Function to update position
function updatePosition() {
x += xSpeed;
y += ySpeed;
// Bounce off left and right edges
if (x <= 0 || x >= screenWidth - textWidth) {
xSpeed = -xSpeed;
randomizeColor();
}
// Bounce off top and bottom edges
if (y <= 0 || y >= screenHeight - textHeight) {
ySpeed = -ySpeed;
randomizeColor();
}
// Update element position
element.style.left = `${x}px`;
element.style.top = `${y}px`;
// Continue animation
requestAnimationFrame(updatePosition);
}
// Randomize text color
function randomizeColor() {
const randomColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
element.style.color = randomColor;
}
// Adjust dimensions on resize
window.addEventListener('resize', () => {
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
textWidth = element.offsetWidth;
textHeight = element.offsetHeight;
});
// Start animation
element.style.left = `${x}px`;
element.style.top = `${y}px`;
updatePosition();
}
createBouncingText("text1");
createBouncingText("text2");
createBouncingText("text3");
createBouncingText("text4");
createBouncingText("text5");
</script>
</body>
</html><!DOCTYPE html>
<html>
<style>
#mydiv {
position: absolute;
text-align: center;
padding: 10px;
cursor: move;
z-index: 10;
}
/* Set image size */
#mydiv img {
width: 500px; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
</style>
<body>
<div id="mydiv">
<div id="mydivheader">
<img src=https://64.media.tumblr.com/33aa865521f44c93307a5398f29f48a6/04a1bc51c0d6e74c-a0/s2048x3072/ce9dc3a9ceb2c20b4452f538f32d2e7c7c0b1741.pnj>
</div>
</div>
<script>
// Make the DIV element draggable
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from: */
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV: */
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released: */
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
You didn’t wear your best clothes. Instead, when it was time for the family photo, you stood up, turned your back to your family, and walked to the front to take a picture with your phone.
That day suddenly lost its significance because the family photo didn’t truly represent your entire family. You began to reflect on your place within the family; you were both the evidence of your parents’ wrongdoing and the one who erased the proof of your existence in the home.<!DOCTYPE html>
<html>
<style>
#mydiv {
position: absolute;
text-align: center;
padding: 10px;
cursor: move;
z-index: 10;
}
/* Set image size */
#mydiv img {
width: 500px; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
</style>
<body>
<div id="mydiv">
<div id="mydivheader">
<img src=https://64.media.tumblr.com/33aa865521f44c93307a5398f29f48a6/04a1bc51c0d6e74c-a0/s2048x3072/ce9dc3a9ceb2c20b4452f538f32d2e7c7c0b1741.pnj>
</div>
</div>
<script>
// Make the DIV element draggable
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from: */
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV: */
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released: */
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
You stood up, turned your back to your family, and walked to the front to take a picture with your phone.
That day suddenly lost its significance because the family photo didn’t truly represent your entire family. You began to reflect on your place within the family; you were both the evidence of your parents’ wrongdoing and the one who erased the proof of your existence in the home.
↶↷
You were born in 1980.
A soft, bright light filtered through a crack, and as you opened your eyes, a warm glow around you. Your life officially began. Your Mom, Dad, and brother gathered around you, the operation room filled with joy. You felt hopeful about becoming the newest member of the family. At this moment, you choose to...
Cry
Smile
