Add Weekly Weather screenshots and improve project descriptions with links to resources

content/projects/index.md

@@ -14,9 +14,19 @@ A clean, intuitive interface for viewing weather forecasts. Weekly Weather provi
 - Available in 37 languages
 - Lightweight and battery-efficient
 
-{{< screenshots "/images/weekly_weather/screenshot1.svg" "/images/weekly_weather/screenshot2.svg" "/images/weekly_weather/screenshot3.svg" >}}
+<div style="display: flex !important; flex-wrap: wrap !important; gap: 1rem !important; justify-content: center !important; margin: 2rem 0 !important;">
+  <div style="flex: 1 !important; max-width: 180px !important; min-width: 120px !important;">
+    <img src="/images/weekly_weather/screenshot1.png" alt="Weather forecast screen" style="display: block !important; width: 100% !important; height: auto !important; border-radius: 8px !important; border: 1px solid #ddd !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;">
+  </div>
+  <div style="flex: 1 !important; max-width: 180px !important; min-width: 120px !important;">
+    <img src="/images/weekly_weather/screenshot2.png" alt="Location selection screen" style="display: block !important; width: 100% !important; height: auto !important; border-radius: 8px !important; border: 1px solid #ddd !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;">
+  </div>
+  <div style="flex: 1 !important; max-width: 180px !important; min-width: 120px !important;">
+    <img src="/images/weekly_weather/screenshot3.png" alt="Weather details screen" style="display: block !important; width: 100% !important; height: auto !important; border-radius: 8px !important; border: 1px solid #ddd !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;">
+  </div>
+</div>
 
-Weather data provided by Open-Meteo with weather icons from Makin-Things.
+Weather data provided by [Open-Meteo](https://open-meteo.com/) with weather icons from [Makin-Things/weather-icons](https://github.com/Makin-Things/weather-icons).
 {{< /project >}}
 
 {{< project img="/images/sbrowser_logo.webp" title="sBrowser" url="https://repo.codeskraps.com/codeskraps/sBrowser" >}}

hugo.toml

@@ -2,6 +2,11 @@ baseURL = 'https://codeskraps.com/'
 languageCode = 'en-us'
 title = 'codeskraps'
 
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
+
 [services]
     [services.googleAnalytics]
         id = 'G-YP8WK3KZF1'
@@ -19,7 +24,7 @@ title = 'codeskraps'
         weight = 0
     [[menu.header]]
         name = "projects"
-	url = "/projects/"
+        url = "/projects/"
         weight = 1
     [[menu.header]]
         name = "about"

layouts/shortcodes/screenshots.html

@@ -1,33 +1,7 @@
-<div class="screenshot-gallery">
-  <style>
-    .screenshot-gallery {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 1rem;
-      justify-content: center;
-      margin: 1.5rem 0;
-    }
-    .screenshot-item {
-      flex: 0 0 calc(33% - 1rem);
-      max-width: 200px;
-    }
-    .screenshot-item img {
-      width: 100%;
-      height: auto;
-      border-radius: 12px;
-      border: 1px solid #ddd;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }
-    @media (max-width: 768px) {
-      .screenshot-item {
-        flex: 0 0 calc(50% - 1rem);
-      }
-    }
-  </style>
-
+<div class="screenshot-gallery" style="display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1.5rem 0;">
   {{ range .Params }}
-  <div class="screenshot-item">
-    <img src="{{ . }}" alt="App screenshot">
+  <div style="flex: 0 0 30%; max-width: 200px; margin-bottom: 1rem;">
+    <img src="{{ . }}" alt="App screenshot" style="width: 100%; height: auto; border-radius: 12px; border: 1px solid #ddd;">
   </div>
   {{ end }}
 </div> 

public/about/index.html

@@ -112,7 +112,7 @@ About | codeskraps
 </picture>
 </p>
 <p>I&rsquo;m a passionate and highly motivated software engineer with a deep-rooted love for technology that dates back to my first computer, an Amstrad 8256. From those early days of programming as a hobby, I&rsquo;ve turned my passion into a successful career, specializing in cross-platform mobile development with expertise in both Android and iOS ecosystems.</p>
-<!-- raw HTML omitted -->
+<br>
 <h2 id="professional-journey">Professional Journey</h2>
 <p>Currently, I&rsquo;m a professional at Trifork Smart Enterprise, where I leverage my extensive experience in mobile development to deliver high-quality solutions. My career spans various domains, including:</p>
 <ul>

public/images/weekly_weather/screenshot1.svg

@@ -1,55 +0,0 @@
-<svg width="270" height="580" xmlns="http://www.w3.org/2000/svg">
-  <rect width="270" height="580" fill="#f5f5f5"/>
-  <rect x="10" y="10" width="250" height="560" rx="30" ry="30" fill="#ffffff" stroke="#dddddd" stroke-width="2"/>
-  
-  <!-- Top bar -->
-  <rect x="10" y="10" width="250" height="60" rx="30" ry="30" fill="#4a90e2"/>
-  <text x="135" y="45" font-family="Arial" font-size="18" fill="white" text-anchor="middle">Today's Weather</text>
-  
-  <!-- Temperature -->
-  <text x="135" y="130" font-family="Arial" font-size="48" fill="#333333" text-anchor="middle">23°</text>
-  <text x="135" y="160" font-family="Arial" font-size="20" fill="#666666" text-anchor="middle">Sunny</text>
-  
-  <!-- Weather details -->
-  <rect x="30" y="200" width="210" height="1" fill="#eeeeee"/>
-  
-  <text x="50" y="230" font-family="Arial" font-size="16" fill="#666666">Humidity</text>
-  <text x="220" y="230" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">45%</text>
-  
-  <rect x="30" y="240" width="210" height="1" fill="#eeeeee"/>
-  
-  <text x="50" y="270" font-family="Arial" font-size="16" fill="#666666">Wind</text>
-  <text x="220" y="270" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">7 km/h</text>
-  
-  <rect x="30" y="280" width="210" height="1" fill="#eeeeee"/>
-  
-  <!-- Daily forecast -->
-  <text x="30" y="320" font-family="Arial" font-size="18" fill="#333333">This Week</text>
-  
-  <!-- Day 1 -->
-  <text x="50" y="350" font-family="Arial" font-size="14" fill="#666666">Mon</text>
-  <text x="100" y="350" font-family="Arial" font-size="14" fill="#333333">Sunny</text>
-  <text x="220" y="350" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">25°/18°</text>
-  
-  <!-- Day 2 -->
-  <text x="50" y="380" font-family="Arial" font-size="14" fill="#666666">Tue</text>
-  <text x="100" y="380" font-family="Arial" font-size="14" fill="#333333">Cloudy</text>
-  <text x="220" y="380" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">22°/17°</text>
-  
-  <!-- Day 3 -->
-  <text x="50" y="410" font-family="Arial" font-size="14" fill="#666666">Wed</text>
-  <text x="100" y="410" font-family="Arial" font-size="14" fill="#333333">Rainy</text>
-  <text x="220" y="410" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">19°/15°</text>
-  
-  <!-- Day 4 -->
-  <text x="50" y="440" font-family="Arial" font-size="14" fill="#666666">Thu</text>
-  <text x="100" y="440" font-family="Arial" font-size="14" fill="#333333">Partly Cloudy</text>
-  <text x="220" y="440" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">21°/16°</text>
-  
-  <!-- Day 5 -->
-  <text x="50" y="470" font-family="Arial" font-size="14" fill="#666666">Fri</text>
-  <text x="100" y="470" font-family="Arial" font-size="14" fill="#333333">Sunny</text>
-  <text x="220" y="470" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">24°/18°</text>
-  
-  <text x="135" y="540" font-family="Arial" font-size="12" fill="#999999" text-anchor="middle">Weekly Weather App</text>
-</svg> 

public/images/weekly_weather/screenshot2.svg

@@ -1,47 +0,0 @@
-<svg width="270" height="580" xmlns="http://www.w3.org/2000/svg">
-  <rect width="270" height="580" fill="#f5f5f5"/>
-  <rect x="10" y="10" width="250" height="560" rx="30" ry="30" fill="#ffffff" stroke="#dddddd" stroke-width="2"/>
-  
-  <!-- Top bar -->
-  <rect x="10" y="10" width="250" height="60" rx="30" ry="30" fill="#4a90e2"/>
-  <text x="135" y="45" font-family="Arial" font-size="18" fill="white" text-anchor="middle">Locations</text>
-  
-  <!-- Search box -->
-  <rect x="30" y="90" width="210" height="40" rx="20" ry="20" fill="#f0f0f0" stroke="#dddddd" stroke-width="1"/>
-  <text x="50" y="115" font-family="Arial" font-size="14" fill="#999999">Search for a city...</text>
-  <circle cx="220" cy="110" r="12" fill="#4a90e2"/>
-  <text x="220" y="115" font-family="Arial" font-size="14" fill="white" text-anchor="middle">⌕</text>
-  
-  <!-- Current location -->
-  <rect x="30" y="150" width="210" height="60" rx="10" ry="10" fill="#f9f9f9" stroke="#dddddd" stroke-width="1"/>
-  <text x="50" y="180" font-family="Arial" font-size="16" fill="#333333">Current Location</text>
-  <text x="50" y="200" font-family="Arial" font-size="14" fill="#666666">Using GPS</text>
-  <text x="220" y="180" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">23°</text>
-  
-  <!-- Saved locations -->
-  <text x="30" y="240" font-family="Arial" font-size="18" fill="#333333">Saved Locations</text>
-  
-  <!-- Location 1 -->
-  <rect x="30" y="260" width="210" height="60" rx="10" ry="10" fill="#f9f9f9" stroke="#dddddd" stroke-width="1"/>
-  <text x="50" y="290" font-family="Arial" font-size="16" fill="#333333">New York</text>
-  <text x="50" y="310" font-family="Arial" font-size="14" fill="#666666">United States</text>
-  <text x="220" y="290" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">19°</text>
-  
-  <!-- Location 2 -->
-  <rect x="30" y="330" width="210" height="60" rx="10" ry="10" fill="#f9f9f9" stroke="#dddddd" stroke-width="1"/>
-  <text x="50" y="360" font-family="Arial" font-size="16" fill="#333333">London</text>
-  <text x="50" y="380" font-family="Arial" font-size="14" fill="#666666">United Kingdom</text>
-  <text x="220" y="360" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">17°</text>
-  
-  <!-- Location 3 -->
-  <rect x="30" y="400" width="210" height="60" rx="10" ry="10" fill="#f9f9f9" stroke="#dddddd" stroke-width="1"/>
-  <text x="50" y="430" font-family="Arial" font-size="16" fill="#333333">Tokyo</text>
-  <text x="50" y="450" font-family="Arial" font-size="14" fill="#666666">Japan</text>
-  <text x="220" y="430" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">28°</text>
-  
-  <!-- Add new location button -->
-  <circle cx="210" cy="500" r="25" fill="#4a90e2"/>
-  <text x="210" y="508" font-family="Arial" font-size="24" fill="white" text-anchor="middle">+</text>
-  
-  <text x="135" y="540" font-family="Arial" font-size="12" fill="#999999" text-anchor="middle">Weekly Weather App</text>
-</svg> 

public/images/weekly_weather/screenshot3.svg

@@ -1,59 +0,0 @@
-<svg width="270" height="580" xmlns="http://www.w3.org/2000/svg">
-  <rect width="270" height="580" fill="#f5f5f5"/>
-  <rect x="10" y="10" width="250" height="560" rx="30" ry="30" fill="#ffffff" stroke="#dddddd" stroke-width="2"/>
-  
-  <!-- Top bar -->
-  <rect x="10" y="10" width="250" height="60" rx="30" ry="30" fill="#4a90e2"/>
-  <text x="50" y="45" font-family="Arial" font-size="14" fill="white">← Back</text>
-  <text x="160" y="45" font-family="Arial" font-size="18" fill="white" text-anchor="middle">Wednesday</text>
-  
-  <!-- Date -->
-  <text x="135" y="95" font-family="Arial" font-size="14" fill="#666666" text-anchor="middle">August 17, 2023</text>
-  
-  <!-- Weather Icon and Temperature -->
-  <circle cx="135" cy="150" r="40" fill="#f3cf7a"/>
-  <text x="135" y="155" font-family="Arial" font-size="24" fill="white" text-anchor="middle">☁</text>
-  
-  <text x="135" y="220" font-family="Arial" font-size="48" fill="#333333" text-anchor="middle">19°</text>
-  <text x="135" y="250" font-family="Arial" font-size="20" fill="#666666" text-anchor="middle">Partly Cloudy</text>
-  <text x="135" y="280" font-family="Arial" font-size="16" fill="#666666" text-anchor="middle">High: 22° | Low: 15°</text>
-  
-  <!-- Hourly forecast -->
-  <text x="30" y="320" font-family="Arial" font-size="18" fill="#333333">Hourly Forecast</text>
-  
-  <rect x="30" y="330" width="210" height="100" fill="none"/>
-  
-  <!-- Hour 1 -->
-  <text x="50" y="350" font-family="Arial" font-size="14" fill="#666666" text-anchor="middle">9AM</text>
-  <text x="50" y="380" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">☁</text>
-  <text x="50" y="410" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">17°</text>
-  
-  <!-- Hour 2 -->
-  <text x="100" y="350" font-family="Arial" font-size="14" fill="#666666" text-anchor="middle">12PM</text>
-  <text x="100" y="380" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">☀</text>
-  <text x="100" y="410" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">19°</text>
-  
-  <!-- Hour 3 -->
-  <text x="150" y="350" font-family="Arial" font-size="14" fill="#666666" text-anchor="middle">3PM</text>
-  <text x="150" y="380" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">☀</text>
-  <text x="150" y="410" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">22°</text>
-  
-  <!-- Hour 4 -->
-  <text x="200" y="350" font-family="Arial" font-size="14" fill="#666666" text-anchor="middle">6PM</text>
-  <text x="200" y="380" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">☁</text>
-  <text x="200" y="410" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">20°</text>
-  
-  <!-- Details -->
-  <text x="30" y="450" font-family="Arial" font-size="18" fill="#333333">Details</text>
-  
-  <text x="50" y="480" font-family="Arial" font-size="14" fill="#666666">Humidity</text>
-  <text x="220" y="480" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">65%</text>
-  
-  <text x="50" y="510" font-family="Arial" font-size="14" fill="#666666">Wind</text>
-  <text x="220" y="510" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">12 km/h NW</text>
-  
-  <text x="50" y="540" font-family="Arial" font-size="14" fill="#666666">Precipitation</text>
-  <text x="220" y="540" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">30%</text>
-  
-  <text x="135" y="560" font-family="Arial" font-size="12" fill="#999999" text-anchor="middle">Weekly Weather App</text>
-</svg> 

public/projects/index.html

@@ -142,12 +142,18 @@ Projects | codeskraps
 <li>Available in 37 languages</li>
 <li>Lightweight and battery-efficient</li>
 </ul>
-<!-- raw HTML omitted -->
-<!-- raw HTML omitted -->
-<!-- raw HTML omitted -->
-<!-- raw HTML omitted -->
-<!-- raw HTML omitted -->
-<p>Weather data provided by Open-Meteo with weather icons from Makin-Things.</p>
+<div style="display: flex !important; flex-wrap: wrap !important; gap: 1rem !important; justify-content: center !important; margin: 2rem 0 !important;">
+  <div style="flex: 1 !important; max-width: 180px !important; min-width: 120px !important;">
+    <img src="/images/weekly_weather/screenshot1.png" alt="Weather forecast screen" style="display: block !important; width: 100% !important; height: auto !important; border-radius: 8px !important; border: 1px solid #ddd !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;">
+  </div>
+  <div style="flex: 1 !important; max-width: 180px !important; min-width: 120px !important;">
+    <img src="/images/weekly_weather/screenshot2.png" alt="Location selection screen" style="display: block !important; width: 100% !important; height: auto !important; border-radius: 8px !important; border: 1px solid #ddd !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;">
+  </div>
+  <div style="flex: 1 !important; max-width: 180px !important; min-width: 120px !important;">
+    <img src="/images/weekly_weather/screenshot3.png" alt="Weather details screen" style="display: block !important; width: 100% !important; height: auto !important; border-radius: 8px !important; border: 1px solid #ddd !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;">
+  </div>
+</div>
+<p>Weather data provided by <a href="https://open-meteo.com/">Open-Meteo</a> with weather icons from <a href="https://github.com/Makin-Things/weather-icons">Makin-Things/weather-icons</a>.</p>
 
     </div>
   </div>

static/images/weekly_weather/screenshot1.svg

@@ -1,55 +0,0 @@
-<svg width="270" height="580" xmlns="http://www.w3.org/2000/svg">
-  <rect width="270" height="580" fill="#f5f5f5"/>
-  <rect x="10" y="10" width="250" height="560" rx="30" ry="30" fill="#ffffff" stroke="#dddddd" stroke-width="2"/>
-  
-  <!-- Top bar -->
-  <rect x="10" y="10" width="250" height="60" rx="30" ry="30" fill="#4a90e2"/>
-  <text x="135" y="45" font-family="Arial" font-size="18" fill="white" text-anchor="middle">Today's Weather</text>
-  
-  <!-- Temperature -->
-  <text x="135" y="130" font-family="Arial" font-size="48" fill="#333333" text-anchor="middle">23°</text>
-  <text x="135" y="160" font-family="Arial" font-size="20" fill="#666666" text-anchor="middle">Sunny</text>
-  
-  <!-- Weather details -->
-  <rect x="30" y="200" width="210" height="1" fill="#eeeeee"/>
-  
-  <text x="50" y="230" font-family="Arial" font-size="16" fill="#666666">Humidity</text>
-  <text x="220" y="230" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">45%</text>
-  
-  <rect x="30" y="240" width="210" height="1" fill="#eeeeee"/>
-  
-  <text x="50" y="270" font-family="Arial" font-size="16" fill="#666666">Wind</text>
-  <text x="220" y="270" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">7 km/h</text>
-  
-  <rect x="30" y="280" width="210" height="1" fill="#eeeeee"/>
-  
-  <!-- Daily forecast -->
-  <text x="30" y="320" font-family="Arial" font-size="18" fill="#333333">This Week</text>
-  
-  <!-- Day 1 -->
-  <text x="50" y="350" font-family="Arial" font-size="14" fill="#666666">Mon</text>
-  <text x="100" y="350" font-family="Arial" font-size="14" fill="#333333">Sunny</text>
-  <text x="220" y="350" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">25°/18°</text>
-  
-  <!-- Day 2 -->
-  <text x="50" y="380" font-family="Arial" font-size="14" fill="#666666">Tue</text>
-  <text x="100" y="380" font-family="Arial" font-size="14" fill="#333333">Cloudy</text>
-  <text x="220" y="380" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">22°/17°</text>
-  
-  <!-- Day 3 -->
-  <text x="50" y="410" font-family="Arial" font-size="14" fill="#666666">Wed</text>
-  <text x="100" y="410" font-family="Arial" font-size="14" fill="#333333">Rainy</text>
-  <text x="220" y="410" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">19°/15°</text>
-  
-  <!-- Day 4 -->
-  <text x="50" y="440" font-family="Arial" font-size="14" fill="#666666">Thu</text>
-  <text x="100" y="440" font-family="Arial" font-size="14" fill="#333333">Partly Cloudy</text>
-  <text x="220" y="440" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">21°/16°</text>
-  
-  <!-- Day 5 -->
-  <text x="50" y="470" font-family="Arial" font-size="14" fill="#666666">Fri</text>
-  <text x="100" y="470" font-family="Arial" font-size="14" fill="#333333">Sunny</text>
-  <text x="220" y="470" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">24°/18°</text>
-  
-  <text x="135" y="540" font-family="Arial" font-size="12" fill="#999999" text-anchor="middle">Weekly Weather App</text>
-</svg> 

static/images/weekly_weather/screenshot2.svg

@@ -1,47 +0,0 @@
-<svg width="270" height="580" xmlns="http://www.w3.org/2000/svg">
-  <rect width="270" height="580" fill="#f5f5f5"/>
-  <rect x="10" y="10" width="250" height="560" rx="30" ry="30" fill="#ffffff" stroke="#dddddd" stroke-width="2"/>
-  
-  <!-- Top bar -->
-  <rect x="10" y="10" width="250" height="60" rx="30" ry="30" fill="#4a90e2"/>
-  <text x="135" y="45" font-family="Arial" font-size="18" fill="white" text-anchor="middle">Locations</text>
-  
-  <!-- Search box -->
-  <rect x="30" y="90" width="210" height="40" rx="20" ry="20" fill="#f0f0f0" stroke="#dddddd" stroke-width="1"/>
-  <text x="50" y="115" font-family="Arial" font-size="14" fill="#999999">Search for a city...</text>
-  <circle cx="220" cy="110" r="12" fill="#4a90e2"/>
-  <text x="220" y="115" font-family="Arial" font-size="14" fill="white" text-anchor="middle">⌕</text>
-  
-  <!-- Current location -->
-  <rect x="30" y="150" width="210" height="60" rx="10" ry="10" fill="#f9f9f9" stroke="#dddddd" stroke-width="1"/>
-  <text x="50" y="180" font-family="Arial" font-size="16" fill="#333333">Current Location</text>
-  <text x="50" y="200" font-family="Arial" font-size="14" fill="#666666">Using GPS</text>
-  <text x="220" y="180" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">23°</text>
-  
-  <!-- Saved locations -->
-  <text x="30" y="240" font-family="Arial" font-size="18" fill="#333333">Saved Locations</text>
-  
-  <!-- Location 1 -->
-  <rect x="30" y="260" width="210" height="60" rx="10" ry="10" fill="#f9f9f9" stroke="#dddddd" stroke-width="1"/>
-  <text x="50" y="290" font-family="Arial" font-size="16" fill="#333333">New York</text>
-  <text x="50" y="310" font-family="Arial" font-size="14" fill="#666666">United States</text>
-  <text x="220" y="290" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">19°</text>
-  
-  <!-- Location 2 -->
-  <rect x="30" y="330" width="210" height="60" rx="10" ry="10" fill="#f9f9f9" stroke="#dddddd" stroke-width="1"/>
-  <text x="50" y="360" font-family="Arial" font-size="16" fill="#333333">London</text>
-  <text x="50" y="380" font-family="Arial" font-size="14" fill="#666666">United Kingdom</text>
-  <text x="220" y="360" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">17°</text>
-  
-  <!-- Location 3 -->
-  <rect x="30" y="400" width="210" height="60" rx="10" ry="10" fill="#f9f9f9" stroke="#dddddd" stroke-width="1"/>
-  <text x="50" y="430" font-family="Arial" font-size="16" fill="#333333">Tokyo</text>
-  <text x="50" y="450" font-family="Arial" font-size="14" fill="#666666">Japan</text>
-  <text x="220" y="430" font-family="Arial" font-size="16" fill="#333333" text-anchor="end">28°</text>
-  
-  <!-- Add new location button -->
-  <circle cx="210" cy="500" r="25" fill="#4a90e2"/>
-  <text x="210" y="508" font-family="Arial" font-size="24" fill="white" text-anchor="middle">+</text>
-  
-  <text x="135" y="540" font-family="Arial" font-size="12" fill="#999999" text-anchor="middle">Weekly Weather App</text>
-</svg> 

static/images/weekly_weather/screenshot3.svg

@@ -1,59 +0,0 @@
-<svg width="270" height="580" xmlns="http://www.w3.org/2000/svg">
-  <rect width="270" height="580" fill="#f5f5f5"/>
-  <rect x="10" y="10" width="250" height="560" rx="30" ry="30" fill="#ffffff" stroke="#dddddd" stroke-width="2"/>
-  
-  <!-- Top bar -->
-  <rect x="10" y="10" width="250" height="60" rx="30" ry="30" fill="#4a90e2"/>
-  <text x="50" y="45" font-family="Arial" font-size="14" fill="white">← Back</text>
-  <text x="160" y="45" font-family="Arial" font-size="18" fill="white" text-anchor="middle">Wednesday</text>
-  
-  <!-- Date -->
-  <text x="135" y="95" font-family="Arial" font-size="14" fill="#666666" text-anchor="middle">August 17, 2023</text>
-  
-  <!-- Weather Icon and Temperature -->
-  <circle cx="135" cy="150" r="40" fill="#f3cf7a"/>
-  <text x="135" y="155" font-family="Arial" font-size="24" fill="white" text-anchor="middle">☁</text>
-  
-  <text x="135" y="220" font-family="Arial" font-size="48" fill="#333333" text-anchor="middle">19°</text>
-  <text x="135" y="250" font-family="Arial" font-size="20" fill="#666666" text-anchor="middle">Partly Cloudy</text>
-  <text x="135" y="280" font-family="Arial" font-size="16" fill="#666666" text-anchor="middle">High: 22° | Low: 15°</text>
-  
-  <!-- Hourly forecast -->
-  <text x="30" y="320" font-family="Arial" font-size="18" fill="#333333">Hourly Forecast</text>
-  
-  <rect x="30" y="330" width="210" height="100" fill="none"/>
-  
-  <!-- Hour 1 -->
-  <text x="50" y="350" font-family="Arial" font-size="14" fill="#666666" text-anchor="middle">9AM</text>
-  <text x="50" y="380" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">☁</text>
-  <text x="50" y="410" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">17°</text>
-  
-  <!-- Hour 2 -->
-  <text x="100" y="350" font-family="Arial" font-size="14" fill="#666666" text-anchor="middle">12PM</text>
-  <text x="100" y="380" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">☀</text>
-  <text x="100" y="410" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">19°</text>
-  
-  <!-- Hour 3 -->
-  <text x="150" y="350" font-family="Arial" font-size="14" fill="#666666" text-anchor="middle">3PM</text>
-  <text x="150" y="380" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">☀</text>
-  <text x="150" y="410" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">22°</text>
-  
-  <!-- Hour 4 -->
-  <text x="200" y="350" font-family="Arial" font-size="14" fill="#666666" text-anchor="middle">6PM</text>
-  <text x="200" y="380" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">☁</text>
-  <text x="200" y="410" font-family="Arial" font-size="14" fill="#333333" text-anchor="middle">20°</text>
-  
-  <!-- Details -->
-  <text x="30" y="450" font-family="Arial" font-size="18" fill="#333333">Details</text>
-  
-  <text x="50" y="480" font-family="Arial" font-size="14" fill="#666666">Humidity</text>
-  <text x="220" y="480" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">65%</text>
-  
-  <text x="50" y="510" font-family="Arial" font-size="14" fill="#666666">Wind</text>
-  <text x="220" y="510" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">12 km/h NW</text>
-  
-  <text x="50" y="540" font-family="Arial" font-size="14" fill="#666666">Precipitation</text>
-  <text x="220" y="540" font-family="Arial" font-size="14" fill="#333333" text-anchor="end">30%</text>
-  
-  <text x="135" y="560" font-family="Arial" font-size="12" fill="#999999" text-anchor="middle">Weekly Weather App</text>
-</svg>