Blog/public/images/weekly_weather/screenshot3.svg

<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>