templates/index.html

{% extends "base.html" %}
{% block content %}

<!-- Background tiles -->
<div class="bg-gallery">
  <div class="bg-tile"
       style="--bg: url('{{ url_for('static', filename='img/11.png') }}');"
       aria-label="MaterialMind in action"></div>
  <div class="bg-tile"
       style="--bg: url('{{ url_for('static', filename='img/22.jpg') }}');"
       aria-label="Industrial materials context"></div>
</div>

<h2>Find and rank materials</h2>

<form action="{{ url_for('recommend') }}" method="post" class="grid" id="mmForm">
  <label>Application
    <input name="environment" placeholder="seawater / sour service / high-T oxidation"
           value="">
  </label>
  <label>Temperature
    <input name="temperature" placeholder="e.g., 20–25 °C" value="">
  </label>
  <label>Min UTS (MPa)
    <input name="min_uts" type="number" min="0" step="10" placeholder="e.g., 900" value="">
  </label>
  <label>Max density (g/cm³)
    <input name="max_density" type="number" min="0" step="0.1" placeholder="e.g., 8.2" value="">
  </label>
  <label>Budget
    <input name="budget" placeholder="open / low / medium / high" value="">
  </label>
  <label>Process
    <input name="process" placeholder="wrought / casting / AM / any" value="">
  </label>

  <!-- PRIORITIES ONLY (no numbers displayed) -->
  <fieldset class="prefs" id="prefsBox">
    <legend>Priorities</legend>

    <div class="pref-row">
      <label>Performance</label>
      <select class="prio" data-target="w_perf" name="p_perf">
        <option value="very_high">Very high</option>
        <option value="high" selected>High</option>
        <option value="medium">Medium</option>
        <option value="low">Low</option>
        <option value="very_low">Very low</option>
      </select>
      <input type="hidden" name="w_perf" value="75">
    </div>

    <div class="pref-row">
      <label>Stability</label>
      <select class="prio" data-target="w_stab" name="p_stab">
        <option value="very_high" selected>Very high</option>
        <option value="high">High</option>
        <option value="medium">Medium</option>
        <option value="low">Low</option>
        <option value="very_low">Very low</option>
      </select>
      <input type="hidden" name="w_stab" value="100">
    </div>

    <div class="pref-row">
      <label>Cost</label>
      <select class="prio" data-target="w_cost" name="p_cost">
        <option value="not_important">Not important</option>
        <option value="high" selected>High</option>
        <option value="medium">Medium</option>
        <option value="low">Low</option>
        <option value="very_low">Very low</option>
      </select>
      <input type="hidden" name="w_cost" value="75">
    </div>

    <div class="pref-row">
      <label>Availability</label>
      <select class="prio" data-target="w_avail" name="p_avail">
        <option value="very_high">Very high</option>
        <option value="high" selected>High</option>
        <option value="medium">Medium</option>
        <option value="low">Low</option>
        <option value="very_low">Very low</option>
      </select>
      <input type="hidden" name="w_avail" value="75">
    </div>
  </fieldset>

  <label>Top-k context
    <input name="k" type="number" min="3" max="10" value="{{ default_k }}">
  </label>

  <div class="actions">
    <button class="btn" id="submitBtn" type="submit">Get ranked shortlist</button>
  </div>
</form>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    <div class="flash">
      {% for category, msg in messages %}
        <p class="{{ category }}">{{ msg }}</p>
      {% endfor %}
    </div>
  {% endif %}
{% endwith %}

<script>
(function () {
  // Priority -> hidden numeric weight (0..100), independent
  const mapStandard = { very_high: 100, high: 75, medium: 50, low: 25, very_low: 0 };
  const mapCost     = { not_important: 0, high: 75, medium: 50, low: 25, very_low: 10 };

  function applyMapping(select){
    const target = select.dataset.target;
    const hidden = document.querySelector(`input[name="${target}"]`);
    const isCost = (target === "w_cost");
    const m = isCost ? mapCost : mapStandard;
    hidden.value = m[select.value] ?? 50;
  }

  document.querySelectorAll('select.prio').forEach(sel => {
    sel.addEventListener('change', () => applyMapping(sel));
    applyMapping(sel);
  });
})();
</script>
{% endblock %}