← retour au collage›Modifier / dupliquer

LA Noire Toyhouse Folder Theme

#7DdbMzk6FGpublic / publicnouvelle version

par @noitspatrick créé 4 days ago aucune expiration 18.7 KB syntaxe: html

Vos changements créent un nouveau collage lié à celui-ci — l’original reste intact.

nouvelle version Vos changements créent un nouveau collage lié à celui-ci — l’original reste intact.

Visibilité Fil public Accès public

Note de changement (facultatif)

Ce collage sera affiché dans le fil public. Changez la visibilité si vous voulez seulement le partager par lien.

Annuler

<style>
  #noirTabs.nav-tabs {
    border-bottom: 2px solid #8b0000;
  }
  /* Default styling for all inactive tabs */
  #noirTabs .nav-link {
    background-color: #1a0f0f !important;
    color: #b87979 !important;
    border: 1px solid #4a1515 !important;
    border-bottom: none !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    letter-spacing: 1px;
    font-size: 0.85rem;
    font-family: 'Courier New', Courier, monospace;
    margin-right: 4px;
    transition: all 0.2s ease-in-out;
  }
  #noirTabs .nav-link:hover {
    color: #fff !important;
    background-color: #2b1212 !important;
    border-color: #6b1d1d !important;
  }
  /* Active tab styling matching your preferred dark grey & gold */
  #noirTabs .nav-link.active {
    background-color: #0b0b0b !important;
    color: #ffc107 !important;
    border-top: 3px solid #8b0000 !important;
    border-left: 1px solid #8b0000 !important;
    border-right: 1px solid #8b0000 !important;
    border-bottom: 1px solid #0b0b0b !important;
    position: relative;
    z-index: 10;
  }
</style>

<div class="col-lg-3 mb-4 d-none d-lg-block" style="position: sticky; top: 20px;">
      <div class="p-2 text-center" style="background-color: #141414; border: 2px solid #8b0000; box-shadow: 0 0 10px rgba(139, 0, 0, 0.3);">
        <img src="https://file.garden/aFl0qsYp6mJxII37/CSS_Mystery/1941-buick-super-coupe.png" class="img-fluid rounded mb-2" alt="Surveillance Vehicle" style="width: 100%; object-fit: cover; filter: sepia(30%) contrast(110%);">
        <p class="small text-danger mb-0 font-weight-bold" style="letter-spacing: 1px; font-size: 0.7rem; font-family: 'Courier New', Courier, monospace;">[UNIT NUMBER // DEPT]<br>SURVEILLANCE</p>
      </div>
    </div>

<div class="col-lg-9">
      
      
      <div style="background-color: #141414; border: 2px solid #8b0000; border-bottom: none; border-top-left-radius: 6px; border-top-right-radius: 6px;">
        
        
        <div class="p-4 text-center pb-3">
          <p class="text-danger mb-1 font-weight-bold" style="letter-spacing: 4px; font-size: 0.8rem;">[DEPARTMENT NAME] // CASE FILE</p>
          <h1 class="display-5 font-weight-bold text-light mb-0" style="letter-spacing: 3px; font-family: 'Times New Roman', serif;">[ INSERT CASE TITLE HERE ]</h1>
        </div>

<ul class="nav nav-tabs px-3 pt-2 mb-0" id="noirTabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active px-4 py-2 font-weight-bold" id="overview-tab" data-toggle="pill" data-target="#overview" href="#overview" role="tab">THE BRIEF</a>
          </li>
          <li class="nav-item">
            <a class="nav-link px-4 py-2 font-weight-bold" id="suspects-tab" data-toggle="pill" data-target="#suspects" href="#suspects" role="tab">SUSPECTS & ROSTER</a>
          </li>
          <li class="nav-item">
            <a class="nav-link px-4 py-2 font-weight-bold" id="evidence-tab" data-toggle="pill" data-target="#evidence" href="#evidence" role="tab">EVIDENCE</a>
          </li>
        </ul>

</div>

<div class="p-4" style="background-color: #0b0b0b; color: #dcdcdc; font-family: 'Courier New', Courier, monospace; border: 2px solid #8b0000; border-top: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-shadow: 0 5px 15px rgba(139, 0, 0, 0.2);">

<div class="tab-content" id="noirTabsContent">

<div class="tab-pane fade show active" id="overview" role="tabpanel">
            
            
            <div class="d-block d-lg-none mb-4 text-center">
              <div class="p-2" style="background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;">
                <img src="https://file.garden/aFl0qsYp6mJxII37/CSS_Mystery/1941-buick-super-coupe.png" class="img-fluid rounded mb-2" alt="Surveillance Vehicle" style="max-height: 200px; width: 100%; object-fit: cover; filter: sepia(30%) contrast(110%);">
                <p class="small text-danger mb-0 font-weight-bold" style="letter-spacing: 2px; font-size: 0.75rem;">[INSERT MOBILE IMAGE CAPTION / UNIT INFO]</p>
              </div>
            </div>

<div class="row">
              
              <div class="col-lg-5 mb-4">
                <div class="p-3 h-100" style="background-color: #141414; border-left: 4px solid #8b0000; border-top: 1px solid #222; border-right: 1px solid #222; border-bottom: 1px solid #222;">
                  <h4 class="border-bottom pb-2 mb-3 text-danger font-weight-bold" style="font-size: 1rem; letter-spacing: 2px; font-family: 'Times New Roman', serif;">// REPORT DETAILS</h4>
                  <p class="mb-2"><strong>Division:</strong> [Insert Division]</p>
                  <p class="mb-2"><strong>Lead Detective:</strong> [Insert Name/Character]</p>
                  <p class="mb-2"><strong>Date Active:</strong> [Insert Year/Date]</p>
                  <p class="mb-0"><strong>Status:</strong> [Insert Case Status]</p>
                  <hr style="border-color: #333;">
                  <p class="small text-muted mb-0" style="font-size: 0.75rem;">NOTE: [Insert brief instructional note or warning here.]</p>
                </div>
              </div>

<div class="col-lg-7 mb-4">
                <div class="p-4 h-100" style="background-color: #141414; border: 1px solid #222;">
                  <h3 class="h5 text-danger font-weight-bold mb-3" style="letter-spacing: 1px; font-family: 'Times New Roman', serif;">PRELIMINARY SYNOPSIS</h3>
                  <p style="line-height: 1.6;">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non]</p>
                </div>
              </div>
            </div>
          </div>

<div class="tab-pane fade" id="suspects" role="tabpanel">
            
            
            <h3 class="h5 text-danger font-weight-bold mb-3" style="letter-spacing: 1px; font-family: 'Times New Roman', serif;">// PRECINCT PERSONNEL & OFFICERS</h3>
            <p class="small text-muted mb-3">Add pictures and information for the officers or characters working on this case.</p>
            
            <div class="row mb-4">
              
              <div class="col-md-6 mb-3">
                <div class="p-3 d-flex align-items-center h-100" style="background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;">
                  <div class="mr-3 text-center" style="width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;">
                    <span>[OFFICER PHOTO]</span>
                  </div>
                  <div>
                    <h5 class="mb-1 text-light font-weight-bold" style="font-family: 'Times New Roman', serif;">[Officer Name]</h5>
                    <p class="small text-danger mb-1" style="letter-spacing: 1px;">[RANK / ASSIGNMENT]</p>
                    <p class="small text-muted mb-0">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>
                  </div>
                </div>
              </div>

<div class="col-md-6 mb-3">
                <div class="p-3 d-flex align-items-center h-100" style="background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;">
                  <div class="mr-3 text-center" style="width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;">
                    <span>[OFFICER PHOTO]</span>
                  </div>
                  <div>
                    <h5 class="mb-1 text-light font-weight-bold" style="font-family: 'Times New Roman', serif;">[Officer Name 2]</h5>
                    <p class="small text-danger mb-1" style="letter-spacing: 1px;">[RANK / ASSIGNMENT]</p>
                    <p class="small text-muted mb-0">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>
                  </div>
                </div>
              </div>
            
              
              <div class="col-md-6 mb-3">
                <div class="p-3 d-flex align-items-center h-100" style="background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;">
                  <div class="mr-3 text-center" style="width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;">
                    <span>[OFFICER PHOTO]</span>
                  </div>
                  <div>
                    <h5 class="mb-1 text-light font-weight-bold" style="font-family: 'Times New Roman', serif;">[Officer Name 3]</h5>
                    <p class="small text-danger mb-1" style="letter-spacing: 1px;">[RANK / ASSIGNMENT]</p>
                    <p class="small text-muted mb-0">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>
                  </div>
                </div>
              </div>
            
              
              <div class="col-md-6 mb-3">
                <div class="p-3 d-flex align-items-center h-100" style="background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;">
                  <div class="mr-3 text-center" style="width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;">
                    <span>[OFFICER PHOTO]</span>
                  </div>
                  <div>
                    <h5 class="mb-1 text-light font-weight-bold" style="font-family: 'Times New Roman', serif;">[Officer Name 4]</h5>
                    <p class="small text-danger mb-1" style="letter-spacing: 1px;">[RANK / ASSIGNMENT]</p>
                    <p class="small text-muted mb-0">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>
                  </div>
                </div>
              </div>
            </div>

<h3 class="h5 text-danger font-weight-bold mb-3" style="letter-spacing: 1px; font-family: 'Times New Roman', serif;">// CASE SUSPECTS & PERSONS OF INTEREST</h3>
            <p class="small text-muted mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>

<div class="row">
              
              <div class="col-md-12 mb-3">
                <div class="p-3 d-flex align-items-center" style="background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;">
                  <div class="mr-3 text-center" style="width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;">
                    <span>[MUGSHOT]</span>
                  </div>
                  <div>
                    <h5 class="mb-1 text-light font-weight-bold" style="font-family: 'Times New Roman', serif;">[Insert Suspect Name]</h5>
                    <p class="small text-danger mb-1" style="letter-spacing: 1px;">[ALIAS / OCCUPATION]</p>
                    <p class="small text-muted mb-0">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>
                  </div>
                </div>
              </div>
              
              
              <div class="col-md-12 mb-3">
                <div class="p-3 d-flex align-items-center" style="background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;">
                  <div class="mr-3 text-center" style="width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;">
                    <span>[MUGSHOT]</span>
                  </div>
                  <div>
                    <h5 class="mb-1 text-light font-weight-bold" style="font-family: 'Times New Roman', serif;">[Insert Suspect Name]</h5>
                    <p class="small text-danger mb-1" style="letter-spacing: 1px;">[ALIAS / OCCUPATION]</p>
                    <p class="small text-muted mb-0">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>
                  </div>
                </div>
              </div>
              
              
              <div class="col-md-12 mb-3">
                <div class="p-3 d-flex align-items-center" style="background-color: #141414; border: 1px solid #333; border-top: 2px solid #8b0000;">
                  <div class="mr-3 text-center" style="width: 80px; height: 100px; background-color: #0b0b0b; border: 1px dashed #555; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 0.65rem;">
                    <span>[MUGSHOT]</span>
                  </div>
                  <div>
                    <h5 class="mb-1 text-light font-weight-bold" style="font-family: 'Times New Roman', serif;">[Insert Suspect Name]</h5>
                    <p class="small text-danger mb-1" style="letter-spacing: 1px;">[ALIAS / OCCUPATION]</p>
                    <p class="small text-muted mb-0">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

<div class="tab-pane fade" id="evidence" role="tabpanel">
            <div class="p-4" style="background-color: #141414; border: 1px solid #222;">
              <h3 class="h5 text-danger font-weight-bold mb-3" style="letter-spacing: 1px; font-family: 'Times New Roman', serif;">EVIDENCE LOCKER</h3>
              <p class="small text-muted mb-3">[Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]</p>
              
              <div id="noirAccordion">
                <div class="card mb-2" style="background-color: #0b0b0b; border: 1px solid #333;">
                  <div class="card-header p-2" id="evidenceHeading1">
                    <h5 class="mb-0">
                      <button class="btn btn-link btn-block text-left text-light text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#evidenceCollapse1" aria-expanded="true" aria-controls="evidenceCollapse1" style="font-family: 'Courier New', Courier, monospace; font-size: 0.9rem;">
                        <span class="text-danger">[EXHIBIT A]:</span> [Insert Evidence Title / Item Name]
                      </button>
                    </h5>
                  </div>
                  </div>
                <div id="noirAccordion">
                <div class="card mb-2" style="background-color: #0b0b0b; border: 1px solid #333;">
                  <div class="card-header p-2" id="evidenceHeading1">
                    <h5 class="mb-0">
                      <button class="btn btn-link btn-block text-left text-light text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#evidenceCollapse1" aria-expanded="true" aria-controls="evidenceCollapse1" style="font-family: 'Courier New', Courier, monospace; font-size: 0.9rem;">
                        <span class="text-danger">[EXHIBIT B]:</span> [Insert Evidence Title / Item Name]
                      </button>
                    </h5>
                  </div>
                  </div>
                <div id="noirAccordion">
                <div class="card mb-2" style="background-color: #0b0b0b; border: 1px solid #333;">
                  <div class="card-header p-2" id="evidenceHeading1">
                    <h5 class="mb-0">
                      <button class="btn btn-link btn-block text-left text-light text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#evidenceCollapse1" aria-expanded="true" aria-controls="evidenceCollapse1" style="font-family: 'Courier New', Courier, monospace; font-size: 0.9rem;">
                        <span class="text-danger">[EXHIBIT C]:</span> [Insert Evidence Title / Item Name]
                      </button>
                    </h5>
                  </div>
                  </div>
                <div id="noirAccordion">
                <div class="card mb-2" style="background-color: #0b0b0b; border: 1px solid #333;">
                  <div class="card-header p-2" id="evidenceHeading1">
                    <h5 class="mb-0">
                      <button class="btn btn-link btn-block text-left text-light text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#evidenceCollapse1" aria-expanded="true" aria-controls="evidenceCollapse1" style="font-family: 'Courier New', Courier, monospace; font-size: 0.9rem;">
                        <span class="text-danger">[EXHIBIT D]:</span> [Insert Evidence Title / Item Name]
                      </button>
                    </h5>
                  </div>
                  </div>
                  <div id="evidenceCollapse1" class="collapse" aria-labelledby="evidenceHeading1" data-parent="#noirAccordion">
                    <div class="card-body small text-muted" style="border-top: 1px dashed #333;">
                      [Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.]
                    </div>