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/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.2",
+  "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/anthropic": "^0.3.24",
-    "@langchain/community": "^0.3.36",
+    "@langchain/community": "^0.3.49",
-    "@langchain/core": "^0.3.42",
+    "@langchain/core": "^0.3.66",
-    "@langchain/google-genai": "^0.1.12",
+    "@langchain/google-genai": "^0.2.15",
-    "@langchain/openai": "^0.0.25",
+    "@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

@@ -25,5 +25,11 @@ 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

src/app/api/chat/route.ts

@@ -223,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: {

src/app/api/config/route.ts

@@ -8,6 +8,8 @@ import {
   getOllamaApiEndpoint,
   getOpenaiApiKey,
   getDeepseekApiKey,
+  getAimlApiKey,
+  getLMStudioApiEndpoint,
   updateConfig,
 } from '@/lib/config';
 import {
@@ -51,10 +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();
@@ -93,6 +97,12 @@ export const POST = async (req: Request) => {
         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 = (
+    const params = new URL(req.url).searchParams;
-      await Promise.all([
+    const mode: 'normal' | 'preview' =
-        ...new Array(articleWebsites.length * topics.length)
+      (params.get('mode') as 'normal' | 'preview') || 'normal';
-          .fill(0)
+
-          .map(async (_, i) => {
+    let data = [];
-            return (
+
-              await searchSearxng(
+    if (mode === 'normal') {
-                `site:${articleWebsites[i % articleWebsites.length]} ${
+      data = (
-                  topics[i % topics.length]
+        await Promise.all([
-                }`,
+          ...new Array(articleWebsites.length * topics.length)
-                {
+            .fill(0)
-                  engines: ['bing news'],
+            .map(async (_, i) => {
-                  pageno: 1,
+              return (
-                },
+                await searchSearxng(
-              )
+                  `site:${articleWebsites[i % articleWebsites.length]} ${
-            ).results;
+                    topics[i % topics.length]
-          }),
+                  }`,
-      ])
+                  {
-    )
+                    engines: ['bing news'],
-      .map((result) => result)
+                    pageno: 1,
-      .flat()
+                    language: 'en',
-      .sort(() => Math.random() - 0.5);
+                  },
+                )
+              ).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

@@ -81,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: {

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,7 +21,9 @@ interface SettingsType {
   anthropicApiKey: string;
   geminiApiKey: string;
   ollamaApiUrl: string;
+  lmStudioApiUrl: string;
   deepseekApiKey: string;
+  aimlApiKey: string;
   customOpenaiApiKey: string;
   customOpenaiApiUrl: string;
   customOpenaiModelName: string;
@@ -141,15 +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',
@@ -208,6 +211,8 @@ const Page = () => {
 
       setSystemInstructions(localStorage.getItem('systemInstructions')!);
 
+      setTemperatureUnit(localStorage.getItem('temperatureUnit')! as 'C' | 'F');
+
       setIsLoading(false);
     };
 
@@ -366,6 +371,8 @@ const Page = () => {
         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);
@@ -414,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">
@@ -514,7 +543,7 @@ const Page = () => {
             <SettingsSection title="System Instructions">
               <div className="flex flex-col space-y-4">
                 <Textarea
-                  value={systemInstructions}
+                  value={systemInstructions ?? undefined}
                   isSaving={savingStates['systemInstructions']}
                   onChange={(e) => {
                     setSystemInstructions(e.target.value);
@@ -548,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),
                         }),
                       )}
                     />
@@ -690,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),
                         }),
                       )}
                     />
@@ -858,6 +889,44 @@ const Page = () => {
                     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 =
+        if (!chatModelProviders || chatModelProvidersKeys.length === 0) {
-          chatModelProvider || Object.keys(chatModelProviders)[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);
       }
 
@@ -363,18 +390,20 @@ const ChatWindow = ({ id }: { id?: string }) => {
 
       if (data.type === 'sources') {
         sources = data.data;
-        setMessages((prevMessages) => [
+        if (!added) {
-          ...prevMessages,
+          setMessages((prevMessages) => [
-          {
+            ...prevMessages,
-            content: '',
+            {
-            messageId: data.messageId,
+              content: '',
-            chatId: chatId!,
+              messageId: data.messageId,
-            role: 'assistant',
+              chatId: chatId!,
-            sources: sources,
+              role: 'assistant',
-            createdAt: new Date(),
+              sources: sources,
-          },
+              createdAt: new Date(),
-        ]);
+            },
-        added = true;
+          ]);
+          added = true;
+        }
         setMessageAppeared(true);
       }
 
@@ -392,20 +421,20 @@ const ChatWindow = ({ id }: { id?: string }) => {
             },
           ]);
           added = true;
-          setMessageAppeared(true);
-        } else {
-          setMessages((prev) =>
-            prev.map((message) => {
-              if (message.messageId === data.messageId) {
-                return { ...message, content: message.content + data.data };
-              }
-
-              return message;
-            }),
-          );
         }
 
+        setMessages((prev) =>
+          prev.map((message) => {
+            if (message.messageId === data.messageId) {
+              return { ...message, content: message.content + data.data };
+            }
+
+            return message;
+          }),
+        );
+
         recievedMessage += data.data;
+        setMessageAppeared(true);
       }
 
       if (data.type === 'messageEnd') {

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">
+      <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-4">
-        <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
+        <div className="flex flex-col items-center justify-center w-full space-y-8">
-          Research begins here.
+          <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
-        </h2>
+            Research begins here.
-        <EmptyChatMessageInput
+          </h2>
-          sendMessage={sendMessage}
+          <EmptyChatMessageInput
-          focusMode={focusMode}
+            sendMessage={sendMessage}
-          setFocusMode={setFocusMode}
+            focusMode={focusMode}
-          optimizationMode={optimizationMode}
+            setFocusMode={setFocusMode}
-          setOptimizationMode={setOptimizationMode}
+            optimizationMode={optimizationMode}
-          fileIds={fileIds}
+            setOptimizationMode={setOptimizationMode}
-          setFileIds={setFileIds}
+            fileIds={fileIds}
-          files={files}
+            setFileIds={setFileIds}
-          setFiles={setFiles}
+            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

@@ -97,6 +97,7 @@ const MessageBox = ({
           },
         ),
       );
+      setSpeechMessage(message.content.replace(regex, ''));
       return;
     }
 

src/components/MessageInputActions/Optimization.tsx

@@ -76,11 +76,13 @@ const Optimization = ({
               <PopoverButton
                 onClick={() => setOptimizationMode(mode.key)}
                 key={i}
+                disabled={mode.key === 'quality'}
                 className={cn(
                   'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-1 duration-200 cursor-pointer transition',
                   optimizationMode === mode.key
                     ? 'bg-light-secondary dark:bg-dark-secondary'
                     : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
+                  mode.key === 'quality' && 'opacity-50 cursor-not-allowed',
                 )}
               >
                 <div className="flex flex-row items-center space-x-1 text-black dark:text-white">

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
+        <Popover className="relative">
-          size={17}
+          <PopoverButton className="active:scale-95 transition duration-100 cursor-pointer p-2 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary">
-          className="active:scale-95 transition duration-100 cursor-pointer"
+            <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 {
@@ -28,6 +35,12 @@ interface Config {
     DEEPSEEK: {
       API_KEY: string;
     };
+    AIMLAPI: {
+      API_KEY: string;
+    };
+    LM_STUDIO: {
+      API_URL: string;
+    };
     CUSTOM_OPENAI: {
       API_URL: string;
       API_KEY: string;
@@ -43,10 +56,17 @@ type RecursivePartial<T> = {
   [P in keyof T]?: RecursivePartial<T[P]>;
 };
 
-const loadConfig = () =>
+const loadConfig = () => {
-  toml.parse(
+  // Server-side only
-    fs.readFileSync(path.join(process.cwd(), `${configFileName}`), 'utf-8'),
+  if (typeof window === 'undefined') {
-  ) as any as Config;
+    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;
@@ -68,6 +88,8 @@ 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;
 
@@ -77,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;
@@ -109,10 +134,13 @@ const mergeConfigs = (current: any, update: any): any => {
 };
 
 export const updateConfig = (config: RecursivePartial<Config>) => {
-  const currentConfig = loadConfig();
+  // Server-side only
-  const mergedConfig = mergeConfigs(currentConfig, config);
+  if (typeof window === 'undefined') {
-  fs.writeFileSync(
+    const currentConfig = loadConfig();
-    path.join(path.join(process.cwd(), `${configFileName}`)),
+    const mergedConfig = mergeConfigs(currentConfig, config);
-    toml.stringify(mergedConfig),
+    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/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.
+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.
-If it is a simple 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.
 
-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>
+Rules
-1. Follow up question: What is the capital of France
+- Greetings / simple writing tasks → query:"", links:[], searchRequired:false, searchMode:""
-Rephrased question:\`
+- Summarizing a URL → query:"summarize", links:[url...], searchRequired:true, searchMode:"normal"
-<question>
+- Asking for news/articles → searchMode:"news"
-Capital of france
+
-</question>
+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\`
+"query":"","links":[],"searchRequired":false,"searchMode":""
-<question>
-not_needed
-</question>
-\`
 
-3. Follow up question: What is Docker?
+3. Follow-up: What is Docker?
-Rephrased question: \`
+"query":"what is Docker","links":[],"searchRequired":true,"searchMode":"normal"
-<question>
-What is Docker
-</question>
-\`
 
-4. Follow up question: Can you tell me what is X from https://example.com
+4. Follow-up: Can you tell me what is X from https://example.com?
-Rephrased question: \`
+"query":"what is X","links":["https://example.com"],"searchRequired":true,"searchMode":"normal"
-<question>
-Can you tell me what is X?
-</question>
 
-<links>
+5. Follow-up: Summarize the content from https://example.com
-https://example.com
+"query":"summarize","links":["https://example.com"],"searchRequired":true,"searchMode":"normal"
-</links>
-\`
 
-5. Follow up question: Summarize the content from https://example.com
+6. Follow-up: Latest news about AI
-Rephrased question: \`
+"query":"latest news about AI","links":[],"searchRequired":true,"searchMode":"news"
-<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.
 
 <conversation>
 {chat_history}
 </conversation>
 
-Follow up question: {query}
+Follow-up question: {query}
 Rephrased question:
 `;
 

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

@@ -3,6 +3,11 @@ 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)',
@@ -26,7 +31,7 @@ export const loadDeepseekChatModels = async () => {
       chatModels[model.key] = {
         displayName: model.displayName,
         model: new ChatOpenAI({
-          openAIApiKey: deepseekApiKey,
+          apiKey: deepseekApiKey,
           modelName: model.key,
           temperature: 0.7,
           configuration: {

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

src/lib/providers/groq.ts

@@ -1,105 +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>[] = [
+export const PROVIDER_INFO = {
-  {
+  key: 'groq',
-    displayName: 'Gemma2 9B IT',
+  displayName: 'Groq',
-    key: 'gemma2-9b-it',
+};
-  },
+
-  {
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-    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',
-  },
-  /* {
-    displayName: 'Llama 4 Maverick 17B 128E Instruct (Preview)',
-    key: 'meta-llama/llama-4-maverick-17b-128e-instruct',
-  }, */
-  {
-    displayName: 'Llama 4 Scout 17B 16E Instruct (Preview)',
-    key: 'meta-llama/llama-4-scout-17b-16e-instruct',
-  },
-];
 
 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) => {
+    groqChatModels.forEach((model: any) => {
-      chatModels[model.key] = {
+      chatModels[model.id] = {
-        displayName: model.displayName,
+        displayName: model.id,
         model: new ChatOpenAI({
-          openAIApiKey: groqApiKey,
+          apiKey: groqApiKey,
-          modelName: model.key,
+          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,18 +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 {
-import { loadGroqChatModels } from './groq';
+  loadOllamaChatModels,
-import { loadAnthropicChatModels } from './anthropic';
+  loadOllamaEmbeddingModels,
-import { loadGeminiChatModels, loadGeminiEmbeddingModels } from './gemini';
+  PROVIDER_INFO as OllamaInfo,
-import { loadTransformersEmbeddingsModels } from './transformers';
+} from './ollama';
-import { loadDeepseekChatModels } from './deepseek';
+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;
@@ -34,6 +82,8 @@ export const chatModelProviders: Record<
   anthropic: loadAnthropicChatModels,
   gemini: loadGeminiChatModels,
   deepseek: loadDeepseekChatModels,
+  aimlapi: loadAimlApiChatModels,
+  lmstudio: loadLMStudioChatModels,
 };
 
 export const embeddingModelProviders: Record<
@@ -44,6 +94,8 @@ export const embeddingModelProviders: Record<
   ollama: loadOllamaEmbeddingModels,
   gemini: loadGeminiEmbeddingModels,
   transformers: loadTransformersEmbeddingsModels,
+  aimlapi: loadAimlApiEmbeddingModels,
+  lmstudio: loadLMStudioEmbeddingsModels,
 };
 
 export const getAvailableChatModelProviders = async () => {
@@ -66,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

@@ -6,20 +6,25 @@ import {
   MessagesPlaceholder,
   PromptTemplate,
 } from '@langchain/core/prompts';
+import {
+  RunnableLambda,
+  RunnableMap,
+  RunnableSequence,
+} from '@langchain/core/runnables';
 import { BaseMessage } from '@langchain/core/messages';
 import { StringOutputParser } from '@langchain/core/output_parsers';
 import LineListOutputParser from '../outputParsers/listLineOutputParser';
 import LineOutputParser from '../outputParsers/lineOutputParser';
 import { getDocumentsFromLinks } from '../utils/documents';
 import { Document } from 'langchain/document';
-import { searchSearxng, SearxngSearchResult } from '../searxng';
+import { searchSearxng } from '../searxng';
 import path from 'node:path';
 import fs from 'node:fs';
 import computeSimilarity from '../utils/computeSimilarity';
 import formatChatHistoryAsString from '../utils/formatHistory';
 import eventEmitter from 'events';
 import { StreamEvent } from '@langchain/core/tracers/log_stream';
-import { EventEmitter } from 'node:stream';
+import { z } from 'zod';
 
 export interface MetaSearchAgentType {
   searchAndAnswer: (
@@ -43,11 +48,22 @@ interface Config {
   activeEngines: string[];
 }
 
-type SearchInput = {
+type BasicChainInput = {
   chat_history: BaseMessage[];
   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();
@@ -56,385 +72,239 @@ class MetaSearchAgent implements MetaSearchAgentType {
     this.config = config;
   }
 
-  private async searchSources(
+  private async createSearchRetrieverChain(llm: BaseChatModel) {
-    llm: BaseChatModel,
-    input: SearchInput,
-    emitter: EventEmitter,
-  ) {
     (llm as unknown as ChatOpenAI).temperature = 0;
+    return RunnableSequence.from([
+      PromptTemplate.fromTemplate(this.config.queryGeneratorPrompt),
+      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 chatPrompt = PromptTemplate.fromTemplate(
+          if (!input.searchRequired) {
-      this.config.queryGeneratorPrompt,
+            return { query: '', docs: [] };
-    );
+          }
 
-    const processedChatPrompt = await chatPrompt.invoke({
+          if (links.length > 0) {
-      chat_history: formatChatHistoryAsString(input.chat_history),
+            if (question.length === 0) {
-      query: input.query,
+              question = 'summarize';
-    });
+            }
 
-    const llmRes = await llm.invoke(processedChatPrompt);
+            let docs: Document[] = [];
-    const messageStr = await this.strParser.invoke(llmRes);
 
-    const linksOutputParser = new LineListOutputParser({
+            const linkDocs = await getDocumentsFromLinks({ links });
-      key: 'links',
-    });
 
-    const questionOutputParser = new LineOutputParser({
+            const docGroups: Document[] = [];
-      key: 'question',
-    });
 
-    const links = await linksOutputParser.parse(messageStr);
+            linkDocs.map((doc) => {
-    let question = this.config.summarizer
+              const URLDocExists = docGroups.find(
-      ? await questionOutputParser.parse(messageStr)
+                (d) =>
-      : messageStr;
+                  d.metadata.url === doc.metadata.url &&
+                  d.metadata.totalDocs < 10,
+              );
 
-    if (question === 'not_needed') {
+              if (!URLDocExists) {
-      return { query: '', docs: [] };
+                docGroups.push({
-    }
+                  ...doc,
+                  metadata: {
+                    ...doc.metadata,
+                    totalDocs: 1,
+                  },
+                });
+              }
 
-    if (links.length > 0) {
+              const docIndex = docGroups.findIndex(
-      if (question.length === 0) {
+                (d) =>
-        question = 'summarize';
+                  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(`
+            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.
             
-      const docGroups: Document[] = [];
+            - **Journalistic tone**: The summary should sound professional and journalistic, not too casual or vague.
+            - **Thorough and detailed**: Ensure that every key point from the text is captured and that the summary directly answers the query.
+            - **Not too lengthy, but detailed**: The summary should be informative but not excessively long. Focus on providing detailed information in a concise format.
 
-      linkDocs.map((doc) => {
+            The text will be shared inside the \`text\` XML tag, and the query inside the \`query\` XML tag.
-        const URLDocExists = docGroups.find(
-          (d) =>
-            d.metadata.url === doc.metadata.url && d.metadata.totalDocs < 10,
-        );
 
-        if (!URLDocExists) {
+            <example>
-          docGroups.push({
+            1. \`<text>
-            ...doc,
+            Docker is a set of platform-as-a-service products that use OS-level virtualization to deliver software in packages called containers. 
-            metadata: {
+            It was first released in 2013 and is developed by Docker, Inc. Docker is designed to make it easier to create, deploy, and run applications 
-              ...doc.metadata,
+            by using containers.
-              totalDocs: 1,
+            </text>
-            },
-          });
-        }
 
-        const docIndex = docGroups.findIndex(
+            <query>
-          (d) =>
+            What is Docker and how does it work?
-            d.metadata.url === doc.metadata.url && d.metadata.totalDocs < 10,
+            </query>
-        );
 
-        if (docIndex !== -1) {
+            Response:
-          docGroups[docIndex].pageContent =
+            Docker is a revolutionary platform-as-a-service product developed by Docker, Inc., that uses container technology to make application 
-            docGroups[docIndex].pageContent + `\n\n` + doc.pageContent;
+            deployment more efficient. It allows developers to package their software with all necessary dependencies, making it easier to run in 
-          docGroups[docIndex].metadata.totalDocs += 1;
+            any environment. Released in 2013, Docker has transformed the way applications are built, deployed, and managed.
-        }
+            \`
-      });
+            2. \`<text>
+            The theory of relativity, or simply relativity, encompasses two interrelated theories of Albert Einstein: special relativity and general
+            relativity. However, the word "relativity" is sometimes used in reference to Galilean invariance. The term "theory of relativity" was based
+            on the expression "relative theory" used by Max Planck in 1906. The theory of relativity usually encompasses two interrelated theories by
+            Albert Einstein: special relativity and general relativity. Special relativity applies to all physical phenomena in the absence of gravity.
+            General relativity explains the law of gravitation and its relation to other forces of nature. It applies to the cosmological and astrophysical
+            realm, including astronomy.
+            </text>
 
-      await Promise.all(
+            <query>
-        docGroups.map(async (doc) => {
+            summarize
-          const res = await llm.invoke(`
+            </query>
-        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.
 
-        - **Journalistic tone**: The summary should sound professional and journalistic, not too casual or vague.
+            Response:
-        - **Thorough and detailed**: Ensure that every key point from the text is captured and that the summary directly answers the query.
+            The theory of relativity, developed by Albert Einstein, encompasses two main theories: special relativity and general relativity. Special
-        - **Not too lengthy, but detailed**: The summary should be informative but not excessively long. Focus on providing detailed information in a concise format.
+            relativity applies to all physical phenomena in the absence of gravity, while general relativity explains the law of gravitation and its
+            relation to other forces of nature. The theory of relativity is based on the concept of "relative theory," as introduced by Max Planck in
+            1906. It is a fundamental theory in physics that has revolutionized our understanding of the universe.
+            \`
+            </example>
 
-        The text will be shared inside the \`text\` XML tag, and the query inside the \`query\` XML tag.
+            Everything below is the actual data you will be working with. Good luck!
 
-        <example>
+            <query>
-        1. \`<text>
+            ${question}
-        Docker is a set of platform-as-a-service products that use OS-level virtualization to deliver software in packages called containers. 
+            </query>
-        It was first released in 2013 and is developed by Docker, Inc. Docker is designed to make it easier to create, deploy, and run applications 
-        by using containers.
-        </text>
 
-        <query>
+            <text>
-        What is Docker and how does it work?
+            ${doc.pageContent}
-        </query>
+            </text>
 
-        Response:
+            Make sure to answer the query in the summary.
-        Docker is a revolutionary platform-as-a-service product developed by Docker, Inc., that uses container technology to make application 
+          `);
-        deployment more efficient. It allows developers to package their software with all necessary dependencies, making it easier to run in 
-        any environment. Released in 2013, Docker has transformed the way applications are built, deployed, and managed.
-        \`
-        2. \`<text>
-        The theory of relativity, or simply relativity, encompasses two interrelated theories of Albert Einstein: special relativity and general
-        relativity. However, the word "relativity" is sometimes used in reference to Galilean invariance. The term "theory of relativity" was based
-        on the expression "relative theory" used by Max Planck in 1906. The theory of relativity usually encompasses two interrelated theories by
-        Albert Einstein: special relativity and general relativity. Special relativity applies to all physical phenomena in the absence of gravity.
-        General relativity explains the law of gravitation and its relation to other forces of nature. It applies to the cosmological and astrophysical
-        realm, including astronomy.
-        </text>
 
-        <query>
+                const document = new Document({
-        summarize
+                  pageContent: res.content as string,
-        </query>
+                  metadata: {
+                    title: doc.metadata.title,
+                    url: doc.metadata.url,
+                  },
+                });
 
-        Response:
+                docs.push(document);
-        The theory of relativity, developed by Albert Einstein, encompasses two main theories: special relativity and general relativity. Special
+              }),
-        relativity applies to all physical phenomena in the absence of gravity, while general relativity explains the law of gravitation and its
+            );
-        relation to other forces of nature. The theory of relativity is based on the concept of "relative theory," as introduced by Max Planck in
-        1906. It is a fundamental theory in physics that has revolutionized our understanding of the universe.
-        \`
-        </example>
 
-        Everything below is the actual data you will be working with. Good luck!
+            return { query: question, docs: docs };
+          } else {
+            question = question.replace(/<think>.*?<\/think>/g, '');
 
-        <query>
+            const res = await searchSearxng(question, {
-        ${question}
+              language: 'en',
-        </query>
+              engines:
+                input.searchMode === 'normal'
+                  ? this.config.activeEngines
+                  : ['bing news'],
+            });
 
-        <text>
+            const documents = res.results.map(
-        ${doc.pageContent}
+              (result) =>
-        </text>
+                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 }),
+                  },
+                }),
+            );
 
-        Make sure to answer the query in the summary.
+            return { query: question, docs: documents };
-      `);
+          }
-
+        },
-          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 }),
-            },
-          }),
-      );
-
-      return { query: question, docs: documents };
-    }
   }
 
-  private async performDeepResearch(
+  private async createAnsweringChain(
-    llm: BaseChatModel,
-    input: SearchInput,
-    emitter: EventEmitter,
-  ) {
-    (llm as unknown as ChatOpenAI).temperature = 0;
-
-    const queryGenPrompt = PromptTemplate.fromTemplate(
-      this.config.queryGeneratorPrompt,
-    );
-
-    const formattedChatPrompt = await queryGenPrompt.invoke({
-      chat_history: formatChatHistoryAsString(input.chat_history),
-      query: input.query,
-    });
-
-    let i = 0;
-    let currentQuery = await this.strParser.invoke(
-      await llm.invoke(formattedChatPrompt),
-    );
-    const originalQuery = currentQuery;
-    const pastQueries: string[] = [];
-    const results: SearxngSearchResult[] = [];
-
-    while (i < 10) {
-      const res = await searchSearxng(currentQuery, {
-        language: 'en',
-        engines: this.config.activeEngines,
-      });
-
-      results.push(...res.results);
-
-      const reflectorPrompt = PromptTemplate.fromTemplate(`
-          You are an LLM that is tasked with reflecting on the results of a search query.
-
-          ## Goal
-          You will be given question of the user, a list of search results collected from the web to answer that question along with past queries made to collect those results. You have to analyze the results based on user's question and do the following:
-          
-          1. Identify unexplored areas or areas with less detailed information in the results and generate a new query that focuses on those areas. The new queries should be more specific and a similar query shall not exist in past queries which will be provided to you. Make sure to include keywords that you're looking for because the new query will be used to search the web for information on that topic. Make sure the query contains only 1 question and is not too long to ensure it is Search Engine friendly.
-          2. You'll have to generate a description explaining what you are doing for example "I am looking for more information about X" or "Understanding how X works" etc. The description should be short and concise.
-          
-          ## Output format
-
-          You need to output in XML format and do not generate any other text. ake sure to not include any other text in the output or start a conversation in the output. The output should be in the following format:
-
-          <query>(query)</query>
-          <description>(description)</description>
-
-          ## Example
-          Say the user asked "What is Llama 4 by Meta?" and let search results contain information about Llama 4 being an LLM and very little information about its features. You can output:
-
-          <query>Llama 4 features</query> // Generate queries that capture keywords for SEO and not making words like "How", "What", "Why" etc.
-          <description>Looking for new features in Llama 4</description>
-
-          or something like
-
-          <query>How is Llama 4 better than its previous generation models</query>
-          <description>Understanding the difference between Llama 4 and previous generation models.</description>
-          
-          ## BELOW IS THE ACTUAL DATA YOU WILL BE WORKING WITH. IT IS NOT A PART OF EXAMPLES. YOU'LL HAVE TO GENERATE YOUR ANSWER BASED ON THIS DATA.
-          <user_question>\n{question}\n</user_question>
-          <search_results>\n{search_results}\n</search_results>
-          <past_queries>\n{past_queries}\n</past_queries>
-
-          Response:
-      `);
-
-      const formattedReflectorPrompt = await reflectorPrompt.invoke({
-        question: originalQuery,
-        search_results: results
-          .map(
-            (result) => `<result>${result.title} - ${result.content}</result>`,
-          )
-          .join('\n'),
-        past_queries: pastQueries.map((q) => `<query>${q}</query>`).join('\n'),
-      });
-
-      const feedback = await this.strParser.invoke(
-        await llm.invoke(formattedReflectorPrompt),
-      );
-
-      console.log(`Feedback: ${feedback}`);
-
-      const queryOutputParser = new LineOutputParser({
-        key: 'query',
-      });
-
-      const descriptionOutputParser = new LineOutputParser({
-        key: 'description',
-      });
-
-      currentQuery = await queryOutputParser.parse(feedback);
-      const description = await descriptionOutputParser.parse(feedback);
-      console.log(`Query: ${currentQuery}`);
-      console.log(`Description: ${description}`);
-
-      pastQueries.push(currentQuery);
-      ++i;
-    }
-
-    const uniqueResults: SearxngSearchResult[] = [];
-
-    results.forEach((res) => {
-      const exists = uniqueResults.find((r) => r.url === res.url);
-
-      if (!exists) {
-        uniqueResults.push(res);
-      } else {
-        exists.content += `\n\n` + res.content;
-      }
-    });
-
-    const documents = uniqueResults /* .slice(0, 50) */
-      .map(
-        (r) =>
-          new Document({
-            pageContent: r.content || '',
-            metadata: {
-              title: r.title,
-              url: r.url,
-              ...(r.img_src && { img_src: r.img_src }),
-            },
-          }),
-      );
-
-    return documents;
-  }
-
-  private async streamAnswer(
     llm: BaseChatModel,
     fileIds: string[],
     embeddings: Embeddings,
     optimizationMode: 'speed' | 'balanced' | 'quality',
     systemInstructions: string,
-    input: SearchInput,
-    emitter: EventEmitter,
   ) {
-    const chatPrompt = ChatPromptTemplate.fromMessages([
+    return RunnableSequence.from([
-      ['system', this.config.responsePrompt],
+      RunnableMap.from({
-      new MessagesPlaceholder('chat_history'),
+        systemInstructions: () => systemInstructions,
-      ['user', '{query}'],
+        query: (input: BasicChainInput) => input.query,
-    ]);
+        chat_history: (input: BasicChainInput) => input.chat_history,
+        date: () => new Date().toISOString(),
+        context: RunnableLambda.from(async (input: BasicChainInput) => {
+          const processedHistory = formatChatHistoryAsString(
+            input.chat_history,
+          );
 
-    let context = '';
+          let docs: Document[] | null = null;
+          let query = input.query;
 
-    if (optimizationMode === 'speed' || optimizationMode === 'balanced') {
+          if (this.config.searchWeb) {
-      let docs: Document[] | null = null;
+            const searchRetrieverChain =
-      let query = input.query;
+              await this.createSearchRetrieverChain(llm);
 
-      if (this.config.searchWeb) {
+            const searchRetrieverResult = await searchRetrieverChain.invoke({
-        const searchResults = await this.searchSources(llm, input, emitter);
+              chat_history: processedHistory,
+              query,
+            });
 
-        query = searchResults.query;
+            query = searchRetrieverResult.query;
-        docs = searchResults.docs;
+            docs = searchRetrieverResult.docs;
-      }
+          }
 
-      const sortedDocs = await this.rerankDocs(
+          const sortedDocs = await this.rerankDocs(
-        query,
+            query,
-        docs ?? [],
+            docs ?? [],
-        fileIds,
+            fileIds,
-        embeddings,
+            embeddings,
-        optimizationMode,
+            optimizationMode,
-      );
+          );
 
-      emitter.emit(
+          return sortedDocs;
-        'data',
+        })
-        JSON.stringify({ type: 'sources', data: sortedDocs }),
+          .withConfig({
-      );
+            runName: 'FinalSourceRetriever',
-
+          })
-      context = this.processDocs(sortedDocs);
+          .pipe(this.processDocs),
-    } else if (optimizationMode === 'quality') {
+      }),
-      let docs: Document[] = [];
+      ChatPromptTemplate.fromMessages([
-
+        ['system', this.config.responsePrompt],
-      docs = await this.performDeepResearch(llm, input, emitter);
+        new MessagesPlaceholder('chat_history'),
-
+        ['user', '{query}'],
-      emitter.emit('data', JSON.stringify({ type: 'sources', data: docs }));
+      ]),
-
+      llm,
-      context = this.processDocs(docs);
+      this.strParser,
-    }
+    ]).withConfig({
-
+      runName: 'FinalResponseGenerator',
-    const formattedChatPrompt = await chatPrompt.invoke({
-      query: input.query,
-      chat_history: input.chat_history,
-      date: new Date().toISOString(),
-      context: context,
-      systemInstructions: systemInstructions,
     });
-
-    const llmRes = await llm.stream(formattedChatPrompt);
-
-    for await (const data of llmRes) {
-      const messageStr = await this.strParser.invoke(data);
-
-      emitter.emit(
-        'data',
-        JSON.stringify({ type: 'response', data: messageStr }),
-      );
-    }
-
-    emitter.emit('end');
   }
 
   private async rerankDocs(
@@ -570,13 +440,44 @@ class MetaSearchAgent implements MetaSearchAgentType {
     return docs
       .map(
         (_, index) =>
-          `${index + 1}. ${docs[index].metadata.title} ${
+          `${index + 1}. ${docs[index].metadata.title} ${docs[index].pageContent}`,
-            docs[index].pageContent
-          }`,
       )
       .join('\n');
   }
 
+  private async handleStream(
+    stream: AsyncGenerator<StreamEvent, any, any>,
+    emitter: eventEmitter,
+  ) {
+    for await (const event of stream) {
+      if (
+        event.event === 'on_chain_end' &&
+        event.name === 'FinalSourceRetriever'
+      ) {
+        ``;
+        emitter.emit(
+          'data',
+          JSON.stringify({ type: 'sources', data: event.data.output }),
+        );
+      }
+      if (
+        event.event === 'on_chain_stream' &&
+        event.name === 'FinalResponseGenerator'
+      ) {
+        emitter.emit(
+          'data',
+          JSON.stringify({ type: 'response', data: event.data.chunk }),
+        );
+      }
+      if (
+        event.event === 'on_chain_end' &&
+        event.name === 'FinalResponseGenerator'
+      ) {
+        emitter.emit('end');
+      }
+    }
+  }
+
   async searchAndAnswer(
     message: string,
     history: BaseMessage[],
@@ -588,19 +489,26 @@ class MetaSearchAgent implements MetaSearchAgentType {
   ) {
     const emitter = new eventEmitter();
 
-    this.streamAnswer(
+    const answeringChain = await this.createAnsweringChain(
       llm,
       fileIds,
       embeddings,
       optimizationMode,
       systemInstructions,
+    );
+
+    const stream = answeringChain.streamEvents(
       {
         chat_history: history,
         query: message,
       },
-      emitter,
+      {
+        version: 'v1',
+      },
     );
 
+    this.handleStream(stream, emitter);
+
     return emitter;
   }
 }

src/lib/searxng.ts

@@ -8,7 +8,7 @@ interface SearxngSearchOptions {
   pageno?: number;
 }
 
-export interface SearxngSearchResult {
+interface SearxngSearchResult {
   title: string;
   url: string;
   img_src?: string;

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