index.erb · Testing Qwen 3.6 Locally, End-to-End Full Guide

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dictionnaire Wiktionnaire</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
      color: #e0e0e0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem 1rem;
    }

    .container {
      width: 100%;
      max-width: 520px;
    }

    h1 {
      text-align: center;
      font-size: 1.8rem;
      margin-bottom: 0.3rem;
      color: #e94560;
      font-weight: 700;
    }

    .subtitle {
      text-align: center;
      color: #8892a8;
      font-size: 0.95rem;
      margin-bottom: 2rem;
    }

    .search-box {
      background: rgba(255,255,255,0.06);
      border-radius: 16px;
      padding: 1.5rem;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }

    form {
      display: flex;
      gap: 0.5rem;
    }

    input[type="text"] {
      flex: 1;
      padding: 0.9rem 1.1rem;
      border: 2px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      font-size: 1.05rem;
      background: rgba(0,0,0,0.3);
      color: #f0f0f0;
      outline: none;
      transition: border-color 0.3s;
    }

    input[type="text"]:focus {
      border-color: #e94560;
    }

    input[type="text"]::placeholder {
      color: #6b7280;
    }

    button {
      padding: 0.9rem 1.4rem;
      background: #e94560;
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 1.05rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
      white-space: nowrap;
    }

    button:hover { background: #c73652; }
    button:active { transform: scale(0.97); }

    .error {
      margin-top: 1.2rem;
      padding: 0.9rem 1rem;
      background: rgba(233, 69, 96, 0.15);
      border: 1px solid rgba(233, 69, 96, 0.3);
      border-radius: 12px;
      color: #f87171;
      text-align: center;
      font-size: 0.95rem;
    }

    /* --- Result styles --- */
    .result-card {
      background: rgba(255,255,255,0.06);
      border-radius: 16px;
      padding: 1.5rem;
      margin-top: 1.2rem;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      animation: fadeUp 0.4s ease-out;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .result-word {
      font-size: 1.6rem;
      font-weight: 700;
      color: #e94560;
      margin-bottom: 0.3rem;
    }

    .ipa-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1.2rem;
    }

    .ipa-badge {
      background: rgba(233, 69, 96, 0.18);
      color: #f87171;
      padding: 0.35rem 0.8rem;
      border-radius: 20px;
      font-family: 'Noto Sans', sans-serif;
      font-size: 1rem;
      font-weight: 500;
      border: 1px solid rgba(233, 69, 96, 0.25);
    }

    .def-item {
      margin-bottom: 1.2rem;
      padding-bottom: 1.2rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .def-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .def-heading {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #8892a8;
      margin-bottom: 0.4rem;
      font-weight: 600;
    }

    .def-content {
      font-size: 1rem;
      line-height: 1.65;
      color: #d1d5db;
    }

    .back-link {
      display: inline-block;
      margin-top: 1.2rem;
      color: #e94560;
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 500;
      transition: color 0.2s;
    }

    .back-link:hover { color: #f87171; }

    @media (max-width: 400px) {
      form { flex-direction: column; }
      h1 { font-size: 1.5rem; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>📖 Wiktionnaire</h1>
    <p class="subtitle">Dictionnaire collaboratif en français</p>

    <div class="search-box">
      <form action="/search" method="POST">
        <input type="text" name="word" placeholder="Rechercher un mot…" autofocus autocomplete="off">
        <button type="submit">Chercher</button>
      </form>
    </div>

    <% if defined?(@error) && @error %>
      <div class="error"><%= @error %></div>
    <% end %>

    <% if defined?(@definitions) && @definitions && !@definitions.empty? %>
      <div class="result-card">
        <div class="result-word"><%= @word %></div>

        <% if @ipa && !@ipa.empty? %>
          <div class="ipa-list">
            <% @ipa.each do |ip| %>
              <span class="ipa-badge"><%= ip %></span>
            <% end %>
          </div>
        <% end %>

        <% @definitions.each do |defn| %>
          <div class="def-item">
            <div class="def-heading"><%= defn[:heading] %></div>
            <div class="def-content"><%= defn[:content] %></div>
          </div>
        <% end %>
      </div>

      <a href="/" class="back-link">← Nouvelle recherche</a>
    <% end %>
  </div>
</body>
</html>