neopunisher · October 18, 2024 03:36
diff --git a/notepadpaper.html b/notepadpaper.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notebook Paper Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Nanum Pen Script', cursive;
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
        }

        .notebook {
            display: grid;
            grid-template-columns: repeat(auto-fill, 600px);
            gap: 20px;
            padding: 40px;
            background: rgba(245, 247, 250, 0.8);
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .page {
            position: relative;
            width: 600px;
            height: 800px;
            background: #fff;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            border-radius: 20px;
        }

        .lines {
            position: absolute;
            top: 80px;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                to bottom,
                #add8e6 0,
                #add8e6 1px,
                #fff 1px,
                #fff 28px
            );
        }

        .red-margin {
            position: absolute;
            top: 0;
            left: 60px;
            bottom: 0;
            width: 2px;
            background: #ff0000;
        }

        .holes {
            position: absolute;
            left: 20px;
            top: 0;
            width: 14px;
            height: 100%;
        }

        .holes::before, .holes::after {
            content: '';
            position: absolute;
            left: 0;
            width: 14px;
            height: 14px;
            background: radial-gradient(circle, #b0bec5, #607d8b);
            border-radius: 50%;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        }

        .holes::before {
            top: 60px; /* Just above the first blue line */
        }

        .holes::after {
            bottom: 60px; /* Approximately 2 lines from the bottom */
        }

        .middle-hole {
            position: absolute;
            left: 20px;
            top: 400px; /* 50% height of the page */
            width: 14px;
            height: 14px;
            background: radial-gradient(circle, #b0bec5, #607d8b);
            border-radius: 50%;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        }

        .content {
            padding: 58px 30px 33px 70px;
            line-height: 28px;
            color: #333;
            position: relative;
        }

        p {
            margin-top: 0;
            margin-bottom: 28px;
        }

        .svg-figure {
            width: 200px;
            height: auto;
            float: left;
            margin: 10px 20px 10px 0;
        }

        .svg-figure svg {
            width: 100%;
            height: auto;
        }
    </style>
 </head>
 <body>
    <div class="notebook">
        <div class="page">
            <div class="lines"></div>
            <div class="red-margin"></div>
            <div class="holes"></div>
            <div class="middle-hole"></div>
            <div class="content">
                <p>Once upon a time, in a small village nestled between rolling hills and deep green forests, there lived a young girl named Elara. She had always been curious about the world beyond her village, where the stories of old spoke of dragons, enchanted rivers, and mountains that touched the sky.</p>
                <p>Elara spent her days helping her father in the fields and her nights gazing at the stars, dreaming of adventures. One evening, as the sun set and painted the sky in hues of orange and pink, she noticed a peculiar glow coming from the edge of the forest...</p>
                <div class="svg-figure">
                    <!-- Placeholder for SVG figure -->
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="lightblue" />
                    </svg>
                </div>
                <p>Drawn by curiosity, Elara ventured closer, her heart pounding with excitement and fear. As she stepped into the forest, the air grew cool and the leaves seemed to whisper secrets only she could hear. She followed the glow, weaving between ancient oaks until she found herself in a clearing, face to face with a small, shimmering creature.</p>
                <p>The creature had wings like a dragonfly and eyes that sparkled like the stars she loved so much. It spoke to her in a voice that was both musical and soft, telling her of a world hidden from ordinary eyes, a place where magic thrived and awaited those brave enough to seek it.</p>
                <div class="svg-figure">
                    <!-- Placeholder for SVG figure -->
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <rect x="20" y="20" width="60" height="60" stroke="black" stroke-width="3" fill="lightgreen" />
                    </svg>
                </div>
                <p>Elara knew in that moment that her life would never be the same. She would leave her village, follow the creature, and discover the wonders that lay beyond the hills and valleys she had always known. And so, with a deep breath, she stepped forward, ready to embrace the adventure of a lifetime...</p>
            </div>
        </div>
        <div class="page">
            <div class="lines"></div>
            <div class="red-margin"></div>
            <div class="holes"></div>
            <div class="middle-hole"></div>
            <div class="content">
                <p>Over the following days, Elara traveled through dense forests, across sparkling streams, and over steep hills. She encountered magical creatures that filled her with wonder: talking foxes, glowing mushrooms that whispered forgotten secrets, and deer that moved like shadows through the twilight. The small creature that had found her became her guide, leading her to places that seemed to exist only in dreams.</p>
                <p>One day, they reached the edge of a vast lake, its waters as still as glass and reflecting the azure sky above. On the far shore, Elara could see a grand castle with tall, shimmering towers that looked like they had been carved out of pure crystal. "That," said her guide, pointing with one delicate wing, "is the heart of the magical realm. It is where all things in this world converge."</p>
                <p>Elara felt a sense of awe as she gazed upon the castle. She had always dreamed of seeing something like this, but never truly believed it could be real. The guide told her that the journey ahead would test her bravery and kindness, but if she succeeded, she would become a part of the magic that sustained this world.</p>
                <p>Determined and filled with hope, Elara set her eyes on the castle. With each step she took, she felt the world around her growing more vivid, more alive. Flowers bloomed beneath her feet, and the air sparkled with unseen energy. The lake seemed to part for her, forming a path that led her towards her destiny.</p>
                <div class="svg-figure">
                    <!-- Placeholder for SVG figure -->
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <ellipse cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="3" fill="lightcoral" />
                    </svg>
                </div>
                <p>As she reached the far shore, Elara looked back at the forest, the hills, and the path she had taken. She realized how far she had come and how much she had grown. With a deep breath, she turned to face the castle, ready for whatever lay ahead.</p>
                <p>Her adventure was only just beginning, and Elara knew that whatever challenges came her way, she would face them with courage, heart, and the knowledge that she was part of something far greater than herself.</p>
            </div>
        </div>
    </
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Notebook Paper Design</title>
	<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
	<style>
	body {
	font-family: 'Nanum Pen Script', cursive;
	background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 100vh;
	}

	.notebook {
	display: grid;
	grid-template-columns: repeat(auto-fill, 600px);
	gap: 20px;
	padding: 40px;
	background: rgba(245, 247, 250, 0.8);
	border-radius: 20px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	}

	.page {
	position: relative;
	width: 600px;
	height: 800px;
	background: #fff;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	border-radius: 20px;
	}

	.lines {
	position: absolute;
	top: 80px;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
	to bottom,
	#add8e6 0,
	#add8e6 1px,
	#fff 1px,
	#fff 28px
	);
	}

	.red-margin {
	position: absolute;
	top: 0;
	left: 60px;
	bottom: 0;
	width: 2px;
	background: #ff0000;
	}

	.holes {
	position: absolute;
	left: 20px;
	top: 0;
	width: 14px;
	height: 100%;
	}

	.holes::before, .holes::after {
	content: '';
	position: absolute;
	left: 0;
	width: 14px;
	height: 14px;
	background: radial-gradient(circle, #b0bec5, #607d8b);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	}

	.holes::before {
	top: 60px; /* Just above the first blue line */
	}

	.holes::after {
	bottom: 60px; /* Approximately 2 lines from the bottom */
	}

	.middle-hole {
	position: absolute;
	left: 20px;
	top: 400px; /* 50% height of the page */
	width: 14px;
	height: 14px;
	background: radial-gradient(circle, #b0bec5, #607d8b);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	}

	.content {
	padding: 58px 30px 33px 70px;
	line-height: 28px;
	color: #333;
	position: relative;
	}

	p {
	margin-top: 0;
	margin-bottom: 28px;
	}

	.svg-figure {
	width: 200px;
	height: auto;
	float: left;
	margin: 10px 20px 10px 0;
	}

	.svg-figure svg {
	width: 100%;
	height: auto;
	}
	</style>
	</head>
	<body>
	<div class="notebook">
	<div class="page">
	<div class="lines"></div>
	<div class="red-margin"></div>
	<div class="holes"></div>
	<div class="middle-hole"></div>
	<div class="content">
	<p>Once upon a time, in a small village nestled between rolling hills and deep green forests, there lived a young girl named Elara. She had always been curious about the world beyond her village, where the stories of old spoke of dragons, enchanted rivers, and mountains that touched the sky.</p>
	<p>Elara spent her days helping her father in the fields and her nights gazing at the stars, dreaming of adventures. One evening, as the sun set and painted the sky in hues of orange and pink, she noticed a peculiar glow coming from the edge of the forest...</p>
	<div class="svg-figure">
	<!-- Placeholder for SVG figure -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="lightblue" />
	</svg>
	</div>
	<p>Drawn by curiosity, Elara ventured closer, her heart pounding with excitement and fear. As she stepped into the forest, the air grew cool and the leaves seemed to whisper secrets only she could hear. She followed the glow, weaving between ancient oaks until she found herself in a clearing, face to face with a small, shimmering creature.</p>
	<p>The creature had wings like a dragonfly and eyes that sparkled like the stars she loved so much. It spoke to her in a voice that was both musical and soft, telling her of a world hidden from ordinary eyes, a place where magic thrived and awaited those brave enough to seek it.</p>
	<div class="svg-figure">
	<!-- Placeholder for SVG figure -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<rect x="20" y="20" width="60" height="60" stroke="black" stroke-width="3" fill="lightgreen" />
	</svg>
	</div>
	<p>Elara knew in that moment that her life would never be the same. She would leave her village, follow the creature, and discover the wonders that lay beyond the hills and valleys she had always known. And so, with a deep breath, she stepped forward, ready to embrace the adventure of a lifetime...</p>
	</div>
	</div>
	<div class="page">
	<div class="lines"></div>
	<div class="red-margin"></div>
	<div class="holes"></div>
	<div class="middle-hole"></div>
	<div class="content">
	<p>Over the following days, Elara traveled through dense forests, across sparkling streams, and over steep hills. She encountered magical creatures that filled her with wonder: talking foxes, glowing mushrooms that whispered forgotten secrets, and deer that moved like shadows through the twilight. The small creature that had found her became her guide, leading her to places that seemed to exist only in dreams.</p>
	<p>One day, they reached the edge of a vast lake, its waters as still as glass and reflecting the azure sky above. On the far shore, Elara could see a grand castle with tall, shimmering towers that looked like they had been carved out of pure crystal. "That," said her guide, pointing with one delicate wing, "is the heart of the magical realm. It is where all things in this world converge."</p>
	<p>Elara felt a sense of awe as she gazed upon the castle. She had always dreamed of seeing something like this, but never truly believed it could be real. The guide told her that the journey ahead would test her bravery and kindness, but if she succeeded, she would become a part of the magic that sustained this world.</p>
	<p>Determined and filled with hope, Elara set her eyes on the castle. With each step she took, she felt the world around her growing more vivid, more alive. Flowers bloomed beneath her feet, and the air sparkled with unseen energy. The lake seemed to part for her, forming a path that led her towards her destiny.</p>
	<div class="svg-figure">
	<!-- Placeholder for SVG figure -->
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<ellipse cx="50" cy="50" rx="40" ry="20" stroke="black" stroke-width="3" fill="lightcoral" />
	</svg>
	</div>
	<p>As she reached the far shore, Elara looked back at the forest, the hills, and the path she had taken. She realized how far she had come and how much she had grown. With a deep breath, she turned to face the castle, ready for whatever lay ahead.</p>
	<p>Her adventure was only just beginning, and Elara knew that whatever challenges came her way, she would face them with courage, heart, and the knowledge that she was part of something far greater than herself.</p>
	</div>
	</div>
	</