<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puppies in BDSM</title>
<br>
<style>
:root{
--book-w: 120px; /* Book width */
--book-h: 160px; /* Book height */
--spine: 16px; /* Book spine thickness */
--radius: 12px; /* Rounded corners */
--gap: 28px; /* Distance between columns */
--tilt: -20deg; /* Tilt angle when hovering */
--lift: -2px; /* Slight lift when hovering */
--step: 2px; /* Z-axis step for each page layer */
}
/* Left(cover) / Right(content) layout */
.book-layout{
display:grid;
grid-template-columns: var(--book-w) minmax(0,1fr);
gap: var(--gap);
align-items:start;
margin: 10px 0 22px;
}
/* 3D scene and book */
.book-cover{ width:var(--book-w); height:var(--book-h); perspective:1100px; display:block; }
.book{ position:relative; width:100%; height:100%; transform-style:preserve-3d; will-change:transform; margin:0; }
.front, .back, .pages, .leaf{
position:absolute; inset:0; border-radius:var(--radius);
backface-visibility:hidden;
transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
/* Initial state - flat card */
.front, .back{ background:#fff; box-shadow:0 10px 22px rgba(0,0,0,.15); }
.front{ transform-origin:left center; transform: translateZ(calc(var(--spine)/2)); overflow:hidden; }
.back { transform: translateZ(calc(-1 * var(--spine)/2)); background:#e6ebf3; }
.pages{
transform-origin:left center; transform: translateZ(0);
background: repeating-linear-gradient(to right,#fbfbfb 0,#fbfbfb 2px,#f2f2f2 2px,#f2f2f2 3px);
filter: drop-shadow(0 3px 8px rgba(0,0,0,.12));
}
.front > img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Book spine */
.book::before{
content:""; position:absolute; top:0; bottom:0; left:0; width:calc(var(--spine)/1.35);
background:linear-gradient(90deg,#5f5f5f 0%,#a8a8a8 40%,#dedede 60%,#8e8e8e 100%);
border-top-left-radius:var(--radius); border-bottom-left-radius:var(--radius);
transform: rotateY(90deg) translateX(calc(var(--spine)/2)); transform-origin:left;
filter:brightness(.92);
}
/* Thin pages for thickness effect (initial zero thickness) */
.leaf{ background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); opacity:.98; transform-origin:left center; }
.leaf.l1{ transform: translateZ(0); }
.leaf.l2{ transform: translateZ(0); }
.leaf.l3{ transform: translateZ(0); }
.leaf.l4{ transform: translateZ(0); }
/* Hover effect: show thickness (no page flipping) */
.book-cover:hover { transform: translateY(var(--lift)); }
.book-cover:hover .book{ transform: rotateY(var(--tilt)); }
.book-cover:hover .leaf.l1{ transform: translateZ(calc(var(--step) * 1)); }
.book-cover:hover .leaf.l2{ transform: translateZ(calc(var(--step) * 2)); }
.book-cover:hover .leaf.l3{ transform: translateZ(calc(var(--step) * 3)); }
.book-cover:hover .leaf.l4{ transform: translateZ(calc(var(--step) * 4)); }
/* Mobile: vertical layout */
@media (max-width:640px){
.book-layout{ grid-template-columns: 1fr; }
.book-cover{ margin:0 auto 8px; }
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
.book-cover, .book, .book *{ transition:none !important; }
}
/* Right side info card (revised + multi-color chips) */
.chip{
/* Default colors (can be overridden by variants) */
--chip-bg: #e0f7f1;
--chip-fg: #057a55;
display:inline-block;
padding:2px 8px;
border-radius:8px;
background: var(--chip-bg);
color: var(--chip-fg);
font-weight:600;
font-size:.82rem;
margin-right:.5rem;
vertical-align:middle;
}
.meta{ color:#6b7280; font-size:.85rem; }
.note-card{
background:#eaf6ff;
border-left:4px solid #5aa9ff;
padding:14px 16px;
border-radius:8px;
margin-top:10px;
}
.note-card ol{ margin:0; padding-left:1.2rem; }
.note-card li{ margin:.38rem 0; }
/* Note card light blue theme with auto dark mode */
.note-card.note-white {
background: #e8f4ff; /* Default: light blue background */
border-left: 4px solid #3b82f6; /* Left blue accent line */
color: #1e3a8a; /* Dark blue text */
padding: 14px 16px;
border-radius: 10px;
margin-top: 10px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
/* Hover effect: slightly brighter, deeper shadow */
.note-card.note-white:hover {
background: #dbeafe;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
/* Content layout */
.note-card.note-white ol {
margin: 0;
padding-left: 1.2rem;
}
.note-card.note-white li {
margin: .38rem 0;
line-height: 1.6;
color: #1e40af; /* Dark blue text, good contrast */
}
/* Auto dark mode detection */
@media (prefers-color-scheme: dark) {
.note-card.note-white {
background: #0b1220; /* Dark background (deep blue) */
border-color: #2563eb; /* Blue accent line */
color: #cbd5e1; /* Main text color changed to light gray-blue */
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}
.note-card.note-white:hover {
background: #1e293b; /* Slightly brighter on hover */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}
.note-card.note-white li {
color: #e2e8f0; /* Light gray text in dark mode */
}
.note-card.note-white a {
color: #60a5fa; /* Links become bright blue in dark mode */
}
.note-card.note-white a:hover {
color: #93c5fd; /* Links become brighter on hover */
}
}
/* ===== Chip variants (light mode) ===== */
.chip--danger { --chip-bg:#dc2626; --chip-fg:#fff; } /* Red */
.chip--warning{ --chip-bg:#facc15; --chip-fg:#111; } /* Yellow */
.chip--royal { --chip-bg:#4169e1; --chip-fg:#fff; } /* Royal Blue */
.chip--purple { --chip-bg:#7c3aed; --chip-fg:#fff; } /* Purple */
.chip--orange { --chip-bg:#f97316; --chip-fg:#fff; } /* Orange */
/* ===== Dark mode adjustments (doesn't override colors, only fine-tunes variants) ===== */
@media (prefers-color-scheme: dark){
.note-card{ background:#0b1220; border-color:#2563eb; }
.meta{ color:#9aa4b2; }
/* If no variant is applied, give chip a dark default */
.chip{ --chip-bg:#064e3b; --chip-fg:#9efad1; }
/* Corresponding values for each color on dark background */
.chip--danger { --chip-bg:#b91c1c; --chip-fg:#fff; }
.chip--warning{ --chip-bg:#eab308; --chip-fg:#111; }
.chip--royal { --chip-bg:#3557ba; --chip-fg:#fff; }
.chip--purple { --chip-bg:#6d28d9; --chip-fg:#fff; }
.chip--orange { --chip-bg:#ea580c; --chip-fg:#fff; }
}
/* ← Add here */
.chip--danger{
background:#dc2626 !important;
color:#fff !important;
}
@media (prefers-color-scheme: dark){
.chip--danger{ background:#b91c1c !important; }
}
<div class="book-left">
<a class="book-cover" href="#table-of-contents" title="Table of Contents">
<div class="book" aria-label="Book cover">
<div class="front"><img src="https://campus-xoops.tn.edu.tw/modules/tad_book3/images/blank.png" alt="Book cover"></div>
<div class="pages"></div>
<div class="leaf l1"></div>
<div class="leaf l2"></div>
<div class="leaf l3"></div>
<div class="leaf l4"></div>
<div class="back"></div>
</div>
</a>
</div>
/* Left column: book cover + button */
.book-left{
width: var(--book-w);
display: flex;
flex-direction: column;
gap: 8px; /* Spacing between book cover and button */
}
.book-right{ min-width: 0; } /* Right column content prevents overflow */
.book-actions{ text-align: left; }
/* Make "Open Book" use .shiny-button appearance with consistent width */
:root{ --btn-minw: 120px; } /* Consistent with next page button in bottom right, adjustable */
.shiny-button{ min-width: var(--btn-minw); text-align:center; }
.open-book-btn{
display: block;
width: 100%; /* Fill left column width (= book cover width) */
max-width: var(--btn-minw);/* Consistent with next page minimum width */
align-self: start; /* Align button to left */
}
.book-left{
width: var(--book-w);
display:flex;
flex-direction:column;
gap:8px;
}
.book-right{ min-width:0; } /* Prevent right column text from breaking layout */
.shiny-button{ min-width: var(--btn-minw, 120px); text-align:center; }
.open-book-btn{ display:block; width:100%; max-width: var(--btn-minw, 120px); }
</style>
<div class="book-layout">
<!-- Left column: book cover + button (same column, no layout issues) -->
<div class="book-left">
<a class="book-cover" href="#table-of-contents" title="Table of Contents">
<div class="book" aria-label="Book cover">
<div class="front"><img src="https://campus-xoops.tn.edu.tw/modules/tad_book3/images/blank.png" alt="Book cover"></div>
<div class="pages"></div>
<div class="leaf l1"></div>
<div class="leaf l2"></div>
<div class="leaf l3"></div>
<div class="leaf l4"></div>
<div class="back"></div>
</div>
</a>
<br>
<!-- 書本按鈕圖片 -->
<!-- Button below book: uses .shiny-button, same size as "Next Page" -->
<div class="book-actions">
<a
class="shiny-button"
href=""
target="_blank"
rel="noopener noreferrer"
aria-label="Open Book (New Tab)"
>Open</a>
</div>
<!-- Right column: your title and content -->
<div class="section">
<!-- Place original title, links, tags, lists etc. here -->
</div>
</div>
<!-- Right: Content -->
<div>
<div class="section" style="text-align: center;">
<h1>Puppies in BDSM</h1>
<div class="blockContent">
<p style="text-align: right;"> View the book with <i class="fa fa-book fa-fw" style="font-size: 15px;"></i><b><a
href="https://hackmd.io/" target="_blank" style="text-decoration: none; color: inherit;"> Power by HackMD</a></b></p>
</div>
<a href="https://hackmd.io/@a5iBZRq_Q1mSyPQzYS5EtQ/PrivacyPolicy">Privacy Policy</a> | <a href="https://www.gnu.org/licenses/gpl-3.0.zh-cn.html#license-text">GPL</a> | <a href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC 4.0</a> | <i class="fa fa-paw fa-fw" style="font-size: 20px;"></i> Puppy Play
<!-- Wrap your block in a container -->
<div class="section" style="text-align: left;">
<span class="chip">Course</span>
<span class="chip chip--danger">+18</span>
<span class="chip chip--royal">Anthropomorphic Dogs</span>
<span class="chip chip--orange">Notes</span>
<span class="chip chip--purple" contenteditable="true">Encyclopedia</span>
<span class="meta"><br><b> Created 2025-10-17 17:25:11. </b></span><span class="meta"><span><b> Completed 20XX-XX-XX XX:XX:XX</b></span>
</span>
<div class="note-card note-white">
<ol>
<li>Study materials for the workshop design.</li>
<li>Workshop duration: Unlimited</li>
<li>Materials content: My Notes</li>
<li>Includes videos, subtitles, and key points handouts. </li>
<li>Platform requirements: Any online e-book platform</li>
<li>Learner proficiency: All levels welcome</li>
<li>Project source code location 1: <a href="https://github.com/yehhsiaofan/pikachuyeh">GitHub</a></li>
<li>Project Source Code Location 2: <a href="https://drive.google.com/drive/folders/1Roco8AU3iPYZZAHKTs_47JBag8aGZOTx?usp=sharing">Google Drive</a></li>
<li><strong>Contact:</strong><a href="mailto:yehhsiaofan2017@gmail.com"> yehhsiaofan2017@gmail.com</a></li>
</ol>
</div>
</div>
</div>
<br>
<!-- Middle section -->
<h3 id="overview">Overview</h3>
<p>Overview
Puppy Play
Originating from BDSM culture, puppy play is a form of role-play where participants mimic canine behavior and habits through props, costumes, and emotional transformation.
This practice stems from Dominance/Submission (D/s) dynamics, blending fetish elements and role-playing to form a distinct community practice.<br><br>
Within this culture, props like dog masks, collars, and tails transcend mere costumes. They embody identity, emotional bonds, and psychological projection, serving as vital conduits for self-discovery and community interaction.
Today, human-dog culture has evolved from private BDSM practices into a diverse, openly discussable psychological and lifestyle phenomenon.</p>
<br>
<br>
<h2 id="author-introduction">Author Introduction</h2>
<p>(Content to follow…)</p>
<li></li>
<h2 id="latest-announcements">Latest Announcements</h2>
<li><a href="https://script.google.com/macros/s/AKfycbwu1KvW4xpTw-cKR7ntEMbGV2V4ieoD4T_HK0W4qgMMpCbBu_AKdpQcHWv7WaaN6ysb/exec">Online Announcement/Document System</a></li>
<p>(Document system developed using Google App Script GAS)<br>
(2025/10/22 Updated document system, added electronic signature system)</p>
<br>
<p></p>
<li></li>
<br>
<h2 id="collaborative-writing-group">Collaborative Writing Group</h2>
<p>Invited collaborators working together to complete this project. After invitation, assistance requires using <br> <img src="https://campus-xoops.tn.edu.tw/modules/tad_modules/images/github.png"
alt="GitHub" style="height:1em;vertical-align:-2px;margin-right:.3em;"> GitBook for collaborative writing, simplified intuitive online editing, then I can export
<img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/markdown.svg"
alt="Markdown" style="height:1em;vertical-align:-2px;margin:0 .3em;">Markdown syntax to publish here <a href="https://sites.google.com/view/pypdmme?usp=sharing">I want to join editing tutorial</a></p>
<p>(MarkDown converter developed using Google Sites)</p>
<br>
<p>(Currently participating puppy families…)</p>
<li>https://i.imgur.com/your-cover.jpg</li>
<li></li>
<p>(Inviting puppy families…)</p>
<li></li>
<li></li>
<br>
<h2 id="collaborative-writing">Collaborative Writing</h2>
<p> Collaborators have been invited to work together on this project. Once the invitation has been accepted, assistance will be required in using <img src="https://campus-xoops.tn.edu.tw/modules/tad_modules/images/github.png"
alt="GitHub" style="height:1em;vertical-align:-2px;margin-right:.3em;"> GitBook for collaborative writing and simplified, intuitive online editing. I can then export the Markdown syntax to publish it here.
<img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/markdown.svg"
alt="Markdown" style="height:1em;vertical-align:-2px;margin:0 .3em;"><a href="https://sites.google.com/view/pypdmme?usp=sharing">I would like to join an editing tutorial. </a>
<p>(MarkDown converter developed using Google Sites)</p>
<br>
<li> </li>
<p>(Content to follow…)</p>
<br>
<!-- Website visitor counter section -->
<div style="text-align: right; font-family: 'Noto Sans TC', sans-serif; font-size: 14px; color: #333;">
Website visitors:
<table border="0" cellspacing="0" cellpadding="0" style="display: inline-table; vertical-align: middle;">
<tbody>
<tr>
<td>
<a href="https://ctr.stylemap.co.jp/">
<img src="https://www.f-counter.net/ani1/66/1761905759/"
alt="Free visitor counter"
border="0"
style="margin:0; padding:0; border:0; vertical-align:bottom;">
</a>
</td>
<td>
<a href="https://ctr.stylemap.co.jp/">
<img src="https://www.f-counter.net/ani2/66/1761905759/"
alt="Free visitor counter"
border="0"
style="margin:0; padding:0; border:0; vertical-align:bottom;">
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Copyright Notice (CC + All Rights Reserved coexist) -->
<footer style="text-align:center;font-size:14px;color:#888;margin-top:40px;line-height:1.6;">
<div>
<a href="https://hackmd.io/@yehhsiaofan2017/pypdemb"
target="_blank" rel="noopener noreferrer"
style="text-decoration:none;color:inherit;">
Puppies in BDSM
</a>
· <span>© 2025 YEH HSIAO FAN. All Rights Reserved.</span>
</div>
<div>
Unless otherwise noted, content on this page is licensed under
<a href="https://creativecommons.org/licenses/by-nc/4.0/"
target="_blank" rel="noopener noreferrer"
style="text-decoration:none;">CC BY-NC 4.0</a> license</div>
<div style="font-size:12px;color:#9aa4b2;margin-top:4px;">
Except where otherwise noted, content is licensed under CC BY-NC 4.0.
Trademarks, logos, and site design © 2025 BDSM Puppies in BDSM Book. All Rights Reserved.
</div>
<div style="margin-top:8px;">
Power by
<a href="https://hackmd.io/" target="_blank" rel="noopener noreferrer"
style="text-decoration:none;color:inherit;">
HackMD
</a>
</div>
</footer>
<!-- 下一頁按鈕 -->
<!-- Fixed bottom-right button container -->
<div class="fixed-nextpage">
<a
href=""
class="shiny-button next"
target="_blank"
rel="noopener noreferrer"
aria-label="Open Next Page (New Tab)"
>
Next Page <span class="arrow">→</span>
</a>
</div>
<style>
/* Button base style */
.fixed-nextpage{
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
display: flex;
gap: 10px;
}
.shiny-button{
position: relative;
display: inline-block;
padding: 8px 16px;
background-color: #007BFF;
color: #fff !important;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
overflow: hidden;
transition: background-color .3s ease;
}
/* Arrow */
.shiny-button .arrow{
color: #fff !important;
display: inline-block;
transition: transform .3s ease;
}
/* Shine effect */
.shiny-button::before{
content:"";
position:absolute;
top:0; left:-50%;
width:30%; height:100%;
background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-20deg);
pointer-events:none;
}
/* Hover shine animation */
.shiny-button:hover::before{ animation: shine 1s forwards; }
/* Directional interaction: next page → move right */
.next:hover .arrow{ transform: translateX(5px); }
@keyframes shine{
100%{ left:150%; }
}
/* Footer counter style */
.footer-stats {
margin-top: 8px;
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
font-size: 13px;
color: #888;
}
.footer-stats .stat {
white-space: nowrap;
}
.footer-stats .stat strong {
color: #111;
font-weight: 700;
}
/* Custom counter style */
.custom-counter {
background-color: black; /* Black background */
color: white; /* White text */
font-size: 16px; /* Set font size */
padding: 5px 10px; /* Padding */
border-radius: 4px; /* Rounded corners */
width: 120px; /* Width for 8 characters */
text-align: center; /* Center text */
font-weight: bold;
display: inline-block;
}
/* Dark mode fine-tuning */
@media (prefers-color-scheme: dark){
.footer-stats{ color:#9aa4b2; }
.footer-stats .stat strong{ color:#e5e7eb; }
}
</style>
Sign in with Wallet
Connect another wallet