Blog/static/images/weekly_weather/screenshot1.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="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>