From 86a2cdb48ed8ad076a0d6c4f16608943a267eb09 Mon Sep 17 00:00:00 2001
From: jlimolina <joseluisinfantesmolina@gmail.com>
Date: Tue, 27 May 2025 16:02:48 +0200
Subject: [PATCH] cambios de interfaz y de imagen

---
 templates/base.html     | 150 +++++++++++++++++++++++++++++++++++++++-
 templates/noticias.html |  34 +++++----
 2 files changed, 165 insertions(+), 19 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index fd16237..b5b2a4d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,7 +5,155 @@
   <title>{% block title %}Noticias RSS{% endblock %}</title>
   <link href="https://fonts.googleapis.com/css?family=Inter:400,600&display=swap" rel="stylesheet">
   <style>
-    /* [todo el CSS del ejemplo anterior aquí] */
+    body {
+      background: #f6f8fa;
+      font-family: 'Inter', Arial, sans-serif;
+      margin: 0;
+      color: #222;
+    }
+    .container {
+      max-width: 900px;
+      margin: 32px auto;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 4px 16px #0001;
+      padding: 32px 32px 20px 32px;
+      min-height: 80vh;
+    }
+    h1, h2 {
+      font-weight: 600;
+      color: #2d3e50;
+      margin-bottom: 18px;
+    }
+    .card {
+      background: #f8fafc;
+      border-radius: 8px;
+      box-shadow: 0 1px 4px #0001;
+      padding: 24px 20px 18px 20px;
+      margin-bottom: 30px;
+    }
+    .btn {
+      display: inline-block;
+      background: #396afc;
+      color: #fff !important;
+      font-weight: 600;
+      padding: 8px 20px;
+      border: none;
+      border-radius: 6px;
+      text-decoration: none;
+      font-size: 1em;
+      margin: 5px 0;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .btn:hover {
+      background: #274c8a;
+    }
+    label {
+      font-weight: 500;
+      margin-top: 10px;
+      margin-bottom: 2px;
+      display: block;
+    }
+    input[type="text"],
+    input[type="url"],
+    input[type="file"],
+    select,
+    textarea {
+      width: 100%;
+      padding: 7px 10px;
+      margin-bottom: 13px;
+      border: 1px solid #d3d8e1;
+      border-radius: 5px;
+      font-size: 1em;
+      font-family: inherit;
+      background: #f8fafc;
+      transition: border 0.2s;
+      box-sizing: border-box;
+    }
+    input[type="text"]:focus,
+    input[type="url"]:focus,
+    select:focus,
+    textarea:focus {
+      outline: none;
+      border-color: #396afc;
+      background: #f1f6fd;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 10px;
+      background: #fff;
+      font-size: 1em;
+      box-shadow: 0 1px 8px #0001;
+    }
+    th, td {
+      padding: 9px 10px;
+      border-bottom: 1px solid #e5e7eb;
+      text-align: left;
+    }
+    th {
+      background: #f1f5fa;
+      font-weight: 600;
+      color: #396afc;
+      border-top: 1px solid #e5e7eb;
+    }
+    tr:last-child td {
+      border-bottom: none;
+    }
+    .top-link {
+      display: inline-block;
+      margin-bottom: 22px;
+      color: #396afc;
+      font-weight: 500;
+      text-decoration: none;
+      font-size: 1em;
+      transition: color 0.2s;
+    }
+    .top-link:hover {
+      color: #274c8a;
+      text-decoration: underline;
+    }
+    /* ------ Noticias con imagen a la derecha ------ */
+    .noticias-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .noticia-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #ececec;
+      padding: 20px 0 20px 0;
+      gap: 30px;
+      min-height: 110px;
+    }
+    .noticia-texto {
+      flex: 1 1 62%;
+      min-width: 0;
+    }
+    .noticia-imagen {
+      flex: 0 0 165px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .noticia-imagen img {
+      max-width: 150px;
+      max-height: 95px;
+      border-radius: 9px;
+      box-shadow: 0 1px 8px #0002;
+      object-fit: cover;
+      display: block;
+    }
+    @media (max-width: 730px) {
+      .container { padding: 10px; }
+      .noticia-item { flex-direction: column; align-items: flex-start; gap: 9px; }
+      .noticia-imagen { align-self: flex-start; }
+    }
+    /* Scroll suave para tablas grandes */
+    .card { overflow-x: auto; }
   </style>
 </head>
 <body>
diff --git a/templates/noticias.html b/templates/noticias.html
index 11dd72e..89599a9 100644
--- a/templates/noticias.html
+++ b/templates/noticias.html
@@ -48,26 +48,24 @@
 
   <div class="card">
     <h2 style="margin-top:0;">Noticias recientes</h2>
-    <ul style="list-style:none; padding:0;">
+    <ul class="noticias-list">
       {% for fecha, titulo, resumen, url, imagen_url, cat_nom, pais_nom, cont_nom in noticias %}
-        <li style="margin-bottom: 2em; border-bottom: 1px solid #eee; padding-bottom: 1em;">
-          <div style="display: flex; gap:18px;">
-            {% if imagen_url %}
-              <div>
-                <img src="{{ imagen_url }}" alt="img" style="max-width:160px; max-height:100px; border-radius:6px;">
-              </div>
-            {% endif %}
-            <div style="flex:1;">
-              <div style="color:#64748b; font-size:0.97em;"><b>{{ fecha }}</b></div>
-              <a href="{{ url }}" target="_blank"><strong>{{ titulo }}</strong></a><br>
-              <span>{{ resumen|safe }}</span><br>
-              <small style="color:#64748b;">
-                Categoría: {{ cat_nom or 'N/A' }} |
-                País: {{ pais_nom or 'N/A' }} |
-                Continente: {{ cont_nom or 'N/A' }}
-              </small>
-            </div>
+        <li class="noticia-item">
+          <div class="noticia-texto">
+            <div style="color:#64748b; font-size:0.97em;"><b>{{ fecha }}</b></div>
+            <a href="{{ url }}" target="_blank"><strong>{{ titulo }}</strong></a><br>
+            <span>{{ resumen|safe }}</span><br>
+            <small style="color:#64748b;">
+              Categoría: {{ cat_nom or 'N/A' }} |
+              País: {{ pais_nom or 'N/A' }} |
+              Continente: {{ cont_nom or 'N/A' }}
+            </small>
           </div>
+          {% if imagen_url %}
+            <div class="noticia-imagen">
+              <img src="{{ imagen_url }}" alt="img">
+            </div>
+          {% endif %}
         </li>
       {% else %}
         <li>No hay noticias que mostrar con estos filtros.</li>