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