102 lines
No EOL
4.3 KiB
HTML
102 lines
No EOL
4.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Añadir Feed{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="card feed-detail-card"
|
|
style="padding: 40px; border-radius: 15px; background-color: var(--glass-bg); box-shadow: 0 10px 30px rgba(0,0,0,0.05); backdrop-filter: blur(10px);">
|
|
<h1
|
|
style="font-family: var(--primary-font); font-weight: 700; margin-bottom: 30px; border-bottom: 2px solid var(--accent-color); display: inline-block; padding-bottom: 10px;">
|
|
Añadir Feed
|
|
</h1>
|
|
|
|
<form action="{{ url_for('feeds.add_feed') }}" method="post" id="addFeedForm" class="form-grid">
|
|
|
|
<!-- Nombre -->
|
|
<div class="floating-label-group">
|
|
<input type="text" id="nombre" name="nombre" placeholder=" " required>
|
|
<label for="nombre">Nombre del feed</label>
|
|
</div>
|
|
|
|
<!-- Descripción -->
|
|
<div class="floating-label-group">
|
|
<textarea id="descripcion" name="descripcion" placeholder=" " rows="3"></textarea>
|
|
<label for="descripcion">Descripción (opcional)</label>
|
|
</div>
|
|
|
|
<!-- URL -->
|
|
<div class="floating-label-group">
|
|
<input type="url" id="url" name="url" placeholder=" " required>
|
|
<label for="url">URL del feed</label>
|
|
</div>
|
|
|
|
<div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
|
|
<!-- Categoria (Searchable) -->
|
|
<div class="form-group">
|
|
<label for="categoria_id"
|
|
style="display: block; margin-bottom: 8px; font-weight: 600;">Categoría</label>
|
|
<select id="categoria_id" name="categoria_id" class="searchable"
|
|
placeholder="Selecciona una categoría...">
|
|
<option value="">— Sin categoría —</option>
|
|
{% for c in categorias %}
|
|
<option value="{{ c.id }}">{{ c.nombre }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Pais (Searchable) -->
|
|
<div class="form-group">
|
|
<label for="pais_id" style="display: block; margin-bottom: 8px; font-weight: 600;">País</label>
|
|
<select id="pais_id" name="pais_id" class="searchable" placeholder="Selecciona un país...">
|
|
<option value="">Global</option>
|
|
{% for p in paises %}
|
|
<option value="{{ p.id }}">{{ p.nombre }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Idioma & Submit -->
|
|
<div class="form-row"
|
|
style="display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: end; margin-top: 20px;">
|
|
<div class="floating-label-group" style="margin-bottom: 0;">
|
|
<input type="text" id="idioma" name="idioma" placeholder=" " maxlength="5">
|
|
<label for="idioma">Idioma (ej: es)</label>
|
|
</div>
|
|
|
|
<div class="form-actions" style="text-align: right;">
|
|
<a href="{{ url_for('feeds.list_feeds') }}" class="btn btn-secondary"
|
|
style="margin-right: 10px; background: transparent; color: var(--text-color); border: 1px solid var(--border-color);">
|
|
Cancelar
|
|
</a>
|
|
<button class="btn btn-primary" type="submit" id="submitBtn">
|
|
<i class="fas fa-plus"></i> Añadir Feed
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Real-time URL Validation
|
|
const urlInput = document.getElementById('url');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
|
|
urlInput.addEventListener('input', function () {
|
|
if (this.value && this.validity.valid) {
|
|
this.style.borderColor = "#2ecc71"; // Green
|
|
} else if (this.value) {
|
|
this.style.borderColor = "#e74c3c"; // Red
|
|
} else {
|
|
this.style.borderColor = ""; // Reset
|
|
}
|
|
});
|
|
|
|
// Form Submit State
|
|
document.getElementById('addFeedForm').addEventListener('submit', function () {
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |