Banner

Elevate your brand's atmosphere and captivate customers with expert sensory marketing at SensoLab Marketing Inc., Montreal.

Transform Ambiance for Better Engagement

Blurred background of outdoor restaurant with abstract bokeh light. Outdoor cafe with tables and chairs. Defocused Background

Beautician showing customer new products in beauty salon

Embed

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
  /* --- DESIGN SENSOLAB : CLEAN, LABO & PREMIUM --- */
  :root {
    --sl-dark: #2d3436;
    --sl-accent: #0984e3; /* Bleu clinique/confiance */
    --sl-bg: #f5f6fa;
    --sl-white: #ffffff;
    --sl-gray: #dfe6e9;
    --sl-text: #636e72;
  }

  .senso-widget {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--sl-bg);
    padding: 40px 20px;
    border-radius: 12px;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* HEADER & CONTROLS */
  .senso-header {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .senso-header h2 {
    color: var(--sl-dark);
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
  }
  
  .senso-header p {
    color: var(--sl-accent);
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 10px;
  }

  .senso-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
  }

  .senso-search {
    flex: 2;
    min-width: 280px;
    max-width: 500px;
    position: relative;
  }

  .senso-search input {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid var(--sl-gray);
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
    background: white;
  }

  .senso-search input:focus {
    border-color: var(--sl-accent);
    box-shadow: 0 4px 12px rgba(9, 132, 227, 0.1);
  }

  .senso-filter {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    padding: 15px 20px;
    border: 1px solid var(--sl-gray);
    border-radius: 8px;
    background: white;
    font-size: 15px;
    cursor: pointer;
    outline: none;
  }

  /* GRID */
  .senso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
  }

  /* CARD DESIGN */
  .senso-card {
    background: var(--sl-white);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .senso-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
  }

  /* Couleurs par ambiance */
  .type-clean { border-top-color: #00cec9; } /* Cyan */
  .type-luxe { border-top-color: #6c5ce7; } /* Violet */
  .type-spa { border-top-color: #00b894; } /* Vert menthe */
  .type-warm { border-top-color: #d63031; } /* Rouge chaud */
  .type-citrus { border-top-color: #fdcb6e; } /* Jaune */

  .card-sku {
    font-family: monospace;
    color: var(--sl-text);
    font-size: 0.85em;
    background: #f1f2f6;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
  }

  .card-title {
    font-size: 1.4em;
    color: var(--sl-dark);
    margin: 0 0 5px 0;
    font-weight: 700;
  }

  .card-category {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sl-accent);
    margin-bottom: 15px;
    font-weight: 600;
  }

  .card-notes {
    color: var(--sl-text);
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
  }

  .card-footer {
    border-top: 1px solid var(--sl-gray);
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .availability-dot {
    height: 10px;
    width: 10px;
    background-color: #27ae60; /* Toujours vert car sourcing facile */
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
  }
  
  .stock-status {
    font-size: 0.8em;
    color: #27ae60;
    font-weight: 600;
  }

  .no-result {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
    color: var(--sl-text);
    font-size: 1.2em;
  }

</style>
</head>
<body>

<div class="senso-widget">
  
  <div class="senso-header">
    <h2>SensoLab Collection</h2>
    <p>Catalogue des Fragrances Professionnelles</p>
  </div>

  <div class="senso-controls">
    <div class="senso-search">
      <input type="text" id="slSearch" placeholder="Rechercher (ex: Santal, Coton, SL-102...)">
    </div>
    <select id="slFilter" class="senso-filter">
      <option value="all">Toutes les ambiances</option>
      <option value="Luxe & Hotel">Luxe & Hôtellerie</option>
      <option value="Clean & Fresh">Propre & Frais</option>
      <option value="Spa & Wellness">Spa & Bien-être</option>
      <option value="Woody & Warm">Boisé & Chaleureux</option>
      <option value="Citrus & Energy">Agrumes & Énergie</option>
    </select>
  </div>

  <div id="slGrid" class="senso-grid">
    </div>

</div>

<script>
  /* BASE DE DONNÉES SENSOLAB
     Ces parfums correspondent aux standards de l'industrie (Bulk/Wholesale).
     Vous pouvez les acheter chez n'importe quel grossiste sous ces noms génériques.
  */
  const sensoInventory = [
    // --- LUXE & HOTEL (Inspirations palaces) ---
    { 
      sku: "SL-101", 
      name: "Santal 33 Type", 
      category: "Luxe & Hotel", 
      typeClass: "type-luxe",
      notes: "Le classique new-yorkais. Bois de santal, cardamome, cuir vintage et violette.",
      match: "Santal" 
    },
    { 
      sku: "SL-102", 
      name: "White Tea & Thyme", 
      category: "Luxe & Hotel", 
      typeClass: "type-luxe",
      notes: "Signature des grands hôtels. Thé blanc soyeux, thym frais et une touche de jasmin.",
      match: "White Tea" 
    },
    { 
      sku: "SL-103", 
      name: "Black Amber & Lavender", 
      category: "Luxe & Hotel", 
      typeClass: "type-luxe",
      notes: "Sophistiqué et profond. Ambre noir, lavande française et myrrhe crémeuse.",
      match: "Amber" 
    },

    // --- CLEAN & FRESH (Neutralisants et Propreté) ---
    { 
      sku: "SL-201", 
      name: "Clean Cotton", 
      category: "Clean & Fresh", 
      typeClass: "type-clean",
      notes: "L'odeur du linge séché au soleil. Coton frais, ozone et fleurs blanches.",
      match: "Cotton" 
    },
    { 
      sku: "SL-202", 
      name: "Ocean Mist", 
      category: "Clean & Fresh", 
      typeClass: "type-clean",
      notes: "Air marin, sel de mer et musc frais. Une brise vivifiante.",
      match: "Ocean" 
    },
    { 
      sku: "SL-203", 
      name: "Fresh Linen", 
      category: "Clean & Fresh", 
      typeClass: "type-clean",
      notes: "Poudreux et impeccable. Accord de lessive propre et de citron vert.",
      match: "Linen" 
    },

    // --- SPA & WELLNESS (Détente) ---
    { 
      sku: "SL-301", 
      name: "Eucalyptus & Mint", 
      category: "Spa & Wellness", 
      typeClass: "type-spa",
      notes: "L'ambiance hammam par excellence. Eucalyptus globulus et menthe poivrée.",
      match: "Eucalyptus" 
    },
    { 
      sku: "SL-302", 
      name: "Bamboo & Coconut", 
      category: "Spa & Wellness", 
      typeClass: "type-spa",
      notes: "Vert et luxuriant. Tiges de bambou, noix de coco et feuilles vertes.",
      match: "Bamboo" 
    },
    { 
      sku: "SL-303", 
      name: "Lavender Sage", 
      category: "Spa & Wellness", 
      typeClass: "type-spa",
      notes: "Calmant et terreux. Lavande, sauge sclarée et bois flotté.",
      match: "Lavender" 
    },

    // --- WOODY & WARM (Masculin et Hiver) ---
    { 
      sku: "SL-401", 
      name: "Mahogany Teakwood", 
      category: "Woody & Warm", 
      typeClass: "type-warm",
      notes: "Bois précieux. Acajou, bois de teck, chêne et une pointe de lavande.",
      match: "Mahogany" 
    },
    { 
      sku: "SL-402", 
      name: "Tobacco & Vanilla", 
      category: "Woody & Warm", 
      typeClass: "type-warm",
      notes: "Riche et opulent. Feuilles de tabac, vanille chaude et épices.",
      match: "Tobacco" 
    },
    { 
      sku: "SL-403", 
      name: "Palo Santo", 
      category: "Woody & Warm", 
      typeClass: "type-warm",
      notes: "Bois sacré. Palo Santo, ambre chaud et musc doux.",
      match: "Palo" 
    },

    // --- CITRUS & ENERGY (Dynamique) ---
    { 
      sku: "SL-501", 
      name: "Volcano Citrus", 
      category: "Citrus & Energy", 
      typeClass: "type-citrus",
      notes: "Explosion tropicale. Oranges, citrons, limes et note sucrée.",
      match: "Citrus" 
    },
    { 
      sku: "SL-502", 
      name: "Grapefruit & Mangosteen", 
      category: "Citrus & Energy", 
      typeClass: "type-citrus",
      notes: "Pamplemousse rose zesteux et fruit exotique sucré.",
      match: "Grapefruit" 
    }
  ];

  // LOGIQUE D'AFFICHAGE
  const grid = document.getElementById('slGrid');
  const searchInput = document.getElementById('slSearch');
  const filterSelect = document.getElementById('slFilter');

  function render(items) {
    grid.innerHTML = '';
    if(items.length === 0) {
      grid.innerHTML = '<div class="no-result">Aucune fragrance trouvée.</div>';
      return;
    }

    items.forEach(item => {
      const card = document.createElement('div');
      card.className = `senso-card ${item.typeClass}`;
      card.innerHTML = `
        <div>
          <span class="card-sku">${item.sku}</span>
          <h3 class="card-title">${item.name}</h3>
          <div class="card-category">${item.category}</div>
          <p class="card-notes">${item.notes}</p>
        </div>
        <div class="card-footer">
          <span class="stock-status">
            <span class="availability-dot"></span>Disponible Pro
          </span>
        </div>
      `;
      grid.appendChild(card);
    });
  }

  function update() {
    const term = searchInput.value.toLowerCase();
    const cat = filterSelect.value;

    const filtered = sensoInventory.filter(item => {
      const matchesTerm = item.name.toLowerCase().includes(term) || 
                          item.sku.toLowerCase().includes(term) || 
                          item.notes.toLowerCase().includes(term);
      const matchesCat = cat === 'all' || item.category === cat;
      return matchesTerm && matchesCat;
    });

    render(filtered);
  }

  searchInput.addEventListener('input', update);
  filterSelect.addEventListener('change', update);

  // Initialisation
  render(sensoInventory);

</script>
</body>
</html>


SensoLab Marketing Inc.

SensoLab Marketing Inc. is the Canadian leader in sensory marketing services to retail businesses and hospitality industry. We make in store audit, optimize customer experience and engagement, experiential marketing and we also offer 360 marketing. 