Add Weekly Weather screenshots

content/projects/index.md

@@ -14,6 +14,8 @@ 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" >}}
+
 Weather data provided by Open-Meteo with weather icons from Makin-Things.
 {{< /project >}}
 

layouts/shortcodes/screenshots.html

@@ -0,0 +1,33 @@
+<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>
+
+  {{ range .Params }}
+  <div class="screenshot-item">
+    <img src="{{ . }}" alt="App screenshot">
+  </div>
+  {{ end }}
+</div> 

public/images/weekly_weather/screenshot1.svg

@@ -0,0 +1,55 @@
+<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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,59 @@
+<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,6 +142,11 @@ 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>

static/images/weekly_weather/screenshot1.svg

@@ -0,0 +1,55 @@
+<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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,59 @@
+<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>