---
# System prepended metadata

title: Puppies in BDSM

---

<!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>&nbsp;
<span class="meta"><br><b>&nbsp;&nbsp;Created 2025-10-17 17:25:11.&nbsp;&nbsp;</b></span><span class="meta"><span><b>&nbsp;&nbsp;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:&nbsp;&nbsp;<a href="https://github.com/yehhsiaofan/pikachuyeh">GitHub</a></li>
                                <li>Project Source Code Location 2:&nbsp;&nbsp;<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">&nbsp;&nbsp;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>