feat(custom-openai): use apiKey instead of openAIApiKey

some engines provide empty response when no language is provided.

fix #618

.gitignore

@@ -37,3 +37,5 @@ Thumbs.db
 # Db
 db.sqlite
 /searxng
+
+certificates

README.md

@@ -16,7 +16,7 @@
 
 <hr/>
 
-[![Discord](https://dcbadge.vercel.app/api/server/26aArMy8tT?style=flat&compact=true)](https://discord.gg/26aArMy8tT)
+[![Discord](https://dcbadge.limes.pink/api/server/26aArMy8tT?style=flat)](https://discord.gg/26aArMy8tT)
 
 ![preview](.assets/perplexica-screenshot.png?)
 
@@ -90,6 +90,9 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
    - `OLLAMA`: Your Ollama API URL. You should enter it as `http://host.docker.internal:PORT_NUMBER`. If you installed Ollama on port 11434, use `http://host.docker.internal:11434`. For other ports, adjust accordingly. **You need to fill this if you wish to use Ollama's models instead of OpenAI's**.
    - `GROQ`: Your Groq API key. **You only need to fill this if you wish to use Groq's hosted models**.
    - `ANTHROPIC`: Your Anthropic API key. **You only need to fill this if you wish to use Anthropic models**.
+   - `Gemini`: Your Gemini API key. **You only need to fill this if you wish to use Google's models**.
+   - `DEEPSEEK`: Your Deepseek API key. **Only needed if you want Deepseek models.**
+   - `AIMLAPI`: Your AI/ML API key. **Only needed if you want to use AI/ML API models and embeddings.**
 
      **Note**: You can change these after starting Perplexica from the settings dialog.
 
@@ -111,7 +114,7 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
 2. Clone the repository and rename the `sample.config.toml` file to `config.toml` in the root directory. Ensure you complete all required fields in this file.
 3. After populating the configuration run `npm i`.
 4. Install the dependencies and then execute `npm run build`.
-5. Finally, start the app by running `npm rum start`
+5. Finally, start the app by running `npm run start`
 
 **Note**: Using Docker is recommended as it simplifies the setup process, especially for managing environment variables and dependencies.
 
@@ -132,7 +135,7 @@ If you're encountering an Ollama connection error, it is likely due to the backe
 
 3. **Linux Users - Expose Ollama to Network:**
 
-   - Inside `/etc/systemd/system/ollama.service`, you need to add `Environment="OLLAMA_HOST=0.0.0.0"`. Then restart Ollama by `systemctl restart ollama`. For more information see [Ollama docs](https://github.com/ollama/ollama/blob/main/docs/faq.md#setting-environment-variables-on-linux)
+   - Inside `/etc/systemd/system/ollama.service`, you need to add `Environment="OLLAMA_HOST=0.0.0.0:11434"`. (Change the port number if you are using a different one.) Then reload the systemd manager configuration with `systemctl daemon-reload`, and restart Ollama by `systemctl restart ollama`. For more information see [Ollama docs](https://github.com/ollama/ollama/blob/main/docs/faq.md#setting-environment-variables-on-linux)
 
    - Ensure that the port (default is 11434) is not blocked by your firewall.
 
@@ -159,6 +162,7 @@ Perplexica runs on Next.js and handles all API requests. It works right away on
 
 [![Deploy to Sealos](https://raw.githubusercontent.com/labring-actions/templates/main/Deploy-on-Sealos.svg)](https://usw.sealos.io/?openapp=system-template%3FtemplateName%3Dperplexica)
 [![Deploy to RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploylobe.svg)](https://repocloud.io/details/?app_id=267)
+[![Run on ClawCloud](https://raw.githubusercontent.com/ClawCloud/Run-Template/refs/heads/main/Run-on-ClawCloud.svg)](https://template.run.claw.cloud/?referralCode=U11MRQ8U9RM4&openapp=system-fastdeploy%3FtemplateName%3Dperplexica)
 
 ## Upcoming Features
 

app.dockerfile

@@ -12,6 +12,9 @@ COPY public ./public
 RUN mkdir -p /home/perplexica/data
 RUN yarn build
 
+RUN yarn add --dev @vercel/ncc
+RUN yarn ncc build ./src/lib/db/migrate.ts -o migrator
+
 FROM node:20.18.0-slim
 
 WORKDIR /home/perplexica
@@ -21,7 +24,12 @@ COPY --from=builder /home/perplexica/.next/static ./public/_next/static
 
 COPY --from=builder /home/perplexica/.next/standalone ./
 COPY --from=builder /home/perplexica/data ./data
+COPY drizzle ./drizzle
+COPY --from=builder /home/perplexica/migrator/build ./build
+COPY --from=builder /home/perplexica/migrator/index.js ./migrate.js
 
 RUN mkdir /home/perplexica/uploads
 
-CMD ["node", "server.js"]
+COPY entrypoint.sh ./entrypoint.sh
+RUN chmod +x ./entrypoint.sh
+CMD ["./entrypoint.sh"]

docker-compose.yaml

@@ -16,6 +16,7 @@ services:
       dockerfile: app.dockerfile
     environment:
       - SEARXNG_API_URL=http://searxng:8080
+      - DATA_DIR=/home/perplexica
     ports:
       - 3000:3000
     networks:

docs/API/SEARCH.md

@@ -33,6 +33,7 @@ The API accepts a JSON object in the request body, where you define the focus mo
     ["human", "Hi, how are you?"],
     ["assistant", "I am doing well, how can I help you today?"]
   ],
+  "systemInstructions": "Focus on providing technical details about Perplexica's architecture.",
   "stream": false
 }
 ```
@@ -63,6 +64,8 @@ The API accepts a JSON object in the request body, where you define the focus mo
 
 - **`query`** (string, required): The search query or question.
 
+- **`systemInstructions`** (string, optional): Custom instructions provided by the user to guide the AI's response. These instructions are treated as user preferences and have lower priority than the system's core instructions. For example, you can specify a particular writing style, format, or focus area.
+
 - **`history`** (array, optional): An array of message pairs representing the conversation history. Each pair consists of a role (either 'human' or 'assistant') and the message content. This allows the system to use the context of the conversation to refine results. Example:
 
   ```json

docs/installation/UPDATING.md

@@ -41,6 +41,6 @@ To update Perplexica to the latest version, follow these steps:
 3. Check for changes in the configuration files. If the `sample.config.toml` file contains new fields, delete your existing `config.toml` file, rename `sample.config.toml` to `config.toml`, and update the configuration accordingly.
 4. After populating the configuration run `npm i`.
 5. Install the dependencies and then execute `npm run build`.
-6. Finally, start the app by running `npm rum start`
+6. Finally, start the app by running `npm run start`
 
 ---

drizzle.config.ts

@@ -1,10 +1,11 @@
 import { defineConfig } from 'drizzle-kit';
+import path from 'path';
 
 export default defineConfig({
   dialect: 'sqlite',
   schema: './src/lib/db/schema.ts',
   out: './drizzle',
   dbCredentials: {
-    url: './data/db.sqlite',
+    url: path.join(process.cwd(), 'data', 'db.sqlite'),
   },
 });

drizzle/0000_fuzzy_randall.sql

@@ -0,0 +1,16 @@
+CREATE TABLE IF NOT EXISTS `chats` (
+	`id` text PRIMARY KEY NOT NULL,
+	`title` text NOT NULL,
+	`createdAt` text NOT NULL,
+	`focusMode` text NOT NULL,
+	`files` text DEFAULT '[]'
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS `messages` (
+	`id` integer PRIMARY KEY NOT NULL,
+	`content` text NOT NULL,
+	`chatId` text NOT NULL,
+	`messageId` text NOT NULL,
+	`type` text,
+	`metadata` text
+);

drizzle/meta/0000_snapshot.json

@@ -0,0 +1,116 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "ef3a044b-0f34-40b5-babb-2bb3a909ba27",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "chats": {
+      "name": "chats",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "focusMode": {
+          "name": "focusMode",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "files": {
+          "name": "files",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "'[]'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "messages": {
+      "name": "messages",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "chatId": {
+          "name": "chatId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "messageId": {
+          "name": "messageId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "metadata": {
+          "name": "metadata",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "6",
+      "when": 1748405503809,
+      "tag": "0000_fuzzy_randall",
+      "breakpoints": true
+    }
+  ]
+}

entrypoint.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+set -e
+
+node migrate.js
+
+exec node server.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexica-frontend",
-  "version": "1.10.1",
+  "version": "1.11.0-rc2",
   "license": "MIT",
   "author": "ItzCrazyKns",
   "scripts": {
@@ -15,11 +15,12 @@
     "@headlessui/react": "^2.2.0",
     "@iarna/toml": "^2.2.5",
     "@icons-pack/react-simple-icons": "^12.3.0",
-    "@langchain/anthropic": "^0.3.15",
-    "@langchain/community": "^0.3.36",
-    "@langchain/core": "^0.3.42",
-    "@langchain/google-genai": "^0.1.12",
-    "@langchain/openai": "^0.0.25",
+    "@langchain/anthropic": "^0.3.24",
+    "@langchain/community": "^0.3.49",
+    "@langchain/core": "^0.3.66",
+    "@langchain/google-genai": "^0.2.15",
+    "@langchain/ollama": "^0.2.3",
+    "@langchain/openai": "^0.6.2",
     "@langchain/textsplitters": "^0.1.0",
     "@tailwindcss/typography": "^0.5.12",
     "@xenova/transformers": "^2.17.2",
@@ -30,8 +31,10 @@
     "compute-dot": "^1.1.0",
     "drizzle-orm": "^0.40.1",
     "html-to-text": "^9.0.5",
-    "langchain": "^0.1.30",
+    "jspdf": "^3.0.1",
+    "langchain": "^0.3.30",
     "lucide-react": "^0.363.0",
+    "mammoth": "^1.9.1",
     "markdown-to-jsx": "^7.7.2",
     "next": "^15.2.2",
     "next-themes": "^0.3.0",
@@ -49,6 +52,7 @@
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.12",
     "@types/html-to-text": "^9.0.4",
+    "@types/jspdf": "^2.0.0",
     "@types/node": "^20",
     "@types/pdf-parse": "^1.1.4",
     "@types/react": "^18",

public/weather-ico/clear-day.svg

@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.34167" y="-.34167" width="1.6833" height="1.85">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** SUN
+*/
+      @keyframes am-weather-sun {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .am-weather-sun {
+        -webkit-animation-name: am-weather-sun;
+        -moz-animation-name: am-weather-sun;
+        -ms-animation-name: am-weather-sun;
+        animation-name: am-weather-sun;
+        -webkit-animation-duration: 9s;
+        -moz-animation-duration: 9s;
+        -ms-animation-duration: 9s;
+        animation-duration: 9s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-sun-shiny {
+        0% {
+          stroke-dasharray: 3px 10px;
+          stroke-dashoffset: 0px;
+        }
+
+        50% {
+          stroke-dasharray: 0.1px 10px;
+          stroke-dashoffset: -1px;
+        }
+
+        100% {
+          stroke-dasharray: 3px 10px;
+          stroke-dashoffset: 0px;
+        }
+      }
+
+      .am-weather-sun-shiny line {
+        -webkit-animation-name: am-weather-sun-shiny;
+        -moz-animation-name: am-weather-sun-shiny;
+        -ms-animation-name: am-weather-sun-shiny;
+        animation-name: am-weather-sun-shiny;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="translate(0,16)">
+      <g class="am-weather-sun"
+        style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
+        <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
+        <g transform="rotate(45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(135)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="scale(-1)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(225)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
+      </g>
+    </g>
+  </g>
+</svg>

public/weather-ico/clear-night.svg

@@ -0,0 +1,159 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.3038" y="-.3318" width="1.6076" height="1.894">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** MOON
+*/
+      @keyframes am-weather-moon {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        50% {
+          -webkit-transform: rotate(15deg);
+          -moz-transform: rotate(15deg);
+          -ms-transform: rotate(15deg);
+          transform: rotate(15deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+      }
+
+      .am-weather-moon {
+        -webkit-animation-name: am-weather-moon;
+        -moz-animation-name: am-weather-moon;
+        -ms-animation-name: am-weather-moon;
+        animation-name: am-weather-moon;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        -webkit-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -moz-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -ms-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+      }
+
+      @keyframes am-weather-moon-star-1 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-1 {
+        -webkit-animation-name: am-weather-moon-star-1;
+        -moz-animation-name: am-weather-moon-star-1;
+        -ms-animation-name: am-weather-moon-star-1;
+        animation-name: am-weather-moon-star-1;
+        -webkit-animation-delay: 3s;
+        -moz-animation-delay: 3s;
+        -ms-animation-delay: 3s;
+        animation-delay: 3s;
+        -webkit-animation-duration: 5s;
+        -moz-animation-duration: 5s;
+        -ms-animation-duration: 5s;
+        animation-duration: 5s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      @keyframes am-weather-moon-star-2 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-2 {
+        -webkit-animation-name: am-weather-moon-star-2;
+        -moz-animation-name: am-weather-moon-star-2;
+        -ms-animation-name: am-weather-moon-star-2;
+        animation-name: am-weather-moon-star-2;
+        -webkit-animation-delay: 5s;
+        -moz-animation-delay: 5s;
+        -ms-animation-delay: 5s;
+        animation-delay: 5s;
+        -webkit-animation-duration: 4s;
+        -moz-animation-duration: 4s;
+        -ms-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g id="night" transform="translate(-4,-18)" filter="url(#blur)">
+    <g transform="matrix(.8 0 0 .78534 36 20.022)" stroke-width="1.2616">
+      <g class="am-weather-moon-star-1"
+        style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+        <polygon points="4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5" fill="#ffa500" stroke-miterlimit="10"
+          stroke-width="1.4105" />
+      </g>
+      <g class="am-weather-moon-star-2"
+        style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+        <polygon transform="translate(20,10)" points="4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5"
+          fill="#ffa500" stroke-miterlimit="10" stroke-width="1.4105" />
+      </g>
+      <g class="am-weather-moon"
+        style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+        <path
+          d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+          fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2.5232" />
+      </g>
+    </g>
+  </g>
+</svg>

public/weather-ico/cloudy-1-day.svg

@@ -0,0 +1,178 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.28472" width="1.403" height="1.6944">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** SUN
+*/
+      @keyframes am-weather-sun {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .am-weather-sun {
+        -webkit-animation-name: am-weather-sun;
+        -moz-animation-name: am-weather-sun;
+        -ms-animation-name: am-weather-sun;
+        animation-name: am-weather-sun;
+        -webkit-animation-duration: 9s;
+        -moz-animation-duration: 9s;
+        -ms-animation-duration: 9s;
+        animation-duration: 9s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-sun-shiny {
+        0% {
+          stroke-dasharray: 3px 10px;
+          stroke-dashoffset: 0px;
+        }
+
+        50% {
+          stroke-dasharray: 0.1px 10px;
+          stroke-dashoffset: -1px;
+        }
+
+        100% {
+          stroke-dasharray: 3px 10px;
+          stroke-dashoffset: 0px;
+        }
+      }
+
+      .am-weather-sun-shiny line {
+        -webkit-animation-name: am-weather-sun-shiny;
+        -moz-animation-name: am-weather-sun-shiny;
+        -ms-animation-name: am-weather-sun-shiny;
+        animation-name: am-weather-sun-shiny;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="translate(0,16)">
+      <g class="am-weather-sun"
+        style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
+        <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
+        <g transform="rotate(45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(135)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="scale(-1)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(225)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-2"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#c6deff" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+  </g>
+</svg>

public/weather-ico/cloudy-1-night.svg

@@ -0,0 +1,206 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.19471" y="-.26087" width="1.3744" height="1.6884">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** MOON
+*/
+      @keyframes am-weather-moon {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        50% {
+          -webkit-transform: rotate(15deg);
+          -moz-transform: rotate(15deg);
+          -ms-transform: rotate(15deg);
+          transform: rotate(15deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+      }
+
+      .am-weather-moon {
+        -webkit-animation-name: am-weather-moon;
+        -moz-animation-name: am-weather-moon;
+        -ms-animation-name: am-weather-moon;
+        animation-name: am-weather-moon;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        -webkit-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -moz-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -ms-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+      }
+
+      @keyframes am-weather-moon-star-1 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-1 {
+        -webkit-animation-name: am-weather-moon-star-1;
+        -moz-animation-name: am-weather-moon-star-1;
+        -ms-animation-name: am-weather-moon-star-1;
+        animation-name: am-weather-moon-star-1;
+        -webkit-animation-delay: 3s;
+        -moz-animation-delay: 3s;
+        -ms-animation-delay: 3s;
+        animation-delay: 3s;
+        -webkit-animation-duration: 5s;
+        -moz-animation-duration: 5s;
+        -ms-animation-duration: 5s;
+        animation-duration: 5s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      @keyframes am-weather-moon-star-2 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-2 {
+        -webkit-animation-name: am-weather-moon-star-2;
+        -moz-animation-name: am-weather-moon-star-2;
+        -ms-animation-name: am-weather-moon-star-2;
+        animation-name: am-weather-moon-star-2;
+        -webkit-animation-delay: 5s;
+        -moz-animation-delay: 5s;
+        -ms-animation-delay: 5s;
+        animation-delay: 5s;
+        -webkit-animation-duration: 4s;
+        -moz-animation-duration: 4s;
+        -ms-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="matrix(.8 0 0 .8 16 4)">
+      <g class="am-weather-moon-star-1"
+        style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+        <polygon points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4" fill="#ffa500"
+          stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon-star-2"
+        style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+        <polygon transform="translate(20,10)" points="1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4"
+          fill="#ffa500" stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon"
+        style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+        <path
+          d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+          fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-2"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#c6deff" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+  </g>
+</svg>

public/weather-ico/fog-day.svg

@@ -0,0 +1,244 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** SUN
+*/
+      @keyframes am-weather-sun {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .am-weather-sun {
+        -webkit-animation-name: am-weather-sun;
+        -moz-animation-name: am-weather-sun;
+        -ms-animation-name: am-weather-sun;
+        animation-name: am-weather-sun;
+        -webkit-animation-duration: 9s;
+        -moz-animation-duration: 9s;
+        -ms-animation-duration: 9s;
+        animation-duration: 9s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** FOG
+*/
+      @keyframes am-weather-fog-1 {
+        0% {
+          transform: translate(0px, 0px)
+        }
+
+        50% {
+          transform: translate(7px, 0px)
+        }
+
+        100% {
+          transform: translate(0px, 0px)
+        }
+      }
+
+      .am-weather-fog-1 {
+        -webkit-animation-name: am-weather-fog-1;
+        -moz-animation-name: am-weather-fog-1;
+        -ms-animation-name: am-weather-fog-1;
+        animation-name: am-weather-fog-1;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-fog-2 {
+        0% {
+          transform: translate(0px, 0px)
+        }
+
+        21.05% {
+          transform: translate(-6px, 0px)
+        }
+
+        78.95% {
+          transform: translate(9px, 0px)
+        }
+
+        100% {
+          transform: translate(0px, 0px)
+        }
+      }
+
+      .am-weather-fog-2 {
+        -webkit-animation-name: am-weather-fog-2;
+        -moz-animation-name: am-weather-fog-2;
+        -ms-animation-name: am-weather-fog-2;
+        animation-name: am-weather-fog-2;
+        -webkit-animation-duration: 20s;
+        -moz-animation-duration: 20s;
+        -ms-animation-duration: 20s;
+        animation-duration: 20s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-fog-3 {
+        0% {
+          transform: translate(0px, 0px)
+        }
+
+        25% {
+          transform: translate(4px, 0px)
+        }
+
+        75% {
+          transform: translate(-4px, 0px)
+        }
+
+        100% {
+          transform: translate(0px, 0px)
+        }
+      }
+
+      .am-weather-fog-3 {
+        -webkit-animation-name: am-weather-fog-3;
+        -moz-animation-name: am-weather-fog-3;
+        -ms-animation-name: am-weather-fog-3;
+        animation-name: am-weather-fog-3;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-fog-4 {
+        0% {
+          transform: translate(0px, 0px)
+        }
+
+        50% {
+          transform: translate(-4px, 0px)
+        }
+
+        100% {
+          transform: translate(0px, 0px)
+        }
+      }
+
+      .am-weather-fog-4 {
+        -webkit-animation-name: am-weather-fog-4;
+        -moz-animation-name: am-weather-fog-4;
+        -ms-animation-name: am-weather-fog-4;
+        animation-name: am-weather-fog-4;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="translate(0,16)">
+      <g class="am-weather-sun" transform="translate(0,16)">
+        <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
+        <g transform="rotate(45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(135)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="scale(-1)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />F
+        </g>
+        <g transform="rotate(225)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <circle r="5" fill="#ffc04a" stroke="#ffc04a" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-fog" transform="translate(-10,20)" fill="none" stroke="#c6deff" stroke-linecap="round"
+      stroke-width="2">
+      <line class="am-weather-fog-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
+      <line class="am-weather-fog-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
+      <line class="am-weather-fog-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
+      <line class="am-weather-fog-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
+    </g>
+  </g>
+</svg>

public/weather-ico/fog-night.svg

@@ -0,0 +1,309 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** MOON
+*/
+      @keyframes am-weather-moon {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        50% {
+          -webkit-transform: rotate(15deg);
+          -moz-transform: rotate(15deg);
+          -ms-transform: rotate(15deg);
+          transform: rotate(15deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+      }
+
+      .am-weather-moon {
+        -webkit-animation-name: am-weather-moon;
+        -moz-animation-name: am-weather-moon;
+        -ms-animation-name: am-weather-moon;
+        animation-name: am-weather-moon;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        -webkit-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -moz-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -ms-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+      }
+
+      @keyframes am-weather-moon-star-1 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-1 {
+        -webkit-animation-name: am-weather-moon-star-1;
+        -moz-animation-name: am-weather-moon-star-1;
+        -ms-animation-name: am-weather-moon-star-1;
+        animation-name: am-weather-moon-star-1;
+        -webkit-animation-delay: 3s;
+        -moz-animation-delay: 3s;
+        -ms-animation-delay: 3s;
+        animation-delay: 3s;
+        -webkit-animation-duration: 5s;
+        -moz-animation-duration: 5s;
+        -ms-animation-duration: 5s;
+        animation-duration: 5s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      @keyframes am-weather-moon-star-2 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-2 {
+        -webkit-animation-name: am-weather-moon-star-2;
+        -moz-animation-name: am-weather-moon-star-2;
+        -ms-animation-name: am-weather-moon-star-2;
+        animation-name: am-weather-moon-star-2;
+        -webkit-animation-delay: 5s;
+        -moz-animation-delay: 5s;
+        -ms-animation-delay: 5s;
+        animation-delay: 5s;
+        -webkit-animation-duration: 4s;
+        -moz-animation-duration: 4s;
+        -ms-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      /*
+** FOG
+*/
+      @keyframes am-weather-fog-1 {
+        0% {
+          transform: translate(0px, 0px)
+        }
+
+        50% {
+          transform: translate(7px, 0px)
+        }
+
+        100% {
+          transform: translate(0px, 0px)
+        }
+      }
+
+      .am-weather-fog-1 {
+        -webkit-animation-name: am-weather-fog-1;
+        -moz-animation-name: am-weather-fog-1;
+        -ms-animation-name: am-weather-fog-1;
+        animation-name: am-weather-fog-1;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-fog-2 {
+        0% {
+          transform: translate(0px, 0px)
+        }
+
+        21.05% {
+          transform: translate(-6px, 0px)
+        }
+
+        78.95% {
+          transform: translate(9px, 0px)
+        }
+
+        100% {
+          transform: translate(0px, 0px)
+        }
+      }
+
+      .am-weather-fog-2 {
+        -webkit-animation-name: am-weather-fog-2;
+        -moz-animation-name: am-weather-fog-2;
+        -ms-animation-name: am-weather-fog-2;
+        animation-name: am-weather-fog-2;
+        -webkit-animation-duration: 20s;
+        -moz-animation-duration: 20s;
+        -ms-animation-duration: 20s;
+        animation-duration: 20s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-fog-3 {
+        0% {
+          transform: translate(0px, 0px)
+        }
+
+        25% {
+          transform: translate(4px, 0px)
+        }
+
+        75% {
+          transform: translate(-4px, 0px)
+        }
+
+        100% {
+          transform: translate(0px, 0px)
+        }
+      }
+
+      .am-weather-fog-3 {
+        -webkit-animation-name: am-weather-fog-3;
+        -moz-animation-name: am-weather-fog-3;
+        -ms-animation-name: am-weather-fog-3;
+        animation-name: am-weather-fog-3;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-fog-4 {
+        0% {
+          transform: translate(0px, 0px)
+        }
+
+        50% {
+          transform: translate(-4px, 0px)
+        }
+
+        100% {
+          transform: translate(0px, 0px)
+        }
+      }
+
+      .am-weather-fog-4 {
+        -webkit-animation-name: am-weather-fog-4;
+        -moz-animation-name: am-weather-fog-4;
+        -ms-animation-name: am-weather-fog-4;
+        animation-name: am-weather-fog-4;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="matrix(.8 0 0 .8 16 4)">
+      <g class="am-weather-moon-star-1"
+        style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+        <polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffc04a"
+          stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon-star-2"
+        style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+        <polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
+          fill="#ffc04a" stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon"
+        style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+        <path
+          d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+          fill="#ffc04a" stroke="#ffc04a" stroke-linejoin="round" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-fog" transform="translate(-10,20)" fill="none" stroke="#c6deff" stroke-linecap="round"
+      stroke-width="2">
+      <line class="am-weather-fog-1" y1="0" y2="0" x1="1" x2="37" stroke-dasharray="3, 5, 17, 5, 7" />
+      <line class="am-weather-fog-2" y1="5" y2="5" x1="9" x2="33" stroke-dasharray="11, 7, 15" />
+      <line class="am-weather-fog-3" y1="10" y2="10" x1="5" x2="40" stroke-dasharray="11, 7, 3, 5, 9" />
+      <line class="am-weather-fog-4" y1="15" y2="15" x1="7" x2="42" stroke-dasharray="13, 5, 9, 5, 3" />
+    </g>
+  </g>
+</svg>

public/weather-ico/frost-day.svg

@@ -0,0 +1,204 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** SUN
+*/
+      @keyframes am-weather-sun {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .am-weather-sun {
+        -webkit-animation-name: am-weather-sun;
+        -moz-animation-name: am-weather-sun;
+        -ms-animation-name: am-weather-sun;
+        animation-name: am-weather-sun;
+        -webkit-animation-duration: 9s;
+        -moz-animation-duration: 9s;
+        -ms-animation-duration: 9s;
+        animation-duration: 9s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** FROST
+*/
+      @keyframes am-weather-frost {
+        0% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        1% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        3% {
+          -webkit-transform: translate(-0.3px, 0.0px);
+          -moz-transform: translate(-0.3px, 0.0px);
+          -ms-transform: translate(-0.3px, 0.0px);
+          transform: translate(-0.3px, 0.0px);
+        }
+
+        5% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        7% {
+          -webkit-transform: translate(-0.3px, 0.0px);
+          -moz-transform: translate(-0.3px, 0.0px);
+          -ms-transform: translate(-0.3px, 0.0px);
+          transform: translate(-0.3px, 0.0px);
+        }
+
+        9% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        11% {
+          -webkit-transform: translate(-0.3px, 0.0px);
+          -moz-transform: translate(-0.3px, 0.0px);
+          -ms-transform: translate(-0.3px, 0.0px);
+          transform: translate(-0.3px, 0.0px);
+        }
+
+        13% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        15% {
+          -webkit-transform: translate(-0.3px, 0.0px);
+          -moz-transform: translate(-0.3px, 0.0px);
+          -ms-transform: translate(-0.3px, 0.0px);
+          transform: translate(-0.3px, 0.0px);
+        }
+
+        16% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+      }
+
+      .am-weather-frost {
+        -webkit-animation-name: am-weather-frost;
+        -moz-animation-name: am-weather-frost;
+        animation-name: am-weather-frost;
+        -webkit-animation-duration: 1.11s;
+        -moz-animation-duration: 1.11s;
+        animation-duration: 1.11s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="translate(0,16)">
+      <g class="am-weather-sun" transform="translate(0,16)">
+        <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round" stroke-width="2" />
+        <g transform="rotate(45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(135)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="scale(-1)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />F
+        </g>
+        <g transform="rotate(225)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffc04a" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <circle r="5" fill="#ffc04a" stroke="#ffc04a" stroke-width="2" />
+      </g>
+    </g>
+    <g transform="translate(-16,4)">
+      <g class="am-weather-frost" stroke="#57a0ee" transform="translate(0,2)" fill="none" stroke-width="2"
+        stroke-linecap="round"
+        style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-frost;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-frost;-webkit-animation-timing-function:linear">
+        <path d="M11,32H45" />
+        <path d="M15.5,37H40.5" />
+        <path d="M22.5,42H33.5" />
+      </g>
+      <g>
+        <path stroke="#57a0ee" transform="translate(0,0)" fill="none" stroke-width="2" stroke-linecap="round"
+          d="M28,31V9M28,22l11,-3.67M34,20l2,-4M34,20l4,2M28,22l-11,-3.67M22,20l-2,-4M22,20l-4,2M28,14.27l3.01,-3.02M28,14.27l-3.01,-3.02" />
+      </g>
+    </g>
+  </g>
+</svg>

public/weather-ico/frost-night.svg

@@ -0,0 +1,269 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** MOON
+*/
+      @keyframes am-weather-moon {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        50% {
+          -webkit-transform: rotate(15deg);
+          -moz-transform: rotate(15deg);
+          -ms-transform: rotate(15deg);
+          transform: rotate(15deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+      }
+
+      .am-weather-moon {
+        -webkit-animation-name: am-weather-moon;
+        -moz-animation-name: am-weather-moon;
+        -ms-animation-name: am-weather-moon;
+        animation-name: am-weather-moon;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        -webkit-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -moz-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -ms-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+      }
+
+      @keyframes am-weather-moon-star-1 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-1 {
+        -webkit-animation-name: am-weather-moon-star-1;
+        -moz-animation-name: am-weather-moon-star-1;
+        -ms-animation-name: am-weather-moon-star-1;
+        animation-name: am-weather-moon-star-1;
+        -webkit-animation-delay: 3s;
+        -moz-animation-delay: 3s;
+        -ms-animation-delay: 3s;
+        animation-delay: 3s;
+        -webkit-animation-duration: 5s;
+        -moz-animation-duration: 5s;
+        -ms-animation-duration: 5s;
+        animation-duration: 5s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      @keyframes am-weather-moon-star-2 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-2 {
+        -webkit-animation-name: am-weather-moon-star-2;
+        -moz-animation-name: am-weather-moon-star-2;
+        -ms-animation-name: am-weather-moon-star-2;
+        animation-name: am-weather-moon-star-2;
+        -webkit-animation-delay: 5s;
+        -moz-animation-delay: 5s;
+        -ms-animation-delay: 5s;
+        animation-delay: 5s;
+        -webkit-animation-duration: 4s;
+        -moz-animation-duration: 4s;
+        -ms-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      /*
+** FROST
+*/
+      @keyframes am-weather-frost {
+        0% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        1% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        3% {
+          -webkit-transform: translate(-0.3px, 0.0px);
+          -moz-transform: translate(-0.3px, 0.0px);
+          -ms-transform: translate(-0.3px, 0.0px);
+          transform: translate(-0.3px, 0.0px);
+        }
+
+        5% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        7% {
+          -webkit-transform: translate(-0.3px, 0.0px);
+          -moz-transform: translate(-0.3px, 0.0px);
+          -ms-transform: translate(-0.3px, 0.0px);
+          transform: translate(-0.3px, 0.0px);
+        }
+
+        9% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        11% {
+          -webkit-transform: translate(-0.3px, 0.0px);
+          -moz-transform: translate(-0.3px, 0.0px);
+          -ms-transform: translate(-0.3px, 0.0px);
+          transform: translate(-0.3px, 0.0px);
+        }
+
+        13% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        15% {
+          -webkit-transform: translate(-0.3px, 0.0px);
+          -moz-transform: translate(-0.3px, 0.0px);
+          -ms-transform: translate(-0.3px, 0.0px);
+          transform: translate(-0.3px, 0.0px);
+        }
+
+        16% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+      }
+
+      .am-weather-frost {
+        -webkit-animation-name: am-weather-frost;
+        -moz-animation-name: am-weather-frost;
+        animation-name: am-weather-frost;
+        -webkit-animation-duration: 1.11s;
+        -moz-animation-duration: 1.11s;
+        animation-duration: 1.11s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="matrix(.8 0 0 .8 16 4)">
+      <g class="am-weather-moon-star-1"
+        style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+        <polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffc04a"
+          stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon-star-2"
+        style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+        <polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
+          fill="#ffc04a" stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon"
+        style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+        <path
+          d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+          fill="#ffc04a" stroke="#ffc04a" stroke-linejoin="round" stroke-width="2" />
+      </g>
+    </g>
+    <g transform="translate(-16,4)">
+      <g class="am-weather-frost" stroke="#57a0ee" transform="translate(0,2)" fill="none" stroke-width="2"
+        stroke-linecap="round"
+        style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-frost;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-frost;-webkit-animation-timing-function:linear">
+        <path d="M11,32H45" />
+        <path d="M15.5,37H40.5" />
+        <path d="M22.5,42H33.5" />
+      </g>
+      <g>
+        <path stroke="#57a0ee" transform="translate(0,0)" fill="none" stroke-width="2" stroke-linecap="round"
+          d="M28,31V9M28,22l11,-3.67M34,20l2,-4M34,20l4,2M28,22l-11,-3.67M22,20l-2,-4M22,20l-4,2M28,14.27l3.01,-3.02M28,14.27l-3.01,-3.02" />
+      </g>
+    </g>
+  </g>
+</svg>

public/weather-ico/rain-and-sleet-mix.svg

@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<!-- Mix of Rain and Sleet | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.24684" y="-.22776" width="1.4937" height="1.5756">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** RAIN
+*/
+      @keyframes am-weather-rain {
+        0% {
+          stroke-dashoffset: 0;
+        }
+
+        100% {
+          stroke-dashoffset: -100;
+        }
+      }
+
+      .am-weather-rain-1 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      .am-weather-rain-2 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-delay: 0.25s;
+        -moz-animation-delay: 0.25s;
+        -ms-animation-delay: 0.25s;
+        animation-delay: 0.25s;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-3 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-3 {
+        -webkit-animation-name: am-weather-cloud-3;
+        -moz-animation-name: am-weather-cloud-3;
+        animation-name: am-weather-cloud-3;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-3;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-3;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g class="am-weather-sleet-2" transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8"
+      stroke-linecap="round">
+      <line class="am-weather-rain-1" transform="translate(-5,1)" y2="8" stroke-dasharray="0.1, 7" stroke-width="2"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+      <line class="am-weather-rain-1" transform="translate(5)" y2="8" stroke-dasharray="0.1, 7" stroke-width="2"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+    </g>
+    <g class="am-weather-rain-3" transform="translate(-20,-10) rotate(10,-245.89,217.31)" fill="none" stroke="#91c0f8"
+      stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2">
+      <line class="am-weather-rain-1" transform="translate(-13,1)" y2="8"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+      <line class="am-weather-rain-1" transform="translate(-3,2)" y2="8"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+      <line class="am-weather-rain-2" transform="translate(7,-1)" y2="8"
+        style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+    </g>
+  </g>
+</svg>

public/weather-ico/rainy-1-day.svg

@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** SUN
+*/
+      @keyframes am-weather-sun {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .am-weather-sun {
+        -webkit-animation-name: am-weather-sun;
+        -moz-animation-name: am-weather-sun;
+        -ms-animation-name: am-weather-sun;
+        animation-name: am-weather-sun;
+        -webkit-animation-duration: 9s;
+        -moz-animation-duration: 9s;
+        -ms-animation-duration: 9s;
+        animation-duration: 9s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** RAIN
+*/
+      @keyframes am-weather-rain {
+        0% {
+          stroke-dashoffset: 0;
+        }
+
+        100% {
+          stroke-dashoffset: -100;
+        }
+      }
+
+      .am-weather-rain-1 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="translate(0,16)">
+      <g class="am-weather-sun"
+        style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
+        <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
+        <g transform="rotate(45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(135)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="scale(-1)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(225)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g class="am-weather-rain-1" transform="translate(-20,-10) rotate(10,-238.68,233.96)">
+      <line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" fill="none" stroke="#91c0f8"
+        stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+    </g>
+  </g>
+</svg>

public/weather-ico/rainy-1-night.svg

@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.21122" width="1.403" height="1.4997">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** MOON
+*/
+      @keyframes am-weather-moon {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        50% {
+          -webkit-transform: rotate(15deg);
+          -moz-transform: rotate(15deg);
+          -ms-transform: rotate(15deg);
+          transform: rotate(15deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+      }
+
+      .am-weather-moon {
+        -webkit-animation-name: am-weather-moon;
+        -moz-animation-name: am-weather-moon;
+        -ms-animation-name: am-weather-moon;
+        animation-name: am-weather-moon;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        -webkit-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -moz-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -ms-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+      }
+
+      @keyframes am-weather-moon-star-1 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-1 {
+        -webkit-animation-name: am-weather-moon-star-1;
+        -moz-animation-name: am-weather-moon-star-1;
+        -ms-animation-name: am-weather-moon-star-1;
+        animation-name: am-weather-moon-star-1;
+        -webkit-animation-delay: 3s;
+        -moz-animation-delay: 3s;
+        -ms-animation-delay: 3s;
+        animation-delay: 3s;
+        -webkit-animation-duration: 5s;
+        -moz-animation-duration: 5s;
+        -ms-animation-duration: 5s;
+        animation-duration: 5s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      @keyframes am-weather-moon-star-2 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-2 {
+        -webkit-animation-name: am-weather-moon-star-2;
+        -moz-animation-name: am-weather-moon-star-2;
+        -ms-animation-name: am-weather-moon-star-2;
+        animation-name: am-weather-moon-star-2;
+        -webkit-animation-delay: 5s;
+        -moz-animation-delay: 5s;
+        -ms-animation-delay: 5s;
+        animation-delay: 5s;
+        -webkit-animation-duration: 4s;
+        -moz-animation-duration: 4s;
+        -ms-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** RAIN
+*/
+      @keyframes am-weather-rain {
+        0% {
+          stroke-dashoffset: 0;
+        }
+
+        100% {
+          stroke-dashoffset: -100;
+        }
+      }
+
+      .am-weather-rain-1 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="matrix(.8 0 0 .8 16 4)">
+      <g class="am-weather-moon-star-1"
+        style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+        <polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
+          stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon-star-2"
+        style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+        <polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
+          fill="#ffa500" stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon"
+        style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+        <path
+          d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+          fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g class="am-weaher-rain-1" transform="translate(-20,-10) rotate(10,-238.68,233.96)">
+      <line class="am-weather-rain-1" transform="translate(-6,1)" y2="8" fill="none" stroke="#91c0f8"
+        stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+    </g>
+  </g>
+</svg>

public/weather-ico/rainy-2-day.svg

@@ -0,0 +1,204 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.20592" width="1.403" height="1.4872">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** SUN
+*/
+      @keyframes am-weather-sun {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .am-weather-sun {
+        -webkit-animation-name: am-weather-sun;
+        -moz-animation-name: am-weather-sun;
+        -ms-animation-name: am-weather-sun;
+        animation-name: am-weather-sun;
+        -webkit-animation-duration: 9s;
+        -moz-animation-duration: 9s;
+        -ms-animation-duration: 9s;
+        animation-duration: 9s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** RAIN
+*/
+      @keyframes am-weather-rain {
+        0% {
+          stroke-dashoffset: 0;
+        }
+
+        100% {
+          stroke-dashoffset: -100;
+        }
+      }
+
+      .am-weather-rain-1 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      .am-weather-rain-2 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-delay: 0.25s;
+        -moz-animation-delay: 0.25s;
+        -ms-animation-delay: 0.25s;
+        animation-delay: 0.25s;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="translate(0,16)">
+      <g class="am-weather-sun"
+        style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
+        <line transform="translate(0,9)" y2="3" stroke="#ffa500" stroke-linecap="round" stroke-width="2" fifll="none" />
+        <g transform="rotate(45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(135)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="scale(-1)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(225)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g transform="translate(-20,-10) rotate(10,-245.89,217.31)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 7" stroke-linecap="round"
+      stroke-width="2">
+      <line class="am-weather-rain-1" transform="translate(-6,1)" y2="8"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+      <line class="am-weather-rain-2" transform="translate(0,-1)" y2="8"
+        style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+    </g>
+  </g>
+</svg>

public/weather-ico/rainy-2-night.svg

@@ -0,0 +1,256 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** MOON
+*/
+      @keyframes am-weather-moon {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        50% {
+          -webkit-transform: rotate(15deg);
+          -moz-transform: rotate(15deg);
+          -ms-transform: rotate(15deg);
+          transform: rotate(15deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+      }
+
+      .am-weather-moon {
+        -webkit-animation-name: am-weather-moon;
+        -moz-animation-name: am-weather-moon;
+        -ms-animation-name: am-weather-moon;
+        animation-name: am-weather-moon;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        -webkit-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -moz-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -ms-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+      }
+
+      @keyframes am-weather-moon-star-1 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-1 {
+        -webkit-animation-name: am-weather-moon-star-1;
+        -moz-animation-name: am-weather-moon-star-1;
+        -ms-animation-name: am-weather-moon-star-1;
+        animation-name: am-weather-moon-star-1;
+        -webkit-animation-delay: 3s;
+        -moz-animation-delay: 3s;
+        -ms-animation-delay: 3s;
+        animation-delay: 3s;
+        -webkit-animation-duration: 5s;
+        -moz-animation-duration: 5s;
+        -ms-animation-duration: 5s;
+        animation-duration: 5s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      @keyframes am-weather-moon-star-2 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-2 {
+        -webkit-animation-name: am-weather-moon-star-2;
+        -moz-animation-name: am-weather-moon-star-2;
+        -ms-animation-name: am-weather-moon-star-2;
+        animation-name: am-weather-moon-star-2;
+        -webkit-animation-delay: 5s;
+        -moz-animation-delay: 5s;
+        -ms-animation-delay: 5s;
+        animation-delay: 5s;
+        -webkit-animation-duration: 4s;
+        -moz-animation-duration: 4s;
+        -ms-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      /*
+** RAIN
+*/
+      @keyframes am-weather-rain {
+        0% {
+          stroke-dashoffset: 0;
+        }
+
+        100% {
+          stroke-dashoffset: -100;
+        }
+      }
+
+      .am-weather-rain-1 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      .am-weather-rain-2 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-delay: 0.25s;
+        -moz-animation-delay: 0.25s;
+        -ms-animation-delay: 0.25s;
+        animation-delay: 0.25s;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g class="layer" transform="translate(16,-2)">
+    <g transform="matrix(.8 0 0 .8 16 4)">
+      <g class="am-weather-moon-star-1"
+        style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+        <polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
+          stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon-star-2"
+        style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+        <polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
+          fill="#ffa500" stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon"
+        style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+        <path
+          d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+          fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g class="am-weather-rain-2" transform="translate(-20,-10) rotate(10,34,46)" fill="none" stroke="#91c0f8"
+      stroke-dasharray="4, 7" stroke-linecap="round" stroke-width="2">
+      <line class="am-weather-rain-1" transform="translate(-6,1)" x1="34" x2="34" y1="46" y2="54"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+      <line class="am-weather-rain-2" transform="translate(0,-1)" x1="34" x2="34" y1="46" y2="54"
+        style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+    </g>
+  </g>
+</svg>

public/weather-ico/rainy-3-day.svg

@@ -0,0 +1,206 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.24684" y="-.22892" width="1.4937" height="1.5576">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** SUN
+*/
+      @keyframes am-weather-sun {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .am-weather-sun {
+        -webkit-animation-name: am-weather-sun;
+        -moz-animation-name: am-weather-sun;
+        -ms-animation-name: am-weather-sun;
+        animation-name: am-weather-sun;
+        -webkit-animation-duration: 9s;
+        -moz-animation-duration: 9s;
+        -ms-animation-duration: 9s;
+        animation-duration: 9s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** RAIN
+*/
+      @keyframes am-weather-rain {
+        0% {
+          stroke-dashoffset: 0;
+        }
+
+        100% {
+          stroke-dashoffset: -100;
+        }
+      }
+
+      .am-weather-rain-1 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      .am-weather-rain-2 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-delay: 0.25s;
+        -moz-animation-delay: 0.25s;
+        -ms-animation-delay: 0.25s;
+        animation-delay: 0.25s;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="translate(0,16)">
+      <g class="am-weather-sun"
+        style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
+        <line transform="translate(0,9)" y2="3" stroke="#ffa500" stroke-linecap="round" stroke-width="2" fifll="none" />
+        <g transform="rotate(45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(135)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="scale(-1)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(225)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 4"
+      stroke-linecap="round" stroke-width="2">
+      <line class="am-weather-rain-1" transform="translate(-4,1)" y2="8"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+      <line class="am-weather-rain-2" transform="translate(0,-1)" y2="8"
+        style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+      <line class="am-weather-rain-1" transform="translate(4)" y2="8"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+    </g>
+  </g>
+</svg>

public/weather-ico/rainy-3-night.svg

@@ -0,0 +1,270 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.24684" y="-.22892" width="1.4937" height="1.5576">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** RAIN
+*/
+      @keyframes am-weather-rain {
+        0% {
+          stroke-dashoffset: 0;
+        }
+
+        100% {
+          stroke-dashoffset: -100;
+        }
+      }
+
+      .am-weather-rain-1 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      .am-weather-rain-2 {
+        -webkit-animation-name: am-weather-rain;
+        -moz-animation-name: am-weather-rain;
+        -ms-animation-name: am-weather-rain;
+        animation-name: am-weather-rain;
+        -webkit-animation-delay: 0.25s;
+        -moz-animation-delay: 0.25s;
+        -ms-animation-delay: 0.25s;
+        animation-delay: 0.25s;
+        -webkit-animation-duration: 8s;
+        -moz-animation-duration: 8s;
+        -ms-animation-duration: 8s;
+        animation-duration: 8s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** MOON
+*/
+      @keyframes am-weather-moon {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        50% {
+          -webkit-transform: rotate(15deg);
+          -moz-transform: rotate(15deg);
+          -ms-transform: rotate(15deg);
+          transform: rotate(15deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+      }
+
+      .am-weather-moon {
+        -webkit-animation-name: am-weather-moon;
+        -moz-animation-name: am-weather-moon;
+        -ms-animation-name: am-weather-moon;
+        animation-name: am-weather-moon;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        -webkit-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -moz-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -ms-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+      }
+
+      @keyframes am-weather-moon-star-1 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-1 {
+        -webkit-animation-name: am-weather-moon-star-1;
+        -moz-animation-name: am-weather-moon-star-1;
+        -ms-animation-name: am-weather-moon-star-1;
+        animation-name: am-weather-moon-star-1;
+        -webkit-animation-delay: 3s;
+        -moz-animation-delay: 3s;
+        -ms-animation-delay: 3s;
+        animation-delay: 3s;
+        -webkit-animation-duration: 5s;
+        -moz-animation-duration: 5s;
+        -ms-animation-duration: 5s;
+        animation-duration: 5s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      @keyframes am-weather-moon-star-2 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-2 {
+        -webkit-animation-name: am-weather-moon-star-2;
+        -moz-animation-name: am-weather-moon-star-2;
+        -ms-animation-name: am-weather-moon-star-2;
+        animation-name: am-weather-moon-star-2;
+        -webkit-animation-delay: 5s;
+        -moz-animation-delay: 5s;
+        -ms-animation-delay: 5s;
+        animation-delay: 5s;
+        -webkit-animation-duration: 4s;
+        -moz-animation-duration: 4s;
+        -ms-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="matrix(.8 0 0 .8 16 4)">
+      <g class="am-weather-moon-star-1"
+        style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+        <polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
+          stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon-star-2"
+        style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+        <polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
+          fill="#ffa500" stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon"
+        style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+        <path
+          d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+          fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g transform="translate(-20,-10) rotate(10,-247.39,200.17)" fill="none" stroke="#91c0f8" stroke-dasharray="4, 4"
+      stroke-linecap="round" stroke-width="2">
+      <line class="am-weather-rain-1" transform="translate(-4,1)" y2="8"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+      <line class="am-weather-rain-2" transform="translate(0,-1)" y2="8"
+        style="-moz-animation-delay:0.25s;-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-delay:0.25s;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-delay:0.25s;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+      <line class="am-weather-rain-1" transform="translate(4)" y2="8"
+        style="-moz-animation-duration:8s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-rain;-moz-animation-timing-function:linear;-ms-animation-duration:8s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-rain;-ms-animation-timing-function:linear;-webkit-animation-duration:8s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-rain;-webkit-animation-timing-function:linear" />
+    </g>
+  </g>
+</svg>

public/weather-ico/scattered-thunderstorms-day.svg

@@ -0,0 +1,374 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<!-- Scattered Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-3 {
+        0% {
+          -webkit-transform: translate(-5px, 0px);
+          -moz-transform: translate(-5px, 0px);
+          -ms-transform: translate(-5px, 0px);
+          transform: translate(-5px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(10px, 0px);
+          -moz-transform: translate(10px, 0px);
+          -ms-transform: translate(10px, 0px);
+          transform: translate(10px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(-5px, 0px);
+          -moz-transform: translate(-5px, 0px);
+          -ms-transform: translate(-5px, 0px);
+          transform: translate(-5px, 0px);
+        }
+      }
+
+      .am-weather-cloud-3 {
+        -webkit-animation-name: am-weather-cloud-3;
+        -moz-animation-name: am-weather-cloud-3;
+        animation-name: am-weather-cloud-3;
+        -webkit-animation-duration: 7s;
+        -moz-animation-duration: 7s;
+        animation-duration: 7s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** SUN
+*/
+      @keyframes am-weather-sun {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .am-weather-sun {
+        -webkit-animation-name: am-weather-sun;
+        -moz-animation-name: am-weather-sun;
+        -ms-animation-name: am-weather-sun;
+        animation-name: am-weather-sun;
+        -webkit-animation-duration: 9s;
+        -moz-animation-duration: 9s;
+        -ms-animation-duration: 9s;
+        animation-duration: 9s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-sun-shiny {
+        0% {
+          stroke-dasharray: 3px 10px;
+          stroke-dashoffset: 0px;
+        }
+
+        50% {
+          stroke-dasharray: 0.1px 10px;
+          stroke-dashoffset: -1px;
+        }
+
+        100% {
+          stroke-dasharray: 3px 10px;
+          stroke-dashoffset: 0px;
+        }
+      }
+
+      .am-weather-sun-shiny line {
+        -webkit-animation-name: am-weather-sun-shiny;
+        -moz-animation-name: am-weather-sun-shiny;
+        -ms-animation-name: am-weather-sun-shiny;
+        animation-name: am-weather-sun-shiny;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** STROKE
+*/
+      @keyframes am-weather-stroke {
+        0% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        2% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        4% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        6% {
+          -webkit-transform: translate(0.5px, 0.4px);
+          -moz-transform: translate(0.5px, 0.4px);
+          -ms-transform: translate(0.5px, 0.4px);
+          transform: translate(0.5px, 0.4px);
+        }
+
+        8% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        10% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        12% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        14% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        16% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        18% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        20% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        22% {
+          -webkit-transform: translate(1px, 0.0px);
+          -moz-transform: translate(1px, 0.0px);
+          -ms-transform: translate(1px, 0.0px);
+          transform: translate(1px, 0.0px);
+        }
+
+        24% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        26% {
+          -webkit-transform: translate(-1px, 0.0px);
+          -moz-transform: translate(-1px, 0.0px);
+          -ms-transform: translate(-1px, 0.0px);
+          transform: translate(-1px, 0.0px);
+
+        }
+
+        28% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        40% {
+          fill: orange;
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        65% {
+          fill: white;
+          -webkit-transform: translate(-1px, 5.0px);
+          -moz-transform: translate(-1px, 5.0px);
+          -ms-transform: translate(-1px, 5.0px);
+          transform: translate(-1px, 5.0px);
+        }
+
+        61% {
+          fill: orange;
+        }
+
+        100% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+      }
+
+      .am-weather-stroke {
+        -webkit-animation-name: am-weather-stroke;
+        -moz-animation-name: am-weather-stroke;
+        animation-name: am-weather-stroke;
+        -webkit-animation-duration: 1.11s;
+        -moz-animation-duration: 1.11s;
+        animation-duration: 1.11s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g id="thunder" transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="translate(0,16)">
+      <g class="am-weather-sun"
+        style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
+        <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
+        <g transform="rotate(45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(135)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="scale(-1)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(225)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
+      <polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
+        fill="#ffa500" stroke="#fff"
+        style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear" />
+    </g>
+  </g>
+</svg>

public/weather-ico/scattered-thunderstorms-night.svg

@@ -0,0 +1,283 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<!-- Scattered Thunderstorms | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.1975" width="1.403" height="1.4766">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-3 {
+        0% {
+          -webkit-transform: translate(-5px, 0px);
+          -moz-transform: translate(-5px, 0px);
+          -ms-transform: translate(-5px, 0px);
+          transform: translate(-5px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(10px, 0px);
+          -moz-transform: translate(10px, 0px);
+          -ms-transform: translate(10px, 0px);
+          transform: translate(10px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(-5px, 0px);
+          -moz-transform: translate(-5px, 0px);
+          -ms-transform: translate(-5px, 0px);
+          transform: translate(-5px, 0px);
+        }
+      }
+
+      .am-weather-cloud-3 {
+        -webkit-animation-name: am-weather-cloud-3;
+        -moz-animation-name: am-weather-cloud-3;
+        animation-name: am-weather-cloud-3;
+        -webkit-animation-duration: 7s;
+        -moz-animation-duration: 7s;
+        animation-duration: 7s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** STROKE
+*/
+      @keyframes am-weather-stroke {
+        0% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        2% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        4% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        6% {
+          -webkit-transform: translate(0.5px, 0.4px);
+          -moz-transform: translate(0.5px, 0.4px);
+          -ms-transform: translate(0.5px, 0.4px);
+          transform: translate(0.5px, 0.4px);
+        }
+
+        8% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        10% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        12% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        14% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        16% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        18% {
+          -webkit-transform: translate(0.3px, 0.0px);
+          -moz-transform: translate(0.3px, 0.0px);
+          -ms-transform: translate(0.3px, 0.0px);
+          transform: translate(0.3px, 0.0px);
+        }
+
+        20% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        22% {
+          -webkit-transform: translate(1px, 0.0px);
+          -moz-transform: translate(1px, 0.0px);
+          -ms-transform: translate(1px, 0.0px);
+          transform: translate(1px, 0.0px);
+        }
+
+        24% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        26% {
+          -webkit-transform: translate(-1px, 0.0px);
+          -moz-transform: translate(-1px, 0.0px);
+          -ms-transform: translate(-1px, 0.0px);
+          transform: translate(-1px, 0.0px);
+
+        }
+
+        28% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        40% {
+          fill: orange;
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+
+        65% {
+          fill: white;
+          -webkit-transform: translate(-1px, 5.0px);
+          -moz-transform: translate(-1px, 5.0px);
+          -ms-transform: translate(-1px, 5.0px);
+          transform: translate(-1px, 5.0px);
+        }
+
+        61% {
+          fill: orange;
+        }
+
+        100% {
+          -webkit-transform: translate(0.0px, 0.0px);
+          -moz-transform: translate(0.0px, 0.0px);
+          -ms-transform: translate(0.0px, 0.0px);
+          transform: translate(0.0px, 0.0px);
+        }
+      }
+
+      .am-weather-stroke {
+        -webkit-animation-name: am-weather-stroke;
+        -moz-animation-name: am-weather-stroke;
+        animation-name: am-weather-stroke;
+        -webkit-animation-duration: 1.11s;
+        -moz-animation-duration: 1.11s;
+        animation-duration: 1.11s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g id="thunder" transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="matrix(.8 0 0 .8 16 4)">
+      <g class="am-weather-moon-star-1"
+        style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+        <polygon points="3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7" fill="#ffa500"
+          stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon-star-2"
+        style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+        <polygon transform="translate(20,10)" points="3.3 1.5 4 2.7 5.2 3.3 4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7"
+          fill="#ffa500" stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon"
+        style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+        <path
+          d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+          fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g class="am-weather-lightning" transform="matrix(1.2,0,0,1.2,-4,28)">
+      <polygon class="am-weather-stroke" points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9"
+        fill="#ffa500" stroke="#fff"
+        style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear" />
+    </g>
+  </g>
+</svg>

public/weather-ico/severe-thunderstorm.svg

@@ -0,0 +1,307 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<!-- Severe Thunderstorm | Contributed by hsoJ95 on GitHub: https://github.com/hsoj95 -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <filter id="blur" x="-.17571" y="-.19575" width="1.3379" height="1.4959">
+            <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+            <feOffset dx="0" dy="4" result="offsetblur" />
+            <feComponentTransfer>
+                <feFuncA slope="0.05" type="linear" />
+            </feComponentTransfer>
+            <feMerge>
+                <feMergeNode />
+                <feMergeNode in="SourceGraphic" />
+            </feMerge>
+        </filter>
+        <style type="text/css">
+            <![CDATA[
+            /*
+** CLOUDS
+*/
+            @keyframes am-weather-cloud-3 {
+                0% {
+                    -webkit-transform: translate(-5px, 0px);
+                    -moz-transform: translate(-5px, 0px);
+                    -ms-transform: translate(-5px, 0px);
+                    transform: translate(-5px, 0px);
+                }
+
+                50% {
+                    -webkit-transform: translate(10px, 0px);
+                    -moz-transform: translate(10px, 0px);
+                    -ms-transform: translate(10px, 0px);
+                    transform: translate(10px, 0px);
+                }
+
+                100% {
+                    -webkit-transform: translate(-5px, 0px);
+                    -moz-transform: translate(-5px, 0px);
+                    -ms-transform: translate(-5px, 0px);
+                    transform: translate(-5px, 0px);
+                }
+            }
+
+            .am-weather-cloud-3 {
+                -webkit-animation-name: am-weather-cloud-3;
+                -moz-animation-name: am-weather-cloud-3;
+                animation-name: am-weather-cloud-3;
+                -webkit-animation-duration: 7s;
+                -moz-animation-duration: 7s;
+                animation-duration: 7s;
+                -webkit-animation-timing-function: linear;
+                -moz-animation-timing-function: linear;
+                animation-timing-function: linear;
+                -webkit-animation-iteration-count: infinite;
+                -moz-animation-iteration-count: infinite;
+                animation-iteration-count: infinite;
+            }
+
+            @keyframes am-weather-cloud-1 {
+                0% {
+                    -webkit-transform: translate(0px, 0px);
+                    -moz-transform: translate(0px, 0px);
+                    -ms-transform: translate(0px, 0px);
+                    transform: translate(0px, 0px);
+                }
+
+                50% {
+                    -webkit-transform: translate(2px, 0px);
+                    -moz-transform: translate(2px, 0px);
+                    -ms-transform: translate(2px, 0px);
+                    transform: translate(2px, 0px);
+                }
+
+                100% {
+                    -webkit-transform: translate(0px, 0px);
+                    -moz-transform: translate(0px, 0px);
+                    -ms-transform: translate(0px, 0px);
+                    transform: translate(0px, 0px);
+                }
+            }
+
+            .am-weather-cloud-1 {
+                -webkit-animation-name: am-weather-cloud-1;
+                -moz-animation-name: am-weather-cloud-1;
+                animation-name: am-weather-cloud-1;
+                -webkit-animation-duration: 3s;
+                -moz-animation-duration: 3s;
+                animation-duration: 3s;
+                -webkit-animation-timing-function: linear;
+                -moz-animation-timing-function: linear;
+                animation-timing-function: linear;
+                -webkit-animation-iteration-count: infinite;
+                -moz-animation-iteration-count: infinite;
+                animation-iteration-count: infinite;
+            }
+
+            /*
+** STROKE
+*/
+
+            @keyframes am-weather-stroke {
+                0% {
+                    -webkit-transform: translate(0.0px, 0.0px);
+                    -moz-transform: translate(0.0px, 0.0px);
+                    -ms-transform: translate(0.0px, 0.0px);
+                    transform: translate(0.0px, 0.0px);
+                }
+
+                2% {
+                    -webkit-transform: translate(0.3px, 0.0px);
+                    -moz-transform: translate(0.3px, 0.0px);
+                    -ms-transform: translate(0.3px, 0.0px);
+                    transform: translate(0.3px, 0.0px);
+                }
+
+                4% {
+                    -webkit-transform: translate(0.0px, 0.0px);
+                    -moz-transform: translate(0.0px, 0.0px);
+                    -ms-transform: translate(0.0px, 0.0px);
+                    transform: translate(0.0px, 0.0px);
+                }
+
+                6% {
+                    -webkit-transform: translate(0.5px, 0.4px);
+                    -moz-transform: translate(0.5px, 0.4px);
+                    -ms-transform: translate(0.5px, 0.4px);
+                    transform: translate(0.5px, 0.4px);
+                }
+
+                8% {
+                    -webkit-transform: translate(0.0px, 0.0px);
+                    -moz-transform: translate(0.0px, 0.0px);
+                    -ms-transform: translate(0.0px, 0.0px);
+                    transform: translate(0.0px, 0.0px);
+                }
+
+                10% {
+                    -webkit-transform: translate(0.3px, 0.0px);
+                    -moz-transform: translate(0.3px, 0.0px);
+                    -ms-transform: translate(0.3px, 0.0px);
+                    transform: translate(0.3px, 0.0px);
+                }
+
+                12% {
+                    -webkit-transform: translate(0.0px, 0.0px);
+                    -moz-transform: translate(0.0px, 0.0px);
+                    -ms-transform: translate(0.0px, 0.0px);
+                    transform: translate(0.0px, 0.0px);
+                }
+
+                14% {
+                    -webkit-transform: translate(0.3px, 0.0px);
+                    -moz-transform: translate(0.3px, 0.0px);
+                    -ms-transform: translate(0.3px, 0.0px);
+                    transform: translate(0.3px, 0.0px);
+                }
+
+                16% {
+                    -webkit-transform: translate(0.0px, 0.0px);
+                    -moz-transform: translate(0.0px, 0.0px);
+                    -ms-transform: translate(0.0px, 0.0px);
+                    transform: translate(0.0px, 0.0px);
+                }
+
+                18% {
+                    -webkit-transform: translate(0.3px, 0.0px);
+                    -moz-transform: translate(0.3px, 0.0px);
+                    -ms-transform: translate(0.3px, 0.0px);
+                    transform: translate(0.3px, 0.0px);
+                }
+
+                20% {
+                    -webkit-transform: translate(0.0px, 0.0px);
+                    -moz-transform: translate(0.0px, 0.0px);
+                    -ms-transform: translate(0.0px, 0.0px);
+                    transform: translate(0.0px, 0.0px);
+                }
+
+                22% {
+                    -webkit-transform: translate(1px, 0.0px);
+                    -moz-transform: translate(1px, 0.0px);
+                    -ms-transform: translate(1px, 0.0px);
+                    transform: translate(1px, 0.0px);
+                }
+
+                24% {
+                    -webkit-transform: translate(0.0px, 0.0px);
+                    -moz-transform: translate(0.0px, 0.0px);
+                    -ms-transform: translate(0.0px, 0.0px);
+                    transform: translate(0.0px, 0.0px);
+                }
+
+                26% {
+                    -webkit-transform: translate(-1px, 0.0px);
+                    -moz-transform: translate(-1px, 0.0px);
+                    -ms-transform: translate(-1px, 0.0px);
+                    transform: translate(-1px, 0.0px);
+                }
+
+                28% {
+                    -webkit-transform: translate(0.0px, 0.0px);
+                    -moz-transform: translate(0.0px, 0.0px);
+                    -ms-transform: translate(0.0px, 0.0px);
+                    transform: translate(0.0px, 0.0px);
+                }
+
+                40% {
+                    fill: orange;
+                    -webkit-transform: translate(0.0px, 0.0px);
+                    -moz-transform: translate(0.0px, 0.0px);
+                    -ms-transform: translate(0.0px, 0.0px);
+                    transform: translate(0.0px, 0.0px);
+                }
+
+                65% {
+                    fill: white;
+                    -webkit-transform: translate(-1px, 5.0px);
+                    -moz-transform: translate(-1px, 5.0px);
+                    -ms-transform: translate(-1px, 5.0px);
+                    transform: translate(-1px, 5.0px);
+                }
+
+                61% {
+                    fill: orange;
+                }
+
+                100% {
+                    -webkit-transform: translate(0.0px, 0.0px);
+                    -moz-transform: translate(0.0px, 0.0px);
+                    -ms-transform: translate(0.0px, 0.0px);
+                    transform: translate(0.0px, 0.0px);
+                }
+            }
+
+            .am-weather-stroke {
+                -webkit-animation-name: am-weather-stroke;
+                -moz-animation-name: am-weather-stroke;
+                animation-name: am-weather-stroke;
+                -webkit-animation-duration: 1.11s;
+                -moz-animation-duration: 1.11s;
+                animation-duration: 1.11s;
+                -webkit-animation-timing-function: linear;
+                -moz-animation-timing-function: linear;
+                animation-timing-function: linear;
+                -webkit-animation-iteration-count: infinite;
+                -moz-animation-iteration-count: infinite;
+                animation-iteration-count: infinite;
+            }
+
+            @keyframes error {
+                0% {
+                    fill: #cc0000;
+                }
+
+                50% {
+                    fill: #ff0000;
+                }
+
+                100% {
+                    fill: #cc0000;
+                }
+            }
+
+            #Shape {
+                -webkit-animation-name: error;
+                -moz-animation-name: error;
+                animation-name: error;
+                -webkit-animation-duration: 1s;
+                -moz-animation-duration: 1s;
+                animation-duration: 1s;
+                -webkit-animation-timing-function: linear;
+                -moz-animation-timing-function: linear;
+                animation-timing-function: linear;
+                -webkit-animation-iteration-count: infinite;
+                -moz-animation-iteration-count: infinite;
+                animation-iteration-count: infinite;
+            }
+            ]]>
+        </style>
+    </defs>
+    <g transform="translate(16,-2)" filter="url(#blur)">
+        <g class="am-weather-cloud-1"
+            style="-moz-animation-duration:7s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-1;-moz-animation-timing-function:linear;-webkit-animation-duration:7s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-1;-webkit-animation-timing-function:linear">
+            <path transform="matrix(.6 0 0 .6 -10 -6)"
+                d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+                fill="#666" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+        </g>
+        <g class="am-weather-cloud-3">
+            <path transform="translate(-20,-11)"
+                d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+                fill="#333" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+        </g>
+        <g transform="matrix(1.2,0,0,1.2,-4,28)">
+            <polygon class="am-weather-stroke"
+                points="11.1 6.9 14.3 -2.9 20.5 -2.9 16.4 4.3 20.3 4.3 11.5 14.6 14.9 6.9" fill="#ffa500" stroke="#fff"
+                style="-moz-animation-duration:1.11s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-stroke;-moz-animation-timing-function:linear;-webkit-animation-duration:1.11s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-stroke;-webkit-animation-timing-function:linear" />
+        </g>
+        <g class="warning" transform="translate(20,30)">
+            <path
+                d="m7.7791 2.906-5.9912 10.117c-0.56283 0.95042-0.24862 2.1772 0.7018 2.74 0.30853 0.18271 0.66051 0.27911 1.0191 0.27911h11.982c1.1046 0 2-0.89543 2-2 0-0.35857-0.0964-0.71056-0.27911-1.0191l-5.9912-10.117c-0.56283-0.95042-1.7896-1.2646-2.74-0.7018-0.28918 0.17125-0.53055 0.41262-0.7018 0.7018z"
+                fill="#c00" />
+            <path d="m9.5 10.5v-5" stroke="#fff" stroke-linecap="round" stroke-width="1.5" />
+            <circle cx="9.5" cy="13" r="1" fill="#fff" />
+        </g>
+    </g>
+</svg>

public/weather-ico/snowy-1-day.svg

@@ -0,0 +1,241 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.23099" width="1.403" height="1.5634">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** SUN
+*/
+      @keyframes am-weather-sun {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .am-weather-sun {
+        -webkit-animation-name: am-weather-sun;
+        -moz-animation-name: am-weather-sun;
+        -ms-animation-name: am-weather-sun;
+        animation-name: am-weather-sun;
+        -webkit-animation-duration: 9s;
+        -moz-animation-duration: 9s;
+        -ms-animation-duration: 9s;
+        animation-duration: 9s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-sun-shiny {
+        0% {
+          stroke-dasharray: 3px 10px;
+          stroke-dashoffset: 0px;
+        }
+
+        50% {
+          stroke-dasharray: 0.1px 10px;
+          stroke-dashoffset: -1px;
+        }
+
+        100% {
+          stroke-dasharray: 3px 10px;
+          stroke-dashoffset: 0px;
+        }
+      }
+
+      .am-weather-sun-shiny line {
+        -webkit-animation-name: am-weather-sun-shiny;
+        -moz-animation-name: am-weather-sun-shiny;
+        -ms-animation-name: am-weather-sun-shiny;
+        animation-name: am-weather-sun-shiny;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** SNOW
+*/
+      @keyframes am-weather-snow {
+        0% {
+          -webkit-transform: translateX(0) translateY(0);
+          -moz-transform: translateX(0) translateY(0);
+          -ms-transform: translateX(0) translateY(0);
+          transform: translateX(0) translateY(0);
+        }
+
+        33.33% {
+          -webkit-transform: translateX(-1.2px) translateY(2px);
+          -moz-transform: translateX(-1.2px) translateY(2px);
+          -ms-transform: translateX(-1.2px) translateY(2px);
+          transform: translateX(-1.2px) translateY(2px);
+        }
+
+        66.66% {
+          -webkit-transform: translateX(1.4px) translateY(4px);
+          -moz-transform: translateX(1.4px) translateY(4px);
+          -ms-transform: translateX(1.4px) translateY(4px);
+          transform: translateX(1.4px) translateY(4px);
+          opacity: 1;
+        }
+
+        100% {
+          -webkit-transform: translateX(-1.6px) translateY(6px);
+          -moz-transform: translateX(-1.6px) translateY(6px);
+          -ms-transform: translateX(-1.6px) translateY(6px);
+          transform: translateX(-1.6px) translateY(6px);
+          opacity: 0;
+        }
+      }
+
+      .am-weather-snow-1 {
+        -webkit-animation-name: am-weather-snow;
+        -moz-animation-name: am-weather-snow;
+        -ms-animation-name: am-weather-snow;
+        animation-name: am-weather-snow;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="translate(0,16)">
+      <g class="am-weather-sun" transform="translate(0,16)"
+        style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
+        <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
+        <g transform="rotate(45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(135)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="scale(-1)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(225)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g class="am-weather-snow-1"
+      style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
+      <g transform="translate(12,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+        <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+        <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+      </g>
+    </g>
+  </g>
+</svg>

public/weather-ico/snowy-1-night.svg

@@ -0,0 +1,269 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.23099" width="1.403" height="1.5634">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** MOON
+*/
+      @keyframes am-weather-moon {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        50% {
+          -webkit-transform: rotate(15deg);
+          -moz-transform: rotate(15deg);
+          -ms-transform: rotate(15deg);
+          transform: rotate(15deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+      }
+
+      .am-weather-moon {
+        -webkit-animation-name: am-weather-moon;
+        -moz-animation-name: am-weather-moon;
+        -ms-animation-name: am-weather-moon;
+        animation-name: am-weather-moon;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        -webkit-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -moz-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -ms-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+      }
+
+      @keyframes am-weather-moon-star-1 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-1 {
+        -webkit-animation-name: am-weather-moon-star-1;
+        -moz-animation-name: am-weather-moon-star-1;
+        -ms-animation-name: am-weather-moon-star-1;
+        animation-name: am-weather-moon-star-1;
+        -webkit-animation-delay: 3s;
+        -moz-animation-delay: 3s;
+        -ms-animation-delay: 3s;
+        animation-delay: 3s;
+        -webkit-animation-duration: 5s;
+        -moz-animation-duration: 5s;
+        -ms-animation-duration: 5s;
+        animation-duration: 5s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      @keyframes am-weather-moon-star-2 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-2 {
+        -webkit-animation-name: am-weather-moon-star-2;
+        -moz-animation-name: am-weather-moon-star-2;
+        -ms-animation-name: am-weather-moon-star-2;
+        animation-name: am-weather-moon-star-2;
+        -webkit-animation-delay: 5s;
+        -moz-animation-delay: 5s;
+        -ms-animation-delay: 5s;
+        animation-delay: 5s;
+        -webkit-animation-duration: 4s;
+        -moz-animation-duration: 4s;
+        -ms-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      /*
+** SNOW
+*/
+      @keyframes am-weather-snow {
+        0% {
+          -webkit-transform: translateX(0) translateY(0);
+          -moz-transform: translateX(0) translateY(0);
+          -ms-transform: translateX(0) translateY(0);
+          transform: translateX(0) translateY(0);
+        }
+
+        33.33% {
+          -webkit-transform: translateX(-1.2px) translateY(2px);
+          -moz-transform: translateX(-1.2px) translateY(2px);
+          -ms-transform: translateX(-1.2px) translateY(2px);
+          transform: translateX(-1.2px) translateY(2px);
+        }
+
+        66.66% {
+          -webkit-transform: translateX(1.4px) translateY(4px);
+          -moz-transform: translateX(1.4px) translateY(4px);
+          -ms-transform: translateX(1.4px) translateY(4px);
+          transform: translateX(1.4px) translateY(4px);
+          opacity: 1;
+        }
+
+        100% {
+          -webkit-transform: translateX(-1.6px) translateY(6px);
+          -moz-transform: translateX(-1.6px) translateY(6px);
+          -ms-transform: translateX(-1.6px) translateY(6px);
+          transform: translateX(-1.6px) translateY(6px);
+          opacity: 0;
+        }
+      }
+
+      .am-weather-snow-1 {
+        -webkit-animation-name: am-weather-snow;
+        -moz-animation-name: am-weather-snow;
+        -ms-animation-name: am-weather-snow;
+        animation-name: am-weather-snow;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="matrix(.8 0 0 .8 16 4)">
+      <g class="am-weather-moon-star-1"
+        style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+        <polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
+          stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon-star-2"
+        style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+        <polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
+          fill="#ffa500" stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon"
+        style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+        <path
+          d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+          fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g class="am-weather-snow-1"
+      style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
+      <g transform="translate(12,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+        <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+        <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+      </g>
+    </g>
+  </g>
+</svg>

public/weather-ico/snowy-2-day.svg

@@ -0,0 +1,273 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.23099" width="1.403" height="1.5634">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** SUN
+*/
+      @keyframes am-weather-sun {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .am-weather-sun {
+        -webkit-animation-name: am-weather-sun;
+        -moz-animation-name: am-weather-sun;
+        -ms-animation-name: am-weather-sun;
+        animation-name: am-weather-sun;
+        -webkit-animation-duration: 9s;
+        -moz-animation-duration: 9s;
+        -ms-animation-duration: 9s;
+        animation-duration: 9s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      @keyframes am-weather-sun-shiny {
+        0% {
+          stroke-dasharray: 3px 10px;
+          stroke-dashoffset: 0px;
+        }
+
+        50% {
+          stroke-dasharray: 0.1px 10px;
+          stroke-dashoffset: -1px;
+        }
+
+        100% {
+          stroke-dasharray: 3px 10px;
+          stroke-dashoffset: 0px;
+        }
+      }
+
+      .am-weather-sun-shiny line {
+        -webkit-animation-name: am-weather-sun-shiny;
+        -moz-animation-name: am-weather-sun-shiny;
+        -ms-animation-name: am-weather-sun-shiny;
+        animation-name: am-weather-sun-shiny;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** SNOW
+*/
+      @keyframes am-weather-snow {
+        0% {
+          -webkit-transform: translateX(0) translateY(0);
+          -moz-transform: translateX(0) translateY(0);
+          -ms-transform: translateX(0) translateY(0);
+          transform: translateX(0) translateY(0);
+        }
+
+        33.33% {
+          -webkit-transform: translateX(-1.2px) translateY(2px);
+          -moz-transform: translateX(-1.2px) translateY(2px);
+          -ms-transform: translateX(-1.2px) translateY(2px);
+          transform: translateX(-1.2px) translateY(2px);
+        }
+
+        66.66% {
+          -webkit-transform: translateX(1.4px) translateY(4px);
+          -moz-transform: translateX(1.4px) translateY(4px);
+          -ms-transform: translateX(1.4px) translateY(4px);
+          transform: translateX(1.4px) translateY(4px);
+          opacity: 1;
+        }
+
+        100% {
+          -webkit-transform: translateX(-1.6px) translateY(6px);
+          -moz-transform: translateX(-1.6px) translateY(6px);
+          -ms-transform: translateX(-1.6px) translateY(6px);
+          transform: translateX(-1.6px) translateY(6px);
+          opacity: 0;
+        }
+      }
+
+      .am-weather-snow-1 {
+        -webkit-animation-name: am-weather-snow;
+        -moz-animation-name: am-weather-snow;
+        -ms-animation-name: am-weather-snow;
+        animation-name: am-weather-snow;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      .am-weather-snow-2 {
+        -webkit-animation-name: am-weather-snow;
+        -moz-animation-name: am-weather-snow;
+        -ms-animation-name: am-weather-snow;
+        animation-name: am-weather-snow;
+        -webkit-animation-delay: 1.2s;
+        -moz-animation-delay: 1.2s;
+        -ms-animation-delay: 1.2s;
+        animation-delay: 1.2s;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="translate(0,16)">
+      <g class="am-weather-sun"
+        style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
+        <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round" stroke-width="2" />
+        <g transform="rotate(45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(135)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="scale(-1)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(225)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-90)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+        <g transform="rotate(-45)">
+          <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+            stroke-width="2" />
+        </g>
+      </g>
+      <circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
+    </g>
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g class="am-weather-snow-1"
+      style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
+      <g transform="translate(7,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+        <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+        <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+      </g>
+    </g>
+    <g class="am-weather-snow-2"
+      style="-moz-animation-delay:1.2s;-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-delay:1.2s;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-delay:1.2s;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
+      <g transform="translate(16,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+        <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+        <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+      </g>
+    </g>
+  </g>
+</svg>

public/weather-ico/snowy-2-night.svg

@@ -0,0 +1,301 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="blur" x="-.20655" y="-.23099" width="1.403" height="1.5634">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+      <feOffset dx="0" dy="4" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA slope="0.05" type="linear" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <style type="text/css">
+      <![CDATA[
+      /*
+** CLOUDS
+*/
+      @keyframes am-weather-cloud-2 {
+        0% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+
+        50% {
+          -webkit-transform: translate(2px, 0px);
+          -moz-transform: translate(2px, 0px);
+          -ms-transform: translate(2px, 0px);
+          transform: translate(2px, 0px);
+        }
+
+        100% {
+          -webkit-transform: translate(0px, 0px);
+          -moz-transform: translate(0px, 0px);
+          -ms-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+        }
+      }
+
+      .am-weather-cloud-2 {
+        -webkit-animation-name: am-weather-cloud-2;
+        -moz-animation-name: am-weather-cloud-2;
+        animation-name: am-weather-cloud-2;
+        -webkit-animation-duration: 3s;
+        -moz-animation-duration: 3s;
+        animation-duration: 3s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      /*
+** MOON
+*/
+      @keyframes am-weather-moon {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        50% {
+          -webkit-transform: rotate(15deg);
+          -moz-transform: rotate(15deg);
+          -ms-transform: rotate(15deg);
+          transform: rotate(15deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+      }
+
+      .am-weather-moon {
+        -webkit-animation-name: am-weather-moon;
+        -moz-animation-name: am-weather-moon;
+        -ms-animation-name: am-weather-moon;
+        animation-name: am-weather-moon;
+        -webkit-animation-duration: 6s;
+        -moz-animation-duration: 6s;
+        -ms-animation-duration: 6s;
+        animation-duration: 6s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+        -webkit-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -moz-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        -ms-transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+        transform-origin: 12.5px 15.15px 0;
+        /* TODO FF CENTER ISSUE */
+      }
+
+      @keyframes am-weather-moon-star-1 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-1 {
+        -webkit-animation-name: am-weather-moon-star-1;
+        -moz-animation-name: am-weather-moon-star-1;
+        -ms-animation-name: am-weather-moon-star-1;
+        animation-name: am-weather-moon-star-1;
+        -webkit-animation-delay: 3s;
+        -moz-animation-delay: 3s;
+        -ms-animation-delay: 3s;
+        animation-delay: 3s;
+        -webkit-animation-duration: 5s;
+        -moz-animation-duration: 5s;
+        -ms-animation-duration: 5s;
+        animation-duration: 5s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      @keyframes am-weather-moon-star-2 {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      .am-weather-moon-star-2 {
+        -webkit-animation-name: am-weather-moon-star-2;
+        -moz-animation-name: am-weather-moon-star-2;
+        -ms-animation-name: am-weather-moon-star-2;
+        animation-name: am-weather-moon-star-2;
+        -webkit-animation-delay: 5s;
+        -moz-animation-delay: 5s;
+        -ms-animation-delay: 5s;
+        animation-delay: 5s;
+        -webkit-animation-duration: 4s;
+        -moz-animation-duration: 4s;
+        -ms-animation-duration: 4s;
+        animation-duration: 4s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: 1;
+        -moz-animation-iteration-count: 1;
+        -ms-animation-iteration-count: 1;
+        animation-iteration-count: 1;
+      }
+
+      /*
+** SNOW
+*/
+      @keyframes am-weather-snow {
+        0% {
+          -webkit-transform: translateX(0) translateY(0);
+          -moz-transform: translateX(0) translateY(0);
+          -ms-transform: translateX(0) translateY(0);
+          transform: translateX(0) translateY(0);
+        }
+
+        33.33% {
+          -webkit-transform: translateX(-1.2px) translateY(2px);
+          -moz-transform: translateX(-1.2px) translateY(2px);
+          -ms-transform: translateX(-1.2px) translateY(2px);
+          transform: translateX(-1.2px) translateY(2px);
+        }
+
+        66.66% {
+          -webkit-transform: translateX(1.4px) translateY(4px);
+          -moz-transform: translateX(1.4px) translateY(4px);
+          -ms-transform: translateX(1.4px) translateY(4px);
+          transform: translateX(1.4px) translateY(4px);
+          opacity: 1;
+        }
+
+        100% {
+          -webkit-transform: translateX(-1.6px) translateY(6px);
+          -moz-transform: translateX(-1.6px) translateY(6px);
+          -ms-transform: translateX(-1.6px) translateY(6px);
+          transform: translateX(-1.6px) translateY(6px);
+          opacity: 0;
+        }
+      }
+
+      .am-weather-snow-1 {
+        -webkit-animation-name: am-weather-snow;
+        -moz-animation-name: am-weather-snow;
+        -ms-animation-name: am-weather-snow;
+        animation-name: am-weather-snow;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+
+      .am-weather-snow-2 {
+        -webkit-animation-name: am-weather-snow;
+        -moz-animation-name: am-weather-snow;
+        -ms-animation-name: am-weather-snow;
+        animation-name: am-weather-snow;
+        -webkit-animation-delay: 1.2s;
+        -moz-animation-delay: 1.2s;
+        -ms-animation-delay: 1.2s;
+        animation-delay: 1.2s;
+        -webkit-animation-duration: 2s;
+        -moz-animation-duration: 2s;
+        -ms-animation-duration: 2s;
+        animation-duration: 2s;
+        -webkit-animation-timing-function: linear;
+        -moz-animation-timing-function: linear;
+        -ms-animation-timing-function: linear;
+        animation-timing-function: linear;
+        -webkit-animation-iteration-count: infinite;
+        -moz-animation-iteration-count: infinite;
+        -ms-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+      }
+      ]]>
+    </style>
+  </defs>
+  <g transform="translate(16,-2)" filter="url(#blur)">
+    <g transform="matrix(.8 0 0 .8 16 4)">
+      <g class="am-weather-moon-star-1"
+        style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+        <polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
+          stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon-star-2"
+        style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+        <polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
+          fill="#ffa500" stroke-miterlimit="10" />
+      </g>
+      <g class="am-weather-moon"
+        style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+        <path
+          d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+          fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
+      </g>
+    </g>
+    <g class="am-weather-cloud-3"
+      style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+      <path transform="translate(-20,-11)"
+        d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+        fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+    </g>
+    <g class="am-weather-snow-1"
+      style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
+      <g transform="translate(7,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+        <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+        <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+      </g>
+    </g>
+    <g class="am-weather-snow-2"
+      style="-moz-animation-delay:1.2s;-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-delay:1.2s;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-delay:1.2s;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
+      <g transform="translate(16,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+        <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+        <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+        <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+      </g>
+    </g>
+  </g>
+</svg>

public/weather-ico/snowy-3-day.svg

@@ -0,0 +1,334 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+   <defs>
+      <filter id="blur" x="-.24684" y="-.26897" width="1.4937" height="1.6759">
+         <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+         <feOffset dx="0" dy="4" result="offsetblur" />
+         <feComponentTransfer>
+            <feFuncA slope="0.05" type="linear" />
+         </feComponentTransfer>
+         <feMerge>
+            <feMergeNode />
+            <feMergeNode in="SourceGraphic" />
+         </feMerge>
+      </filter>
+      <style type="text/css">
+         <![CDATA[
+         /*
+** CLOUDS
+*/
+         @keyframes am-weather-cloud-2 {
+            0% {
+               -webkit-transform: translate(0px, 0px);
+               -moz-transform: translate(0px, 0px);
+               -ms-transform: translate(0px, 0px);
+               transform: translate(0px, 0px);
+            }
+
+            50% {
+               -webkit-transform: translate(2px, 0px);
+               -moz-transform: translate(2px, 0px);
+               -ms-transform: translate(2px, 0px);
+               transform: translate(2px, 0px);
+            }
+
+            100% {
+               -webkit-transform: translate(0px, 0px);
+               -moz-transform: translate(0px, 0px);
+               -ms-transform: translate(0px, 0px);
+               transform: translate(0px, 0px);
+            }
+         }
+
+         .am-weather-cloud-2 {
+            -webkit-animation-name: am-weather-cloud-2;
+            -moz-animation-name: am-weather-cloud-2;
+            animation-name: am-weather-cloud-2;
+            -webkit-animation-duration: 3s;
+            -moz-animation-duration: 3s;
+            animation-duration: 3s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+         }
+
+         /*
+** SUN
+*/
+         @keyframes am-weather-sun {
+            0% {
+               -webkit-transform: rotate(0deg);
+               -moz-transform: rotate(0deg);
+               -ms-transform: rotate(0deg);
+               transform: rotate(0deg);
+            }
+
+            100% {
+               -webkit-transform: rotate(360deg);
+               -moz-transform: rotate(360deg);
+               -ms-transform: rotate(360deg);
+               transform: rotate(360deg);
+            }
+         }
+
+         .am-weather-sun {
+            -webkit-animation-name: am-weather-sun;
+            -moz-animation-name: am-weather-sun;
+            -ms-animation-name: am-weather-sun;
+            animation-name: am-weather-sun;
+            -webkit-animation-duration: 9s;
+            -moz-animation-duration: 9s;
+            -ms-animation-duration: 9s;
+            animation-duration: 9s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            -ms-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+         }
+
+         @keyframes am-weather-sun-shiny {
+            0% {
+               stroke-dasharray: 3px 10px;
+               stroke-dashoffset: 0px;
+            }
+
+            50% {
+               stroke-dasharray: 0.1px 10px;
+               stroke-dashoffset: -1px;
+            }
+
+            100% {
+               stroke-dasharray: 3px 10px;
+               stroke-dashoffset: 0px;
+            }
+         }
+
+         .am-weather-sun-shiny line {
+            -webkit-animation-name: am-weather-sun-shiny;
+            -moz-animation-name: am-weather-sun-shiny;
+            -ms-animation-name: am-weather-sun-shiny;
+            animation-name: am-weather-sun-shiny;
+            -webkit-animation-duration: 2s;
+            -moz-animation-duration: 2s;
+            -ms-animation-duration: 2s;
+            animation-duration: 2s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            -ms-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+         }
+
+         /*
+** SNOW
+*/
+         @keyframes am-weather-snow {
+            0% {
+               -webkit-transform: translateX(0) translateY(0);
+               -moz-transform: translateX(0) translateY(0);
+               -ms-transform: translateX(0) translateY(0);
+               transform: translateX(0) translateY(0);
+            }
+
+            33.33% {
+               -webkit-transform: translateX(-1.2px) translateY(2px);
+               -moz-transform: translateX(-1.2px) translateY(2px);
+               -ms-transform: translateX(-1.2px) translateY(2px);
+               transform: translateX(-1.2px) translateY(2px);
+            }
+
+            66.66% {
+               -webkit-transform: translateX(1.4px) translateY(4px);
+               -moz-transform: translateX(1.4px) translateY(4px);
+               -ms-transform: translateX(1.4px) translateY(4px);
+               transform: translateX(1.4px) translateY(4px);
+               opacity: 1;
+            }
+
+            100% {
+               -webkit-transform: translateX(-1.6px) translateY(6px);
+               -moz-transform: translateX(-1.6px) translateY(6px);
+               -ms-transform: translateX(-1.6px) translateY(6px);
+               transform: translateX(-1.6px) translateY(6px);
+               opacity: 0;
+            }
+         }
+
+         @keyframes am-weather-snow-reverse {
+            0% {
+               -webkit-transform: translateX(0) translateY(0);
+               -moz-transform: translateX(0) translateY(0);
+               -ms-transform: translateX(0) translateY(0);
+               transform: translateX(0) translateY(0);
+            }
+
+            33.33% {
+               -webkit-transform: translateX(1.2px) translateY(2px);
+               -moz-transform: translateX(1.2px) translateY(2px);
+               -ms-transform: translateX(1.2px) translateY(2px);
+               transform: translateX(1.2px) translateY(2px);
+            }
+
+            66.66% {
+               -webkit-transform: translateX(-1.4px) translateY(4px);
+               -moz-transform: translateX(-1.4px) translateY(4px);
+               -ms-transform: translateX(-1.4px) translateY(4px);
+               transform: translateX(-1.4px) translateY(4px);
+               opacity: 1;
+            }
+
+            100% {
+               -webkit-transform: translateX(1.6px) translateY(6px);
+               -moz-transform: translateX(1.6px) translateY(6px);
+               -ms-transform: translateX(1.6px) translateY(6px);
+               transform: translateX(1.6px) translateY(6px);
+               opacity: 0;
+            }
+         }
+
+         .am-weather-snow-1 {
+            -webkit-animation-name: am-weather-snow;
+            -moz-animation-name: am-weather-snow;
+            -ms-animation-name: am-weather-snow;
+            animation-name: am-weather-snow;
+            -webkit-animation-duration: 2s;
+            -moz-animation-duration: 2s;
+            -ms-animation-duration: 2s;
+            animation-duration: 2s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            -ms-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+         }
+
+         .am-weather-snow-2 {
+            -webkit-animation-name: am-weather-snow;
+            -moz-animation-name: am-weather-snow;
+            -ms-animation-name: am-weather-snow;
+            animation-name: am-weather-snow;
+            -webkit-animation-delay: 1.2s;
+            -moz-animation-delay: 1.2s;
+            -ms-animation-delay: 1.2s;
+            animation-delay: 1.2s;
+            -webkit-animation-duration: 2s;
+            -moz-animation-duration: 2s;
+            -ms-animation-duration: 2s;
+            animation-duration: 2s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            -ms-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+         }
+
+         .am-weather-snow-3 {
+            -webkit-animation-name: am-weather-snow-reverse;
+            -moz-animation-name: am-weather-snow-reverse;
+            -ms-animation-name: am-weather-snow-reverse;
+            animation-name: am-weather-snow-reverse;
+            -webkit-animation-duration: 2s;
+            -moz-animation-duration: 2s;
+            -ms-animation-duration: 2s;
+            animation-duration: 2s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            -ms-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+         }
+         ]]>
+      </style>
+   </defs>
+   <g transform="translate(16,-2)" filter="url(#blur)">
+      <g transform="translate(0,16)">
+         <g class="am-weather-sun"
+            style="-moz-animation-duration:9s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-sun;-moz-animation-timing-function:linear;-ms-animation-duration:9s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-sun;-ms-animation-timing-function:linear;-webkit-animation-duration:9s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-sun;-webkit-animation-timing-function:linear">
+            <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+               stroke-width="2" />
+            <g transform="rotate(45)">
+               <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+                  stroke-width="2" />
+            </g>
+            <g transform="rotate(90)">
+               <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+                  stroke-width="2" />
+            </g>
+            <g transform="rotate(135)">
+               <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+                  stroke-width="2" />
+            </g>
+            <g transform="scale(-1)">
+               <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+                  stroke-width="2" />
+            </g>
+            <g transform="rotate(225)">
+               <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+                  stroke-width="2" />
+            </g>
+            <g transform="rotate(-90)">
+               <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+                  stroke-width="2" />
+            </g>
+            <g transform="rotate(-45)">
+               <line transform="translate(0,9)" y2="3" fill="none" stroke="#ffa500" stroke-linecap="round"
+                  stroke-width="2" />
+            </g>
+         </g>
+         <circle r="5" fill="#ffa500" stroke="#ffa500" stroke-width="2" />
+      </g>
+      <g class="am-weather-cloud-2"
+         style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+         <path transform="translate(-20,-11)"
+            d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+            fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+      </g>
+      <g class="am-weather-snow-1"
+         style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
+         <g transform="translate(3,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+            <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+            <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+         </g>
+      </g>
+      <g class="am-weather-snow-2"
+         style="-moz-animation-delay:1.2s;-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-delay:1.2s;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-delay:1.2s;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
+         <g transform="translate(11,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+            <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+            <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+         </g>
+      </g>
+      <g class="am-weather-snow-3"
+         style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow-reverse;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow-reverse;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow-reverse;-webkit-animation-timing-function:linear">
+         <g transform="translate(20,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+            <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+            <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+         </g>
+      </g>
+   </g>
+</svg>

public/weather-ico/snowy-3-night.svg

@@ -0,0 +1,361 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- (c) ammap.com | SVG weather icons -->
+<svg width="56" height="48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+   <defs>
+      <filter id="blur" x="-.24684" y="-.26897" width="1.4937" height="1.6759">
+         <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
+         <feOffset dx="0" dy="4" result="offsetblur" />
+         <feComponentTransfer>
+            <feFuncA slope="0.05" type="linear" />
+         </feComponentTransfer>
+         <feMerge>
+            <feMergeNode />
+            <feMergeNode in="SourceGraphic" />
+         </feMerge>
+      </filter>
+      <style type="text/css">
+         <![CDATA[
+         /*
+** CLOUDS
+*/
+         @keyframes am-weather-cloud-2 {
+            0% {
+               -webkit-transform: translate(0px, 0px);
+               -moz-transform: translate(0px, 0px);
+               -ms-transform: translate(0px, 0px);
+               transform: translate(0px, 0px);
+            }
+
+            50% {
+               -webkit-transform: translate(2px, 0px);
+               -moz-transform: translate(2px, 0px);
+               -ms-transform: translate(2px, 0px);
+               transform: translate(2px, 0px);
+            }
+
+            100% {
+               -webkit-transform: translate(0px, 0px);
+               -moz-transform: translate(0px, 0px);
+               -ms-transform: translate(0px, 0px);
+               transform: translate(0px, 0px);
+            }
+         }
+
+         .am-weather-cloud-2 {
+            -webkit-animation-name: am-weather-cloud-2;
+            -moz-animation-name: am-weather-cloud-2;
+            animation-name: am-weather-cloud-2;
+            -webkit-animation-duration: 3s;
+            -moz-animation-duration: 3s;
+            animation-duration: 3s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+         }
+
+         /*
+** MOON
+*/
+         @keyframes am-weather-moon {
+            0% {
+               -webkit-transform: rotate(0deg);
+               -moz-transform: rotate(0deg);
+               -ms-transform: rotate(0deg);
+               transform: rotate(0deg);
+            }
+
+            50% {
+               -webkit-transform: rotate(15deg);
+               -moz-transform: rotate(15deg);
+               -ms-transform: rotate(15deg);
+               transform: rotate(15deg);
+            }
+
+            100% {
+               -webkit-transform: rotate(0deg);
+               -moz-transform: rotate(0deg);
+               -ms-transform: rotate(0deg);
+               transform: rotate(0deg);
+            }
+         }
+
+         .am-weather-moon {
+            -webkit-animation-name: am-weather-moon;
+            -moz-animation-name: am-weather-moon;
+            -ms-animation-name: am-weather-moon;
+            animation-name: am-weather-moon;
+            -webkit-animation-duration: 6s;
+            -moz-animation-duration: 6s;
+            -ms-animation-duration: 6s;
+            animation-duration: 6s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            -ms-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+            -webkit-transform-origin: 12.5px 15.15px 0;
+            /* TODO FF CENTER ISSUE */
+            -moz-transform-origin: 12.5px 15.15px 0;
+            /* TODO FF CENTER ISSUE */
+            -ms-transform-origin: 12.5px 15.15px 0;
+            /* TODO FF CENTER ISSUE */
+            transform-origin: 12.5px 15.15px 0;
+            /* TODO FF CENTER ISSUE */
+         }
+
+         @keyframes am-weather-moon-star-1 {
+            0% {
+               opacity: 0;
+            }
+
+            100% {
+               opacity: 1;
+            }
+         }
+
+         .am-weather-moon-star-1 {
+            -webkit-animation-name: am-weather-moon-star-1;
+            -moz-animation-name: am-weather-moon-star-1;
+            -ms-animation-name: am-weather-moon-star-1;
+            animation-name: am-weather-moon-star-1;
+            -webkit-animation-delay: 3s;
+            -moz-animation-delay: 3s;
+            -ms-animation-delay: 3s;
+            animation-delay: 3s;
+            -webkit-animation-duration: 5s;
+            -moz-animation-duration: 5s;
+            -ms-animation-duration: 5s;
+            animation-duration: 5s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: 1;
+            -moz-animation-iteration-count: 1;
+            -ms-animation-iteration-count: 1;
+            animation-iteration-count: 1;
+         }
+
+         @keyframes am-weather-moon-star-2 {
+            0% {
+               opacity: 0;
+            }
+
+            100% {
+               opacity: 1;
+            }
+         }
+
+         .am-weather-moon-star-2 {
+            -webkit-animation-name: am-weather-moon-star-2;
+            -moz-animation-name: am-weather-moon-star-2;
+            -ms-animation-name: am-weather-moon-star-2;
+            animation-name: am-weather-moon-star-2;
+            -webkit-animation-delay: 5s;
+            -moz-animation-delay: 5s;
+            -ms-animation-delay: 5s;
+            animation-delay: 5s;
+            -webkit-animation-duration: 4s;
+            -moz-animation-duration: 4s;
+            -ms-animation-duration: 4s;
+            animation-duration: 4s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: 1;
+            -moz-animation-iteration-count: 1;
+            -ms-animation-iteration-count: 1;
+            animation-iteration-count: 1;
+         }
+
+         /*
+** SNOW
+*/
+         @keyframes am-weather-snow {
+            0% {
+               -webkit-transform: translateX(0) translateY(0);
+               -moz-transform: translateX(0) translateY(0);
+               -ms-transform: translateX(0) translateY(0);
+               transform: translateX(0) translateY(0);
+            }
+
+            33.33% {
+               -webkit-transform: translateX(-1.2px) translateY(2px);
+               -moz-transform: translateX(-1.2px) translateY(2px);
+               -ms-transform: translateX(-1.2px) translateY(2px);
+               transform: translateX(-1.2px) translateY(2px);
+            }
+
+            66.66% {
+               -webkit-transform: translateX(1.4px) translateY(4px);
+               -moz-transform: translateX(1.4px) translateY(4px);
+               -ms-transform: translateX(1.4px) translateY(4px);
+               transform: translateX(1.4px) translateY(4px);
+               opacity: 1;
+            }
+
+            100% {
+               -webkit-transform: translateX(-1.6px) translateY(6px);
+               -moz-transform: translateX(-1.6px) translateY(6px);
+               -ms-transform: translateX(-1.6px) translateY(6px);
+               transform: translateX(-1.6px) translateY(6px);
+               opacity: 0;
+            }
+         }
+
+         @keyframes am-weather-snow-reverse {
+            0% {
+               -webkit-transform: translateX(0) translateY(0);
+               -moz-transform: translateX(0) translateY(0);
+               -ms-transform: translateX(0) translateY(0);
+               transform: translateX(0) translateY(0);
+            }
+
+            33.33% {
+               -webkit-transform: translateX(1.2px) translateY(2px);
+               -moz-transform: translateX(1.2px) translateY(2px);
+               -ms-transform: translateX(1.2px) translateY(2px);
+               transform: translateX(1.2px) translateY(2px);
+            }
+
+            66.66% {
+               -webkit-transform: translateX(-1.4px) translateY(4px);
+               -moz-transform: translateX(-1.4px) translateY(4px);
+               -ms-transform: translateX(-1.4px) translateY(4px);
+               transform: translateX(-1.4px) translateY(4px);
+               opacity: 1;
+            }
+
+            100% {
+               -webkit-transform: translateX(1.6px) translateY(6px);
+               -moz-transform: translateX(1.6px) translateY(6px);
+               -ms-transform: translateX(1.6px) translateY(6px);
+               transform: translateX(1.6px) translateY(6px);
+               opacity: 0;
+            }
+         }
+
+         .am-weather-snow-1 {
+            -webkit-animation-name: am-weather-snow;
+            -moz-animation-name: am-weather-snow;
+            -ms-animation-name: am-weather-snow;
+            animation-name: am-weather-snow;
+            -webkit-animation-duration: 2s;
+            -moz-animation-duration: 2s;
+            -ms-animation-duration: 2s;
+            animation-duration: 2s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            -ms-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+         }
+
+         .am-weather-snow-2 {
+            -webkit-animation-name: am-weather-snow;
+            -moz-animation-name: am-weather-snow;
+            -ms-animation-name: am-weather-snow;
+            animation-name: am-weather-snow;
+            -webkit-animation-delay: 1.2s;
+            -moz-animation-delay: 1.2s;
+            -ms-animation-delay: 1.2s;
+            animation-delay: 1.2s;
+            -webkit-animation-duration: 2s;
+            -moz-animation-duration: 2s;
+            -ms-animation-duration: 2s;
+            animation-duration: 2s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            -ms-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+         }
+
+         .am-weather-snow-3 {
+            -webkit-animation-name: am-weather-snow-reverse;
+            -moz-animation-name: am-weather-snow-reverse;
+            -ms-animation-name: am-weather-snow-reverse;
+            animation-name: am-weather-snow-reverse;
+            -webkit-animation-duration: 2s;
+            -moz-animation-duration: 2s;
+            -ms-animation-duration: 2s;
+            animation-duration: 2s;
+            -webkit-animation-timing-function: linear;
+            -moz-animation-timing-function: linear;
+            -ms-animation-timing-function: linear;
+            animation-timing-function: linear;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            -ms-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+         }
+         ]]>
+      </style>
+   </defs>
+   <g transform="translate(16,-2)" filter="url(#blur)">
+      <g transform="matrix(.8 0 0 .8 16 4)">
+         <g class="am-weather-moon-star-1"
+            style="-moz-animation-delay:3s;-moz-animation-duration:5s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-1;-moz-animation-timing-function:linear;-ms-animation-delay:3s;-ms-animation-duration:5s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-1;-ms-animation-timing-function:linear;-webkit-animation-delay:3s;-webkit-animation-duration:5s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-1;-webkit-animation-timing-function:linear">
+            <polygon points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3" fill="#ffa500"
+               stroke-miterlimit="10" />
+         </g>
+         <g class="am-weather-moon-star-2"
+            style="-moz-animation-delay:5s;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-moz-animation-name:am-weather-moon-star-2;-moz-animation-timing-function:linear;-ms-animation-delay:5s;-ms-animation-duration:4s;-ms-animation-iteration-count:1;-ms-animation-name:am-weather-moon-star-2;-ms-animation-timing-function:linear;-webkit-animation-delay:5s;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;-webkit-animation-name:am-weather-moon-star-2;-webkit-animation-timing-function:linear">
+            <polygon transform="translate(20,10)" points="4 4 3.3 5.2 2.7 4 1.5 3.3 2.7 2.7 3.3 1.5 4 2.7 5.2 3.3"
+               fill="#ffa500" stroke-miterlimit="10" />
+         </g>
+         <g class="am-weather-moon"
+            style="-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-moon;-moz-animation-timing-function:linear;-moz-transform-origin:12.5px 15.15px 0;-ms-animation-duration:6s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-moon;-ms-animation-timing-function:linear;-ms-transform-origin:12.5px 15.15px 0;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-moon;-webkit-animation-timing-function:linear;-webkit-transform-origin:12.5px 15.15px 0">
+            <path
+               d="m14.5 13.2c0-3.7 2-6.9 5-8.7-1.5-0.9-3.2-1.3-5-1.3-5.5 0-10 4.5-10 10s4.5 10 10 10c1.8 0 3.5-0.5 5-1.3-3-1.7-5-5-5-8.7z"
+               fill="#ffa500" stroke="#ffa500" stroke-linejoin="round" stroke-width="2" />
+         </g>
+      </g>
+      <g class="am-weather-cloud-2"
+         style="-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-cloud-2;-moz-animation-timing-function:linear;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-cloud-2;-webkit-animation-timing-function:linear">
+         <path transform="translate(-20,-11)"
+            d="m47.7 35.4c0-4.6-3.7-8.2-8.2-8.2-1 0-1.9 0.2-2.8 0.5-0.3-3.4-3.1-6.2-6.6-6.2-3.7 0-6.7 3-6.7 6.7 0 0.8 0.2 1.6 0.4 2.3-0.3-0.1-0.7-0.1-1-0.1-3.7 0-6.7 3-6.7 6.7 0 3.6 2.9 6.6 6.5 6.7h17.2c4.4-0.5 7.9-4 7.9-8.4z"
+            fill="#57a0ee" stroke="#fff" stroke-linejoin="round" stroke-width="1.2" />
+      </g>
+      <g class="am-weather-snow-1"
+         style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
+         <g transform="translate(3,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+            <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+            <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+         </g>
+      </g>
+      <g class="am-weather-snow-2"
+         style="-moz-animation-delay:1.2s;-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow;-moz-animation-timing-function:linear;-ms-animation-delay:1.2s;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow;-ms-animation-timing-function:linear;-webkit-animation-delay:1.2s;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow;-webkit-animation-timing-function:linear">
+         <g transform="translate(11,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+            <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+            <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+         </g>
+      </g>
+      <g class="am-weather-snow-3"
+         style="-moz-animation-duration:2s;-moz-animation-iteration-count:infinite;-moz-animation-name:am-weather-snow-reverse;-moz-animation-timing-function:linear;-ms-animation-duration:2s;-ms-animation-iteration-count:infinite;-ms-animation-name:am-weather-snow-reverse;-ms-animation-timing-function:linear;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:am-weather-snow-reverse;-webkit-animation-timing-function:linear">
+         <g transform="translate(20,28)" fill="none" stroke="#57a0ee" stroke-linecap="round">
+            <line transform="translate(0,9)" y1="-2.5" y2="2.5" stroke-width="1.2" />
+            <line transform="rotate(45,-10.864,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(90,-4.5,4.5)" y1="-2.5" y2="2.5" />
+            <line transform="rotate(135,-1.864,4.5)" y1="-2.5" y2="2.5" />
+         </g>
+      </g>
+   </g>
+</svg>

sample.config.toml

@@ -22,5 +22,14 @@ MODEL_NAME = ""
 [MODELS.OLLAMA]
 API_URL = "" # Ollama API URL - http://host.docker.internal:11434
 
+[MODELS.DEEPSEEK]
+API_KEY = ""
+
+[MODELS.AIMLAPI]
+API_KEY = "" # Required to use AI/ML API chat and embedding models
+
+[MODELS.LM_STUDIO]
+API_URL = "" # LM Studio API URL - http://host.docker.internal:1234
+
 [API_ENDPOINTS]
-SEARXNG = "" # SearxNG API URL - http://localhost:32768
+SEARXNG = "" # SearxNG API URL - http://localhost:32768

src/app/api/chat/route.ts

@@ -49,6 +49,7 @@ type Body = {
   files: Array<string>;
   chatModel: ChatModel;
   embeddingModel: EmbeddingModel;
+  systemInstructions: string;
 };
 
 const handleEmitterEvents = async (
@@ -222,7 +223,7 @@ export const POST = async (req: Request) => {
 
     if (body.chatModel?.provider === 'custom_openai') {
       llm = new ChatOpenAI({
-        openAIApiKey: getCustomOpenaiApiKey(),
+        apiKey: getCustomOpenaiApiKey(),
         modelName: getCustomOpenaiModelName(),
         temperature: 0.7,
         configuration: {
@@ -278,6 +279,7 @@ export const POST = async (req: Request) => {
       embedding,
       body.optimizationMode,
       body.files,
+      body.systemInstructions,
     );
 
     const responseStream = new TransformStream();

src/app/api/config/route.ts

@@ -7,6 +7,9 @@ import {
   getGroqApiKey,
   getOllamaApiEndpoint,
   getOpenaiApiKey,
+  getDeepseekApiKey,
+  getAimlApiKey,
+  getLMStudioApiEndpoint,
   updateConfig,
 } from '@/lib/config';
 import {
@@ -50,9 +53,12 @@ export const GET = async (req: Request) => {
 
     config['openaiApiKey'] = getOpenaiApiKey();
     config['ollamaApiUrl'] = getOllamaApiEndpoint();
+    config['lmStudioApiUrl'] = getLMStudioApiEndpoint();
     config['anthropicApiKey'] = getAnthropicApiKey();
     config['groqApiKey'] = getGroqApiKey();
     config['geminiApiKey'] = getGeminiApiKey();
+    config['deepseekApiKey'] = getDeepseekApiKey();
+    config['aimlApiKey'] = getAimlApiKey();
     config['customOpenaiApiUrl'] = getCustomOpenaiApiUrl();
     config['customOpenaiApiKey'] = getCustomOpenaiApiKey();
     config['customOpenaiModelName'] = getCustomOpenaiModelName();
@@ -88,6 +94,15 @@ export const POST = async (req: Request) => {
         OLLAMA: {
           API_URL: config.ollamaApiUrl,
         },
+        DEEPSEEK: {
+          API_KEY: config.deepseekApiKey,
+        },
+        AIMLAPI: {
+          API_KEY: config.aimlApiKey,
+        },
+        LM_STUDIO: {
+          API_URL: config.lmStudioApiUrl,
+        },
         CUSTOM_OPENAI: {
           API_URL: config.customOpenaiApiUrl,
           API_KEY: config.customOpenaiApiKey,

src/app/api/discover/route.ts

@@ -16,28 +16,48 @@ const topics = ['AI', 'tech']; /* TODO: Add UI to customize this */
 
 export const GET = async (req: Request) => {
   try {
-    const data = (
-      await Promise.all([
-        ...new Array(articleWebsites.length * topics.length)
-          .fill(0)
-          .map(async (_, i) => {
-            return (
-              await searchSearxng(
-                `site:${articleWebsites[i % articleWebsites.length]} ${
-                  topics[i % topics.length]
-                }`,
-                {
-                  engines: ['bing news'],
-                  pageno: 1,
-                },
-              )
-            ).results;
-          }),
-      ])
-    )
-      .map((result) => result)
-      .flat()
-      .sort(() => Math.random() - 0.5);
+    const params = new URL(req.url).searchParams;
+    const mode: 'normal' | 'preview' =
+      (params.get('mode') as 'normal' | 'preview') || 'normal';
+
+    let data = [];
+
+    if (mode === 'normal') {
+      data = (
+        await Promise.all([
+          ...new Array(articleWebsites.length * topics.length)
+            .fill(0)
+            .map(async (_, i) => {
+              return (
+                await searchSearxng(
+                  `site:${articleWebsites[i % articleWebsites.length]} ${
+                    topics[i % topics.length]
+                  }`,
+                  {
+                    engines: ['bing news'],
+                    pageno: 1,
+                    language: 'en',
+                  },
+                )
+              ).results;
+            }),
+        ])
+      )
+        .map((result) => result)
+        .flat()
+        .sort(() => Math.random() - 0.5);
+    } else {
+      data = (
+        await searchSearxng(
+          `site:${articleWebsites[Math.floor(Math.random() * articleWebsites.length)]} ${topics[Math.floor(Math.random() * topics.length)]}`,
+          {
+            engines: ['bing news'],
+            pageno: 1,
+            language: 'en',
+          },
+        )
+      ).results;
+    }
 
     return Response.json(
       {

src/app/api/images/route.ts

@@ -49,7 +49,7 @@ export const POST = async (req: Request) => {
 
     if (body.chatModel?.provider === 'custom_openai') {
       llm = new ChatOpenAI({
-        openAIApiKey: getCustomOpenaiApiKey(),
+        apiKey: getCustomOpenaiApiKey(),
         modelName: getCustomOpenaiModelName(),
         temperature: 0.7,
         configuration: {

src/app/api/search/route.ts

@@ -34,6 +34,7 @@ interface ChatRequestBody {
   query: string;
   history: Array<[string, string]>;
   stream?: boolean;
+  systemInstructions?: string;
 }
 
 export const POST = async (req: Request) => {
@@ -80,7 +81,7 @@ export const POST = async (req: Request) => {
     if (body.chatModel?.provider === 'custom_openai') {
       llm = new ChatOpenAI({
         modelName: body.chatModel?.name || getCustomOpenaiModelName(),
-        openAIApiKey:
+        apiKey:
           body.chatModel?.customOpenAIKey || getCustomOpenaiApiKey(),
         temperature: 0.7,
         configuration: {
@@ -125,6 +126,7 @@ export const POST = async (req: Request) => {
       embeddings,
       body.optimizationMode,
       [],
+      body.systemInstructions || '',
     );
 
     if (!body.stream) {

src/app/api/suggestions/route.ts

@@ -48,7 +48,7 @@ export const POST = async (req: Request) => {
 
     if (body.chatModel?.provider === 'custom_openai') {
       llm = new ChatOpenAI({
-        openAIApiKey: getCustomOpenaiApiKey(),
+        apiKey: getCustomOpenaiApiKey(),
         modelName: getCustomOpenaiModelName(),
         temperature: 0.7,
         configuration: {

src/app/api/videos/route.ts

@@ -49,7 +49,7 @@ export const POST = async (req: Request) => {
 
     if (body.chatModel?.provider === 'custom_openai') {
       llm = new ChatOpenAI({
-        openAIApiKey: getCustomOpenaiApiKey(),
+        apiKey: getCustomOpenaiApiKey(),
         modelName: getCustomOpenaiModelName(),
         temperature: 0.7,
         configuration: {

src/app/api/weather/route.ts

@@ -0,0 +1,167 @@
+export const POST = async (req: Request) => {
+  try {
+    const body: { lat: number; lng: number; temperatureUnit: 'C' | 'F' } =
+      await req.json();
+
+    if (!body.lat || !body.lng) {
+      return Response.json(
+        {
+          message: 'Invalid request.',
+        },
+        { status: 400 },
+      );
+    }
+
+    const res = await fetch(
+      `https://api.open-meteo.com/v1/forecast?latitude=${body.lat}&longitude=${body.lng}&current=weather_code,temperature_2m,is_day,relative_humidity_2m,wind_speed_10m&timezone=auto${body.temperatureUnit === 'C' ? '' : '&temperature_unit=fahrenheit'}`,
+    );
+
+    const data = await res.json();
+
+    if (data.error) {
+      console.error(`Error fetching weather data: ${data.reason}`);
+      return Response.json(
+        {
+          message: 'An error has occurred.',
+        },
+        { status: 500 },
+      );
+    }
+
+    const weather: {
+      temperature: number;
+      condition: string;
+      humidity: number;
+      windSpeed: number;
+      icon: string;
+      temperatureUnit: 'C' | 'F';
+    } = {
+      temperature: data.current.temperature_2m,
+      condition: '',
+      humidity: data.current.relative_humidity_2m,
+      windSpeed: data.current.wind_speed_10m,
+      icon: '',
+      temperatureUnit: body.temperatureUnit,
+    };
+
+    const code = data.current.weather_code;
+    const isDay = data.current.is_day === 1;
+    const dayOrNight = isDay ? 'day' : 'night';
+
+    switch (code) {
+      case 0:
+        weather.icon = `clear-${dayOrNight}`;
+        weather.condition = 'Clear';
+        break;
+
+      case 1:
+        weather.condition = 'Mainly Clear';
+      case 2:
+        weather.condition = 'Partly Cloudy';
+      case 3:
+        weather.icon = `cloudy-1-${dayOrNight}`;
+        weather.condition = 'Cloudy';
+        break;
+
+      case 45:
+        weather.condition = 'Fog';
+      case 48:
+        weather.icon = `fog-${dayOrNight}`;
+        weather.condition = 'Fog';
+        break;
+
+      case 51:
+        weather.condition = 'Light Drizzle';
+      case 53:
+        weather.condition = 'Moderate Drizzle';
+      case 55:
+        weather.icon = `rainy-1-${dayOrNight}`;
+        weather.condition = 'Dense Drizzle';
+        break;
+
+      case 56:
+        weather.condition = 'Light Freezing Drizzle';
+      case 57:
+        weather.icon = `frost-${dayOrNight}`;
+        weather.condition = 'Dense Freezing Drizzle';
+        break;
+
+      case 61:
+        weather.condition = 'Slight Rain';
+      case 63:
+        weather.condition = 'Moderate Rain';
+      case 65:
+        weather.condition = 'Heavy Rain';
+        weather.icon = `rainy-2-${dayOrNight}`;
+        break;
+
+      case 66:
+        weather.condition = 'Light Freezing Rain';
+      case 67:
+        weather.condition = 'Heavy Freezing Rain';
+        weather.icon = 'rain-and-sleet-mix';
+        break;
+
+      case 71:
+        weather.condition = 'Slight Snow Fall';
+      case 73:
+        weather.condition = 'Moderate Snow Fall';
+      case 75:
+        weather.condition = 'Heavy Snow Fall';
+        weather.icon = `snowy-2-${dayOrNight}`;
+        break;
+
+      case 77:
+        weather.condition = 'Snow';
+        weather.icon = `snowy-1-${dayOrNight}`;
+        break;
+
+      case 80:
+        weather.condition = 'Slight Rain Showers';
+      case 81:
+        weather.condition = 'Moderate Rain Showers';
+      case 82:
+        weather.condition = 'Heavy Rain Showers';
+        weather.icon = `rainy-3-${dayOrNight}`;
+        break;
+
+      case 85:
+        weather.condition = 'Slight Snow Showers';
+      case 86:
+        weather.condition = 'Moderate Snow Showers';
+      case 87:
+        weather.condition = 'Heavy Snow Showers';
+        weather.icon = `snowy-3-${dayOrNight}`;
+        break;
+
+      case 95:
+        weather.condition = 'Thunderstorm';
+        weather.icon = `scattered-thunderstorms-${dayOrNight}`;
+        break;
+
+      case 96:
+        weather.condition = 'Thunderstorm with Slight Hail';
+      case 99:
+        weather.condition = 'Thunderstorm with Heavy Hail';
+        weather.icon = 'severe-thunderstorm';
+        break;
+
+      default:
+        weather.icon = `clear-${dayOrNight}`;
+        weather.condition = 'Clear';
+        break;
+    }
+
+    return Response.json(weather);
+  } catch (err) {
+    console.error('An error occurred while getting home widgets', err);
+    return Response.json(
+      {
+        message: 'An error has occurred.',
+      },
+      {
+        status: 500,
+      },
+    );
+  }
+};

src/app/globals.css

@@ -11,3 +11,11 @@
     display: none;
   }
 }
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  select,
+  textarea,
+  input {
+    font-size: 16px !important;
+  }
+}

src/app/manifest.ts

@@ -0,0 +1,54 @@
+import type { MetadataRoute } from 'next';
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Perplexica - Chat with the internet',
+    short_name: 'Perplexica',
+    description:
+      'Perplexica is an AI powered chatbot that is connected to the internet.',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#0a0a0a',
+    theme_color: '#0a0a0a',
+    screenshots: [
+      {
+        src: '/screenshots/p1.png',
+        form_factor: 'wide',
+        sizes: '2560x1600',
+      },
+      {
+        src: '/screenshots/p2.png',
+        form_factor: 'wide',
+        sizes: '2560x1600',
+      },
+      {
+        src: '/screenshots/p1_small.png',
+        form_factor: 'narrow',
+        sizes: '828x1792',
+      },
+      {
+        src: '/screenshots/p2_small.png',
+        form_factor: 'narrow',
+        sizes: '828x1792',
+      },
+    ],
+    icons: [
+      {
+        src: '/icon-50.png',
+        sizes: '50x50',
+        type: 'image/png' as const,
+      },
+      {
+        src: '/icon-100.png',
+        sizes: '100x100',
+        type: 'image/png',
+      },
+      {
+        src: '/icon.png',
+        sizes: '440x440',
+        type: 'image/png',
+        purpose: 'any',
+      },
+    ],
+  };
+}

src/app/settings/page.tsx

@@ -7,6 +7,7 @@ import { Switch } from '@headlessui/react';
 import ThemeSwitcher from '@/components/theme/Switcher';
 import { ImagesIcon, VideoIcon } from 'lucide-react';
 import Link from 'next/link';
+import { PROVIDER_METADATA } from '@/lib/providers';
 
 interface SettingsType {
   chatModelProviders: {
@@ -20,6 +21,9 @@ interface SettingsType {
   anthropicApiKey: string;
   geminiApiKey: string;
   ollamaApiUrl: string;
+  lmStudioApiUrl: string;
+  deepseekApiKey: string;
+  aimlApiKey: string;
   customOpenaiApiKey: string;
   customOpenaiApiUrl: string;
   customOpenaiModelName: string;
@@ -54,6 +58,38 @@ const Input = ({ className, isSaving, onSave, ...restProps }: InputProps) => {
   );
 };
 
+interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+  isSaving?: boolean;
+  onSave?: (value: string) => void;
+}
+
+const Textarea = ({
+  className,
+  isSaving,
+  onSave,
+  ...restProps
+}: TextareaProps) => {
+  return (
+    <div className="relative">
+      <textarea
+        placeholder="Any special instructions for the LLM"
+        className="placeholder:text-sm text-sm w-full flex items-center justify-between p-3 bg-light-secondary dark:bg-dark-secondary rounded-lg hover:bg-light-200 dark:hover:bg-dark-200 transition-colors"
+        rows={4}
+        onBlur={(e) => onSave?.(e.target.value)}
+        {...restProps}
+      />
+      {isSaving && (
+        <div className="absolute right-3 top-3">
+          <Loader2
+            size={16}
+            className="animate-spin text-black/70 dark:text-white/70"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
 const Select = ({
   className,
   options,
@@ -108,14 +144,15 @@ const Page = () => {
   const [selectedEmbeddingModel, setSelectedEmbeddingModel] = useState<
     string | null
   >(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [automaticImageSearch, setAutomaticImageSearch] = useState(false);
   const [automaticVideoSearch, setAutomaticVideoSearch] = useState(false);
+  const [systemInstructions, setSystemInstructions] = useState<string>('');
+  const [temperatureUnit, setTemperatureUnit] = useState<'C' | 'F'>('C');
   const [savingStates, setSavingStates] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
     const fetchConfig = async () => {
-      setIsLoading(true);
       const res = await fetch(`/api/config`, {
         headers: {
           'Content-Type': 'application/json',
@@ -172,6 +209,10 @@ const Page = () => {
         localStorage.getItem('autoVideoSearch') === 'true',
       );
 
+      setSystemInstructions(localStorage.getItem('systemInstructions')!);
+
+      setTemperatureUnit(localStorage.getItem('temperatureUnit')! as 'C' | 'F');
+
       setIsLoading(false);
     };
 
@@ -328,6 +369,10 @@ const Page = () => {
         localStorage.setItem('embeddingModelProvider', value);
       } else if (key === 'embeddingModel') {
         localStorage.setItem('embeddingModel', value);
+      } else if (key === 'systemInstructions') {
+        localStorage.setItem('systemInstructions', value);
+      } else if (key === 'temperatureUnit') {
+        localStorage.setItem('temperatureUnit', value.toString());
       }
     } catch (err) {
       console.error('Failed to save:', err);
@@ -376,13 +421,35 @@ const Page = () => {
       ) : (
         config && (
           <div className="flex flex-col space-y-6 pb-28 lg:pb-8">
-            <SettingsSection title="Appearance">
+            <SettingsSection title="Preferences">
               <div className="flex flex-col space-y-1">
                 <p className="text-black/70 dark:text-white/70 text-sm">
                   Theme
                 </p>
                 <ThemeSwitcher />
               </div>
+              <div className="flex flex-col space-y-1">
+                <p className="text-black/70 dark:text-white/70 text-sm">
+                  Temperature Unit
+                </p>
+                <Select
+                  value={temperatureUnit ?? undefined}
+                  onChange={(e) => {
+                    setTemperatureUnit(e.target.value as 'C' | 'F');
+                    saveConfig('temperatureUnit', e.target.value);
+                  }}
+                  options={[
+                    {
+                      label: 'Celsius',
+                      value: 'C',
+                    },
+                    {
+                      label: 'Fahrenheit',
+                      value: 'F',
+                    },
+                  ]}
+                />
+              </div>
             </SettingsSection>
 
             <SettingsSection title="Automatic Search">
@@ -473,6 +540,19 @@ const Page = () => {
               </div>
             </SettingsSection>
 
+            <SettingsSection title="System Instructions">
+              <div className="flex flex-col space-y-4">
+                <Textarea
+                  value={systemInstructions ?? undefined}
+                  isSaving={savingStates['systemInstructions']}
+                  onChange={(e) => {
+                    setSystemInstructions(e.target.value);
+                  }}
+                  onSave={(value) => saveConfig('systemInstructions', value)}
+                />
+              </div>
+            </SettingsSection>
+
             <SettingsSection title="Model Settings">
               {config.chatModelProviders && (
                 <div className="flex flex-col space-y-4">
@@ -497,8 +577,9 @@ const Page = () => {
                         (provider) => ({
                           value: provider,
                           label:
+                            (PROVIDER_METADATA as any)[provider]?.displayName ||
                             provider.charAt(0).toUpperCase() +
-                            provider.slice(1),
+                              provider.slice(1),
                         }),
                       )}
                     />
@@ -639,8 +720,9 @@ const Page = () => {
                         (provider) => ({
                           value: provider,
                           label:
+                            (PROVIDER_METADATA as any)[provider]?.displayName ||
                             provider.charAt(0).toUpperCase() +
-                            provider.slice(1),
+                              provider.slice(1),
                         }),
                       )}
                     />
@@ -788,6 +870,63 @@ const Page = () => {
                     onSave={(value) => saveConfig('geminiApiKey', value)}
                   />
                 </div>
+
+                <div className="flex flex-col space-y-1">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    Deepseek API Key
+                  </p>
+                  <Input
+                    type="text"
+                    placeholder="Deepseek API Key"
+                    value={config.deepseekApiKey}
+                    isSaving={savingStates['deepseekApiKey']}
+                    onChange={(e) => {
+                      setConfig((prev) => ({
+                        ...prev!,
+                        deepseekApiKey: e.target.value,
+                      }));
+                    }}
+                    onSave={(value) => saveConfig('deepseekApiKey', value)}
+                  />
+                </div>
+
+                <div className="flex flex-col space-y-1">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    AI/ML API Key
+                  </p>
+                  <Input
+                    type="text"
+                    placeholder="AI/ML API Key"
+                    value={config.aimlApiKey}
+                    isSaving={savingStates['aimlApiKey']}
+                    onChange={(e) => {
+                      setConfig((prev) => ({
+                        ...prev!,
+                        aimlApiKey: e.target.value,
+                      }));
+                    }}
+                    onSave={(value) => saveConfig('aimlApiKey', value)}
+                  />
+                </div>
+
+                <div className="flex flex-col space-y-1">
+                  <p className="text-black/70 dark:text-white/70 text-sm">
+                    LM Studio API URL
+                  </p>
+                  <Input
+                    type="text"
+                    placeholder="LM Studio API URL"
+                    value={config.lmStudioApiUrl}
+                    isSaving={savingStates['lmStudioApiUrl']}
+                    onChange={(e) => {
+                      setConfig((prev) => ({
+                        ...prev!,
+                        lmStudioApiUrl: e.target.value,
+                      }));
+                    }}
+                    onSave={(value) => saveConfig('lmStudioApiUrl', value)}
+                  />
+                </div>
               </div>
             </SettingsSection>
           </div>

src/components/ChatWindow.tsx

@@ -82,14 +82,29 @@ const checkConfig = async (
     ) {
       if (!chatModel || !chatModelProvider) {
         const chatModelProviders = providers.chatModelProviders;
+        const chatModelProvidersKeys = Object.keys(chatModelProviders);
 
-        chatModelProvider =
-          chatModelProvider || Object.keys(chatModelProviders)[0];
+        if (!chatModelProviders || chatModelProvidersKeys.length === 0) {
+          return toast.error('No chat models available');
+        } else {
+          chatModelProvider =
+            chatModelProvidersKeys.find(
+              (provider) =>
+                Object.keys(chatModelProviders[provider]).length > 0,
+            ) || chatModelProvidersKeys[0];
+        }
+
+        if (
+          chatModelProvider === 'custom_openai' &&
+          Object.keys(chatModelProviders[chatModelProvider]).length === 0
+        ) {
+          toast.error(
+            "Looks like you haven't configured any chat model providers. Please configure them from the settings page or the config file.",
+          );
+          return setHasError(true);
+        }
 
         chatModel = Object.keys(chatModelProviders[chatModelProvider])[0];
-
-        if (!chatModelProviders || Object.keys(chatModelProviders).length === 0)
-          return toast.error('No chat models available');
       }
 
       if (!embeddingModel || !embeddingModelProvider) {
@@ -117,7 +132,8 @@ const checkConfig = async (
 
       if (
         Object.keys(chatModelProviders).length > 0 &&
-        !chatModelProviders[chatModelProvider]
+        (!chatModelProviders[chatModelProvider] ||
+          Object.keys(chatModelProviders[chatModelProvider]).length === 0)
       ) {
         const chatModelProvidersKeys = Object.keys(chatModelProviders);
         chatModelProvider =
@@ -132,6 +148,16 @@ const checkConfig = async (
         chatModelProvider &&
         !chatModelProviders[chatModelProvider][chatModel]
       ) {
+        if (
+          chatModelProvider === 'custom_openai' &&
+          Object.keys(chatModelProviders[chatModelProvider]).length === 0
+        ) {
+          toast.error(
+            "Looks like you haven't configured any chat model providers. Please configure them from the settings page or the config file.",
+          );
+          return setHasError(true);
+        }
+
         chatModel = Object.keys(
           chatModelProviders[
             Object.keys(chatModelProviders[chatModelProvider]).length > 0
@@ -139,6 +165,7 @@ const checkConfig = async (
               : Object.keys(chatModelProviders)[0]
           ],
         )[0];
+
         localStorage.setItem('chatModel', chatModel);
       }
 
@@ -480,6 +507,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
           name: embeddingModelProvider.name,
           provider: embeddingModelProvider.provider,
         },
+        systemInstructions: localStorage.getItem('systemInstructions'),
       }),
     });
 

src/components/EmptyChat.tsx

@@ -1,8 +1,9 @@
 import { Settings } from 'lucide-react';
 import EmptyChatMessageInput from './EmptyChatMessageInput';
-import { useState } from 'react';
 import { File } from './ChatWindow';
 import Link from 'next/link';
+import WeatherWidget from './WeatherWidget';
+import NewsArticleWidget from './NewsArticleWidget';
 
 const EmptyChat = ({
   sendMessage,
@@ -25,8 +26,6 @@ const EmptyChat = ({
   files: File[];
   setFiles: (files: File[]) => void;
 }) => {
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-
   return (
     <div className="relative">
       <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
@@ -34,21 +33,31 @@ const EmptyChat = ({
           <Settings className="cursor-pointer lg:hidden" />
         </Link>
       </div>
-      <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
-        <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
-          Research begins here.
-        </h2>
-        <EmptyChatMessageInput
-          sendMessage={sendMessage}
-          focusMode={focusMode}
-          setFocusMode={setFocusMode}
-          optimizationMode={optimizationMode}
-          setOptimizationMode={setOptimizationMode}
-          fileIds={fileIds}
-          setFileIds={setFileIds}
-          files={files}
-          setFiles={setFiles}
-        />
+      <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-4">
+        <div className="flex flex-col items-center justify-center w-full space-y-8">
+          <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
+            Research begins here.
+          </h2>
+          <EmptyChatMessageInput
+            sendMessage={sendMessage}
+            focusMode={focusMode}
+            setFocusMode={setFocusMode}
+            optimizationMode={optimizationMode}
+            setOptimizationMode={setOptimizationMode}
+            fileIds={fileIds}
+            setFileIds={setFileIds}
+            files={files}
+            setFiles={setFiles}
+          />
+        </div>
+        <div className="flex flex-col w-full gap-4 mt-2 sm:flex-row sm:justify-center">
+          <div className="flex-1 w-full">
+            <WeatherWidget />
+          </div>
+          <div className="flex-1 w-full">
+            <NewsArticleWidget />
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/MessageBox.tsx

@@ -48,6 +48,7 @@ const MessageBox = ({
   const [speechMessage, setSpeechMessage] = useState(message.content);
 
   useEffect(() => {
+    const citationRegex = /\[([^\]]+)\]/g;
     const regex = /\[(\d+)\]/g;
     let processedMessage = message.content;
 
@@ -67,13 +68,36 @@ const MessageBox = ({
     ) {
       setParsedMessage(
         processedMessage.replace(
-          regex,
-          (_, number) =>
-            `<a href="${
-              message.sources?.[number - 1]?.metadata?.url
-            }" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
+          citationRegex,
+          (_, capturedContent: string) => {
+            const numbers = capturedContent
+              .split(',')
+              .map((numStr) => numStr.trim());
+
+            const linksHtml = numbers
+              .map((numStr) => {
+                const number = parseInt(numStr);
+
+                if (isNaN(number) || number <= 0) {
+                  return `[${numStr}]`;
+                }
+
+                const source = message.sources?.[number - 1];
+                const url = source?.metadata?.url;
+
+                if (url) {
+                  return `<a href="${url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${numStr}</a>`;
+                } else {
+                  return `[${numStr}]`;
+                }
+              })
+              .join('');
+
+            return linksHtml;
+          },
         ),
       );
+      setSpeechMessage(message.content.replace(regex, ''));
       return;
     }
 

src/components/Navbar.tsx

@@ -1,8 +1,122 @@
-import { Clock, Edit, Share, Trash } from 'lucide-react';
+import { Clock, Edit, Share, Trash, FileText, FileDown } from 'lucide-react';
 import { Message } from './ChatWindow';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, Fragment } from 'react';
 import { formatTimeDifference } from '@/lib/utils';
 import DeleteChat from './DeleteChat';
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from '@headlessui/react';
+import jsPDF from 'jspdf';
+
+const downloadFile = (filename: string, content: string, type: string) => {
+  const blob = new Blob([content], { type });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(() => {
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, 0);
+};
+
+const exportAsMarkdown = (messages: Message[], title: string) => {
+  const date = new Date(messages[0]?.createdAt || Date.now()).toLocaleString();
+  let md = `# 💬 Chat Export: ${title}\n\n`;
+  md += `*Exported on: ${date}*\n\n---\n`;
+  messages.forEach((msg, idx) => {
+    md += `\n---\n`;
+    md += `**${msg.role === 'user' ? '🧑 User' : '🤖 Assistant'}**  
+`;
+    md += `*${new Date(msg.createdAt).toLocaleString()}*\n\n`;
+    md += `> ${msg.content.replace(/\n/g, '\n> ')}\n`;
+    if (msg.sources && msg.sources.length > 0) {
+      md += `\n**Citations:**\n`;
+      msg.sources.forEach((src: any, i: number) => {
+        const url = src.metadata?.url || '';
+        md += `- [${i + 1}] [${url}](${url})\n`;
+      });
+    }
+  });
+  md += '\n---\n';
+  downloadFile(`${title || 'chat'}.md`, md, 'text/markdown');
+};
+
+const exportAsPDF = (messages: Message[], title: string) => {
+  const doc = new jsPDF();
+  const date = new Date(messages[0]?.createdAt || Date.now()).toLocaleString();
+  let y = 15;
+  const pageHeight = doc.internal.pageSize.height;
+  doc.setFontSize(18);
+  doc.text(`Chat Export: ${title}`, 10, y);
+  y += 8;
+  doc.setFontSize(11);
+  doc.setTextColor(100);
+  doc.text(`Exported on: ${date}`, 10, y);
+  y += 8;
+  doc.setDrawColor(200);
+  doc.line(10, y, 200, y);
+  y += 6;
+  doc.setTextColor(30);
+  messages.forEach((msg, idx) => {
+    if (y > pageHeight - 30) {
+      doc.addPage();
+      y = 15;
+    }
+    doc.setFont('helvetica', 'bold');
+    doc.text(`${msg.role === 'user' ? 'User' : 'Assistant'}`, 10, y);
+    doc.setFont('helvetica', 'normal');
+    doc.setFontSize(10);
+    doc.setTextColor(120);
+    doc.text(`${new Date(msg.createdAt).toLocaleString()}`, 40, y);
+    y += 6;
+    doc.setTextColor(30);
+    doc.setFontSize(12);
+    const lines = doc.splitTextToSize(msg.content, 180);
+    for (let i = 0; i < lines.length; i++) {
+      if (y > pageHeight - 20) {
+        doc.addPage();
+        y = 15;
+      }
+      doc.text(lines[i], 12, y);
+      y += 6;
+    }
+    if (msg.sources && msg.sources.length > 0) {
+      doc.setFontSize(11);
+      doc.setTextColor(80);
+      if (y > pageHeight - 20) {
+        doc.addPage();
+        y = 15;
+      }
+      doc.text('Citations:', 12, y);
+      y += 5;
+      msg.sources.forEach((src: any, i: number) => {
+        const url = src.metadata?.url || '';
+        if (y > pageHeight - 15) {
+          doc.addPage();
+          y = 15;
+        }
+        doc.text(`- [${i + 1}] ${url}`, 15, y);
+        y += 5;
+      });
+      doc.setTextColor(30);
+    }
+    y += 6;
+    doc.setDrawColor(230);
+    if (y > pageHeight - 10) {
+      doc.addPage();
+      y = 15;
+    }
+    doc.line(10, y, 200, y);
+    y += 4;
+  });
+  doc.save(`${title || 'chat'}.pdf`);
+};
 
 const Navbar = ({
   chatId,
@@ -59,10 +173,39 @@ const Navbar = ({
       <p className="hidden lg:flex">{title}</p>
 
       <div className="flex flex-row items-center space-x-4">
-        <Share
-          size={17}
-          className="active:scale-95 transition duration-100 cursor-pointer"
-        />
+        <Popover className="relative">
+          <PopoverButton className="active:scale-95 transition duration-100 cursor-pointer p-2 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary">
+            <Share size={17} />
+          </PopoverButton>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-75"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <PopoverPanel className="absolute right-0 mt-2 w-64 rounded-xl shadow-xl bg-light-primary dark:bg-dark-primary border border-light-200 dark:border-dark-200 z-50">
+              <div className="flex flex-col py-3 px-3 gap-2">
+                <button
+                  className="flex items-center gap-2 px-4 py-2 text-left hover:bg-light-secondary dark:hover:bg-dark-secondary transition-colors text-black dark:text-white rounded-lg font-medium"
+                  onClick={() => exportAsMarkdown(messages, title || '')}
+                >
+                  <FileText size={17} className="text-[#24A0ED]" />
+                  Export as Markdown
+                </button>
+                <button
+                  className="flex items-center gap-2 px-4 py-2 text-left hover:bg-light-secondary dark:hover:bg-dark-secondary transition-colors text-black dark:text-white rounded-lg font-medium"
+                  onClick={() => exportAsPDF(messages, title || '')}
+                >
+                  <FileDown size={17} className="text-[#24A0ED]" />
+                  Export as PDF
+                </button>
+              </div>
+            </PopoverPanel>
+          </Transition>
+        </Popover>
         <DeleteChat redirect chatId={chatId} chats={[]} setChats={() => {}} />
       </div>
     </div>

src/components/NewsArticleWidget.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+
+interface Article {
+  title: string;
+  content: string;
+  url: string;
+  thumbnail: string;
+}
+
+const NewsArticleWidget = () => {
+  const [article, setArticle] = useState<Article | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    fetch('/api/discover?mode=preview')
+      .then((res) => res.json())
+      .then((data) => {
+        const articles = (data.blogs || []).filter((a: Article) => a.thumbnail);
+        setArticle(articles[Math.floor(Math.random() * articles.length)]);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError(true);
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <div className="bg-light-secondary dark:bg-dark-secondary rounded-xl border border-light-200 dark:border-dark-200 shadow-sm flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3 overflow-hidden">
+      {loading ? (
+        <>
+          <div className="animate-pulse flex flex-row items-center w-full h-full">
+            <div className="rounded-lg w-16 min-w-16 max-w-16 h-16 min-h-16 max-h-16 bg-light-200 dark:bg-dark-200 mr-3" />
+            <div className="flex flex-col justify-center flex-1 h-full w-0 gap-2">
+              <div className="h-4 w-3/4 rounded bg-light-200 dark:bg-dark-200" />
+              <div className="h-3 w-1/2 rounded bg-light-200 dark:bg-dark-200" />
+            </div>
+          </div>
+        </>
+      ) : error ? (
+        <div className="w-full text-xs text-red-400">Could not load news.</div>
+      ) : article ? (
+        <a
+          href={`/?q=Summary: ${article.url}`}
+          className="flex flex-row items-center w-full h-full group"
+        >
+          <img
+            className="object-cover rounded-lg w-16 min-w-16 max-w-16 h-16 min-h-16 max-h-16 border border-light-200 dark:border-dark-200 bg-light-200 dark:bg-dark-200 group-hover:opacity-90 transition"
+            src={
+              new URL(article.thumbnail).origin +
+              new URL(article.thumbnail).pathname +
+              `?id=${new URL(article.thumbnail).searchParams.get('id')}`
+            }
+            alt={article.title}
+          />
+          <div className="flex flex-col justify-center flex-1 h-full pl-3 w-0">
+            <div className="font-bold text-xs text-black dark:text-white leading-tight truncate overflow-hidden whitespace-nowrap">
+              {article.title}
+            </div>
+            <p className="text-black/70 dark:text-white/70 text-xs leading-snug truncate overflow-hidden whitespace-nowrap">
+              {article.content}
+            </p>
+          </div>
+        </a>
+      ) : null}
+    </div>
+  );
+};
+
+export default NewsArticleWidget;

src/components/WeatherWidget.tsx

@@ -0,0 +1,159 @@
+import { Cloud, Sun, CloudRain, CloudSnow, Wind } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+const WeatherWidget = () => {
+  const [data, setData] = useState({
+    temperature: 0,
+    condition: '',
+    location: '',
+    humidity: 0,
+    windSpeed: 0,
+    icon: '',
+    temperatureUnit: 'C',
+  });
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const getApproxLocation = async () => {
+      const res = await fetch('https://ipwhois.app/json/');
+      const data = await res.json();
+
+      return {
+        latitude: data.latitude,
+        longitude: data.longitude,
+        city: data.city,
+      };
+    };
+
+    const getLocation = async (
+      callback: (location: {
+        latitude: number;
+        longitude: number;
+        city: string;
+      }) => void,
+    ) => {
+      if (navigator.geolocation) {
+        const result = await navigator.permissions.query({
+          name: 'geolocation',
+        });
+
+        if (result.state === 'granted') {
+          navigator.geolocation.getCurrentPosition(async (position) => {
+            const res = await fetch(
+              `https://api-bdc.io/data/reverse-geocode-client?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}&localityLanguage=en`,
+              {
+                method: 'GET',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+              },
+            );
+
+            const data = await res.json();
+
+            callback({
+              latitude: position.coords.latitude,
+              longitude: position.coords.longitude,
+              city: data.locality,
+            });
+          });
+        } else if (result.state === 'prompt') {
+          callback(await getApproxLocation());
+          navigator.geolocation.getCurrentPosition((position) => {});
+        } else if (result.state === 'denied') {
+          callback(await getApproxLocation());
+        }
+      } else {
+        callback(await getApproxLocation());
+      }
+    };
+
+    getLocation(async (location) => {
+      const res = await fetch(`/api/weather`, {
+        method: 'POST',
+        body: JSON.stringify({
+          lat: location.latitude,
+          lng: location.longitude,
+          temperatureUnit: localStorage.getItem('temperatureUnit') ?? 'C',
+        }),
+      });
+
+      const data = await res.json();
+
+      if (res.status !== 200) {
+        console.error('Error fetching weather data');
+        setLoading(false);
+        return;
+      }
+
+      setData({
+        temperature: data.temperature,
+        condition: data.condition,
+        location: location.city,
+        humidity: data.humidity,
+        windSpeed: data.windSpeed,
+        icon: data.icon,
+        temperatureUnit: data.temperatureUnit,
+      });
+      setLoading(false);
+    });
+  }, []);
+
+  return (
+    <div className="bg-light-secondary dark:bg-dark-secondary rounded-xl border border-light-200 dark:border-dark-200 shadow-sm flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3">
+      {loading ? (
+        <>
+          <div className="flex flex-col items-center justify-center w-16 min-w-16 max-w-16 h-full animate-pulse">
+            <div className="h-10 w-10 rounded-full bg-light-200 dark:bg-dark-200 mb-2" />
+            <div className="h-4 w-10 rounded bg-light-200 dark:bg-dark-200" />
+          </div>
+          <div className="flex flex-col justify-between flex-1 h-full py-1 animate-pulse">
+            <div className="flex flex-row items-center justify-between">
+              <div className="h-3 w-20 rounded bg-light-200 dark:bg-dark-200" />
+              <div className="h-3 w-12 rounded bg-light-200 dark:bg-dark-200" />
+            </div>
+            <div className="h-3 w-16 rounded bg-light-200 dark:bg-dark-200 mt-1" />
+            <div className="flex flex-row justify-between w-full mt-auto pt-1 border-t border-light-200 dark:border-dark-200">
+              <div className="h-3 w-16 rounded bg-light-200 dark:bg-dark-200" />
+              <div className="h-3 w-8 rounded bg-light-200 dark:bg-dark-200" />
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="flex flex-col items-center justify-center w-16 min-w-16 max-w-16 h-full">
+            <img
+              src={`/weather-ico/${data.icon}.svg`}
+              alt={data.condition}
+              className="h-10 w-auto"
+            />
+            <span className="text-base font-semibold text-black dark:text-white">
+              {data.temperature}°{data.temperatureUnit}
+            </span>
+          </div>
+          <div className="flex flex-col justify-between flex-1 h-full py-1">
+            <div className="flex flex-row items-center justify-between">
+              <span className="text-xs font-medium text-black dark:text-white">
+                {data.location}
+              </span>
+              <span className="flex items-center text-xs text-black/60 dark:text-white/60">
+                <Wind className="w-3 h-3 mr-1" />
+                {data.windSpeed} km/h
+              </span>
+            </div>
+            <span className="text-xs text-black/60 dark:text-white/60 mt-1">
+              {data.condition}
+            </span>
+            <div className="flex flex-row justify-between w-full mt-auto pt-1 border-t border-light-200 dark:border-dark-200 text-xs text-black/60 dark:text-white/60">
+              <span>Humidity: {data.humidity}%</span>
+              <span>Now</span>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default WeatherWidget;

src/lib/config.ts

@@ -1,7 +1,14 @@
-import fs from 'fs';
-import path from 'path';
 import toml from '@iarna/toml';
 
+// Use dynamic imports for Node.js modules to prevent client-side errors
+let fs: any;
+let path: any;
+if (typeof window === 'undefined') {
+  // We're on the server
+  fs = require('fs');
+  path = require('path');
+}
+
 const configFileName = 'config.toml';
 
 interface Config {
@@ -25,6 +32,15 @@ interface Config {
     OLLAMA: {
       API_URL: string;
     };
+    DEEPSEEK: {
+      API_KEY: string;
+    };
+    AIMLAPI: {
+      API_KEY: string;
+    };
+    LM_STUDIO: {
+      API_URL: string;
+    };
     CUSTOM_OPENAI: {
       API_URL: string;
       API_KEY: string;
@@ -40,10 +56,17 @@ type RecursivePartial<T> = {
   [P in keyof T]?: RecursivePartial<T[P]>;
 };
 
-const loadConfig = () =>
-  toml.parse(
-    fs.readFileSync(path.join(process.cwd(), `${configFileName}`), 'utf-8'),
-  ) as any as Config;
+const loadConfig = () => {
+  // Server-side only
+  if (typeof window === 'undefined') {
+    return toml.parse(
+      fs.readFileSync(path.join(process.cwd(), `${configFileName}`), 'utf-8'),
+    ) as any as Config;
+  }
+
+  // Client-side fallback - settings will be loaded via API
+  return {} as Config;
+};
 
 export const getSimilarityMeasure = () =>
   loadConfig().GENERAL.SIMILARITY_MEASURE;
@@ -63,6 +86,10 @@ export const getSearxngApiEndpoint = () =>
 
 export const getOllamaApiEndpoint = () => loadConfig().MODELS.OLLAMA.API_URL;
 
+export const getDeepseekApiKey = () => loadConfig().MODELS.DEEPSEEK.API_KEY;
+
+export const getAimlApiKey = () => loadConfig().MODELS.AIMLAPI.API_KEY;
+
 export const getCustomOpenaiApiKey = () =>
   loadConfig().MODELS.CUSTOM_OPENAI.API_KEY;
 
@@ -72,6 +99,9 @@ export const getCustomOpenaiApiUrl = () =>
 export const getCustomOpenaiModelName = () =>
   loadConfig().MODELS.CUSTOM_OPENAI.MODEL_NAME;
 
+export const getLMStudioApiEndpoint = () =>
+  loadConfig().MODELS.LM_STUDIO.API_URL;
+
 const mergeConfigs = (current: any, update: any): any => {
   if (update === null || update === undefined) {
     return current;
@@ -104,10 +134,13 @@ const mergeConfigs = (current: any, update: any): any => {
 };
 
 export const updateConfig = (config: RecursivePartial<Config>) => {
-  const currentConfig = loadConfig();
-  const mergedConfig = mergeConfigs(currentConfig, config);
-  fs.writeFileSync(
-    path.join(path.join(process.cwd(), `${configFileName}`)),
-    toml.stringify(mergedConfig),
-  );
+  // Server-side only
+  if (typeof window === 'undefined') {
+    const currentConfig = loadConfig();
+    const mergedConfig = mergeConfigs(currentConfig, config);
+    fs.writeFileSync(
+      path.join(path.join(process.cwd(), `${configFileName}`)),
+      toml.stringify(mergedConfig),
+    );
+  }
 };

src/lib/db/index.ts

@@ -3,7 +3,8 @@ import Database from 'better-sqlite3';
 import * as schema from './schema';
 import path from 'path';
 
-const sqlite = new Database(path.join(process.cwd(), 'data/db.sqlite'));
+const DATA_DIR = process.env.DATA_DIR || process.cwd();
+const sqlite = new Database(path.join(DATA_DIR, './data/db.sqlite'));
 const db = drizzle(sqlite, {
   schema: schema,
 });

src/lib/db/migrate.ts

@@ -0,0 +1,5 @@
+import db from './';
+import { migrate } from 'drizzle-orm/better-sqlite3/migrator';
+import path from 'path';
+
+migrate(db, { migrationsFolder: path.join(process.cwd(), 'drizzle') });

src/lib/prompts/academicSearch.ts

@@ -51,6 +51,10 @@ export const academicSearchResponsePrompt = `
     - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
     - You are set on focus mode 'Academic', this means you will be searching for academic papers and articles on the web.
     
+    ### User instructions
+    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+    {systemInstructions}
+
     ### Example Output
     - Begin with a brief introduction summarizing the event or query topic.
     - Follow with detailed sections under clear headings, covering all aspects of the query if possible.

src/lib/prompts/redditSearch.ts

@@ -51,6 +51,10 @@ export const redditSearchResponsePrompt = `
     - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
     - You are set on focus mode 'Reddit', this means you will be searching for information, opinions and discussions on the web using Reddit.
     
+    ### User instructions
+    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+    {systemInstructions}
+
     ### Example Output
     - Begin with a brief introduction summarizing the event or query topic.
     - Follow with detailed sections under clear headings, covering all aspects of the query if possible.

src/lib/prompts/webSearch.ts

@@ -1,63 +1,41 @@
 export const webSearchRetrieverPrompt = `
-You are an AI question rephraser. You will be given a conversation and a follow-up question,  you will have to rephrase the follow up question so it is a standalone question and can be used by another LLM to search the web for information to answer it.
-If it is a smple writing task or a greeting (unless the greeting contains a question after it) like Hi, Hello, How are you, etc. than a question then you need to return \`not_needed\` as the response (This is because the LLM won't need to search the web for finding information on this topic).
-If the user asks some question from some URL or wants you to summarize a PDF or a webpage (via URL) you need to return the links inside the \`links\` XML block and the question inside the \`question\` XML block. If the user wants to you to summarize the webpage or the PDF you need to return \`summarize\` inside the \`question\` XML block in place of a question and the link to summarize in the \`links\` XML block.
-You must always return the rephrased question inside the \`question\` XML block, if there are no links in the follow-up question then don't insert a \`links\` XML block in your response.
+You are an AI question rephraser. You will be given a conversation and a follow-up question; rephrase it into a standalone question that another LLM can use to search the web.
 
-There are several examples attached for your reference inside the below \`examples\` XML block
+Return ONLY a JSON object that matches this schema:
+query: string   // the standalone question (or "summarize")
+links: string[] // URLs extracted from the user query (empty if none)
+searchRequired: boolean // true if web search is needed, false for greetings/simple writing tasks
+searchMode: "" | "normal" | "news" // "" when searchRequired is false; "news" if the user asks for news/articles, otherwise "normal"
 
-<examples>
-1. Follow up question: What is the capital of France
-Rephrased question:\`
-<question>
-Capital of france
-</question>
-\`
+Rules
+- Greetings / simple writing tasks → query:"", links:[], searchRequired:false, searchMode:""
+- Summarizing a URL → query:"summarize", links:[url...], searchRequired:true, searchMode:"normal"
+- Asking for news/articles → searchMode:"news"
+
+Examples
+1. Follow-up: What is the capital of France?
+"query":"capital of France","links":[],"searchRequired":true,"searchMode":"normal"
 
 2. Hi, how are you?
-Rephrased question\`
-<question>
-not_needed
-</question>
-\`
+"query":"","links":[],"searchRequired":false,"searchMode":""
 
-3. Follow up question: What is Docker?
-Rephrased question: \`
-<question>
-What is Docker
-</question>
-\`
+3. Follow-up: What is Docker?
+"query":"what is Docker","links":[],"searchRequired":true,"searchMode":"normal"
 
-4. Follow up question: Can you tell me what is X from https://example.com
-Rephrased question: \`
-<question>
-Can you tell me what is X?
-</question>
+4. Follow-up: Can you tell me what is X from https://example.com?
+"query":"what is X","links":["https://example.com"],"searchRequired":true,"searchMode":"normal"
 
-<links>
-https://example.com
-</links>
-\`
+5. Follow-up: Summarize the content from https://example.com
+"query":"summarize","links":["https://example.com"],"searchRequired":true,"searchMode":"normal"
 
-5. Follow up question: Summarize the content from https://example.com
-Rephrased question: \`
-<question>
-summarize
-</question>
-
-<links>
-https://example.com
-</links>
-\`
-</examples>
-
-Anything below is the part of the actual conversation and you need to use conversation and the follow-up question to rephrase the follow-up question as a standalone question based on the guidelines shared above.
+6. Follow-up: Latest news about AI
+"query":"latest news about AI","links":[],"searchRequired":true,"searchMode":"news"
 
 <conversation>
 {chat_history}
 </conversation>
 
-Follow up question: {query}
+Follow-up question: {query}
 Rephrased question:
 `;
 
@@ -92,6 +70,10 @@ export const webSearchResponsePrompt = `
     - If the user provides vague input or if relevant information is missing, explain what additional details might help refine the search.
     - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
 
+    ### User instructions
+    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+    {systemInstructions}
+
     ### Example Output
     - Begin with a brief introduction summarizing the event or query topic.
     - Follow with detailed sections under clear headings, covering all aspects of the query if possible.

src/lib/prompts/wolframAlpha.ts

@@ -51,6 +51,10 @@ export const wolframAlphaSearchResponsePrompt = `
     - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
     - You are set on focus mode 'Wolfram Alpha', this means you will be searching for information on the web using Wolfram Alpha. It is a computational knowledge engine that can answer factual queries and perform computations.
     
+    ### User instructions
+    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+    {systemInstructions}
+
     ### Example Output
     - Begin with a brief introduction summarizing the event or query topic.
     - Follow with detailed sections under clear headings, covering all aspects of the query if possible.

src/lib/prompts/writingAssistant.ts

@@ -7,6 +7,10 @@ You have to cite the answer using [number] notation. You must cite the sentences
 Place these citations at the end of that particular sentence. You can cite the same sentence multiple times if it is relevant to the user's query like [number1][number2].
 However you do not need to cite it using the same number. You can use different numbers to cite the same sentence multiple times. The number refers to the number of the search result (passed in the context) used to generate that part of the answer.
 
+### User instructions
+These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+{systemInstructions}
+
 <context>
 {context}
 </context>

src/lib/prompts/youtubeSearch.ts

@@ -51,6 +51,10 @@ export const youtubeSearchResponsePrompt = `
     - If no relevant information is found, say: "Hmm, sorry I could not find any relevant information on this topic. Would you like me to search again or ask something else?" Be transparent about limitations and suggest alternatives or ways to reframe the query.
     - You are set on focus mode 'Youtube', this means you will be searching for videos on the web using Youtube and providing information based on the video's transcrip
     
+    ### User instructions
+    These instructions are shared to you by the user and not by the system. You will have to follow them but give them less priority than the above instructions. If the user has provided specific instructions or preferences, incorporate them into your response while adhering to the overall guidelines.
+    {systemInstructions}
+
     ### Example Output
     - Begin with a brief introduction summarizing the event or query topic.
     - Follow with detailed sections under clear headings, covering all aspects of the query if possible.

src/lib/providers/aimlapi.ts

@@ -0,0 +1,94 @@
+import { ChatOpenAI, OpenAIEmbeddings } from '@langchain/openai';
+import { getAimlApiKey } from '../config';
+import { ChatModel, EmbeddingModel } from '.';
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import { Embeddings } from '@langchain/core/embeddings';
+import axios from 'axios';
+
+export const PROVIDER_INFO = {
+  key: 'aimlapi',
+  displayName: 'AI/ML API',
+};
+
+interface AimlApiModel {
+  id: string;
+  name?: string;
+  type?: string;
+}
+
+const API_URL = 'https://api.aimlapi.com';
+
+export const loadAimlApiChatModels = async () => {
+  const apiKey = getAimlApiKey();
+
+  if (!apiKey) return {};
+
+  try {
+    const response = await axios.get(`${API_URL}/models`, {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+    });
+
+    const chatModels: Record<string, ChatModel> = {};
+
+    response.data.data.forEach((model: AimlApiModel) => {
+      if (model.type === 'chat-completion') {
+        chatModels[model.id] = {
+          displayName: model.name || model.id,
+          model: new ChatOpenAI({
+            apiKey: apiKey,
+            modelName: model.id,
+            temperature: 0.7,
+            configuration: {
+              baseURL: API_URL,
+            },
+          }) as unknown as BaseChatModel,
+        };
+      }
+    });
+
+    return chatModels;
+  } catch (err) {
+    console.error(`Error loading AI/ML API models: ${err}`);
+    return {};
+  }
+};
+
+export const loadAimlApiEmbeddingModels = async () => {
+  const apiKey = getAimlApiKey();
+
+  if (!apiKey) return {};
+
+  try {
+    const response = await axios.get(`${API_URL}/models`, {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+    });
+
+    const embeddingModels: Record<string, EmbeddingModel> = {};
+
+    response.data.data.forEach((model: AimlApiModel) => {
+      if (model.type === 'embedding') {
+        embeddingModels[model.id] = {
+          displayName: model.name || model.id,
+          model: new OpenAIEmbeddings({
+            apiKey: apiKey,
+            modelName: model.id,
+            configuration: {
+              baseURL: API_URL,
+            },
+          }) as unknown as Embeddings,
+        };
+      }
+    });
+
+    return embeddingModels;
+  } catch (err) {
+    console.error(`Error loading AI/ML API embeddings models: ${err}`);
+    return {};
+  }
+};

src/lib/providers/anthropic.ts

@@ -1,6 +1,11 @@
 import { ChatAnthropic } from '@langchain/anthropic';
 import { ChatModel } from '.';
 import { getAnthropicApiKey } from '../config';
+
+export const PROVIDER_INFO = {
+  key: 'anthropic',
+  displayName: 'Anthropic',
+};
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 
 const anthropicChatModels: Record<string, string>[] = [

src/lib/providers/deepseek.ts

@@ -0,0 +1,49 @@
+import { ChatOpenAI } from '@langchain/openai';
+import { getDeepseekApiKey } from '../config';
+import { ChatModel } from '.';
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+
+export const PROVIDER_INFO = {
+  key: 'deepseek',
+  displayName: 'Deepseek AI',
+};
+
+const deepseekChatModels: Record<string, string>[] = [
+  {
+    displayName: 'Deepseek Chat (Deepseek V3)',
+    key: 'deepseek-chat',
+  },
+  {
+    displayName: 'Deepseek Reasoner (Deepseek R1)',
+    key: 'deepseek-reasoner',
+  },
+];
+
+export const loadDeepseekChatModels = async () => {
+  const deepseekApiKey = getDeepseekApiKey();
+
+  if (!deepseekApiKey) return {};
+
+  try {
+    const chatModels: Record<string, ChatModel> = {};
+
+    deepseekChatModels.forEach((model) => {
+      chatModels[model.key] = {
+        displayName: model.displayName,
+        model: new ChatOpenAI({
+          apiKey: deepseekApiKey,
+          modelName: model.key,
+          temperature: 0.7,
+          configuration: {
+            baseURL: 'https://api.deepseek.com',
+          },
+        }) as unknown as BaseChatModel,
+      };
+    });
+
+    return chatModels;
+  } catch (err) {
+    console.error(`Error loading Deepseek models: ${err}`);
+    return {};
+  }
+};

src/lib/providers/gemini.ts

@@ -4,13 +4,26 @@ import {
 } from '@langchain/google-genai';
 import { getGeminiApiKey } from '../config';
 import { ChatModel, EmbeddingModel } from '.';
+
+export const PROVIDER_INFO = {
+  key: 'gemini',
+  displayName: 'Google Gemini',
+};
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { Embeddings } from '@langchain/core/embeddings';
 
 const geminiChatModels: Record<string, string>[] = [
+  {
+    displayName: 'Gemini 2.5 Flash Preview 05-20',
+    key: 'gemini-2.5-flash-preview-05-20',
+  },
+  {
+    displayName: 'Gemini 2.5 Pro Preview',
+    key: 'gemini-2.5-pro-preview-05-06',
+  },
   {
     displayName: 'Gemini 2.5 Pro Experimental',
-    key: 'gemini-2.5-pro-exp-03-25',
+    key: 'gemini-2.5-pro-preview-05-06',
   },
   {
     displayName: 'Gemini 2.0 Flash',
@@ -40,8 +53,12 @@ const geminiChatModels: Record<string, string>[] = [
 
 const geminiEmbeddingModels: Record<string, string>[] = [
   {
-    displayName: 'Gemini Embedding',
-    key: 'gemini-embedding-exp',
+    displayName: 'Text Embedding 004',
+    key: 'models/text-embedding-004',
+  },
+  {
+    displayName: 'Embedding 001',
+    key: 'models/embedding-001',
   },
 ];
 

src/lib/providers/groq.ts

@@ -1,97 +1,43 @@
 import { ChatOpenAI } from '@langchain/openai';
 import { getGroqApiKey } from '../config';
 import { ChatModel } from '.';
-import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 
-const groqChatModels: Record<string, string>[] = [
-  {
-    displayName: 'Gemma2 9B IT',
-    key: 'gemma2-9b-it',
-  },
-  {
-    displayName: 'Llama 3.3 70B Versatile',
-    key: 'llama-3.3-70b-versatile',
-  },
-  {
-    displayName: 'Llama 3.1 8B Instant',
-    key: 'llama-3.1-8b-instant',
-  },
-  {
-    displayName: 'Llama3 70B 8192',
-    key: 'llama3-70b-8192',
-  },
-  {
-    displayName: 'Llama3 8B 8192',
-    key: 'llama3-8b-8192',
-  },
-  {
-    displayName: 'Mixtral 8x7B 32768',
-    key: 'mixtral-8x7b-32768',
-  },
-  {
-    displayName: 'Qwen QWQ 32B (Preview)',
-    key: 'qwen-qwq-32b',
-  },
-  {
-    displayName: 'Mistral Saba 24B (Preview)',
-    key: 'mistral-saba-24b',
-  },
-  {
-    displayName: 'Qwen 2.5 Coder 32B (Preview)',
-    key: 'qwen-2.5-coder-32b',
-  },
-  {
-    displayName: 'Qwen 2.5 32B (Preview)',
-    key: 'qwen-2.5-32b',
-  },
-  {
-    displayName: 'DeepSeek R1 Distill Qwen 32B (Preview)',
-    key: 'deepseek-r1-distill-qwen-32b',
-  },
-  {
-    displayName: 'DeepSeek R1 Distill Llama 70B (Preview)',
-    key: 'deepseek-r1-distill-llama-70b',
-  },
-  {
-    displayName: 'Llama 3.3 70B SpecDec (Preview)',
-    key: 'llama-3.3-70b-specdec',
-  },
-  {
-    displayName: 'Llama 3.2 1B Preview (Preview)',
-    key: 'llama-3.2-1b-preview',
-  },
-  {
-    displayName: 'Llama 3.2 3B Preview (Preview)',
-    key: 'llama-3.2-3b-preview',
-  },
-  {
-    displayName: 'Llama 3.2 11B Vision Preview (Preview)',
-    key: 'llama-3.2-11b-vision-preview',
-  },
-  {
-    displayName: 'Llama 3.2 90B Vision Preview (Preview)',
-    key: 'llama-3.2-90b-vision-preview',
-  },
-];
+export const PROVIDER_INFO = {
+  key: 'groq',
+  displayName: 'Groq',
+};
+
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 
 export const loadGroqChatModels = async () => {
   const groqApiKey = getGroqApiKey();
-
   if (!groqApiKey) return {};
 
   try {
+    const res = await fetch('https://api.groq.com/openai/v1/models', {
+      method: 'GET',
+      headers: {
+        Authorization: `bearer ${groqApiKey}`,
+        'Content-Type': 'application/json',
+      },
+    });
+
+    const groqChatModels = (await res.json()).data;
     const chatModels: Record<string, ChatModel> = {};
 
-    groqChatModels.forEach((model) => {
-      chatModels[model.key] = {
-        displayName: model.displayName,
+    groqChatModels.forEach((model: any) => {
+      chatModels[model.id] = {
+        displayName: model.id,
         model: new ChatOpenAI({
-          openAIApiKey: groqApiKey,
-          modelName: model.key,
+          apiKey: groqApiKey,
+          modelName: model.id,
           temperature: 0.7,
           configuration: {
             baseURL: 'https://api.groq.com/openai/v1',
           },
+          metadata: {
+            'model-type': 'groq',
+          },
         }) as unknown as BaseChatModel,
       };
     });

src/lib/providers/index.ts

@@ -1,17 +1,66 @@
 import { Embeddings } from '@langchain/core/embeddings';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { loadOpenAIChatModels, loadOpenAIEmbeddingModels } from './openai';
+import {
+  loadOpenAIChatModels,
+  loadOpenAIEmbeddingModels,
+  PROVIDER_INFO as OpenAIInfo,
+  PROVIDER_INFO,
+} from './openai';
 import {
   getCustomOpenaiApiKey,
   getCustomOpenaiApiUrl,
   getCustomOpenaiModelName,
 } from '../config';
 import { ChatOpenAI } from '@langchain/openai';
-import { loadOllamaChatModels, loadOllamaEmbeddingModels } from './ollama';
-import { loadGroqChatModels } from './groq';
-import { loadAnthropicChatModels } from './anthropic';
-import { loadGeminiChatModels, loadGeminiEmbeddingModels } from './gemini';
-import { loadTransformersEmbeddingsModels } from './transformers';
+import {
+  loadOllamaChatModels,
+  loadOllamaEmbeddingModels,
+  PROVIDER_INFO as OllamaInfo,
+} from './ollama';
+import { loadGroqChatModels, PROVIDER_INFO as GroqInfo } from './groq';
+import {
+  loadAnthropicChatModels,
+  PROVIDER_INFO as AnthropicInfo,
+} from './anthropic';
+import {
+  loadGeminiChatModels,
+  loadGeminiEmbeddingModels,
+  PROVIDER_INFO as GeminiInfo,
+} from './gemini';
+import {
+  loadTransformersEmbeddingsModels,
+  PROVIDER_INFO as TransformersInfo,
+} from './transformers';
+import {
+  loadDeepseekChatModels,
+  PROVIDER_INFO as DeepseekInfo,
+} from './deepseek';
+import {
+  loadAimlApiChatModels,
+  loadAimlApiEmbeddingModels,
+  PROVIDER_INFO as AimlApiInfo,
+} from './aimlapi';
+import {
+  loadLMStudioChatModels,
+  loadLMStudioEmbeddingsModels,
+  PROVIDER_INFO as LMStudioInfo,
+} from './lmstudio';
+
+export const PROVIDER_METADATA = {
+  openai: OpenAIInfo,
+  ollama: OllamaInfo,
+  groq: GroqInfo,
+  anthropic: AnthropicInfo,
+  gemini: GeminiInfo,
+  transformers: TransformersInfo,
+  deepseek: DeepseekInfo,
+  aimlapi: AimlApiInfo,
+  lmstudio: LMStudioInfo,
+  custom_openai: {
+    key: 'custom_openai',
+    displayName: 'Custom OpenAI',
+  },
+};
 
 export interface ChatModel {
   displayName: string;
@@ -32,6 +81,9 @@ export const chatModelProviders: Record<
   groq: loadGroqChatModels,
   anthropic: loadAnthropicChatModels,
   gemini: loadGeminiChatModels,
+  deepseek: loadDeepseekChatModels,
+  aimlapi: loadAimlApiChatModels,
+  lmstudio: loadLMStudioChatModels,
 };
 
 export const embeddingModelProviders: Record<
@@ -42,6 +94,8 @@ export const embeddingModelProviders: Record<
   ollama: loadOllamaEmbeddingModels,
   gemini: loadGeminiEmbeddingModels,
   transformers: loadTransformersEmbeddingsModels,
+  aimlapi: loadAimlApiEmbeddingModels,
+  lmstudio: loadLMStudioEmbeddingsModels,
 };
 
 export const getAvailableChatModelProviders = async () => {
@@ -64,7 +118,7 @@ export const getAvailableChatModelProviders = async () => {
           [customOpenAiModelName]: {
             displayName: customOpenAiModelName,
             model: new ChatOpenAI({
-              openAIApiKey: customOpenAiApiKey,
+              apiKey: customOpenAiApiKey,
               modelName: customOpenAiModelName,
               temperature: 0.7,
               configuration: {

src/lib/providers/lmstudio.ts

@@ -0,0 +1,100 @@
+import { getKeepAlive, getLMStudioApiEndpoint } from '../config';
+import axios from 'axios';
+import { ChatModel, EmbeddingModel } from '.';
+
+export const PROVIDER_INFO = {
+  key: 'lmstudio',
+  displayName: 'LM Studio',
+};
+import { ChatOpenAI } from '@langchain/openai';
+import { OpenAIEmbeddings } from '@langchain/openai';
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import { Embeddings } from '@langchain/core/embeddings';
+
+interface LMStudioModel {
+  id: string;
+  name?: string;
+}
+
+const ensureV1Endpoint = (endpoint: string): string =>
+  endpoint.endsWith('/v1') ? endpoint : `${endpoint}/v1`;
+
+const checkServerAvailability = async (endpoint: string): Promise<boolean> => {
+  try {
+    await axios.get(`${ensureV1Endpoint(endpoint)}/models`, {
+      headers: { 'Content-Type': 'application/json' },
+    });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const loadLMStudioChatModels = async () => {
+  const endpoint = getLMStudioApiEndpoint();
+
+  if (!endpoint) return {};
+  if (!(await checkServerAvailability(endpoint))) return {};
+
+  try {
+    const response = await axios.get(`${ensureV1Endpoint(endpoint)}/models`, {
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    const chatModels: Record<string, ChatModel> = {};
+
+    response.data.data.forEach((model: LMStudioModel) => {
+      chatModels[model.id] = {
+        displayName: model.name || model.id,
+        model: new ChatOpenAI({
+          apiKey: 'lm-studio',
+          configuration: {
+            baseURL: ensureV1Endpoint(endpoint),
+          },
+          modelName: model.id,
+          temperature: 0.7,
+          streaming: true,
+          maxRetries: 3,
+        }) as unknown as BaseChatModel,
+      };
+    });
+
+    return chatModels;
+  } catch (err) {
+    console.error(`Error loading LM Studio models: ${err}`);
+    return {};
+  }
+};
+
+export const loadLMStudioEmbeddingsModels = async () => {
+  const endpoint = getLMStudioApiEndpoint();
+
+  if (!endpoint) return {};
+  if (!(await checkServerAvailability(endpoint))) return {};
+
+  try {
+    const response = await axios.get(`${ensureV1Endpoint(endpoint)}/models`, {
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    const embeddingsModels: Record<string, EmbeddingModel> = {};
+
+    response.data.data.forEach((model: LMStudioModel) => {
+      embeddingsModels[model.id] = {
+        displayName: model.name || model.id,
+        model: new OpenAIEmbeddings({
+          apiKey: 'lm-studio',
+          configuration: {
+            baseURL: ensureV1Endpoint(endpoint),
+          },
+          modelName: model.id,
+        }) as unknown as Embeddings,
+      };
+    });
+
+    return embeddingsModels;
+  } catch (err) {
+    console.error(`Error loading LM Studio embeddings model: ${err}`);
+    return {};
+  }
+};

src/lib/providers/ollama.ts

@@ -1,8 +1,13 @@
 import axios from 'axios';
 import { getKeepAlive, getOllamaApiEndpoint } from '../config';
 import { ChatModel, EmbeddingModel } from '.';
-import { ChatOllama } from '@langchain/community/chat_models/ollama';
-import { OllamaEmbeddings } from '@langchain/community/embeddings/ollama';
+
+export const PROVIDER_INFO = {
+  key: 'ollama',
+  displayName: 'Ollama',
+};
+import { ChatOllama } from '@langchain/ollama';
+import { OllamaEmbeddings } from '@langchain/ollama';
 
 export const loadOllamaChatModels = async () => {
   const ollamaApiEndpoint = getOllamaApiEndpoint();

src/lib/providers/openai.ts

@@ -1,6 +1,11 @@
 import { ChatOpenAI, OpenAIEmbeddings } from '@langchain/openai';
 import { getOpenaiApiKey } from '../config';
 import { ChatModel, EmbeddingModel } from '.';
+
+export const PROVIDER_INFO = {
+  key: 'openai',
+  displayName: 'OpenAI',
+};
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { Embeddings } from '@langchain/core/embeddings';
 
@@ -25,6 +30,18 @@ const openaiChatModels: Record<string, string>[] = [
     displayName: 'GPT-4 omni mini',
     key: 'gpt-4o-mini',
   },
+  {
+    displayName: 'GPT 4.1 nano',
+    key: 'gpt-4.1-nano',
+  },
+  {
+    displayName: 'GPT 4.1 mini',
+    key: 'gpt-4.1-mini',
+  },
+  {
+    displayName: 'GPT 4.1',
+    key: 'gpt-4.1',
+  },
 ];
 
 const openaiEmbeddingModels: Record<string, string>[] = [
@@ -50,7 +67,7 @@ export const loadOpenAIChatModels = async () => {
       chatModels[model.key] = {
         displayName: model.displayName,
         model: new ChatOpenAI({
-          openAIApiKey: openaiApiKey,
+          apiKey: openaiApiKey,
           modelName: model.key,
           temperature: 0.7,
         }) as unknown as BaseChatModel,
@@ -76,7 +93,7 @@ export const loadOpenAIEmbeddingModels = async () => {
       embeddingModels[model.key] = {
         displayName: model.displayName,
         model: new OpenAIEmbeddings({
-          openAIApiKey: openaiApiKey,
+          apiKey: openaiApiKey,
           modelName: model.key,
         }) as unknown as Embeddings,
       };

src/lib/providers/transformers.ts

@@ -1,5 +1,10 @@
 import { HuggingFaceTransformersEmbeddings } from '../huggingfaceTransformer';
 
+export const PROVIDER_INFO = {
+  key: 'transformers',
+  displayName: 'Hugging Face',
+};
+
 export const loadTransformersEmbeddingsModels = async () => {
   try {
     const embeddingModels = {

src/lib/search/metaSearchAgent.ts

@@ -24,6 +24,7 @@ import computeSimilarity from '../utils/computeSimilarity';
 import formatChatHistoryAsString from '../utils/formatHistory';
 import eventEmitter from 'events';
 import { StreamEvent } from '@langchain/core/tracers/log_stream';
+import { z } from 'zod';
 
 export interface MetaSearchAgentType {
   searchAndAnswer: (
@@ -33,6 +34,7 @@ export interface MetaSearchAgentType {
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
     fileIds: string[],
+    systemInstructions: string,
   ) => Promise<eventEmitter>;
 }
 
@@ -51,6 +53,17 @@ type BasicChainInput = {
   query: string;
 };
 
+const retrieverLLMOutputSchema = z.object({
+  query: z.string().describe('The query to search the web for.'),
+  links: z
+    .array(z.string())
+    .describe('The links to search/summarize if present'),
+  searchRequired: z
+    .boolean()
+    .describe('Wether there is a need to search the web'),
+  searchMode: z.enum(['', 'normal', 'news']).describe('The search mode.'),
+});
+
 class MetaSearchAgent implements MetaSearchAgentType {
   private config: Config;
   private strParser = new StringOutputParser();
@@ -61,73 +74,71 @@ class MetaSearchAgent implements MetaSearchAgentType {
 
   private async createSearchRetrieverChain(llm: BaseChatModel) {
     (llm as unknown as ChatOpenAI).temperature = 0;
-
     return RunnableSequence.from([
       PromptTemplate.fromTemplate(this.config.queryGeneratorPrompt),
-      llm,
-      this.strParser,
-      RunnableLambda.from(async (input: string) => {
-        const linksOutputParser = new LineListOutputParser({
-          key: 'links',
-        });
+      Object.assign(
+        Object.create(Object.getPrototypeOf(llm)),
+        llm,
+      ).withStructuredOutput(retrieverLLMOutputSchema, {
+        ...(llm.metadata?.['model-type'] === 'groq'
+          ? {
+              method: 'json-object',
+            }
+          : {}),
+      }),
+      RunnableLambda.from(
+        async (input: z.infer<typeof retrieverLLMOutputSchema>) => {
+          let question = input.query;
+          const links = input.links;
 
-        const questionOutputParser = new LineOutputParser({
-          key: 'question',
-        });
-
-        const links = await linksOutputParser.parse(input);
-        let question = this.config.summarizer
-          ? await questionOutputParser.parse(input)
-          : input;
-
-        if (question === 'not_needed') {
-          return { query: '', docs: [] };
-        }
-
-        if (links.length > 0) {
-          if (question.length === 0) {
-            question = 'summarize';
+          if (!input.searchRequired) {
+            return { query: '', docs: [] };
           }
 
-          let docs: Document[] = [];
-
-          const linkDocs = await getDocumentsFromLinks({ links });
-
-          const docGroups: Document[] = [];
-
-          linkDocs.map((doc) => {
-            const URLDocExists = docGroups.find(
-              (d) =>
-                d.metadata.url === doc.metadata.url &&
-                d.metadata.totalDocs < 10,
-            );
-
-            if (!URLDocExists) {
-              docGroups.push({
-                ...doc,
-                metadata: {
-                  ...doc.metadata,
-                  totalDocs: 1,
-                },
-              });
+          if (links.length > 0) {
+            if (question.length === 0) {
+              question = 'summarize';
             }
 
-            const docIndex = docGroups.findIndex(
-              (d) =>
-                d.metadata.url === doc.metadata.url &&
-                d.metadata.totalDocs < 10,
-            );
+            let docs: Document[] = [];
 
-            if (docIndex !== -1) {
-              docGroups[docIndex].pageContent =
-                docGroups[docIndex].pageContent + `\n\n` + doc.pageContent;
-              docGroups[docIndex].metadata.totalDocs += 1;
-            }
-          });
+            const linkDocs = await getDocumentsFromLinks({ links });
 
-          await Promise.all(
-            docGroups.map(async (doc) => {
-              const res = await llm.invoke(`
+            const docGroups: Document[] = [];
+
+            linkDocs.map((doc) => {
+              const URLDocExists = docGroups.find(
+                (d) =>
+                  d.metadata.url === doc.metadata.url &&
+                  d.metadata.totalDocs < 10,
+              );
+
+              if (!URLDocExists) {
+                docGroups.push({
+                  ...doc,
+                  metadata: {
+                    ...doc.metadata,
+                    totalDocs: 1,
+                  },
+                });
+              }
+
+              const docIndex = docGroups.findIndex(
+                (d) =>
+                  d.metadata.url === doc.metadata.url &&
+                  d.metadata.totalDocs < 10,
+              );
+
+              if (docIndex !== -1) {
+                docGroups[docIndex].pageContent =
+                  docGroups[docIndex].pageContent + `\n\n` + doc.pageContent;
+                docGroups[docIndex].metadata.totalDocs += 1;
+              }
+            });
+
+            await Promise.all(
+              docGroups.map(async (doc) => {
+                const res = await llm.invoke(`
             You are a web search summarizer, tasked with summarizing a piece of text retrieved from a web search. Your job is to summarize the 
             text into a detailed, 2-4 paragraph explanation that captures the main ideas and provides a comprehensive answer to the query.
             If the query is \"summarize\", you should provide a detailed summary of the text. If the query is a specific question, you should answer it in the summary.
@@ -188,46 +199,50 @@ class MetaSearchAgent implements MetaSearchAgentType {
             Make sure to answer the query in the summary.
           `);
 
-              const document = new Document({
-                pageContent: res.content as string,
-                metadata: {
-                  title: doc.metadata.title,
-                  url: doc.metadata.url,
-                },
-              });
+                const document = new Document({
+                  pageContent: res.content as string,
+                  metadata: {
+                    title: doc.metadata.title,
+                    url: doc.metadata.url,
+                  },
+                });
 
-              docs.push(document);
-            }),
-          );
-
-          return { query: question, docs: docs };
-        } else {
-          question = question.replace(/<think>.*?<\/think>/g, '');
-
-          const res = await searchSearxng(question, {
-            language: 'en',
-            engines: this.config.activeEngines,
-          });
-
-          const documents = res.results.map(
-            (result) =>
-              new Document({
-                pageContent:
-                  result.content ||
-                  (this.config.activeEngines.includes('youtube')
-                    ? result.title
-                    : '') /* Todo: Implement transcript grabbing using Youtubei (source: https://www.npmjs.com/package/youtubei) */,
-                metadata: {
-                  title: result.title,
-                  url: result.url,
-                  ...(result.img_src && { img_src: result.img_src }),
-                },
+                docs.push(document);
               }),
-          );
+            );
 
-          return { query: question, docs: documents };
-        }
-      }),
+            return { query: question, docs: docs };
+          } else {
+            question = question.replace(/<think>.*?<\/think>/g, '');
+
+            const res = await searchSearxng(question, {
+              language: 'en',
+              engines:
+                input.searchMode === 'normal'
+                  ? this.config.activeEngines
+                  : ['bing news'],
+            });
+
+            const documents = res.results.map(
+              (result) =>
+                new Document({
+                  pageContent:
+                    result.content ||
+                    (this.config.activeEngines.includes('youtube')
+                      ? result.title
+                      : '') /* Todo: Implement transcript grabbing using Youtubei (source: https://www.npmjs.com/package/youtubei) */,
+                  metadata: {
+                    title: result.title,
+                    url: result.url,
+                    ...(result.img_src && { img_src: result.img_src }),
+                  },
+                }),
+            );
+
+            return { query: question, docs: documents };
+          }
+        },
+      ),
     ]);
   }
 
@@ -236,9 +251,11 @@ class MetaSearchAgent implements MetaSearchAgentType {
     fileIds: string[],
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
+    systemInstructions: string,
   ) {
     return RunnableSequence.from([
       RunnableMap.from({
+        systemInstructions: () => systemInstructions,
         query: (input: BasicChainInput) => input.query,
         chat_history: (input: BasicChainInput) => input.chat_history,
         date: () => new Date().toISOString(),
@@ -468,6 +485,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
     fileIds: string[],
+    systemInstructions: string,
   ) {
     const emitter = new eventEmitter();
 
@@ -476,6 +494,7 @@ class MetaSearchAgent implements MetaSearchAgentType {
       fileIds,
       embeddings,
       optimizationMode,
+      systemInstructions,
     );
 
     const stream = answeringChain.streamEvents(

src/lib/utils/documents.ts

@@ -64,7 +64,7 @@ export const getDocumentsFromLinks = async ({ links }: { links: string[] }) => {
         const splittedText = await splitter.splitText(parsedText);
         const title = res.data
           .toString('utf8')
-          .match(/<title>(.*?)<\/title>/)?.[1];
+          .match(/<title.*>(.*?)<\/title>/)?.[1];
 
         const linkDocs = splittedText.map((text) => {
           return new Document({