technews/newspaper_view.html at 30c3821d98d85f7808ea89e6b0d79e984181d890

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tech News - {{ newspaper.created_at[:10] }}</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
             font-family: 'Georgia', 'Times New Roman', serif;
             background-color: #f8f9fa;
             color: #202124;
             padding: 40px 20px;
         }
         .newspaper {
             max-width: 1200px;
             margin: 0 auto;
             background-color: #fff;
             padding: 60px 80px;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
         .masthead {
             text-align: center;
             border-bottom: 4px double #202124;
             padding-bottom: 20px;
             margin-bottom: 30px;
         }
         .newspaper-title {
             font-size: 72px;
             font-weight: bold;
             font-family: 'Georgia', serif;
             letter-spacing: 2px;
             margin-bottom: 10px;
         }
         .newspaper-date {
             font-size: 16px;
             color: #5f6368;
             font-family: arial, sans-serif;
             text-transform: uppercase;
             letter-spacing: 1px;
         }
         .article-grid {
             column-count: 2;
             column-gap: 40px;
             margin-top: 40px;
         }
         .article {
             break-inside: avoid;
             margin-bottom: 30px;
             page-break-inside: avoid;
         }
         .article-title {
             font-size: 24px;
             font-weight: bold;
             margin-bottom: 8px;
             line-height: 1.3;
             color: #202124;
         }
         .article-title a {
             color: #202124;
             text-decoration: none;
         }
         .article-title a:hover {
             color: #1a73e8;
         }
         .article-meta {
             font-size: 12px;
             color: #5f6368;
             margin-bottom: 10px;
             font-family: arial, sans-serif;
         }
         .article-source {
             font-weight: bold;
             color: #1a73e8;
         }
         .article-description {
             font-size: 16px;
             line-height: 1.6;
             text-align: justify;
             color: #3c4043;
             word-break: break-all;
         }
         .article-image {
             width: 100%;
             max-width: 600px;
             height: auto;
             margin: 15px 0;
             border-radius: 4px;
         }
         .section-divider {
             border-top: 2px solid #e8eaed;
             margin: 40px 0;
         }
         .footer {
             text-align: center;
             margin-top: 60px;
             padding-top: 20px;
             border-top: 1px solid #e8eaed;
             font-size: 12px;
             color: #5f6368;
             font-family: arial, sans-serif;
         }
         @media print {
             body {
                 background-color: #fff;
                 padding: 0;
             }
             .newspaper {
                 box-shadow: none;
                 padding: 40px;
             }
         }
         @media (max-width: 768px) {
             .article-grid {
                 column-count: 1;
             }
             .newspaper {
                 padding: 30px 20px;
             }
             .newspaper-title {
                 font-size: 48px;
             }
         }
     </style>
 </head>
 <body>
     <div class="newspaper">
         <div class="masthead">
             <div class="newspaper-title">TECH NEWS</div>
             <div class="newspaper-date">{{ newspaper.created_at[:10] }} - {{ newspaper.created_at[11:19] }}</div>
         </div>
         <div style="text-align: center; margin-bottom: 40px;">
             <p style="font-size: 18px; color: #5f6368; font-family: arial, sans-serif;">
                 {{ newspaper.article_count }} New Articles from Latest Synchronization
             </p>
         </div>
         <div class="article-grid">
             {% for article in articles %}
             <article class="article">
                 <h2 class="article-title">
                     <a href="{{ article.link }}" target="_blank">{{ article.title }}</a>
                 </h2>
                 <div class="article-meta">
                     <span class="article-source">{{ article.feed_name }}</span>
                     {% if article.author %}
                     | By {{ article.author }}
                     {% endif %}
                     {% if article.published %}
                     | {{ article.published[:10] }}
                     {% endif %}
                 </div>
                 <div class="article-description">
                     {% set full_content = article.content if article.content else article.description %}
                     {% set clean_text = full_content|striptags %}
                     {% set display_text = clean_text[:500] if article.content else clean_text[:300] %}
                     {{ display_text }}{% if clean_text|length > (500 if article.content else 300) %}...{% endif %}
                 </div>
                 {% set words = full_content.split() %}
                 {% for word in words %}
                     {% if 'https' in word and ('.jpg' in word or '.jpeg' in word or '.png' in word or '.gif' in word or '.webp' in word) %}
                         <img src="{{ word }}" alt="Article image" class="article-image" onerror="this.style.display='none'">
                     {% endif %}
                 {% endfor %}
             </article>
             {% endfor %}
         </div>
         <div class="footer">
             Molodetz News - always up to date | Synchronized at {{ newspaper.created_at[:19].replace('T', ' ') }}
         </div>
     </div>
 </body>
 </html>