cinnamon latte diary ꣑ৎ: Blog codes

☕ °˖ Guide : Créer ton blog de A à Z !

Tu rêves d'avoir ton propre coin douillet sur Internet à ton image ? Suis ces quelques étapes pas à pas pour te lancer ! 𖹭 ๋ ࣭ ⭑

₊˚⊹ 2. Le thème

✦ . 　⁺ 　 . ✦ . 　⁺ 　 . ✦

🍂 °˖ Bienvenue dans mon coin ressources & widgets !

Ici, tu retrouveras tous les codes de mes créations pour les installer facilement sur ton propre blog !

N'oublie pas de modifier avec tes propres goûts et propre couleurs et également de remplacer les liens par tes propres liens à toi. 𖹭 ๋ ࣭ ⭑

₊˚⊹ 1. Le style de mon menu

📍 Code CSS :

/* --- Menu Pilules by CinnamonLatte --- */
.widget.PageList ul, .PageList ul {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin-top: 40px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 10 !important;
}

.PageList li a, .widget.PageList li a {
    display: inline-block !important;
    padding: 10px 30px !important;
    border-radius: 50px !important;
    font-size: 18px !important;
    text-decoration: none !important;
    text-align: center !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease !important;
    color: #ffffff !important;
    background-color: #AA5115 !important;
    border: 2px solid #ffffff !important;
}

.PageList li a:hover, .widget.PageList li a:hover {
    transform: translateY(-2px) !important;
}

₊˚⊹ 2. La Librairie & Tourne-disque Vinyle

📍 Code HTML & JS :

<div class="videos-header-box">
  <p>Bienvenue ma librairie de vinyles ! ✧˚ ⋆｡˚</p>
</div>

<div class="vinyl-player-container">
  <!--ÉCRAN 1 : LA GALERIE DES VINYLES-->
  <div class="vinyl-catalog" id="vinyl-catalog">
    <h2 class="catalog-title">Librairie de mes vinyles</h2>
    <div class="vinyl-shelf">
      <!--Exemple de Vinyle-->
      <div class="vinyl-item" onclick="openVinyl('Brooklyn Baby - Lana Del Rey', 'https://upload.wikimedia.org/wikipedia/en/2/25/Lana_Del_Rey_-_Brooklyn_Baby_cover.jpg', 'https://www.youtube.com/embed/MGwwBQP9X8I', 'Une musique rétro et mélancolique parfaite à écouter durant l\'automne. Mon coup de coeur. ♡')">
        <div class="vinyl-sleeve">
          <img alt="Album Cover" src="https://upload.wikimedia.org/wikipedia/en/2/25/Lana_Del_Rey_-_Brooklyn_Baby_cover.jpg" />
          <div class="vinyl-disk-peek"></div>
        </div>
        <span class="vinyl-name">Brooklyn Baby</span>
      </div>
    </div>
  </div>

  <!--ÉCRAN 2 : LA PAGE DE L'ALBUM ET LE TOURNE-DISQUE-->
  <div class="vinyl-detail" id="vinyl-detail" style="display: none;">
    <button class="back-btn" onclick="goBackToCatalog()">← Retour aux vinyles</button>
    <div class="album-info-section">
      <img alt="Pochette" class="detail-cover-img" id="detail-cover" src="" />
      <div class="detail-text">
        <h3 id="detail-title">Nom de l'album</h3>
        <p class="detail-desc">Coup de cœur absolu du moment...</p>
        <button class="play-vinyl-btn" onclick="placeVinylOnPlayer()">๋ ࣭ ⭑  Lire le vinyle 𖹭</button>
      </div>
    </div>

    <!--LE PLATINE / TOURNE-DISQUE-->
    <div class="turntable-box">
      <div class="turntable-body">
        <div class="vinyl-record" id="spinning-vinyl">
          <div class="vinyl-label" id="vinyl-label-center"></div>
        </div>
        <div class="tonearm" id="tonearm"></div>
      </div>
      <button class="stop-music-btn" onclick="stopMusic()">Arrêter la musique ⏹</button>
    </div>
    <div id="audio-container" style="display: none;"></div>
  </div>
</div>

<script>
let currentYoutubeUrl = "";

function openVinyl(title, coverUrl, youtubeUrl, description) {
  document.getElementById('detail-title').innerText = title;
  document.getElementById('detail-cover').src = coverUrl;
  document.getElementById('vinyl-label-center').style.backgroundImage = `url('${coverUrl}')`;
  document.querySelector('.detail-desc').innerText = description;
  currentYoutubeUrl = youtubeUrl;

  document.getElementById('vinyl-catalog').style.display = 'none';
  document.getElementById('vinyl-detail').style.display = 'block';

  resetPlayerState();
}

function goBackToCatalog() {
  stopMusic();
  document.getElementById('vinyl-detail').style.display = 'none';
  document.getElementById('vinyl-catalog').style.display = 'block';
}

function placeVinylOnPlayer() {
  playCutePopSound();
  const vinyl = document.getElementById('spinning-vinyl');
  const tonearm = document.getElementById('tonearm');

  vinyl.classList.add('placed');
  
  setTimeout(() => {
    vinyl.classList.add('spinning');
    tonearm.classList.add('playing');
    
    document.getElementById('audio-container').innerHTML = `
      <iframe src="${currentYoutubeUrl}?autoplay=1" allow="autoplay" width="0" height="0"></iframe>
    `;
  }, 300);
}

function stopMusic() {
  const vinyl = document.getElementById('spinning-vinyl');
  const tonearm = document.getElementById('tonearm');

  vinyl.classList.remove('spinning');
  tonearm.classList.remove('playing');
  document.getElementById('audio-container').innerHTML = '';
}

function resetPlayerState() {
  const vinyl = document.getElementById('spinning-vinyl');
  const tonearm = document.getElementById('tonearm');
  vinyl.classList.remove('placed', 'spinning');
  tonearm.classList.remove('playing');
  document.getElementById('audio-container').innerHTML = '';
}

function playCutePopSound() {
  try {
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    
    osc.type = 'sine';
    osc.frequency.setValueAtTime(400, audioCtx.currentTime);
    osc.frequency.exponentialRampToValueAtTime(800, audioCtx.currentTime + 0.1);
    
    gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);
    
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    
    osc.start();
    osc.stop(audioCtx.currentTime + 0.1);
  } catch(e) {}
}
</script>

📍 Code CSS :

/* --- Style du tourne-disque et de la galerie by CinnamonLatte --- */
.vinyl-player-container {
  max-width: 700px;
  margin: 20px auto;
  background: #1a1a1a;
  border-radius: 12px;
  padding: 25px;
  font-family: monospace, sans-serif;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.catalog-title {
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 25px;
  color: #F4D2BA;
  text-transform: uppercase;
}

.vinyl-shelf {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.vinyl-item {
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease;
  flex: 0 0 calc(50% - 10px);
  max-width: calc(50% - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vinyl-item:hover {
  transform: translateY(-5px);
}

.vinyl-sleeve {
  position: relative;
  width: 130px;
  height: 130px;
  background: #000;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.vinyl-sleeve img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  position: relative;
  z-index: 2;
}

.vinyl-disk-peek {
  position: absolute;
  top: 5px;
  right: -25px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, #111 30%, #333 31%, #111 32%, #000 70%);
  border-radius: 50%;
  z-index: 1;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.vinyl-name {
  display: block;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #ccc;
}

.back-btn {
  background: none;
  border: none;
  color: #F4D2BA;
  font-family: monospace;
  font-size: 11px;
  cursor: pointer;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.album-info-section {
  display: flex;
  gap: 20px;
  align-items: center;
  background: #242424;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
}

.detail-cover-img {
  width: 110px;
  height: 110px;
  border-radius: 6px;
  object-fit: cover;
}

.detail-text h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #fff;
}

.detail-desc {
  font-size: 11px;
  color: #aaa;
  line-height: 1.4;
  margin-bottom: 12px;
}

.play-vinyl-btn {
  background: #F4D2BA;
  color: #613212;
  border: none;
  padding: 3px 15px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 10px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.2s;
}

.play-vinyl-btn:hover {
  background: #FFFFFF;
}

.turntable-box {
  background: #151515;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.turntable-body {
  width: 220px;
  height: 220px;
  background: #2a2a2a;
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #3a3a3a;
}

.vinyl-record {
  width: 200px;
  height: 200px;
  background: 
    radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 2%),
    radial-gradient(circle, #1a1a1a 0%, #0d0d0d 40%, #1a1a1a 45%, #050505 60%, #111 75%, #000 100%);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 12px rgba(0,0,0,0.7);
  border: 1px solid #222;
}

.vinyl-record.placed {
  transform: scale(1);
}

.vinyl-record.spinning {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.vinyl-label {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid #111;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.6);
  position: relative;
}

.vinyl-label::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #151515;
  border-radius: 50%;
  border: 1px solid #444;
}

.tonearm {
  position: absolute;
  top: 20px;
  right: 25px;
  width: 12px;
  height: 110px;
  background: linear-gradient(to right, #ccc, #777);
  border-radius: 6px;
  transform-origin: top center;
  transform: rotate(-35deg);
  transition: transform 0.5s ease-in-out;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

.tonearm.playing {
  transform: rotate(-5deg);
}

.stop-music-btn {
  margin-top: 20px;
  background: #333;
  color: #ff5f56;
  border: 1px solid #555;
  padding: 6px 12px;
  font-size: 9px;
  letter-spacing: 1px;
  border-radius: 4px;
  cursor: pointer;
}

.stop-music-btn:hover {
  background: #444;
}

₊˚⊹ 3. Top 5 de mes films préférés

📍 Code HTML :

<div class="autumn-top5-compact">
  <h4 class="top5-mini-title">♡ my top 5 movies ♡</h4>
  <p class="top5-mini-subtitle">les films que je pourrais regarder en boucle</p>

  <div class="top5-mini-grid">
    <div class="top5-mini-item">
      <img src="https://i.pinimg.com/1200x/95/a9/2b/95a92b45eafce78b34c11ee7f396298d.jpg" alt="Film 1" />
      <span class="top5-mini-num">01</span>
    </div>
    <div class="top5-mini-item">
      <img src="https://i.pinimg.com/736x/c7/6c/77/c76c7703370c0863f7bfc08141e8de60.jpg" alt="Film 2" />
      <span class="top5-mini-num">02</span>
    </div>
    <div class="top5-mini-item">
      <img src="https://i.pinimg.com/736x/f5/45/f4/f545f412e8be4af9c9ad2dc86d3e7a4b.jpg" alt="Film 3" />
      <span class="top5-mini-num">03</span>
    </div>
    <div class="top5-mini-item">
      <img src="https://i.pinimg.com/736x/2e/d3/0c/2ed30cd72d05b8e5600b2800450cfac3.jpg" alt="Film 4" />
      <span class="top5-mini-num">04</span>
    </div>
    <div class="top5-mini-item">
      <img src="https://i.pinimg.com/736x/f6/bd/df/f6bddf9dc26b19bb7550cbe8f7fb0f56.jpg" alt="Film 5" />
      <span class="top5-mini-num">05</span>
    </div>
  </div>
</div>

📍 Code CSS :

/* --- Widget Top 5 by CinnamonLatte --- */
.autumn-top5-compact {
  background: #fffdf9 !important;
  border: 2px solid #AA5115 !important;
  border-radius: 16px !important;
  padding: 15px !important;
  max-width: 320px !important;
  margin: 20px auto !important;
  font-family: 'Georgia', serif !important;
  box-shadow: 0 4px 15px rgba(97, 50, 18, 0.08) !important;
  text-align: center !important;
}

.top5-mini-title {
  font-family: 'Caveat', cursive, Georgia, serif !important;
  font-size: 1.5rem !important;
  color: #AA5115 !important;
  margin: 0 0 2px 0 !important;
}

.top5-mini-subtitle {
  font-size: 0.7rem !important;
  color: #613212 !important;
  font-style: italic !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: 0.3px !important;
}

.top5-mini-grid {
  display: flex !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.top5-mini-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
}

.top5-mini-item img {
  width: 45px !important;
  height: 65px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  border: 1.5px solid #613212 !important;
  background-color: #F4D2BA !important;
  transition: transform 0.2s ease !important;
}

.top5-mini-item img:hover {
  transform: translateY(-2px) !important;
}

.top5-mini-num {
  font-family: "Courier New", monospace !important;
  font-size: 0.65rem !important;
  color: #613212 !important;
  margin-top: 4px !important;
  font-weight: bold !important;
}

₊˚⊹ 4. Currently watching

📍 Code HTML :

<details class="autumn-watch-widget">
  <summary class="watch-summary-header">
    <h4 class="watch-widget-title">♡ currently watching ♡</h4>
    <div class="watch-card">
      <div class="watch-poster">
        <img src="https://i.pinimg.com/736x/c7/b9/80/c7b980732c150bec1ae477b742a58fd8.jpg" alt="Affiche de la série" />
      </div>
      <div class="watch-info">
        <span class="watch-name">Gossip <br> Girl</span>
        <span class="watch-season">Saison 1</span>
        <span class="watch-hint">(clic pour voir)</span>
      </div>
    </div>
  </summary>

  <div class="watch-desc-box">
    <p>À New York, la vie des adolescents privilégiés de l'Upper East Side est rythmée par les privilèges, le luxe et les apparences au sein de leurs prestigieuses écoles privées. Cependant, leur quotidien et leurs relations complexes, notamment entre Serena, Blair, Chuck et Nate, sont constamment menacés par Gossip Girl, une blogueuse omnisciente et anonyme qui diffuse leurs secrets les plus sombres.</p>
  </div>
</details>

📍 Code CSS :

/* --- Widget Currently Watching by CinnamonLatte --- */
.autumn-watch-widget {
  background: #fffdf9 !important;
  border: 1.5px solid #AA5115 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  max-width: 180px !important;
  margin: 15px auto !important;
  font-family: 'Georgia', serif !important;
  box-shadow: 0 3px 10px rgba(97, 50, 18, 0.06) !important;
  text-align: center !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
}

.autumn-watch-widget:hover {
  border-color: #613212 !important;
}

/* Retire la petite flèche native moche des balises details */
.autumn-watch-widget summary::-webkit-details-marker {
  display: none !important;
}
.autumn-watch-widget summary {
  list-style: none !important;
  outline: none !important;
}

.watch-widget-title {
  font-family: 'Caveat', cursive, Georgia, serif !important;
  font-size: 1.1rem !important;
  color: #AA5115 !important;
  margin: 0 0 10px 0 !important;
}

.watch-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
}

.watch-poster {
  width: 50px !important;
  height: 70px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 1px solid #613212 !important;
  background-color: #F4D2BA !important;
  flex-shrink: 0 !important;
}

.watch-poster img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.watch-info {
  overflow: hidden !important;
}

.watch-name {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  color: #613212 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.watch-season {
  display: block !important;
  font-size: 0.65rem !important;
  color: #AA5115 !important;
  margin-top: 2px !important;
}

.watch-hint {
  display: block !important;
  font-size: 0.55rem !important;
  color: #8c7365 !important;
  font-style: italic !important;
  margin-top: 4px !important;
}

🔗 °˖ Les sites que j'utilise pour mon blog

Quelques adresses pratiques que j'ai utilisées. Clique sur le bouton pour accéder au site. 𖹭

⭐ N'hésitez pas a me dire dans les commentaires si vous voulez le code de quelque chose en particuler. xoxo ✩°｡

xoxo manon 𖹭

cinnamon latte diary ꣑ৎ

Pages

cinnamon latte.

Blog codes

₊˚⊹ 1. Le nom et l'adresse du blog

₊˚⊹ 2. Le thème

₊˚⊹ 3. Les paramètres généraux

₊˚⊹ 4. Créer tes pages principales

₊˚⊹ 5. Configurer le gadget de liste des pages

₊˚⊹ 6. Mise en page des gadgets

₊˚⊹ 1. Le style de mon menu

₊˚⊹ 2. La Librairie & Tourne-disque Vinyle

₊˚⊹ 3. Top 5 de mes films préférés

₊˚⊹ 4. Currently watching

Aucun commentaire:

Enregistrer un commentaire