feat: монорепо миграция, Discover/SearxNG улучшения
- Миграция на монорепозиторий (apps/frontend, apps/chat-service, etc.) - Discover: проверка SearxNG, понятное empty state при ненастроенном поиске - searxng.ts: валидация URL, проверка JSON-ответа, авто-добавление http:// - docker/searxng-config: настройки для JSON API SearxNG Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
home
3
apps/frontend/.eslintrc.json
Normal file
3
apps/frontend/.eslintrc.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
2
apps/frontend/data/.gitignore
vendored
Normal file
2
apps/frontend/data/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
*
|
||||
!.gitignore
|
||||
15
apps/frontend/drizzle.config.ts
Normal file
15
apps/frontend/drizzle.config.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { defineConfig } from 'drizzle-kit';
|
||||
import path from 'path';
|
||||
|
||||
const dataDir = process.env.DATA_DIR
|
||||
? path.join(path.resolve(process.cwd(), process.env.DATA_DIR), 'data')
|
||||
: path.join(process.cwd(), 'data');
|
||||
|
||||
export default defineConfig({
|
||||
dialect: 'sqlite',
|
||||
schema: './src/lib/db/schema.ts',
|
||||
out: './drizzle',
|
||||
dbCredentials: {
|
||||
url: path.join(dataDir, 'db.sqlite'),
|
||||
},
|
||||
});
|
||||
16
apps/frontend/drizzle/0000_fuzzy_randall.sql
Normal file
16
apps/frontend/drizzle/0000_fuzzy_randall.sql
Normal file
@@ -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
|
||||
);
|
||||
1
apps/frontend/drizzle/0001_wise_rockslide.sql
Normal file
1
apps/frontend/drizzle/0001_wise_rockslide.sql
Normal file
@@ -0,0 +1 @@
|
||||
/* Do nothing */
|
||||
1
apps/frontend/drizzle/0002_daffy_wrecker.sql
Normal file
1
apps/frontend/drizzle/0002_daffy_wrecker.sql
Normal file
@@ -0,0 +1 @@
|
||||
/* do nothing */
|
||||
116
apps/frontend/drizzle/meta/0000_snapshot.json
Normal file
116
apps/frontend/drizzle/meta/0000_snapshot.json
Normal file
@@ -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": {}
|
||||
}
|
||||
}
|
||||
125
apps/frontend/drizzle/meta/0001_snapshot.json
Normal file
125
apps/frontend/drizzle/meta/0001_snapshot.json
Normal file
@@ -0,0 +1,125 @@
|
||||
{
|
||||
"version": "6",
|
||||
"dialect": "sqlite",
|
||||
"id": "6dedf55f-0e44-478f-82cf-14a21ac686f8",
|
||||
"prevId": "ef3a044b-0f34-40b5-babb-2bb3a909ba27",
|
||||
"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
|
||||
},
|
||||
"type": {
|
||||
"name": "type",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"chatId": {
|
||||
"name": "chatId",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"createdAt": {
|
||||
"name": "createdAt",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": "CURRENT_TIMESTAMP"
|
||||
},
|
||||
"messageId": {
|
||||
"name": "messageId",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"content": {
|
||||
"name": "content",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false
|
||||
},
|
||||
"sources": {
|
||||
"name": "sources",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false,
|
||||
"default": "'[]'"
|
||||
}
|
||||
},
|
||||
"indexes": {},
|
||||
"foreignKeys": {},
|
||||
"compositePrimaryKeys": {},
|
||||
"uniqueConstraints": {},
|
||||
"checkConstraints": {}
|
||||
}
|
||||
},
|
||||
"views": {},
|
||||
"enums": {},
|
||||
"_meta": {
|
||||
"schemas": {},
|
||||
"tables": {},
|
||||
"columns": {}
|
||||
},
|
||||
"internal": {
|
||||
"indexes": {}
|
||||
}
|
||||
}
|
||||
132
apps/frontend/drizzle/meta/0002_snapshot.json
Normal file
132
apps/frontend/drizzle/meta/0002_snapshot.json
Normal file
@@ -0,0 +1,132 @@
|
||||
{
|
||||
"version": "6",
|
||||
"dialect": "sqlite",
|
||||
"id": "1c5eb804-d6b4-48ec-9a8f-75fb729c8e52",
|
||||
"prevId": "6dedf55f-0e44-478f-82cf-14a21ac686f8",
|
||||
"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
|
||||
},
|
||||
"sources": {
|
||||
"name": "sources",
|
||||
"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
|
||||
},
|
||||
"messageId": {
|
||||
"name": "messageId",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"chatId": {
|
||||
"name": "chatId",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"backendId": {
|
||||
"name": "backendId",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"query": {
|
||||
"name": "query",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"createdAt": {
|
||||
"name": "createdAt",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": true,
|
||||
"autoincrement": false
|
||||
},
|
||||
"responseBlocks": {
|
||||
"name": "responseBlocks",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false,
|
||||
"default": "'[]'"
|
||||
},
|
||||
"status": {
|
||||
"name": "status",
|
||||
"type": "text",
|
||||
"primaryKey": false,
|
||||
"notNull": false,
|
||||
"autoincrement": false,
|
||||
"default": "'answering'"
|
||||
}
|
||||
},
|
||||
"indexes": {},
|
||||
"foreignKeys": {},
|
||||
"compositePrimaryKeys": {},
|
||||
"uniqueConstraints": {},
|
||||
"checkConstraints": {}
|
||||
}
|
||||
},
|
||||
"views": {},
|
||||
"enums": {},
|
||||
"_meta": {
|
||||
"schemas": {},
|
||||
"tables": {},
|
||||
"columns": {}
|
||||
},
|
||||
"internal": {
|
||||
"indexes": {}
|
||||
}
|
||||
}
|
||||
27
apps/frontend/drizzle/meta/_journal.json
Normal file
27
apps/frontend/drizzle/meta/_journal.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"version": "7",
|
||||
"dialect": "sqlite",
|
||||
"entries": [
|
||||
{
|
||||
"idx": 0,
|
||||
"version": "6",
|
||||
"when": 1748405503809,
|
||||
"tag": "0000_fuzzy_randall",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 1,
|
||||
"version": "6",
|
||||
"when": 1758863991284,
|
||||
"tag": "0001_wise_rockslide",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 2,
|
||||
"version": "6",
|
||||
"when": 1763732708332,
|
||||
"tag": "0002_daffy_wrecker",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
6
apps/frontend/next-env.d.ts
vendored
Normal file
6
apps/frontend/next-env.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
import "./.next/dev/types/routes.d.ts";
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
26
apps/frontend/next.config.mjs
Normal file
26
apps/frontend/next.config.mjs
Normal file
@@ -0,0 +1,26 @@
|
||||
import pkg from './package.json' with { type: 'json' };
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: 'standalone',
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
hostname: 's2.googleusercontent.com',
|
||||
},
|
||||
],
|
||||
},
|
||||
serverExternalPackages: ['pdf-parse'],
|
||||
outputFileTracingIncludes: {
|
||||
'/api/**': [
|
||||
'./node_modules/@napi-rs/canvas/**',
|
||||
'./node_modules/@napi-rs/canvas-linux-x64-gnu/**',
|
||||
'./node_modules/@napi-rs/canvas-linux-x64-musl/**',
|
||||
],
|
||||
},
|
||||
env: {
|
||||
NEXT_PUBLIC_VERSION: pkg.version,
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
73
apps/frontend/package.json
Normal file
73
apps/frontend/package.json
Normal file
@@ -0,0 +1,73 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "1.12.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --webpack",
|
||||
"build": "next build --webpack",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@google/genai": "^1.34.0",
|
||||
"@headlessui/react": "^2.2.0",
|
||||
"@headlessui/tailwindcss": "^0.2.2",
|
||||
"@huggingface/transformers": "^3.8.1",
|
||||
"@icons-pack/react-simple-icons": "^12.3.0",
|
||||
"@phosphor-icons/react": "^2.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@tailwindcss/typography": "^0.5.12",
|
||||
"@toolsycc/json-repair": "^0.1.22",
|
||||
"axios": "^1.8.3",
|
||||
"better-sqlite3": "^11.9.1",
|
||||
"clsx": "^2.1.0",
|
||||
"drizzle-orm": "^0.40.1",
|
||||
"js-tiktoken": "^1.0.21",
|
||||
"jspdf": "^3.0.4",
|
||||
"lightweight-charts": "^5.0.9",
|
||||
"lucide-react": "^0.556.0",
|
||||
"mammoth": "^1.9.1",
|
||||
"markdown-to-jsx": "^7.7.2",
|
||||
"mathjs": "^15.1.0",
|
||||
"motion": "^12.23.26",
|
||||
"next": "^16.0.7",
|
||||
"next-themes": "^0.3.0",
|
||||
"officeparser": "^5.2.2",
|
||||
"ollama": "^0.6.3",
|
||||
"openai": "^6.9.0",
|
||||
"partial-json": "^0.1.7",
|
||||
"pdf-parse": "^2.4.5",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-syntax-highlighter": "^16.1.0",
|
||||
"react-text-to-speech": "^0.14.5",
|
||||
"react-textarea-autosize": "^8.5.3",
|
||||
"rfc6902": "^5.1.2",
|
||||
"sonner": "^1.4.41",
|
||||
"tailwind-merge": "^2.2.2",
|
||||
"turndown": "^7.2.2",
|
||||
"yahoo-finance2": "^3.10.2",
|
||||
"yet-another-react-lightbox": "^3.17.2",
|
||||
"zod": "^4.1.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/better-sqlite3": "^7.6.12",
|
||||
"@types/jspdf": "^2.0.0",
|
||||
"@types/node": "^24.8.1",
|
||||
"@types/pdf-parse": "^1.1.4",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"@types/react-syntax-highlighter": "^15.5.13",
|
||||
"@types/turndown": "^5.0.6",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"drizzle-kit": "^0.30.5",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.1.4",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.3.0",
|
||||
"typescript": "^5.9.3"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@napi-rs/canvas": "^0.1.87"
|
||||
}
|
||||
}
|
||||
6
apps/frontend/postcss.config.js
Normal file
6
apps/frontend/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
BIN
apps/frontend/public/fonts/pp-ed-ul.otf
Normal file
BIN
apps/frontend/public/fonts/pp-ed-ul.otf
Normal file
Binary file not shown.
BIN
apps/frontend/public/icon-100.png
Normal file
BIN
apps/frontend/public/icon-100.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 916 B |
BIN
apps/frontend/public/icon-50.png
Normal file
BIN
apps/frontend/public/icon-50.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
BIN
apps/frontend/public/icon.png
Normal file
BIN
apps/frontend/public/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
1
apps/frontend/public/next.svg
Normal file
1
apps/frontend/public/next.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
apps/frontend/public/screenshots/p1.png
Normal file
BIN
apps/frontend/public/screenshots/p1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
BIN
apps/frontend/public/screenshots/p1_small.png
Normal file
BIN
apps/frontend/public/screenshots/p1_small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
apps/frontend/public/screenshots/p2.png
Normal file
BIN
apps/frontend/public/screenshots/p2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 627 KiB |
BIN
apps/frontend/public/screenshots/p2_small.png
Normal file
BIN
apps/frontend/public/screenshots/p2_small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
1
apps/frontend/public/vercel.svg
Normal file
1
apps/frontend/public/vercel.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
|
||||
|
After Width: | Height: | Size: 629 B |
131
apps/frontend/public/weather-ico/clear-day.svg
Normal file
131
apps/frontend/public/weather-ico/clear-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
159
apps/frontend/public/weather-ico/clear-night.svg
Normal file
159
apps/frontend/public/weather-ico/clear-night.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
178
apps/frontend/public/weather-ico/cloudy-1-day.svg
Normal file
178
apps/frontend/public/weather-ico/cloudy-1-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 6.8 KiB |
206
apps/frontend/public/weather-ico/cloudy-1-night.svg
Normal file
206
apps/frontend/public/weather-ico/cloudy-1-night.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
244
apps/frontend/public/weather-ico/fog-day.svg
Normal file
244
apps/frontend/public/weather-ico/fog-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 8.0 KiB |
309
apps/frontend/public/weather-ico/fog-night.svg
Normal file
309
apps/frontend/public/weather-ico/fog-night.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 11 KiB |
204
apps/frontend/public/weather-ico/frost-day.svg
Normal file
204
apps/frontend/public/weather-ico/frost-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 7.3 KiB |
269
apps/frontend/public/weather-ico/frost-night.svg
Normal file
269
apps/frontend/public/weather-ico/frost-night.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 11 KiB |
141
apps/frontend/public/weather-ico/rain-and-sleet-mix.svg
Normal file
141
apps/frontend/public/weather-ico/rain-and-sleet-mix.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 7.6 KiB |
179
apps/frontend/public/weather-ico/rainy-1-day.svg
Normal file
179
apps/frontend/public/weather-ico/rainy-1-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 7.4 KiB |
243
apps/frontend/public/weather-ico/rainy-1-night.svg
Normal file
243
apps/frontend/public/weather-ico/rainy-1-night.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 10 KiB |
204
apps/frontend/public/weather-ico/rainy-2-day.svg
Normal file
204
apps/frontend/public/weather-ico/rainy-2-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 8.8 KiB |
256
apps/frontend/public/weather-ico/rainy-2-night.svg
Normal file
256
apps/frontend/public/weather-ico/rainy-2-night.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 11 KiB |
206
apps/frontend/public/weather-ico/rainy-3-day.svg
Normal file
206
apps/frontend/public/weather-ico/rainy-3-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 9.3 KiB |
270
apps/frontend/public/weather-ico/rainy-3-night.svg
Normal file
270
apps/frontend/public/weather-ico/rainy-3-night.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 12 KiB |
374
apps/frontend/public/weather-ico/scattered-thunderstorms-day.svg
Normal file
374
apps/frontend/public/weather-ico/scattered-thunderstorms-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 11 KiB |
307
apps/frontend/public/weather-ico/severe-thunderstorm.svg
Normal file
307
apps/frontend/public/weather-ico/severe-thunderstorm.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
241
apps/frontend/public/weather-ico/snowy-1-day.svg
Normal file
241
apps/frontend/public/weather-ico/snowy-1-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 9.6 KiB |
269
apps/frontend/public/weather-ico/snowy-1-night.svg
Normal file
269
apps/frontend/public/weather-ico/snowy-1-night.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 11 KiB |
273
apps/frontend/public/weather-ico/snowy-2-day.svg
Normal file
273
apps/frontend/public/weather-ico/snowy-2-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 11 KiB |
301
apps/frontend/public/weather-ico/snowy-2-night.svg
Normal file
301
apps/frontend/public/weather-ico/snowy-2-night.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
334
apps/frontend/public/weather-ico/snowy-3-day.svg
Normal file
334
apps/frontend/public/weather-ico/snowy-3-day.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 15 KiB |
361
apps/frontend/public/weather-ico/snowy-3-night.svg
Normal file
361
apps/frontend/public/weather-ico/snowy-3-night.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 17 KiB |
254
apps/frontend/src/app/api/chat/route.ts
Normal file
254
apps/frontend/src/app/api/chat/route.ts
Normal file
@@ -0,0 +1,254 @@
|
||||
import { z } from 'zod';
|
||||
import ModelRegistry from '@/lib/models/registry';
|
||||
import { ModelWithProvider } from '@/lib/models/types';
|
||||
import SearchAgent from '@/lib/agents/search';
|
||||
import SessionManager from '@/lib/session';
|
||||
import { ChatTurnMessage } from '@/lib/types';
|
||||
import { SearchSources } from '@/lib/agents/search/types';
|
||||
import db from '@/lib/db';
|
||||
import { eq } from 'drizzle-orm';
|
||||
import { chats } from '@/lib/db/schema';
|
||||
import UploadManager from '@/lib/uploads/manager';
|
||||
|
||||
export const runtime = 'nodejs';
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
const messageSchema = z.object({
|
||||
messageId: z.string().min(1, 'Message ID is required'),
|
||||
chatId: z.string().min(1, 'Chat ID is required'),
|
||||
content: z.string().min(1, 'Message content is required'),
|
||||
});
|
||||
|
||||
const chatModelSchema: z.ZodType<ModelWithProvider> = z.object({
|
||||
providerId: z.string({ message: 'Chat model provider id must be provided' }),
|
||||
key: z.string({ message: 'Chat model key must be provided' }),
|
||||
});
|
||||
|
||||
const embeddingModelSchema: z.ZodType<ModelWithProvider> = z.object({
|
||||
providerId: z.string({
|
||||
message: 'Embedding model provider id must be provided',
|
||||
}),
|
||||
key: z.string({ message: 'Embedding model key must be provided' }),
|
||||
});
|
||||
|
||||
const bodySchema = z.object({
|
||||
message: messageSchema,
|
||||
optimizationMode: z.enum(['speed', 'balanced', 'quality'], {
|
||||
message: 'Optimization mode must be one of: speed, balanced, quality',
|
||||
}),
|
||||
sources: z.array(z.string()).optional().default([]),
|
||||
history: z
|
||||
.array(z.tuple([z.string(), z.string()]))
|
||||
.optional()
|
||||
.default([]),
|
||||
files: z.array(z.string()).optional().default([]),
|
||||
chatModel: chatModelSchema,
|
||||
embeddingModel: embeddingModelSchema,
|
||||
systemInstructions: z.string().nullable().optional().default(''),
|
||||
});
|
||||
|
||||
type Body = z.infer<typeof bodySchema>;
|
||||
|
||||
const safeValidateBody = (data: unknown) => {
|
||||
const result = bodySchema.safeParse(data);
|
||||
|
||||
if (!result.success) {
|
||||
return {
|
||||
success: false,
|
||||
error: result.error.issues.map((e: any) => ({
|
||||
path: e.path.join('.'),
|
||||
message: e.message,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: result.data,
|
||||
};
|
||||
};
|
||||
|
||||
const ensureChatExists = async (input: {
|
||||
id: string;
|
||||
sources: SearchSources[];
|
||||
query: string;
|
||||
fileIds: string[];
|
||||
}) => {
|
||||
try {
|
||||
const exists = await db.query.chats
|
||||
.findFirst({
|
||||
where: eq(chats.id, input.id),
|
||||
})
|
||||
.execute();
|
||||
|
||||
if (!exists) {
|
||||
await db.insert(chats).values({
|
||||
id: input.id,
|
||||
createdAt: new Date().toISOString(),
|
||||
sources: input.sources,
|
||||
title: input.query,
|
||||
files: input.fileIds.map((id) => {
|
||||
return {
|
||||
fileId: id,
|
||||
name: UploadManager.getFile(id)?.name || 'Uploaded File',
|
||||
};
|
||||
}),
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to check/save chat:', err);
|
||||
}
|
||||
};
|
||||
|
||||
export const POST = async (req: Request) => {
|
||||
try {
|
||||
const reqBody = (await req.json()) as Body;
|
||||
|
||||
const parseBody = safeValidateBody(reqBody);
|
||||
|
||||
if (!parseBody.success) {
|
||||
return Response.json(
|
||||
{ message: 'Invalid request body', error: parseBody.error },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
const body = parseBody.data as Body;
|
||||
const { message } = body;
|
||||
|
||||
if (message.content === '') {
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Please provide a message to process',
|
||||
},
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
const [llm, embedding] = await Promise.all([
|
||||
registry.loadChatModel(body.chatModel.providerId, body.chatModel.key),
|
||||
registry.loadEmbeddingModel(
|
||||
body.embeddingModel.providerId,
|
||||
body.embeddingModel.key,
|
||||
),
|
||||
]);
|
||||
|
||||
const history: ChatTurnMessage[] = body.history.map((msg) => {
|
||||
if (msg[0] === 'human') {
|
||||
return {
|
||||
role: 'user',
|
||||
content: msg[1],
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
role: 'assistant',
|
||||
content: msg[1],
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const agent = new SearchAgent();
|
||||
const session = SessionManager.createSession();
|
||||
|
||||
const responseStream = new TransformStream();
|
||||
const writer = responseStream.writable.getWriter();
|
||||
const encoder = new TextEncoder();
|
||||
|
||||
const disconnect = session.subscribe((event: string, data: any) => {
|
||||
if (event === 'data') {
|
||||
if (data.type === 'block') {
|
||||
writer.write(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'block',
|
||||
block: data.block,
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
} else if (data.type === 'updateBlock') {
|
||||
writer.write(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'updateBlock',
|
||||
blockId: data.blockId,
|
||||
patch: data.patch,
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
} else if (data.type === 'researchComplete') {
|
||||
writer.write(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'researchComplete',
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
}
|
||||
} else if (event === 'end') {
|
||||
writer.write(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'messageEnd',
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
writer.close();
|
||||
session.removeAllListeners();
|
||||
} else if (event === 'error') {
|
||||
writer.write(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'error',
|
||||
data: data.data,
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
writer.close();
|
||||
session.removeAllListeners();
|
||||
}
|
||||
});
|
||||
|
||||
agent.searchAsync(session, {
|
||||
chatHistory: history,
|
||||
followUp: message.content,
|
||||
chatId: body.message.chatId,
|
||||
messageId: body.message.messageId,
|
||||
config: {
|
||||
llm,
|
||||
embedding: embedding,
|
||||
sources: body.sources as SearchSources[],
|
||||
mode: body.optimizationMode,
|
||||
fileIds: body.files,
|
||||
systemInstructions: body.systemInstructions || 'None',
|
||||
},
|
||||
});
|
||||
|
||||
ensureChatExists({
|
||||
id: body.message.chatId,
|
||||
sources: body.sources as SearchSources[],
|
||||
fileIds: body.files,
|
||||
query: body.message.content,
|
||||
});
|
||||
|
||||
req.signal.addEventListener('abort', () => {
|
||||
disconnect();
|
||||
writer.close();
|
||||
});
|
||||
|
||||
return new Response(responseStream.readable, {
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream',
|
||||
Connection: 'keep-alive',
|
||||
'Cache-Control': 'no-cache, no-transform',
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('An error occurred while processing chat request:', err);
|
||||
return Response.json(
|
||||
{ message: 'An error occurred while processing chat request' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
69
apps/frontend/src/app/api/chats/[id]/route.ts
Normal file
69
apps/frontend/src/app/api/chats/[id]/route.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import db from '@/lib/db';
|
||||
import { chats, messages } from '@/lib/db/schema';
|
||||
import { eq } from 'drizzle-orm';
|
||||
|
||||
export const GET = async (
|
||||
req: Request,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) => {
|
||||
try {
|
||||
const { id } = await params;
|
||||
|
||||
const chatExists = await db.query.chats.findFirst({
|
||||
where: eq(chats.id, id),
|
||||
});
|
||||
|
||||
if (!chatExists) {
|
||||
return Response.json({ message: 'Chat not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
const chatMessages = await db.query.messages.findMany({
|
||||
where: eq(messages.chatId, id),
|
||||
});
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
chat: chatExists,
|
||||
messages: chatMessages,
|
||||
},
|
||||
{ status: 200 },
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('Error in getting chat by id: ', err);
|
||||
return Response.json(
|
||||
{ message: 'An error has occurred.' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const DELETE = async (
|
||||
req: Request,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) => {
|
||||
try {
|
||||
const { id } = await params;
|
||||
|
||||
const chatExists = await db.query.chats.findFirst({
|
||||
where: eq(chats.id, id),
|
||||
});
|
||||
|
||||
if (!chatExists) {
|
||||
return Response.json({ message: 'Chat not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
await db.delete(chats).where(eq(chats.id, id)).execute();
|
||||
await db.delete(messages).where(eq(messages.chatId, id)).execute();
|
||||
|
||||
return Response.json(
|
||||
{ message: 'Chat deleted successfully' },
|
||||
{ status: 200 },
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('Error in deleting chat by id: ', err);
|
||||
return Response.json(
|
||||
{ message: 'An error has occurred.' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
15
apps/frontend/src/app/api/chats/route.ts
Normal file
15
apps/frontend/src/app/api/chats/route.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import db from '@/lib/db';
|
||||
|
||||
export const GET = async (req: Request) => {
|
||||
try {
|
||||
let chats = await db.query.chats.findMany();
|
||||
chats = chats.reverse();
|
||||
return Response.json({ chats: chats }, { status: 200 });
|
||||
} catch (err) {
|
||||
console.error('Error in getting chats: ', err);
|
||||
return Response.json(
|
||||
{ message: 'An error has occurred.' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
77
apps/frontend/src/app/api/config/route.ts
Normal file
77
apps/frontend/src/app/api/config/route.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
import configManager from '@/lib/config';
|
||||
import ModelRegistry from '@/lib/models/registry';
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { ConfigModelProvider } from '@/lib/config/types';
|
||||
|
||||
type SaveConfigBody = {
|
||||
key: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
export const GET = async (req: NextRequest) => {
|
||||
try {
|
||||
const values = configManager.getCurrentConfig();
|
||||
const fields = configManager.getUIConfigSections();
|
||||
|
||||
const modelRegistry = new ModelRegistry();
|
||||
const modelProviders = await modelRegistry.getActiveProviders();
|
||||
|
||||
values.modelProviders = values.modelProviders.map(
|
||||
(mp: ConfigModelProvider) => {
|
||||
const activeProvider = modelProviders.find((p) => p.id === mp.id);
|
||||
|
||||
return {
|
||||
...mp,
|
||||
chatModels: activeProvider?.chatModels ?? mp.chatModels,
|
||||
embeddingModels:
|
||||
activeProvider?.embeddingModels ?? mp.embeddingModels,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
return NextResponse.json({
|
||||
values,
|
||||
fields,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error in getting config: ', err);
|
||||
return Response.json(
|
||||
{ message: 'An error has occurred.' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const POST = async (req: NextRequest) => {
|
||||
try {
|
||||
const body: SaveConfigBody = await req.json();
|
||||
|
||||
if (!body.key || !body.value) {
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Key and value are required.',
|
||||
},
|
||||
{
|
||||
status: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
configManager.updateConfig(body.key, body.value);
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Config updated successfully.',
|
||||
},
|
||||
{
|
||||
status: 200,
|
||||
},
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('Error in getting config: ', err);
|
||||
return Response.json(
|
||||
{ message: 'An error has occurred.' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
23
apps/frontend/src/app/api/config/setup-complete/route.ts
Normal file
23
apps/frontend/src/app/api/config/setup-complete/route.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import configManager from '@/lib/config';
|
||||
import { NextRequest } from 'next/server';
|
||||
|
||||
export const POST = async (req: NextRequest) => {
|
||||
try {
|
||||
configManager.markSetupComplete();
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Setup marked as complete.',
|
||||
},
|
||||
{
|
||||
status: 200,
|
||||
},
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('Error marking setup as complete: ', err);
|
||||
return Response.json(
|
||||
{ message: 'An error has occurred.' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
113
apps/frontend/src/app/api/discover/route.ts
Normal file
113
apps/frontend/src/app/api/discover/route.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
import { searchSearxng } from '@/lib/searxng';
|
||||
import { getSearxngURL } from '@/lib/config/serverRegistry';
|
||||
|
||||
const websitesForTopic = {
|
||||
tech: {
|
||||
query: ['technology news', 'latest tech', 'AI', 'science and innovation'],
|
||||
links: ['techcrunch.com', 'wired.com', 'theverge.com'],
|
||||
},
|
||||
finance: {
|
||||
query: ['finance news', 'economy', 'stock market', 'investing'],
|
||||
links: ['bloomberg.com', 'cnbc.com', 'marketwatch.com'],
|
||||
},
|
||||
art: {
|
||||
query: ['art news', 'culture', 'modern art', 'cultural events'],
|
||||
links: ['artnews.com', 'hyperallergic.com', 'theartnewspaper.com'],
|
||||
},
|
||||
sports: {
|
||||
query: ['sports news', 'latest sports', 'cricket football tennis'],
|
||||
links: ['espn.com', 'bbc.com/sport', 'skysports.com'],
|
||||
},
|
||||
entertainment: {
|
||||
query: ['entertainment news', 'movies', 'TV shows', 'celebrities'],
|
||||
links: ['hollywoodreporter.com', 'variety.com', 'deadline.com'],
|
||||
},
|
||||
};
|
||||
|
||||
type Topic = keyof typeof websitesForTopic;
|
||||
|
||||
export const GET = async (req: Request) => {
|
||||
try {
|
||||
const searxngURL = getSearxngURL();
|
||||
if (!searxngURL?.trim()) {
|
||||
return Response.json(
|
||||
{
|
||||
message:
|
||||
'SearxNG is not configured. Please set the SearxNG URL in Settings → Search.',
|
||||
},
|
||||
{ status: 503 },
|
||||
);
|
||||
}
|
||||
|
||||
const params = new URL(req.url).searchParams;
|
||||
|
||||
const mode: 'normal' | 'preview' =
|
||||
(params.get('mode') as 'normal' | 'preview') || 'normal';
|
||||
const topic: Topic = (params.get('topic') as Topic) || 'tech';
|
||||
|
||||
const selectedTopic = websitesForTopic[topic];
|
||||
|
||||
let data = [];
|
||||
|
||||
if (mode === 'normal') {
|
||||
const seenUrls = new Set();
|
||||
|
||||
data = (
|
||||
await Promise.all(
|
||||
selectedTopic.links.flatMap((link) =>
|
||||
selectedTopic.query.map(async (query) => {
|
||||
return (
|
||||
await searchSearxng(`site:${link} ${query}`, {
|
||||
engines: ['bing news'],
|
||||
pageno: 1,
|
||||
language: 'en',
|
||||
})
|
||||
).results;
|
||||
}),
|
||||
),
|
||||
)
|
||||
)
|
||||
.flat()
|
||||
.filter((item) => {
|
||||
const url = item.url?.toLowerCase().trim();
|
||||
if (seenUrls.has(url)) return false;
|
||||
seenUrls.add(url);
|
||||
return true;
|
||||
})
|
||||
.sort(() => Math.random() - 0.5);
|
||||
} else {
|
||||
data = (
|
||||
await searchSearxng(
|
||||
`site:${selectedTopic.links[Math.floor(Math.random() * selectedTopic.links.length)]} ${selectedTopic.query[Math.floor(Math.random() * selectedTopic.query.length)]}`,
|
||||
{
|
||||
engines: ['bing news'],
|
||||
pageno: 1,
|
||||
language: 'en',
|
||||
},
|
||||
)
|
||||
).results;
|
||||
}
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
blogs: data,
|
||||
},
|
||||
{
|
||||
status: 200,
|
||||
},
|
||||
);
|
||||
} catch (err) {
|
||||
const message =
|
||||
err instanceof Error ? err.message : 'An error has occurred';
|
||||
console.error(`Discover route error:`, err);
|
||||
return Response.json(
|
||||
{
|
||||
message:
|
||||
message.includes('fetch') || message.includes('ECONNREFUSED')
|
||||
? 'Cannot connect to SearxNG. Check that it is running and the URL is correct in Settings.'
|
||||
: message,
|
||||
},
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
41
apps/frontend/src/app/api/images/route.ts
Normal file
41
apps/frontend/src/app/api/images/route.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import searchImages from '@/lib/agents/media/image';
|
||||
import ModelRegistry from '@/lib/models/registry';
|
||||
import { ModelWithProvider } from '@/lib/models/types';
|
||||
|
||||
interface ImageSearchBody {
|
||||
query: string;
|
||||
chatHistory: any[];
|
||||
chatModel: ModelWithProvider;
|
||||
}
|
||||
|
||||
export const POST = async (req: Request) => {
|
||||
try {
|
||||
const body: ImageSearchBody = await req.json();
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
const llm = await registry.loadChatModel(
|
||||
body.chatModel.providerId,
|
||||
body.chatModel.key,
|
||||
);
|
||||
|
||||
const images = await searchImages(
|
||||
{
|
||||
chatHistory: body.chatHistory.map(([role, content]) => ({
|
||||
role: role === 'human' ? 'user' : 'assistant',
|
||||
content,
|
||||
})),
|
||||
query: body.query,
|
||||
},
|
||||
llm,
|
||||
);
|
||||
|
||||
return Response.json({ images }, { status: 200 });
|
||||
} catch (err) {
|
||||
console.error(`An error occurred while searching images: ${err}`);
|
||||
return Response.json(
|
||||
{ message: 'An error occurred while searching images' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
94
apps/frontend/src/app/api/providers/[id]/models/route.ts
Normal file
94
apps/frontend/src/app/api/providers/[id]/models/route.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import ModelRegistry from '@/lib/models/registry';
|
||||
import { Model } from '@/lib/models/types';
|
||||
import { NextRequest } from 'next/server';
|
||||
|
||||
export const POST = async (
|
||||
req: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) => {
|
||||
try {
|
||||
const { id } = await params;
|
||||
|
||||
const body: Partial<Model> & { type: 'embedding' | 'chat' } =
|
||||
await req.json();
|
||||
|
||||
if (!body.key || !body.name) {
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Key and name must be provided',
|
||||
},
|
||||
{
|
||||
status: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
await registry.addProviderModel(id, body.type, body);
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Model added successfully',
|
||||
},
|
||||
{
|
||||
status: 200,
|
||||
},
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('An error occurred while adding provider model', err);
|
||||
return Response.json(
|
||||
{
|
||||
message: 'An error has occurred.',
|
||||
},
|
||||
{
|
||||
status: 500,
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const DELETE = async (
|
||||
req: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) => {
|
||||
try {
|
||||
const { id } = await params;
|
||||
|
||||
const body: { key: string; type: 'embedding' | 'chat' } = await req.json();
|
||||
|
||||
if (!body.key) {
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Key and name must be provided',
|
||||
},
|
||||
{
|
||||
status: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
await registry.removeProviderModel(id, body.type, body.key);
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Model added successfully',
|
||||
},
|
||||
{
|
||||
status: 200,
|
||||
},
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('An error occurred while deleting provider model', err);
|
||||
return Response.json(
|
||||
{
|
||||
message: 'An error has occurred.',
|
||||
},
|
||||
{
|
||||
status: 500,
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
89
apps/frontend/src/app/api/providers/[id]/route.ts
Normal file
89
apps/frontend/src/app/api/providers/[id]/route.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import ModelRegistry from '@/lib/models/registry';
|
||||
import { NextRequest } from 'next/server';
|
||||
|
||||
export const DELETE = async (
|
||||
req: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) => {
|
||||
try {
|
||||
const { id } = await params;
|
||||
|
||||
if (!id) {
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Provider ID is required.',
|
||||
},
|
||||
{
|
||||
status: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
await registry.removeProvider(id);
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Provider deleted successfully.',
|
||||
},
|
||||
{
|
||||
status: 200,
|
||||
},
|
||||
);
|
||||
} catch (err: any) {
|
||||
console.error('An error occurred while deleting provider', err.message);
|
||||
return Response.json(
|
||||
{
|
||||
message: 'An error has occurred.',
|
||||
},
|
||||
{
|
||||
status: 500,
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const PATCH = async (
|
||||
req: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) => {
|
||||
try {
|
||||
const body = await req.json();
|
||||
const { name, config } = body;
|
||||
const { id } = await params;
|
||||
|
||||
if (!id || !name || !config) {
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Missing required fields.',
|
||||
},
|
||||
{
|
||||
status: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
const updatedProvider = await registry.updateProvider(id, name, config);
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
provider: updatedProvider,
|
||||
},
|
||||
{
|
||||
status: 200,
|
||||
},
|
||||
);
|
||||
} catch (err: any) {
|
||||
console.error('An error occurred while updating provider', err.message);
|
||||
return Response.json(
|
||||
{
|
||||
message: 'An error has occurred.',
|
||||
},
|
||||
{
|
||||
status: 500,
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
74
apps/frontend/src/app/api/providers/route.ts
Normal file
74
apps/frontend/src/app/api/providers/route.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import ModelRegistry from '@/lib/models/registry';
|
||||
import { NextRequest } from 'next/server';
|
||||
|
||||
export const GET = async (req: Request) => {
|
||||
try {
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
const activeProviders = await registry.getActiveProviders();
|
||||
|
||||
const filteredProviders = activeProviders.filter((p) => {
|
||||
return !p.chatModels.some((m) => m.key === 'error');
|
||||
});
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
providers: filteredProviders,
|
||||
},
|
||||
{
|
||||
status: 200,
|
||||
},
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('An error occurred while fetching providers', err);
|
||||
return Response.json(
|
||||
{
|
||||
message: 'An error has occurred.',
|
||||
},
|
||||
{
|
||||
status: 500,
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const POST = async (req: NextRequest) => {
|
||||
try {
|
||||
const body = await req.json();
|
||||
const { type, name, config } = body;
|
||||
|
||||
if (!type || !name || !config) {
|
||||
return Response.json(
|
||||
{
|
||||
message: 'Missing required fields.',
|
||||
},
|
||||
{
|
||||
status: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
const newProvider = await registry.addProvider(type, name, config);
|
||||
|
||||
return Response.json(
|
||||
{
|
||||
provider: newProvider,
|
||||
},
|
||||
{
|
||||
status: 200,
|
||||
},
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('An error occurred while creating provider', err);
|
||||
return Response.json(
|
||||
{
|
||||
message: 'An error has occurred.',
|
||||
},
|
||||
{
|
||||
status: 500,
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
93
apps/frontend/src/app/api/reconnect/[id]/route.ts
Normal file
93
apps/frontend/src/app/api/reconnect/[id]/route.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
import SessionManager from '@/lib/session';
|
||||
|
||||
export const POST = async (
|
||||
req: Request,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) => {
|
||||
try {
|
||||
const { id } = await params;
|
||||
|
||||
const session = SessionManager.getSession(id);
|
||||
|
||||
if (!session) {
|
||||
return Response.json({ message: 'Session not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
const responseStream = new TransformStream();
|
||||
const writer = responseStream.writable.getWriter();
|
||||
const encoder = new TextEncoder();
|
||||
|
||||
const disconnect = session.subscribe((event, data) => {
|
||||
if (event === 'data') {
|
||||
if (data.type === 'block') {
|
||||
writer.write(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'block',
|
||||
block: data.block,
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
} else if (data.type === 'updateBlock') {
|
||||
writer.write(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'updateBlock',
|
||||
blockId: data.blockId,
|
||||
patch: data.patch,
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
} else if (data.type === 'researchComplete') {
|
||||
writer.write(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'researchComplete',
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
}
|
||||
} else if (event === 'end') {
|
||||
writer.write(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'messageEnd',
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
writer.close();
|
||||
disconnect();
|
||||
} else if (event === 'error') {
|
||||
writer.write(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'error',
|
||||
data: data.data,
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
writer.close();
|
||||
disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
req.signal.addEventListener('abort', () => {
|
||||
disconnect();
|
||||
writer.close();
|
||||
});
|
||||
|
||||
return new Response(responseStream.readable, {
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream',
|
||||
Connection: 'keep-alive',
|
||||
'Cache-Control': 'no-cache, no-transform',
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error in reconnecting to session stream: ', err);
|
||||
return Response.json(
|
||||
{ message: 'An error has occurred.' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
208
apps/frontend/src/app/api/search/route.ts
Normal file
208
apps/frontend/src/app/api/search/route.ts
Normal file
@@ -0,0 +1,208 @@
|
||||
import ModelRegistry from '@/lib/models/registry';
|
||||
import { ModelWithProvider } from '@/lib/models/types';
|
||||
import SessionManager from '@/lib/session';
|
||||
import { ChatTurnMessage } from '@/lib/types';
|
||||
import { SearchSources } from '@/lib/agents/search/types';
|
||||
import APISearchAgent from '@/lib/agents/search/api';
|
||||
|
||||
interface ChatRequestBody {
|
||||
optimizationMode: 'speed' | 'balanced' | 'quality';
|
||||
sources: SearchSources[];
|
||||
chatModel: ModelWithProvider;
|
||||
embeddingModel: ModelWithProvider;
|
||||
query: string;
|
||||
history: Array<[string, string]>;
|
||||
stream?: boolean;
|
||||
systemInstructions?: string;
|
||||
}
|
||||
|
||||
export const POST = async (req: Request) => {
|
||||
try {
|
||||
const body: ChatRequestBody = await req.json();
|
||||
|
||||
if (!body.sources || !body.query) {
|
||||
return Response.json(
|
||||
{ message: 'Missing sources or query' },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
body.history = body.history || [];
|
||||
body.optimizationMode = body.optimizationMode || 'speed';
|
||||
body.stream = body.stream || false;
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
const [llm, embeddings] = await Promise.all([
|
||||
registry.loadChatModel(body.chatModel.providerId, body.chatModel.key),
|
||||
registry.loadEmbeddingModel(
|
||||
body.embeddingModel.providerId,
|
||||
body.embeddingModel.key,
|
||||
),
|
||||
]);
|
||||
|
||||
const history: ChatTurnMessage[] = body.history.map((msg) => {
|
||||
return msg[0] === 'human'
|
||||
? { role: 'user', content: msg[1] }
|
||||
: { role: 'assistant', content: msg[1] };
|
||||
});
|
||||
|
||||
const session = SessionManager.createSession();
|
||||
|
||||
const agent = new APISearchAgent();
|
||||
|
||||
agent.searchAsync(session, {
|
||||
chatHistory: history,
|
||||
config: {
|
||||
embedding: embeddings,
|
||||
llm: llm,
|
||||
sources: body.sources,
|
||||
mode: body.optimizationMode,
|
||||
fileIds: [],
|
||||
systemInstructions: body.systemInstructions || '',
|
||||
},
|
||||
followUp: body.query,
|
||||
chatId: crypto.randomUUID(),
|
||||
messageId: crypto.randomUUID(),
|
||||
});
|
||||
|
||||
if (!body.stream) {
|
||||
return new Promise(
|
||||
(
|
||||
resolve: (value: Response) => void,
|
||||
reject: (value: Response) => void,
|
||||
) => {
|
||||
let message = '';
|
||||
let sources: any[] = [];
|
||||
|
||||
session.subscribe((event: string, data: Record<string, any>) => {
|
||||
if (event === 'data') {
|
||||
try {
|
||||
if (data.type === 'response') {
|
||||
message += data.data;
|
||||
} else if (data.type === 'searchResults') {
|
||||
sources = data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
reject(
|
||||
Response.json(
|
||||
{ message: 'Error parsing data' },
|
||||
{ status: 500 },
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (event === 'end') {
|
||||
resolve(Response.json({ message, sources }, { status: 200 }));
|
||||
}
|
||||
|
||||
if (event === 'error') {
|
||||
reject(
|
||||
Response.json(
|
||||
{ message: 'Search error', error: data },
|
||||
{ status: 500 },
|
||||
),
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const encoder = new TextEncoder();
|
||||
|
||||
const abortController = new AbortController();
|
||||
const { signal } = abortController;
|
||||
|
||||
const stream = new ReadableStream({
|
||||
start(controller) {
|
||||
let sources: any[] = [];
|
||||
|
||||
controller.enqueue(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'init',
|
||||
data: 'Stream connected',
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
|
||||
signal.addEventListener('abort', () => {
|
||||
session.removeAllListeners();
|
||||
|
||||
try {
|
||||
controller.close();
|
||||
} catch (error) {}
|
||||
});
|
||||
|
||||
session.subscribe((event: string, data: Record<string, any>) => {
|
||||
if (event === 'data') {
|
||||
if (signal.aborted) return;
|
||||
|
||||
try {
|
||||
if (data.type === 'response') {
|
||||
controller.enqueue(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'response',
|
||||
data: data.data,
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
} else if (data.type === 'searchResults') {
|
||||
sources = data.data;
|
||||
controller.enqueue(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'sources',
|
||||
data: sources,
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
controller.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
if (event === 'end') {
|
||||
if (signal.aborted) return;
|
||||
|
||||
controller.enqueue(
|
||||
encoder.encode(
|
||||
JSON.stringify({
|
||||
type: 'done',
|
||||
}) + '\n',
|
||||
),
|
||||
);
|
||||
controller.close();
|
||||
}
|
||||
|
||||
if (event === 'error') {
|
||||
if (signal.aborted) return;
|
||||
|
||||
controller.error(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
abortController.abort();
|
||||
},
|
||||
});
|
||||
|
||||
return new Response(stream, {
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream',
|
||||
'Cache-Control': 'no-cache, no-transform',
|
||||
Connection: 'keep-alive',
|
||||
},
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.error(`Error in getting search results: ${err.message}`);
|
||||
return Response.json(
|
||||
{ message: 'An error has occurred.' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
39
apps/frontend/src/app/api/suggestions/route.ts
Normal file
39
apps/frontend/src/app/api/suggestions/route.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import generateSuggestions from '@/lib/agents/suggestions';
|
||||
import ModelRegistry from '@/lib/models/registry';
|
||||
import { ModelWithProvider } from '@/lib/models/types';
|
||||
|
||||
interface SuggestionsGenerationBody {
|
||||
chatHistory: any[];
|
||||
chatModel: ModelWithProvider;
|
||||
}
|
||||
|
||||
export const POST = async (req: Request) => {
|
||||
try {
|
||||
const body: SuggestionsGenerationBody = await req.json();
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
const llm = await registry.loadChatModel(
|
||||
body.chatModel.providerId,
|
||||
body.chatModel.key,
|
||||
);
|
||||
|
||||
const suggestions = await generateSuggestions(
|
||||
{
|
||||
chatHistory: body.chatHistory.map(([role, content]) => ({
|
||||
role: role === 'human' ? 'user' : 'assistant',
|
||||
content,
|
||||
})),
|
||||
},
|
||||
llm,
|
||||
);
|
||||
|
||||
return Response.json({ suggestions }, { status: 200 });
|
||||
} catch (err) {
|
||||
console.error(`An error occurred while generating suggestions: ${err}`);
|
||||
return Response.json(
|
||||
{ message: 'An error occurred while generating suggestions' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
40
apps/frontend/src/app/api/uploads/route.ts
Normal file
40
apps/frontend/src/app/api/uploads/route.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import ModelRegistry from '@/lib/models/registry';
|
||||
import UploadManager from '@/lib/uploads/manager';
|
||||
|
||||
export async function POST(req: Request) {
|
||||
try {
|
||||
const formData = await req.formData();
|
||||
|
||||
const files = formData.getAll('files') as File[];
|
||||
const embeddingModel = formData.get('embedding_model_key') as string;
|
||||
const embeddingModelProvider = formData.get('embedding_model_provider_id') as string;
|
||||
|
||||
if (!embeddingModel || !embeddingModelProvider) {
|
||||
return NextResponse.json(
|
||||
{ message: 'Missing embedding model or provider' },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
const model = await registry.loadEmbeddingModel(embeddingModelProvider, embeddingModel);
|
||||
|
||||
const uploadManager = new UploadManager({
|
||||
embeddingModel: model,
|
||||
})
|
||||
|
||||
const processedFiles = await uploadManager.processFiles(files);
|
||||
|
||||
return NextResponse.json({
|
||||
files: processedFiles,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error uploading file:', error);
|
||||
return NextResponse.json(
|
||||
{ message: 'An error has occurred.' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
41
apps/frontend/src/app/api/videos/route.ts
Normal file
41
apps/frontend/src/app/api/videos/route.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import handleVideoSearch from '@/lib/agents/media/video';
|
||||
import ModelRegistry from '@/lib/models/registry';
|
||||
import { ModelWithProvider } from '@/lib/models/types';
|
||||
|
||||
interface VideoSearchBody {
|
||||
query: string;
|
||||
chatHistory: any[];
|
||||
chatModel: ModelWithProvider;
|
||||
}
|
||||
|
||||
export const POST = async (req: Request) => {
|
||||
try {
|
||||
const body: VideoSearchBody = await req.json();
|
||||
|
||||
const registry = new ModelRegistry();
|
||||
|
||||
const llm = await registry.loadChatModel(
|
||||
body.chatModel.providerId,
|
||||
body.chatModel.key,
|
||||
);
|
||||
|
||||
const videos = await handleVideoSearch(
|
||||
{
|
||||
chatHistory: body.chatHistory.map(([role, content]) => ({
|
||||
role: role === 'human' ? 'user' : 'assistant',
|
||||
content,
|
||||
})),
|
||||
query: body.query,
|
||||
},
|
||||
llm,
|
||||
);
|
||||
|
||||
return Response.json({ videos }, { status: 200 });
|
||||
} catch (err) {
|
||||
console.error(`An error occurred while searching videos: ${err}`);
|
||||
return Response.json(
|
||||
{ message: 'An error occurred while searching videos' },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
};
|
||||
174
apps/frontend/src/app/api/weather/route.ts
Normal file
174
apps/frontend/src/app/api/weather/route.ts
Normal file
@@ -0,0 +1,174 @@
|
||||
export const POST = async (req: Request) => {
|
||||
try {
|
||||
const body: {
|
||||
lat: number;
|
||||
lng: number;
|
||||
measureUnit: 'Imperial' | 'Metric';
|
||||
} = 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}¤t=weather_code,temperature_2m,is_day,relative_humidity_2m,wind_speed_10m&timezone=auto${
|
||||
body.measureUnit === 'Metric' ? '' : '&temperature_unit=fahrenheit'
|
||||
}${body.measureUnit === 'Metric' ? '' : '&wind_speed_unit=mph'}`,
|
||||
);
|
||||
|
||||
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';
|
||||
windSpeedUnit: 'm/s' | 'mph';
|
||||
} = {
|
||||
temperature: data.current.temperature_2m,
|
||||
condition: '',
|
||||
humidity: data.current.relative_humidity_2m,
|
||||
windSpeed: data.current.wind_speed_10m,
|
||||
icon: '',
|
||||
temperatureUnit: body.measureUnit === 'Metric' ? 'C' : 'F',
|
||||
windSpeedUnit: body.measureUnit === 'Metric' ? 'm/s' : 'mph',
|
||||
};
|
||||
|
||||
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,
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
5
apps/frontend/src/app/c/[chatId]/page.tsx
Normal file
5
apps/frontend/src/app/c/[chatId]/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
'use client';
|
||||
|
||||
import ChatWindow from '@/components/ChatWindow';
|
||||
|
||||
export default ChatWindow;
|
||||
294
apps/frontend/src/app/discover/page.tsx
Normal file
294
apps/frontend/src/app/discover/page.tsx
Normal file
@@ -0,0 +1,294 @@
|
||||
'use client';
|
||||
|
||||
import { Globe2Icon, Settings } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { cn } from '@/lib/utils';
|
||||
import SmallNewsCard from '@/components/Discover/SmallNewsCard';
|
||||
import MajorNewsCard from '@/components/Discover/MajorNewsCard';
|
||||
|
||||
export interface Discover {
|
||||
title: string;
|
||||
content: string;
|
||||
url: string;
|
||||
thumbnail: string;
|
||||
}
|
||||
|
||||
const topics: { key: string; display: string }[] = [
|
||||
{
|
||||
display: 'Tech & Science',
|
||||
key: 'tech',
|
||||
},
|
||||
{
|
||||
display: 'Finance',
|
||||
key: 'finance',
|
||||
},
|
||||
{
|
||||
display: 'Art & Culture',
|
||||
key: 'art',
|
||||
},
|
||||
{
|
||||
display: 'Sports',
|
||||
key: 'sports',
|
||||
},
|
||||
{
|
||||
display: 'Entertainment',
|
||||
key: 'entertainment',
|
||||
},
|
||||
];
|
||||
|
||||
const Page = () => {
|
||||
const [discover, setDiscover] = useState<Discover[] | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activeTopic, setActiveTopic] = useState<string>(topics[0].key);
|
||||
const [setupRequired, setSetupRequired] = useState(false);
|
||||
|
||||
const fetchArticles = async (topic: string) => {
|
||||
setLoading(true);
|
||||
setSetupRequired(false);
|
||||
try {
|
||||
const res = await fetch(`/api/discover?topic=${topic}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(data.message || 'Failed to load articles');
|
||||
}
|
||||
|
||||
data.blogs = data.blogs.filter((blog: Discover) => blog.thumbnail);
|
||||
|
||||
setDiscover(data.blogs);
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : 'Error fetching data';
|
||||
if (message.includes('SearxNG is not configured')) {
|
||||
setSetupRequired(true);
|
||||
setDiscover(null);
|
||||
} else {
|
||||
console.error('Error fetching discover data:', message);
|
||||
toast.error(message);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchArticles(activeTopic);
|
||||
}, [activeTopic]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div className="flex flex-col pt-10 border-b border-light-200/20 dark:border-dark-200/20 pb-6 px-2">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
||||
<div className="flex items-center justify-center">
|
||||
<Globe2Icon size={45} className="mb-2.5" />
|
||||
<h1
|
||||
className="text-5xl font-normal p-2"
|
||||
style={{ fontFamily: 'PP Editorial, serif' }}
|
||||
>
|
||||
Discover
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex flex-row items-center space-x-2 overflow-x-auto">
|
||||
{topics.map((t, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
'border-[0.1px] rounded-full text-sm px-3 py-1 text-nowrap transition duration-200 cursor-pointer',
|
||||
activeTopic === t.key
|
||||
? 'text-cyan-700 dark:text-cyan-300 bg-cyan-300/20 border-cyan-700/60 dar:bg-cyan-300/30 dark:border-cyan-300/40'
|
||||
: 'border-black/30 dark:border-white/30 text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white hover:border-black/40 dark:hover:border-white/40 hover:bg-black/5 dark:hover:bg-white/5',
|
||||
)}
|
||||
onClick={() => setActiveTopic(t.key)}
|
||||
>
|
||||
<span>{t.display}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex flex-row items-center justify-center min-h-screen">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-8 h-8 text-light-200 fill-light-secondary dark:text-[#202020] animate-spin dark:fill-[#ffffff3b]"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100.003 78.2051 78.1951 100.003 50.5908 100C22.9765 99.9972 0.997224 78.018 1 50.4037C1.00281 22.7993 22.8108 0.997224 50.4251 1C78.0395 1.00281 100.018 22.8108 100 50.4251ZM9.08164 50.594C9.06312 73.3997 27.7909 92.1272 50.5966 92.1457C73.4023 92.1642 92.1298 73.4365 92.1483 50.6308C92.1669 27.8251 73.4392 9.0973 50.6335 9.07878C27.8278 9.06026 9.10003 27.787 9.08164 50.594Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4037 97.8624 35.9116 96.9801 33.5533C95.1945 28.8227 92.871 24.3692 90.0681 20.348C85.6237 14.1775 79.4473 9.36872 72.0454 6.45794C64.6435 3.54717 56.3134 2.65431 48.3133 3.89319C45.869 4.27179 44.3768 6.77534 45.014 9.20079C45.6512 11.6262 48.1343 13.0956 50.5786 12.717C56.5073 11.8281 62.5542 12.5399 68.0406 14.7911C73.527 17.0422 78.2187 20.7487 81.5841 25.4923C83.7976 28.5886 85.4467 32.059 86.4416 35.7474C87.1273 38.1189 89.5423 39.6781 91.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
) : setupRequired ? (
|
||||
<div className="flex flex-col items-center justify-center min-h-[50vh] gap-4 px-4 text-center">
|
||||
<div className="rounded-full p-4 bg-cyan-300/10 dark:bg-cyan-300/5">
|
||||
<Settings size={48} className="text-cyan-600 dark:text-cyan-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg font-medium text-black dark:text-white">
|
||||
Configure SearxNG to discover articles
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-black/60 dark:text-white/60 max-w-md">
|
||||
Open Settings (gear icon in the navbar), go to Search, and enter
|
||||
your SearxNG URL (e.g. http://localhost:8080)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4 pb-28 pt-5 lg:pb-8 w-full">
|
||||
<div className="block lg:hidden">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{discover?.map((item, i) => (
|
||||
<SmallNewsCard key={`mobile-${i}`} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:block">
|
||||
{discover &&
|
||||
discover.length > 0 &&
|
||||
(() => {
|
||||
const sections = [];
|
||||
let index = 0;
|
||||
|
||||
while (index < discover.length) {
|
||||
if (sections.length > 0) {
|
||||
sections.push(
|
||||
<hr
|
||||
key={`sep-${index}`}
|
||||
className="border-t border-light-200/20 dark:border-dark-200/20 my-3 w-full"
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
if (index < discover.length) {
|
||||
sections.push(
|
||||
<MajorNewsCard
|
||||
key={`major-${index}`}
|
||||
item={discover[index]}
|
||||
isLeft={false}
|
||||
/>,
|
||||
);
|
||||
index++;
|
||||
}
|
||||
|
||||
if (index < discover.length) {
|
||||
sections.push(
|
||||
<hr
|
||||
key={`sep-${index}-after`}
|
||||
className="border-t border-light-200/20 dark:border-dark-200/20 my-3 w-full"
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
if (index < discover.length) {
|
||||
const smallCards = discover.slice(index, index + 3);
|
||||
sections.push(
|
||||
<div
|
||||
key={`small-group-${index}`}
|
||||
className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4"
|
||||
>
|
||||
{smallCards.map((item, i) => (
|
||||
<SmallNewsCard
|
||||
key={`small-${index + i}`}
|
||||
item={item}
|
||||
/>
|
||||
))}
|
||||
</div>,
|
||||
);
|
||||
index += 3;
|
||||
}
|
||||
|
||||
if (index < discover.length) {
|
||||
sections.push(
|
||||
<hr
|
||||
key={`sep-${index}-after-small`}
|
||||
className="border-t border-light-200/20 dark:border-dark-200/20 my-3 w-full"
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
if (index < discover.length - 1) {
|
||||
const twoMajorCards = discover.slice(index, index + 2);
|
||||
twoMajorCards.forEach((item, i) => {
|
||||
sections.push(
|
||||
<MajorNewsCard
|
||||
key={`double-${index + i}`}
|
||||
item={item}
|
||||
isLeft={i === 0}
|
||||
/>,
|
||||
);
|
||||
if (i === 0) {
|
||||
sections.push(
|
||||
<hr
|
||||
key={`sep-double-${index + i}`}
|
||||
className="border-t border-light-200/20 dark:border-dark-200/20 my-3 w-full"
|
||||
/>,
|
||||
);
|
||||
}
|
||||
});
|
||||
index += 2;
|
||||
} else if (index < discover.length) {
|
||||
sections.push(
|
||||
<MajorNewsCard
|
||||
key={`final-major-${index}`}
|
||||
item={discover[index]}
|
||||
isLeft={true}
|
||||
/>,
|
||||
);
|
||||
index++;
|
||||
}
|
||||
|
||||
if (index < discover.length) {
|
||||
sections.push(
|
||||
<hr
|
||||
key={`sep-${index}-after-major`}
|
||||
className="border-t border-light-200/20 dark:border-dark-200/20 my-3 w-full"
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
if (index < discover.length) {
|
||||
const smallCards = discover.slice(index, index + 3);
|
||||
sections.push(
|
||||
<div
|
||||
key={`small-group-2-${index}`}
|
||||
className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4"
|
||||
>
|
||||
{smallCards.map((item, i) => (
|
||||
<SmallNewsCard
|
||||
key={`small-2-${index + i}`}
|
||||
item={item}
|
||||
/>
|
||||
))}
|
||||
</div>,
|
||||
);
|
||||
index += 3;
|
||||
}
|
||||
}
|
||||
|
||||
return sections;
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
99
apps/frontend/src/app/globals.css
Normal file
99
apps/frontend/src/app/globals.css
Normal file
@@ -0,0 +1,99 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: 'PP Editorial';
|
||||
src: url('/fonts/pp-ed-ul.otf') format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
.overflow-hidden-scrollable {
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.overflow-hidden-scrollable::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #e8edf1 transparent; /* light-200 */
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: #e8edf1; /* light-200 */
|
||||
border-radius: 3px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: #d0d7de; /* light-300 */
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
* {
|
||||
scrollbar-color: #21262d transparent; /* dark-200 */
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: #21262d; /* dark-200 */
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: #30363d; /* dark-300 */
|
||||
}
|
||||
}
|
||||
|
||||
:root.dark *,
|
||||
html.dark *,
|
||||
body.dark * {
|
||||
scrollbar-color: #21262d transparent; /* dark-200 */
|
||||
}
|
||||
|
||||
:root.dark *::-webkit-scrollbar-thumb,
|
||||
html.dark *::-webkit-scrollbar-thumb,
|
||||
body.dark *::-webkit-scrollbar-thumb {
|
||||
background: #21262d; /* dark-200 */
|
||||
}
|
||||
|
||||
:root.dark *::-webkit-scrollbar-thumb:hover,
|
||||
html.dark *::-webkit-scrollbar-thumb:hover,
|
||||
body.dark *::-webkit-scrollbar-thumb:hover {
|
||||
background: #30363d; /* dark-300 */
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
select,
|
||||
textarea,
|
||||
input {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
59
apps/frontend/src/app/layout.tsx
Normal file
59
apps/frontend/src/app/layout.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
import type { Metadata } from 'next';
|
||||
import { Montserrat } from 'next/font/google';
|
||||
import './globals.css';
|
||||
import { cn } from '@/lib/utils';
|
||||
import Sidebar from '@/components/Sidebar';
|
||||
import { Toaster } from 'sonner';
|
||||
import ThemeProvider from '@/components/theme/Provider';
|
||||
import configManager from '@/lib/config';
|
||||
import SetupWizard from '@/components/Setup/SetupWizard';
|
||||
import { ChatProvider } from '@/lib/hooks/useChat';
|
||||
|
||||
const montserrat = Montserrat({
|
||||
weight: ['300', '400', '500', '700'],
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
fallback: ['Arial', 'sans-serif'],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'GooSeek - Chat with the internet',
|
||||
description:
|
||||
'GooSeek is an AI powered chatbot that is connected to the internet.',
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const setupComplete = configManager.isSetupComplete();
|
||||
const configSections = configManager.getUIConfigSections();
|
||||
|
||||
return (
|
||||
<html className="h-full" lang="en" suppressHydrationWarning>
|
||||
<body className={cn('h-full antialiased', montserrat.className)}>
|
||||
<ThemeProvider>
|
||||
{setupComplete ? (
|
||||
<ChatProvider>
|
||||
<Sidebar>{children}</Sidebar>
|
||||
<Toaster
|
||||
toastOptions={{
|
||||
unstyled: true,
|
||||
classNames: {
|
||||
toast:
|
||||
'bg-light-secondary dark:bg-dark-secondary dark:text-white/70 text-black-70 rounded-lg p-4 flex flex-row items-center space-x-2',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ChatProvider>
|
||||
) : (
|
||||
<SetupWizard configSections={configSections} />
|
||||
)}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
12
apps/frontend/src/app/library/layout.tsx
Normal file
12
apps/frontend/src/app/library/layout.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { Metadata } from 'next';
|
||||
import React from 'react';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Library - GooSeek',
|
||||
};
|
||||
|
||||
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||
return <div>{children}</div>;
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
178
apps/frontend/src/app/library/page.tsx
Normal file
178
apps/frontend/src/app/library/page.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
'use client';
|
||||
|
||||
import DeleteChat from '@/components/DeleteChat';
|
||||
import { formatTimeDifference } from '@/lib/utils';
|
||||
import { BookOpenText, ClockIcon, FileText, Globe2Icon } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export interface Chat {
|
||||
id: string;
|
||||
title: string;
|
||||
createdAt: string;
|
||||
sources: string[];
|
||||
files: { fileId: string; name: string }[];
|
||||
}
|
||||
|
||||
const Page = () => {
|
||||
const [chats, setChats] = useState<Chat[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchChats = async () => {
|
||||
setLoading(true);
|
||||
|
||||
const res = await fetch(`/api/chats`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
setChats(data.chats);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
fetchChats();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col pt-10 border-b border-light-200/20 dark:border-dark-200/20 pb-6 px-2">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-3">
|
||||
<div className="flex items-center justify-center">
|
||||
<BookOpenText size={45} className="mb-2.5" />
|
||||
<div className="flex flex-col">
|
||||
<h1
|
||||
className="text-5xl font-normal p-2 pb-0"
|
||||
style={{ fontFamily: 'PP Editorial, serif' }}
|
||||
>
|
||||
Library
|
||||
</h1>
|
||||
<div className="px-2 text-sm text-black/60 dark:text-white/60 text-center lg:text-left">
|
||||
Past chats, sources, and uploads.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center lg:justify-end gap-2 text-xs text-black/60 dark:text-white/60">
|
||||
<span className="inline-flex items-center gap-1 rounded-full border border-black/20 dark:border-white/20 px-2 py-0.5">
|
||||
<BookOpenText size={14} />
|
||||
{loading
|
||||
? 'Loading…'
|
||||
: `${chats.length} ${chats.length === 1 ? 'chat' : 'chats'}`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex flex-row items-center justify-center min-h-[60vh]">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-8 h-8 text-light-200 fill-light-secondary dark:text-[#202020] animate-spin dark:fill-[#ffffff3b]"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100.003 78.2051 78.1951 100.003 50.5908 100C22.9765 99.9972 0.997224 78.018 1 50.4037C1.00281 22.7993 22.8108 0.997224 50.4251 1C78.0395 1.00281 100.018 22.8108 100 50.4251ZM9.08164 50.594C9.06312 73.3997 27.7909 92.1272 50.5966 92.1457C73.4023 92.1642 92.1298 73.4365 92.1483 50.6308C92.1669 27.8251 73.4392 9.0973 50.6335 9.07878C27.8278 9.06026 9.10003 27.787 9.08164 50.594Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4037 97.8624 35.9116 96.9801 33.5533C95.1945 28.8227 92.871 24.3692 90.0681 20.348C85.6237 14.1775 79.4473 9.36872 72.0454 6.45794C64.6435 3.54717 56.3134 2.65431 48.3133 3.89319C45.869 4.27179 44.3768 6.77534 45.014 9.20079C45.6512 11.6262 48.1343 13.0956 50.5786 12.717C56.5073 11.8281 62.5542 12.5399 68.0406 14.7911C73.527 17.0422 78.2187 20.7487 81.5841 25.4923C83.7976 28.5886 85.4467 32.059 86.4416 35.7474C87.1273 38.1189 89.5423 39.6781 91.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
) : chats.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center min-h-[70vh] px-2 text-center">
|
||||
<div className="flex items-center justify-center w-12 h-12 rounded-2xl border border-light-200 dark:border-dark-200 bg-light-secondary dark:bg-dark-secondary">
|
||||
<BookOpenText className="text-black/70 dark:text-white/70" />
|
||||
</div>
|
||||
<p className="mt-2 text-black/70 dark:text-white/70 text-sm">
|
||||
No chats found.
|
||||
</p>
|
||||
<p className="mt-1 text-black/70 dark:text-white/70 text-sm">
|
||||
<Link href="/" className="text-sky-400">
|
||||
Start a new chat
|
||||
</Link>{' '}
|
||||
to see it listed here.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="pt-6 pb-28 px-2">
|
||||
<div className="rounded-2xl border border-light-200 dark:border-dark-200 overflow-hidden bg-light-primary dark:bg-dark-primary">
|
||||
{chats.map((chat, index) => {
|
||||
const sourcesLabel =
|
||||
chat.sources.length === 0
|
||||
? null
|
||||
: chat.sources.length <= 2
|
||||
? chat.sources
|
||||
.map((s) => s.charAt(0).toUpperCase() + s.slice(1))
|
||||
.join(', ')
|
||||
: `${chat.sources
|
||||
.slice(0, 2)
|
||||
.map((s) => s.charAt(0).toUpperCase() + s.slice(1))
|
||||
.join(', ')} + ${chat.sources.length - 2}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={chat.id}
|
||||
className={
|
||||
'group flex flex-col gap-2 p-4 hover:bg-light-secondary dark:hover:bg-dark-secondary transition-colors duration-200 ' +
|
||||
(index !== chats.length - 1
|
||||
? 'border-b border-light-200 dark:border-dark-200'
|
||||
: '')
|
||||
}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<Link
|
||||
href={`/c/${chat.id}`}
|
||||
className="flex-1 text-black dark:text-white text-base lg:text-lg font-medium leading-snug line-clamp-2 group-hover:text-[#24A0ED] transition duration-200"
|
||||
title={chat.title}
|
||||
>
|
||||
{chat.title}
|
||||
</Link>
|
||||
<div className="pt-0.5 shrink-0">
|
||||
<DeleteChat
|
||||
chatId={chat.id}
|
||||
chats={chats}
|
||||
setChats={setChats}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 text-black/70 dark:text-white/70">
|
||||
<span className="inline-flex items-center gap-1 text-xs">
|
||||
<ClockIcon size={14} />
|
||||
{formatTimeDifference(new Date(), chat.createdAt)} Ago
|
||||
</span>
|
||||
|
||||
{sourcesLabel && (
|
||||
<span className="inline-flex items-center gap-1 text-xs border border-black/20 dark:border-white/20 rounded-full px-2 py-0.5">
|
||||
<Globe2Icon size={14} />
|
||||
{sourcesLabel}
|
||||
</span>
|
||||
)}
|
||||
{chat.files.length > 0 && (
|
||||
<span className="inline-flex items-center gap-1 text-xs border border-black/20 dark:border-white/20 rounded-full px-2 py-0.5">
|
||||
<FileText size={14} />
|
||||
{chat.files.length}{' '}
|
||||
{chat.files.length === 1 ? 'file' : 'files'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
54
apps/frontend/src/app/manifest.ts
Normal file
54
apps/frontend/src/app/manifest.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import type { MetadataRoute } from 'next';
|
||||
|
||||
export default function manifest(): MetadataRoute.Manifest {
|
||||
return {
|
||||
name: 'GooSeek - Chat with the internet',
|
||||
short_name: 'GooSeek',
|
||||
description:
|
||||
'GooSeek 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',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
13
apps/frontend/src/app/page.tsx
Normal file
13
apps/frontend/src/app/page.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import ChatWindow from '@/components/ChatWindow';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Chat - GooSeek',
|
||||
description: 'Chat with the internet, chat with GooSeek.',
|
||||
};
|
||||
|
||||
const Home = () => {
|
||||
return <ChatWindow />;
|
||||
};
|
||||
|
||||
export default Home;
|
||||
266
apps/frontend/src/components/AssistantSteps.tsx
Normal file
266
apps/frontend/src/components/AssistantSteps.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Brain,
|
||||
Search,
|
||||
FileText,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
BookSearch,
|
||||
} from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { ResearchBlock, ResearchBlockSubStep } from '@/lib/types';
|
||||
import { useChat } from '@/lib/hooks/useChat';
|
||||
|
||||
const getStepIcon = (step: ResearchBlockSubStep) => {
|
||||
if (step.type === 'reasoning') {
|
||||
return <Brain className="w-4 h-4" />;
|
||||
} else if (step.type === 'searching' || step.type === 'upload_searching') {
|
||||
return <Search className="w-4 h-4" />;
|
||||
} else if (
|
||||
step.type === 'search_results' ||
|
||||
step.type === 'upload_search_results'
|
||||
) {
|
||||
return <FileText className="w-4 h-4" />;
|
||||
} else if (step.type === 'reading') {
|
||||
return <BookSearch className="w-4 h-4" />;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const getStepTitle = (
|
||||
step: ResearchBlockSubStep,
|
||||
isStreaming: boolean,
|
||||
): string => {
|
||||
if (step.type === 'reasoning') {
|
||||
return isStreaming && !step.reasoning ? 'Thinking...' : 'Thinking';
|
||||
} else if (step.type === 'searching') {
|
||||
return `Searching ${step.searching.length} ${step.searching.length === 1 ? 'query' : 'queries'}`;
|
||||
} else if (step.type === 'search_results') {
|
||||
return `Found ${step.reading.length} ${step.reading.length === 1 ? 'result' : 'results'}`;
|
||||
} else if (step.type === 'reading') {
|
||||
return `Reading ${step.reading.length} ${step.reading.length === 1 ? 'source' : 'sources'}`;
|
||||
} else if (step.type === 'upload_searching') {
|
||||
return 'Scanning your uploaded documents';
|
||||
} else if (step.type === 'upload_search_results') {
|
||||
return `Reading ${step.results.length} ${step.results.length === 1 ? 'document' : 'documents'}`;
|
||||
}
|
||||
|
||||
return 'Processing';
|
||||
};
|
||||
|
||||
const AssistantSteps = ({
|
||||
block,
|
||||
status,
|
||||
isLast,
|
||||
}: {
|
||||
block: ResearchBlock;
|
||||
status: 'answering' | 'completed' | 'error';
|
||||
isLast: boolean;
|
||||
}) => {
|
||||
const [isExpanded, setIsExpanded] = useState(
|
||||
isLast && status === 'answering' ? true : false,
|
||||
);
|
||||
const { researchEnded, loading } = useChat();
|
||||
|
||||
useEffect(() => {
|
||||
if (researchEnded && isLast) {
|
||||
setIsExpanded(false);
|
||||
} else if (status === 'answering' && isLast) {
|
||||
setIsExpanded(true);
|
||||
}
|
||||
}, [researchEnded, status]);
|
||||
|
||||
if (!block || block.data.subSteps.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-lg bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 overflow-hidden">
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="w-full flex items-center justify-between p-3 hover:bg-light-200 dark:hover:bg-dark-200 transition duration-200"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Brain className="w-4 h-4 text-black dark:text-white" />
|
||||
<span className="text-sm font-medium text-black dark:text-white">
|
||||
Research Progress ({block.data.subSteps.length}{' '}
|
||||
{block.data.subSteps.length === 1 ? 'step' : 'steps'})
|
||||
</span>
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="w-4 h-4 text-black/70 dark:text-white/70" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 text-black/70 dark:text-white/70" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="border-t border-light-200 dark:border-dark-200"
|
||||
>
|
||||
<div className="p-3 space-y-2">
|
||||
{block.data.subSteps.map((step, index) => {
|
||||
const isLastStep = index === block.data.subSteps.length - 1;
|
||||
const isStreaming = loading && isLastStep && !researchEnded;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={step.id}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.2, delay: 0 }}
|
||||
className="flex gap-2"
|
||||
>
|
||||
<div className="flex flex-col items-center -mt-0.5">
|
||||
<div
|
||||
className={`rounded-full p-1.5 bg-light-100 dark:bg-dark-100 text-black/70 dark:text-white/70 ${isStreaming ? 'animate-pulse' : ''}`}
|
||||
>
|
||||
{getStepIcon(step)}
|
||||
</div>
|
||||
{index < block.data.subSteps.length - 1 && (
|
||||
<div className="w-0.5 flex-1 min-h-[20px] bg-light-200 dark:bg-dark-200 mt-1.5" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pb-1">
|
||||
<span className="text-sm font-medium text-black dark:text-white">
|
||||
{getStepTitle(step, isStreaming)}
|
||||
</span>
|
||||
|
||||
{step.type === 'reasoning' && (
|
||||
<>
|
||||
{step.reasoning && (
|
||||
<p className="text-xs text-black/70 dark:text-white/70 mt-0.5">
|
||||
{step.reasoning}
|
||||
</p>
|
||||
)}
|
||||
{isStreaming && !step.reasoning && (
|
||||
<div className="flex items-center gap-1.5 mt-0.5">
|
||||
<div
|
||||
className="w-1.5 h-1.5 bg-black/40 dark:bg-white/40 rounded-full animate-bounce"
|
||||
style={{ animationDelay: '0ms' }}
|
||||
/>
|
||||
<div
|
||||
className="w-1.5 h-1.5 bg-black/40 dark:bg-white/40 rounded-full animate-bounce"
|
||||
style={{ animationDelay: '150ms' }}
|
||||
/>
|
||||
<div
|
||||
className="w-1.5 h-1.5 bg-black/40 dark:bg-white/40 rounded-full animate-bounce"
|
||||
style={{ animationDelay: '300ms' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{step.type === 'searching' &&
|
||||
step.searching.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-1.5">
|
||||
{step.searching.map((query, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-light-100 dark:bg-dark-100 text-black/70 dark:text-white/70 border border-light-200 dark:border-dark-200"
|
||||
>
|
||||
{query}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(step.type === 'search_results' ||
|
||||
step.type === 'reading') &&
|
||||
step.reading.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-1.5">
|
||||
{step.reading.slice(0, 4).map((result, idx) => {
|
||||
const url = result.metadata.url || '';
|
||||
const title = result.metadata.title || 'Untitled';
|
||||
const domain = url ? new URL(url).hostname : '';
|
||||
const faviconUrl = domain
|
||||
? `https://s2.googleusercontent.com/s2/favicons?domain=${domain}&sz=128`
|
||||
: '';
|
||||
|
||||
return (
|
||||
<a
|
||||
key={idx}
|
||||
href={url}
|
||||
target="_blank"
|
||||
className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-xs font-medium bg-light-100 dark:bg-dark-100 text-black/70 dark:text-white/70 border border-light-200 dark:border-dark-200"
|
||||
>
|
||||
{faviconUrl && (
|
||||
<img
|
||||
src={faviconUrl}
|
||||
alt=""
|
||||
className="w-3 h-3 rounded-sm flex-shrink-0"
|
||||
onError={(e) => {
|
||||
e.currentTarget.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span className="line-clamp-1">{title}</span>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step.type === 'upload_searching' &&
|
||||
step.queries.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-1.5">
|
||||
{step.queries.map((query, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-light-100 dark:bg-dark-100 text-black/70 dark:text-white/70 border border-light-200 dark:border-dark-200"
|
||||
>
|
||||
{query}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step.type === 'upload_search_results' &&
|
||||
step.results.length > 0 && (
|
||||
<div className="mt-1.5 grid gap-3 lg:grid-cols-3">
|
||||
{step.results.slice(0, 4).map((result, idx) => {
|
||||
const title =
|
||||
(result.metadata &&
|
||||
(result.metadata.title ||
|
||||
result.metadata.fileName)) ||
|
||||
'Untitled document';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex flex-row space-x-3 rounded-lg border border-light-200 dark:border-dark-200 bg-light-100 dark:bg-dark-100 p-2 cursor-pointer"
|
||||
>
|
||||
<div className="mt-0.5 h-10 w-10 rounded-md bg-cyan-100 text-cyan-800 dark:bg-sky-500 dark:text-cyan-50 flex items-center justify-center">
|
||||
<FileText className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="flex flex-col justify-center">
|
||||
<p className="text-[13px] text-black dark:text-white line-clamp-1">
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssistantSteps;
|
||||
108
apps/frontend/src/components/Chat.tsx
Normal file
108
apps/frontend/src/components/Chat.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
'use client';
|
||||
|
||||
import { Fragment, useEffect, useRef, useState } from 'react';
|
||||
import MessageInput from './MessageInput';
|
||||
import MessageBox from './MessageBox';
|
||||
import MessageBoxLoading from './MessageBoxLoading';
|
||||
import { useChat } from '@/lib/hooks/useChat';
|
||||
|
||||
const Chat = () => {
|
||||
const { sections, loading, messageAppeared, messages } = useChat();
|
||||
|
||||
const [dividerWidth, setDividerWidth] = useState(0);
|
||||
const dividerRef = useRef<HTMLDivElement | null>(null);
|
||||
const messageEnd = useRef<HTMLDivElement | null>(null);
|
||||
const lastScrolledRef = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
const updateDividerWidth = () => {
|
||||
if (dividerRef.current) {
|
||||
setDividerWidth(dividerRef.current.offsetWidth);
|
||||
}
|
||||
};
|
||||
|
||||
updateDividerWidth();
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
updateDividerWidth();
|
||||
});
|
||||
|
||||
const currentRef = dividerRef.current;
|
||||
if (currentRef) {
|
||||
resizeObserver.observe(currentRef);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', updateDividerWidth);
|
||||
|
||||
return () => {
|
||||
if (currentRef) {
|
||||
resizeObserver.unobserve(currentRef);
|
||||
}
|
||||
resizeObserver.disconnect();
|
||||
window.removeEventListener('resize', updateDividerWidth);
|
||||
};
|
||||
}, [sections.length]);
|
||||
|
||||
useEffect(() => {
|
||||
const scroll = () => {
|
||||
messageEnd.current?.scrollIntoView({ behavior: 'auto' });
|
||||
};
|
||||
|
||||
if (messages.length === 1) {
|
||||
document.title = `${messages[0].query.substring(0, 30)} - GooSeek`;
|
||||
}
|
||||
|
||||
if (sections.length > lastScrolledRef.current) {
|
||||
scroll();
|
||||
lastScrolledRef.current = sections.length;
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col space-y-6 pt-8 pb-44 lg:pb-28 sm:mx-4 md:mx-8">
|
||||
{sections.map((section, i) => {
|
||||
const isLast = i === sections.length - 1;
|
||||
|
||||
return (
|
||||
<Fragment key={section.message.messageId}>
|
||||
<MessageBox
|
||||
section={section}
|
||||
sectionIndex={i}
|
||||
dividerRef={isLast ? dividerRef : undefined}
|
||||
isLast={isLast}
|
||||
/>
|
||||
{!isLast && (
|
||||
<div className="h-px w-full bg-light-secondary dark:bg-dark-secondary" />
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
{loading && !messageAppeared && <MessageBoxLoading />}
|
||||
<div ref={messageEnd} className="h-0" />
|
||||
{dividerWidth > 0 && (
|
||||
<div
|
||||
className="fixed z-40 bottom-24 lg:bottom-6"
|
||||
style={{ width: dividerWidth }}
|
||||
>
|
||||
<div
|
||||
className="pointer-events-none absolute -bottom-6 left-0 right-0 h-[calc(100%+24px+24px)] dark:hidden"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(to top, #ffffff 0%, #ffffff 35%, rgba(255,255,255,0.95) 45%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0.5) 75%, rgba(255,255,255,0.3) 85%, rgba(255,255,255,0.1) 92%, transparent 100%)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="pointer-events-none absolute -bottom-6 left-0 right-0 h-[calc(100%+24px+24px)] hidden dark:block"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(to top, #0d1117 0%, #0d1117 35%, rgba(13,17,23,0.95) 45%, rgba(13,17,23,0.85) 55%, rgba(13,17,23,0.7) 65%, rgba(13,17,23,0.5) 75%, rgba(13,17,23,0.3) 85%, rgba(13,17,23,0.1) 92%, transparent 100%)',
|
||||
}}
|
||||
/>
|
||||
<MessageInput />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chat;
|
||||
76
apps/frontend/src/components/ChatWindow.tsx
Normal file
76
apps/frontend/src/components/ChatWindow.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
'use client';
|
||||
|
||||
import Navbar from './Navbar';
|
||||
import Chat from './Chat';
|
||||
import EmptyChat from './EmptyChat';
|
||||
import NextError from 'next/error';
|
||||
import { useChat } from '@/lib/hooks/useChat';
|
||||
import SettingsButtonMobile from './Settings/SettingsButtonMobile';
|
||||
import { Block } from '@/lib/types';
|
||||
import Loader from './ui/Loader';
|
||||
|
||||
export interface BaseMessage {
|
||||
chatId: string;
|
||||
messageId: string;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
export interface Message extends BaseMessage {
|
||||
backendId: string;
|
||||
query: string;
|
||||
responseBlocks: Block[];
|
||||
status: 'answering' | 'completed' | 'error';
|
||||
}
|
||||
|
||||
export interface File {
|
||||
fileName: string;
|
||||
fileExtension: string;
|
||||
fileId: string;
|
||||
}
|
||||
|
||||
export interface Widget {
|
||||
widgetType: string;
|
||||
params: Record<string, any>;
|
||||
}
|
||||
|
||||
const ChatWindow = () => {
|
||||
const { hasError, notFound, messages, isReady } = useChat();
|
||||
|
||||
if (hasError) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
|
||||
<SettingsButtonMobile />
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center min-h-screen">
|
||||
<p className="dark:text-white/70 text-black/70 text-sm">
|
||||
Failed to connect to the server. Please try again later.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return isReady ? (
|
||||
notFound ? (
|
||||
<NextError statusCode={404} />
|
||||
) : (
|
||||
<div>
|
||||
{messages.length > 0 ? (
|
||||
<>
|
||||
<Navbar />
|
||||
<Chat />
|
||||
</>
|
||||
) : (
|
||||
<EmptyChat />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex items-center justify-center min-h-screen w-full">
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatWindow;
|
||||
125
apps/frontend/src/components/DeleteChat.tsx
Normal file
125
apps/frontend/src/components/DeleteChat.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { Trash } from 'lucide-react';
|
||||
import {
|
||||
Description,
|
||||
Dialog,
|
||||
DialogBackdrop,
|
||||
DialogPanel,
|
||||
DialogTitle,
|
||||
Transition,
|
||||
TransitionChild,
|
||||
} from '@headlessui/react';
|
||||
import { Fragment, useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { Chat } from '@/app/library/page';
|
||||
|
||||
const DeleteChat = ({
|
||||
chatId,
|
||||
chats,
|
||||
setChats,
|
||||
redirect = false,
|
||||
}: {
|
||||
chatId: string;
|
||||
chats: Chat[];
|
||||
setChats: (chats: Chat[]) => void;
|
||||
redirect?: boolean;
|
||||
}) => {
|
||||
const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleDelete = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/chats/${chatId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
if (res.status != 200) {
|
||||
throw new Error('Failed to delete chat');
|
||||
}
|
||||
|
||||
const newChats = chats.filter((chat) => chat.id !== chatId);
|
||||
|
||||
setChats(newChats);
|
||||
|
||||
if (redirect) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
} catch (err: any) {
|
||||
toast.error(err.message);
|
||||
} finally {
|
||||
setConfirmationDialogOpen(false);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
setConfirmationDialogOpen(true);
|
||||
}}
|
||||
className="bg-transparent text-red-400 hover:scale-105 transition duration-200"
|
||||
>
|
||||
<Trash size={17} />
|
||||
</button>
|
||||
<Transition appear show={confirmationDialogOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-50"
|
||||
onClose={() => {
|
||||
if (!loading) {
|
||||
setConfirmationDialogOpen(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogBackdrop className="fixed inset-0 bg-black/30" />
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-out duration-200"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-100"
|
||||
leaveFrom="opacity-100 scale-200"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel className="w-full max-w-md transform rounded-2xl bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 p-6 text-left align-middle shadow-xl transition-all">
|
||||
<DialogTitle className="text-lg font-medium leading-6 dark:text-white">
|
||||
Delete Confirmation
|
||||
</DialogTitle>
|
||||
<Description className="text-sm dark:text-white/70 text-black/70">
|
||||
Are you sure you want to delete this chat?
|
||||
</Description>
|
||||
<div className="flex flex-row items-end justify-end space-x-4 mt-6">
|
||||
<button
|
||||
onClick={() => {
|
||||
if (!loading) {
|
||||
setConfirmationDialogOpen(false);
|
||||
}
|
||||
}}
|
||||
className="text-black/50 dark:text-white/50 text-sm hover:text-black/70 hover:dark:text-white/70 transition duration-200"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="text-red-400 text-sm hover:text-red-500 transition duration200"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteChat;
|
||||
70
apps/frontend/src/components/Discover/MajorNewsCard.tsx
Normal file
70
apps/frontend/src/components/Discover/MajorNewsCard.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import { Discover } from '@/app/discover/page';
|
||||
import Link from 'next/link';
|
||||
|
||||
const MajorNewsCard = ({
|
||||
item,
|
||||
isLeft = true,
|
||||
}: {
|
||||
item: Discover;
|
||||
isLeft?: boolean;
|
||||
}) => (
|
||||
<Link
|
||||
href={`/?q=Summary: ${item.url}`}
|
||||
className="w-full group flex flex-row items-stretch gap-6 h-60 py-3"
|
||||
target="_blank"
|
||||
>
|
||||
{isLeft ? (
|
||||
<>
|
||||
<div className="relative w-80 h-full overflow-hidden rounded-2xl flex-shrink-0">
|
||||
<img
|
||||
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
|
||||
src={
|
||||
new URL(item.thumbnail).origin +
|
||||
new URL(item.thumbnail).pathname +
|
||||
`?id=${new URL(item.thumbnail).searchParams.get('id')}`
|
||||
}
|
||||
alt={item.title}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center flex-1 py-4">
|
||||
<h2
|
||||
className="text-3xl font-light mb-3 leading-tight line-clamp-3 group-hover:text-cyan-500 dark:group-hover:text-cyan-300 transition duration-200"
|
||||
style={{ fontFamily: 'PP Editorial, serif' }}
|
||||
>
|
||||
{item.title}
|
||||
</h2>
|
||||
<p className="text-black/60 dark:text-white/60 text-base leading-relaxed line-clamp-4">
|
||||
{item.content}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-col justify-center flex-1 py-4">
|
||||
<h2
|
||||
className="text-3xl font-light mb-3 leading-tight line-clamp-3 group-hover:text-cyan-500 dark:group-hover:text-cyan-300 transition duration-200"
|
||||
style={{ fontFamily: 'PP Editorial, serif' }}
|
||||
>
|
||||
{item.title}
|
||||
</h2>
|
||||
<p className="text-black/60 dark:text-white/60 text-base leading-relaxed line-clamp-4">
|
||||
{item.content}
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative w-80 h-full overflow-hidden rounded-2xl flex-shrink-0">
|
||||
<img
|
||||
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
|
||||
src={
|
||||
new URL(item.thumbnail).origin +
|
||||
new URL(item.thumbnail).pathname +
|
||||
`?id=${new URL(item.thumbnail).searchParams.get('id')}`
|
||||
}
|
||||
alt={item.title}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
|
||||
export default MajorNewsCard;
|
||||
32
apps/frontend/src/components/Discover/SmallNewsCard.tsx
Normal file
32
apps/frontend/src/components/Discover/SmallNewsCard.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Discover } from '@/app/discover/page';
|
||||
import Link from 'next/link';
|
||||
|
||||
const SmallNewsCard = ({ item }: { item: Discover }) => (
|
||||
<Link
|
||||
href={`/?q=Summary: ${item.url}`}
|
||||
className="rounded-3xl overflow-hidden bg-light-secondary dark:bg-dark-secondary shadow-sm shadow-light-200/10 dark:shadow-black/25 group flex flex-col"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="relative aspect-video overflow-hidden">
|
||||
<img
|
||||
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
|
||||
src={
|
||||
new URL(item.thumbnail).origin +
|
||||
new URL(item.thumbnail).pathname +
|
||||
`?id=${new URL(item.thumbnail).searchParams.get('id')}`
|
||||
}
|
||||
alt={item.title}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<h3 className="font-semibold text-sm mb-2 leading-tight line-clamp-2 group-hover:text-cyan-500 dark:group-hover:text-cyan-300 transition duration-200">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-black/60 dark:text-white/60 text-xs leading-relaxed line-clamp-2">
|
||||
{item.content}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
|
||||
export default SmallNewsCard;
|
||||
75
apps/frontend/src/components/EmptyChat.tsx
Normal file
75
apps/frontend/src/components/EmptyChat.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Settings } from 'lucide-react';
|
||||
import EmptyChatMessageInput from './EmptyChatMessageInput';
|
||||
import { File } from './ChatWindow';
|
||||
import Link from 'next/link';
|
||||
import WeatherWidget from './WeatherWidget';
|
||||
import NewsArticleWidget from './NewsArticleWidget';
|
||||
import SettingsButtonMobile from '@/components/Settings/SettingsButtonMobile';
|
||||
import {
|
||||
getShowNewsWidget,
|
||||
getShowWeatherWidget,
|
||||
} from '@/lib/config/clientRegistry';
|
||||
|
||||
const EmptyChat = () => {
|
||||
const [showWeather, setShowWeather] = useState(() =>
|
||||
typeof window !== 'undefined' ? getShowWeatherWidget() : true,
|
||||
);
|
||||
const [showNews, setShowNews] = useState(() =>
|
||||
typeof window !== 'undefined' ? getShowNewsWidget() : true,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const updateWidgetVisibility = () => {
|
||||
setShowWeather(getShowWeatherWidget());
|
||||
setShowNews(getShowNewsWidget());
|
||||
};
|
||||
|
||||
updateWidgetVisibility();
|
||||
|
||||
window.addEventListener('client-config-changed', updateWidgetVisibility);
|
||||
window.addEventListener('storage', updateWidgetVisibility);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener(
|
||||
'client-config-changed',
|
||||
updateWidgetVisibility,
|
||||
);
|
||||
window.removeEventListener('storage', updateWidgetVisibility);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
|
||||
<SettingsButtonMobile />
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-4">
|
||||
<div className="flex flex-col items-center justify-center w-full space-y-8">
|
||||
<h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
|
||||
Research begins here.
|
||||
</h2>
|
||||
<EmptyChatMessageInput />
|
||||
</div>
|
||||
{(showWeather || showNews) && (
|
||||
<div className="flex flex-col w-full gap-4 mt-2 sm:flex-row sm:justify-center">
|
||||
{showWeather && (
|
||||
<div className="flex-1 w-full">
|
||||
<WeatherWidget />
|
||||
</div>
|
||||
)}
|
||||
{showNews && (
|
||||
<div className="flex-1 w-full">
|
||||
<NewsArticleWidget />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmptyChat;
|
||||
88
apps/frontend/src/components/EmptyChatMessageInput.tsx
Normal file
88
apps/frontend/src/components/EmptyChatMessageInput.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import Sources from './MessageInputActions/Sources';
|
||||
import Optimization from './MessageInputActions/Optimization';
|
||||
import Attach from './MessageInputActions/Attach';
|
||||
import { useChat } from '@/lib/hooks/useChat';
|
||||
import ModelSelector from './MessageInputActions/ChatModelSelector';
|
||||
|
||||
const EmptyChatMessageInput = () => {
|
||||
const { sendMessage } = useChat();
|
||||
|
||||
/* const [copilotEnabled, setCopilotEnabled] = useState(false); */
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
const inputRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const activeElement = document.activeElement;
|
||||
|
||||
const isInputFocused =
|
||||
activeElement?.tagName === 'INPUT' ||
|
||||
activeElement?.tagName === 'TEXTAREA' ||
|
||||
activeElement?.hasAttribute('contenteditable');
|
||||
|
||||
if (e.key === '/' && !isInputFocused) {
|
||||
e.preventDefault();
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
inputRef.current?.focus();
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
sendMessage(message);
|
||||
setMessage('');
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage(message);
|
||||
setMessage('');
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<div className="flex flex-col bg-light-secondary dark:bg-dark-secondary px-3 pt-5 pb-3 rounded-2xl w-full border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/20 transition-all duration-200 focus-within:border-light-300 dark:focus-within:border-dark-300">
|
||||
<TextareaAutosize
|
||||
ref={inputRef}
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
minRows={2}
|
||||
className="px-2 bg-transparent placeholder:text-[15px] placeholder:text-black/50 dark:placeholder:text-white/50 text-sm text-black dark:text-white resize-none focus:outline-none w-full max-h-24 lg:max-h-36 xl:max-h-48"
|
||||
placeholder="Ask anything..."
|
||||
/>
|
||||
<div className="flex flex-row items-center justify-between mt-4">
|
||||
<Optimization />
|
||||
<div className="flex flex-row items-center space-x-2">
|
||||
<div className="flex flex-row items-center space-x-1">
|
||||
<Sources />
|
||||
<ModelSelector />
|
||||
<Attach />
|
||||
</div>
|
||||
<button
|
||||
disabled={message.trim().length === 0}
|
||||
className="bg-sky-500 text-white disabled:text-black/50 dark:disabled:text-white/50 disabled:bg-[#e0e0dc] dark:disabled:bg-[#ececec21] hover:bg-opacity-85 transition duration-100 rounded-full p-2"
|
||||
>
|
||||
<ArrowRight className="bg-background" size={17} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmptyChatMessageInput;
|
||||
9
apps/frontend/src/components/Layout.tsx
Normal file
9
apps/frontend/src/components/Layout.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<main className="lg:pl-20 bg-light-primary dark:bg-dark-primary min-h-screen">
|
||||
<div className="max-w-screen-lg lg:mx-auto mx-4">{children}</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
48
apps/frontend/src/components/MessageActions/Copy.tsx
Normal file
48
apps/frontend/src/components/MessageActions/Copy.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Check, ClipboardList } from 'lucide-react';
|
||||
import { Message } from '../ChatWindow';
|
||||
import { useState } from 'react';
|
||||
import { Section } from '@/lib/hooks/useChat';
|
||||
import { SourceBlock } from '@/lib/types';
|
||||
|
||||
const Copy = ({
|
||||
section,
|
||||
initialMessage,
|
||||
}: {
|
||||
section: Section;
|
||||
initialMessage: string;
|
||||
}) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => {
|
||||
const sources = section.message.responseBlocks.filter(
|
||||
(b) => b.type === 'source' && b.data.length > 0,
|
||||
) as SourceBlock[];
|
||||
|
||||
const contentToCopy = `${initialMessage}${
|
||||
sources.length > 0
|
||||
? `\n\nCitations:\n${sources
|
||||
.map((source) => source.data)
|
||||
.flat()
|
||||
.map(
|
||||
(s, i) =>
|
||||
`[${i + 1}] ${s.metadata.url.startsWith('file_id://') ? s.metadata.fileName || 'Uploaded File' : s.metadata.url}`,
|
||||
)
|
||||
.join(`\n`)}`
|
||||
: ''
|
||||
}`;
|
||||
|
||||
navigator.clipboard.writeText(contentToCopy);
|
||||
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1000);
|
||||
}}
|
||||
className="p-2 text-black/70 dark:text-white/70 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
|
||||
>
|
||||
{copied ? <Check size={16} /> : <ClipboardList size={16} />}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Copy;
|
||||
20
apps/frontend/src/components/MessageActions/Rewrite.tsx
Normal file
20
apps/frontend/src/components/MessageActions/Rewrite.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { ArrowLeftRight, Repeat } from 'lucide-react';
|
||||
|
||||
const Rewrite = ({
|
||||
rewrite,
|
||||
messageId,
|
||||
}: {
|
||||
rewrite: (messageId: string) => void;
|
||||
messageId: string;
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
onClick={() => rewrite(messageId)}
|
||||
className="p-2 text-black/70 dark:text-white/70 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white flex flex-row items-center space-x-1"
|
||||
>
|
||||
<Repeat size={16} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
1;
|
||||
export default Rewrite;
|
||||
290
apps/frontend/src/components/MessageBox.tsx
Normal file
290
apps/frontend/src/components/MessageBox.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
'use client';
|
||||
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import React, { MutableRefObject } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
BookCopy,
|
||||
Disc3,
|
||||
Volume2,
|
||||
StopCircle,
|
||||
Layers3,
|
||||
Plus,
|
||||
CornerDownRight,
|
||||
} from 'lucide-react';
|
||||
import Markdown, { MarkdownToJSX, RuleType } from 'markdown-to-jsx';
|
||||
import Copy from './MessageActions/Copy';
|
||||
import Rewrite from './MessageActions/Rewrite';
|
||||
import MessageSources from './MessageSources';
|
||||
import SearchImages from './SearchImages';
|
||||
import SearchVideos from './SearchVideos';
|
||||
import { useSpeech } from 'react-text-to-speech';
|
||||
import ThinkBox from './ThinkBox';
|
||||
import { useChat, Section } from '@/lib/hooks/useChat';
|
||||
import Citation from './MessageRenderer/Citation';
|
||||
import AssistantSteps from './AssistantSteps';
|
||||
import { ResearchBlock } from '@/lib/types';
|
||||
import Renderer from './Widgets/Renderer';
|
||||
import CodeBlock from './MessageRenderer/CodeBlock';
|
||||
|
||||
const ThinkTagProcessor = ({
|
||||
children,
|
||||
thinkingEnded,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
thinkingEnded: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<ThinkBox content={children as string} thinkingEnded={thinkingEnded} />
|
||||
);
|
||||
};
|
||||
|
||||
const MessageBox = ({
|
||||
section,
|
||||
sectionIndex,
|
||||
dividerRef,
|
||||
isLast,
|
||||
}: {
|
||||
section: Section;
|
||||
sectionIndex: number;
|
||||
dividerRef?: MutableRefObject<HTMLDivElement | null>;
|
||||
isLast: boolean;
|
||||
}) => {
|
||||
const {
|
||||
loading,
|
||||
sendMessage,
|
||||
rewrite,
|
||||
messages,
|
||||
researchEnded,
|
||||
chatHistory,
|
||||
} = useChat();
|
||||
|
||||
const parsedMessage = section.parsedTextBlocks.join('\n\n');
|
||||
const speechMessage = section.speechMessage || '';
|
||||
const thinkingEnded = section.thinkingEnded;
|
||||
|
||||
const sourceBlocks = section.message.responseBlocks.filter(
|
||||
(block): block is typeof block & { type: 'source' } =>
|
||||
block.type === 'source',
|
||||
);
|
||||
|
||||
const sources = sourceBlocks.flatMap((block) => block.data);
|
||||
|
||||
const hasContent = section.parsedTextBlocks.length > 0;
|
||||
|
||||
const { speechStatus, start, stop } = useSpeech({ text: speechMessage });
|
||||
|
||||
const markdownOverrides: MarkdownToJSX.Options = {
|
||||
renderRule(next, node, renderChildren, state) {
|
||||
if (node.type === RuleType.codeInline) {
|
||||
return `\`${node.text}\``;
|
||||
}
|
||||
|
||||
if (node.type === RuleType.codeBlock) {
|
||||
return (
|
||||
<CodeBlock key={state.key} language={node.lang || ''}>
|
||||
{node.text}
|
||||
</CodeBlock>
|
||||
);
|
||||
}
|
||||
|
||||
return next();
|
||||
},
|
||||
overrides: {
|
||||
think: {
|
||||
component: ThinkTagProcessor,
|
||||
props: {
|
||||
thinkingEnded: thinkingEnded,
|
||||
},
|
||||
},
|
||||
citation: {
|
||||
component: Citation,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className={'w-full pt-8 break-words'}>
|
||||
<h2 className="text-black dark:text-white font-medium text-3xl lg:w-9/12">
|
||||
{section.message.query}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col space-y-9 lg:space-y-0 lg:flex-row lg:justify-between lg:space-x-9">
|
||||
<div
|
||||
ref={dividerRef}
|
||||
className="flex flex-col space-y-6 w-full lg:w-9/12"
|
||||
>
|
||||
{sources.length > 0 && (
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex flex-row items-center space-x-2">
|
||||
<BookCopy className="text-black dark:text-white" size={20} />
|
||||
<h3 className="text-black dark:text-white font-medium text-xl">
|
||||
Sources
|
||||
</h3>
|
||||
</div>
|
||||
<MessageSources sources={sources} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{section.message.responseBlocks
|
||||
.filter(
|
||||
(block): block is ResearchBlock =>
|
||||
block.type === 'research' && block.data.subSteps.length > 0,
|
||||
)
|
||||
.map((researchBlock) => (
|
||||
<div key={researchBlock.id} className="flex flex-col space-y-2">
|
||||
<AssistantSteps
|
||||
block={researchBlock}
|
||||
status={section.message.status}
|
||||
isLast={isLast}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{isLast &&
|
||||
loading &&
|
||||
!researchEnded &&
|
||||
!section.message.responseBlocks.some(
|
||||
(b) => b.type === 'research' && b.data.subSteps.length > 0,
|
||||
) && (
|
||||
<div className="flex items-center gap-2 p-3 rounded-lg bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200">
|
||||
<Disc3 className="w-4 h-4 text-black dark:text-white animate-spin" />
|
||||
<span className="text-sm text-black/70 dark:text-white/70">
|
||||
Brainstorming...
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{section.widgets.length > 0 && <Renderer widgets={section.widgets} />}
|
||||
|
||||
<div className="flex flex-col space-y-2">
|
||||
{sources.length > 0 && (
|
||||
<div className="flex flex-row items-center space-x-2">
|
||||
<Disc3
|
||||
className={cn(
|
||||
'text-black dark:text-white',
|
||||
isLast && loading ? 'animate-spin' : 'animate-none',
|
||||
)}
|
||||
size={20}
|
||||
/>
|
||||
<h3 className="text-black dark:text-white font-medium text-xl">
|
||||
Answer
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasContent && (
|
||||
<>
|
||||
<Markdown
|
||||
className={cn(
|
||||
'prose prose-h1:mb-3 prose-h2:mb-2 prose-h2:mt-6 prose-h2:font-[800] prose-h3:mt-4 prose-h3:mb-1.5 prose-h3:font-[600] dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 font-[400]',
|
||||
'max-w-none break-words text-black dark:text-white',
|
||||
)}
|
||||
options={markdownOverrides}
|
||||
>
|
||||
{parsedMessage}
|
||||
</Markdown>
|
||||
|
||||
{loading && isLast ? null : (
|
||||
<div className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4">
|
||||
<div className="flex flex-row items-center -ml-2">
|
||||
<Rewrite
|
||||
rewrite={rewrite}
|
||||
messageId={section.message.messageId}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row items-center -mr-2">
|
||||
<Copy initialMessage={parsedMessage} section={section} />
|
||||
<button
|
||||
onClick={() => {
|
||||
if (speechStatus === 'started') {
|
||||
stop();
|
||||
} else {
|
||||
start();
|
||||
}
|
||||
}}
|
||||
className="p-2 text-black/70 dark:text-white/70 rounded-full hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
|
||||
>
|
||||
{speechStatus === 'started' ? (
|
||||
<StopCircle size={16} />
|
||||
) : (
|
||||
<Volume2 size={16} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLast &&
|
||||
section.suggestions &&
|
||||
section.suggestions.length > 0 &&
|
||||
hasContent &&
|
||||
!loading && (
|
||||
<div className="mt-6">
|
||||
<div className="flex flex-row items-center space-x-2 mb-4">
|
||||
<Layers3
|
||||
className="text-black dark:text-white"
|
||||
size={20}
|
||||
/>
|
||||
<h3 className="text-black dark:text-white font-medium text-xl">
|
||||
Related
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
{section.suggestions.map(
|
||||
(suggestion: string, i: number) => (
|
||||
<div key={i}>
|
||||
<div className="h-px bg-light-200/40 dark:bg-dark-200/40" />
|
||||
<button
|
||||
onClick={() => sendMessage(suggestion)}
|
||||
className="group w-full py-4 text-left transition-colors duration-200"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex flex-row space-x-3 items-center">
|
||||
<CornerDownRight
|
||||
size={15}
|
||||
className="group-hover:text-sky-400 transition-colors duration-200 flex-shrink-0"
|
||||
/>
|
||||
<p className="text-sm text-black/70 dark:text-white/70 group-hover:text-sky-400 transition-colors duration-200 leading-relaxed">
|
||||
{suggestion}
|
||||
</p>
|
||||
</div>
|
||||
<Plus
|
||||
size={16}
|
||||
className="text-black/40 dark:text-white/40 group-hover:text-sky-400 transition-colors duration-200 flex-shrink-0"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasContent && (
|
||||
<div className="lg:sticky lg:top-20 flex flex-col items-center space-y-3 w-full lg:w-3/12 z-30 h-full pb-4">
|
||||
<SearchImages
|
||||
query={section.message.query}
|
||||
chatHistory={chatHistory}
|
||||
messageId={section.message.messageId}
|
||||
/>
|
||||
<SearchVideos
|
||||
chatHistory={chatHistory}
|
||||
query={section.message.query}
|
||||
messageId={section.message.messageId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageBox;
|
||||
11
apps/frontend/src/components/MessageBoxLoading.tsx
Normal file
11
apps/frontend/src/components/MessageBoxLoading.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
const MessageBoxLoading = () => {
|
||||
return (
|
||||
<div className="flex flex-col space-y-2 w-full lg:w-9/12 bg-light-primary dark:bg-dark-primary animate-pulse rounded-lg py-3">
|
||||
<div className="h-2 rounded-full w-full bg-light-secondary dark:bg-dark-secondary" />
|
||||
<div className="h-2 rounded-full w-9/12 bg-light-secondary dark:bg-dark-secondary" />
|
||||
<div className="h-2 rounded-full w-10/12 bg-light-secondary dark:bg-dark-secondary" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageBoxLoading;
|
||||
102
apps/frontend/src/components/MessageInput.tsx
Normal file
102
apps/frontend/src/components/MessageInput.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ArrowUp } from 'lucide-react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import AttachSmall from './MessageInputActions/AttachSmall';
|
||||
import { useChat } from '@/lib/hooks/useChat';
|
||||
|
||||
const MessageInput = () => {
|
||||
const { loading, sendMessage } = useChat();
|
||||
|
||||
const [copilotEnabled, setCopilotEnabled] = useState(false);
|
||||
const [message, setMessage] = useState('');
|
||||
const [textareaRows, setTextareaRows] = useState(1);
|
||||
const [mode, setMode] = useState<'multi' | 'single'>('single');
|
||||
|
||||
useEffect(() => {
|
||||
if (textareaRows >= 2 && message && mode === 'single') {
|
||||
setMode('multi');
|
||||
} else if (!message && mode === 'multi') {
|
||||
setMode('single');
|
||||
}
|
||||
}, [textareaRows, mode, message]);
|
||||
|
||||
const inputRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const activeElement = document.activeElement;
|
||||
|
||||
const isInputFocused =
|
||||
activeElement?.tagName === 'INPUT' ||
|
||||
activeElement?.tagName === 'TEXTAREA' ||
|
||||
activeElement?.hasAttribute('contenteditable');
|
||||
|
||||
if (e.key === '/' && !isInputFocused) {
|
||||
e.preventDefault();
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
if (loading) return;
|
||||
e.preventDefault();
|
||||
sendMessage(message);
|
||||
setMessage('');
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey && !loading) {
|
||||
e.preventDefault();
|
||||
sendMessage(message);
|
||||
setMessage('');
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
'relative bg-light-secondary dark:bg-dark-secondary p-4 flex items-center overflow-visible border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/20 transition-all duration-200 focus-within:border-light-300 dark:focus-within:border-dark-300',
|
||||
mode === 'multi' ? 'flex-col rounded-2xl' : 'flex-row rounded-full',
|
||||
)}
|
||||
>
|
||||
{mode === 'single' && <AttachSmall />}
|
||||
<TextareaAutosize
|
||||
ref={inputRef}
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
onHeightChange={(height, props) => {
|
||||
setTextareaRows(Math.ceil(height / props.rowHeight));
|
||||
}}
|
||||
className="transition bg-transparent dark:placeholder:text-white/50 placeholder:text-sm text-sm dark:text-white resize-none focus:outline-none w-full px-2 max-h-24 lg:max-h-36 xl:max-h-48 flex-grow flex-shrink"
|
||||
placeholder="Ask a follow-up"
|
||||
/>
|
||||
{mode === 'single' && (
|
||||
<button
|
||||
disabled={message.trim().length === 0 || loading}
|
||||
className="bg-[#24A0ED] text-white disabled:text-black/50 dark:disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#e0e0dc79] dark:disabled:bg-[#ececec21] rounded-full p-2"
|
||||
>
|
||||
<ArrowUp className="bg-background" size={17} />
|
||||
</button>
|
||||
)}
|
||||
{mode === 'multi' && (
|
||||
<div className="flex flex-row items-center justify-between w-full pt-2">
|
||||
<AttachSmall />
|
||||
<button
|
||||
disabled={message.trim().length === 0 || loading}
|
||||
className="bg-[#24A0ED] text-white disabled:text-black/50 dark:disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#e0e0dc79] dark:disabled:bg-[#ececec21] rounded-full p-2"
|
||||
>
|
||||
<ArrowUp className="bg-background" size={17} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageInput;
|
||||
169
apps/frontend/src/components/MessageInputActions/Attach.tsx
Normal file
169
apps/frontend/src/components/MessageInputActions/Attach.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverPanel,
|
||||
Transition,
|
||||
} from '@headlessui/react';
|
||||
import {
|
||||
CopyPlus,
|
||||
File,
|
||||
Link,
|
||||
LoaderCircle,
|
||||
Paperclip,
|
||||
Plus,
|
||||
Trash,
|
||||
} from 'lucide-react';
|
||||
import { Fragment, useRef, useState } from 'react';
|
||||
import { useChat } from '@/lib/hooks/useChat';
|
||||
import { AnimatePresence } from 'motion/react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const Attach = () => {
|
||||
const { files, setFiles, setFileIds, fileIds } = useChat();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const fileInputRef = useRef<any>();
|
||||
|
||||
const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setLoading(true);
|
||||
const data = new FormData();
|
||||
|
||||
for (let i = 0; i < e.target.files!.length; i++) {
|
||||
data.append('files', e.target.files![i]);
|
||||
}
|
||||
|
||||
const embeddingModelProvider = localStorage.getItem(
|
||||
'embeddingModelProviderId',
|
||||
);
|
||||
const embeddingModel = localStorage.getItem('embeddingModelKey');
|
||||
|
||||
data.append('embedding_model_provider_id', embeddingModelProvider!);
|
||||
data.append('embedding_model_key', embeddingModel!);
|
||||
|
||||
const res = await fetch(`/api/uploads`, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
});
|
||||
|
||||
const resData = await res.json();
|
||||
|
||||
setFiles([...files, ...resData.files]);
|
||||
setFileIds([...fileIds, ...resData.files.map((file: any) => file.fileId)]);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return loading ? (
|
||||
<div className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none text-black/50 dark:text-white/50 transition duration-200">
|
||||
<LoaderCircle size={16} className="text-sky-500 animate-spin" />
|
||||
</div>
|
||||
) : files.length > 0 ? (
|
||||
<Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<PopoverButton
|
||||
type="button"
|
||||
className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
|
||||
>
|
||||
<File size={16} className="text-sky-500" />
|
||||
</PopoverButton>
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<PopoverPanel
|
||||
className="absolute z-10 w-64 md:w-[350px] right-0"
|
||||
static
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.1, ease: 'easeOut' }}
|
||||
className="origin-top-right bg-light-primary dark:bg-dark-primary border rounded-md border-light-200 dark:border-dark-200 w-full max-h-[200px] md:max-h-none overflow-y-auto flex flex-col"
|
||||
>
|
||||
<div className="flex flex-row items-center justify-between px-3 py-2">
|
||||
<h4 className="text-black/70 dark:text-white/70 text-sm">
|
||||
Attached files
|
||||
</h4>
|
||||
<div className="flex flex-row items-center space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current.click()}
|
||||
className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200 focus:outline-none"
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleChange}
|
||||
ref={fileInputRef}
|
||||
accept=".pdf,.docx,.txt"
|
||||
multiple
|
||||
hidden
|
||||
/>
|
||||
<Plus size={16} />
|
||||
<p className="text-xs">Add</p>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setFiles([]);
|
||||
setFileIds([]);
|
||||
}}
|
||||
className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200 focus:outline-none"
|
||||
>
|
||||
<Trash size={13} />
|
||||
<p className="text-xs">Clear</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[0.5px] mx-2 bg-white/10" />
|
||||
<div className="flex flex-col items-center">
|
||||
{files.map((file, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex flex-row items-center justify-start w-full space-x-3 p-3"
|
||||
>
|
||||
<div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-9 h-9 rounded-md">
|
||||
<File
|
||||
size={16}
|
||||
className="text-black/70 dark:text-white/70"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-black/70 dark:text-white/70 text-xs">
|
||||
{file.fileName.length > 25
|
||||
? file.fileName
|
||||
.replace(/\.\w+$/, '')
|
||||
.substring(0, 25) +
|
||||
'...' +
|
||||
file.fileExtension
|
||||
: file.fileName}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</PopoverPanel>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current.click()}
|
||||
className={cn(
|
||||
'flex items-center justify-center active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white',
|
||||
)}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleChange}
|
||||
ref={fileInputRef}
|
||||
accept=".pdf,.docx,.txt"
|
||||
multiple
|
||||
hidden
|
||||
/>
|
||||
<Paperclip size={16} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Attach;
|
||||
158
apps/frontend/src/components/MessageInputActions/AttachSmall.tsx
Normal file
158
apps/frontend/src/components/MessageInputActions/AttachSmall.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import {
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverPanel,
|
||||
Transition,
|
||||
} from '@headlessui/react';
|
||||
import { File, LoaderCircle, Paperclip, Plus, Trash } from 'lucide-react';
|
||||
import { Fragment, useRef, useState } from 'react';
|
||||
import { useChat } from '@/lib/hooks/useChat';
|
||||
import { AnimatePresence } from 'motion/react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const AttachSmall = () => {
|
||||
const { files, setFiles, setFileIds, fileIds } = useChat();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const fileInputRef = useRef<any>();
|
||||
|
||||
const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setLoading(true);
|
||||
const data = new FormData();
|
||||
|
||||
for (let i = 0; i < e.target.files!.length; i++) {
|
||||
data.append('files', e.target.files![i]);
|
||||
}
|
||||
|
||||
const embeddingModelProvider = localStorage.getItem(
|
||||
'embeddingModelProviderId',
|
||||
);
|
||||
const embeddingModel = localStorage.getItem('embeddingModelKey');
|
||||
|
||||
data.append('embedding_model_provider_id', embeddingModelProvider!);
|
||||
data.append('embedding_model_key', embeddingModel!);
|
||||
|
||||
const res = await fetch(`/api/uploads`, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
});
|
||||
|
||||
const resData = await res.json();
|
||||
|
||||
setFiles([...files, ...resData.files]);
|
||||
setFileIds([...fileIds, ...resData.files.map((file: any) => file.fileId)]);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return loading ? (
|
||||
<div className="flex flex-row items-center justify-between space-x-1 p-1 ">
|
||||
<LoaderCircle size={20} className="text-sky-500 animate-spin" />
|
||||
</div>
|
||||
) : files.length > 0 ? (
|
||||
<Popover className="max-w-[15rem] md:max-w-md lg:max-w-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<PopoverButton
|
||||
type="button"
|
||||
className="flex flex-row items-center justify-between space-x-1 p-1 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
|
||||
>
|
||||
<File size={20} className="text-sky-500" />
|
||||
</PopoverButton>
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<PopoverPanel
|
||||
className="absolute z-10 w-64 md:w-[350px] bottom-14"
|
||||
static
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.1, ease: 'easeOut' }}
|
||||
className="origin-bottom-left bg-light-primary dark:bg-dark-primary border rounded-md border-light-200 dark:border-dark-200 w-full max-h-[200px] md:max-h-none overflow-y-auto flex flex-col"
|
||||
>
|
||||
<div className="flex flex-row items-center justify-between px-3 py-2">
|
||||
<h4 className="text-black/70 dark:text-white/70 font-medium text-sm">
|
||||
Attached files
|
||||
</h4>
|
||||
<div className="flex flex-row items-center space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current.click()}
|
||||
className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleChange}
|
||||
ref={fileInputRef}
|
||||
accept=".pdf,.docx,.txt"
|
||||
multiple
|
||||
hidden
|
||||
/>
|
||||
<Plus size={16} />
|
||||
<p className="text-xs">Add</p>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setFiles([]);
|
||||
setFileIds([]);
|
||||
}}
|
||||
className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
|
||||
>
|
||||
<Trash size={13} />
|
||||
<p className="text-xs">Clear</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[0.5px] mx-2 bg-white/10" />
|
||||
<div className="flex flex-col items-center">
|
||||
{files.map((file, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex flex-row items-center justify-start w-full space-x-3 p-3"
|
||||
>
|
||||
<div className="bg-light-100 dark:bg-dark-100 flex items-center justify-center w-9 h-9 rounded-md">
|
||||
<File
|
||||
size={16}
|
||||
className="text-black/70 dark:text-white/70"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-black/70 dark:text-white/70 text-xs">
|
||||
{file.fileName.length > 25
|
||||
? file.fileName
|
||||
.replace(/\.\w+$/, '')
|
||||
.substring(0, 25) +
|
||||
'...' +
|
||||
file.fileExtension
|
||||
: file.fileName}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</PopoverPanel>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current.click()}
|
||||
className="flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white p-1"
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
onChange={handleChange}
|
||||
ref={fileInputRef}
|
||||
accept=".pdf,.docx,.txt"
|
||||
multiple
|
||||
hidden
|
||||
/>
|
||||
<Paperclip size={16} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default AttachSmall;
|
||||
@@ -0,0 +1,203 @@
|
||||
'use client';
|
||||
|
||||
import { Cpu, Loader2, Search } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { MinimalProvider } from '@/lib/models/types';
|
||||
import { useChat } from '@/lib/hooks/useChat';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
|
||||
const ModelSelector = () => {
|
||||
const [providers, setProviders] = useState<MinimalProvider[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
const { setChatModelProvider, chatModelProvider } = useChat();
|
||||
|
||||
useEffect(() => {
|
||||
const loadProviders = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const res = await fetch('/api/providers');
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to fetch providers');
|
||||
}
|
||||
|
||||
const data: { providers: MinimalProvider[] } = await res.json();
|
||||
setProviders(data.providers);
|
||||
} catch (error) {
|
||||
console.error('Error loading providers:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadProviders();
|
||||
}, []);
|
||||
|
||||
const orderedProviders = useMemo(() => {
|
||||
if (!chatModelProvider?.providerId) return providers;
|
||||
|
||||
const currentProviderIndex = providers.findIndex(
|
||||
(p) => p.id === chatModelProvider.providerId,
|
||||
);
|
||||
|
||||
if (currentProviderIndex === -1) {
|
||||
return providers;
|
||||
}
|
||||
|
||||
const selectedProvider = providers[currentProviderIndex];
|
||||
const remainingProviders = providers.filter(
|
||||
(_, index) => index !== currentProviderIndex,
|
||||
);
|
||||
|
||||
return [selectedProvider, ...remainingProviders];
|
||||
}, [providers, chatModelProvider]);
|
||||
|
||||
const handleModelSelect = (providerId: string, modelKey: string) => {
|
||||
setChatModelProvider({ providerId, key: modelKey });
|
||||
localStorage.setItem('chatModelProviderId', providerId);
|
||||
localStorage.setItem('chatModelKey', modelKey);
|
||||
};
|
||||
|
||||
const filteredProviders = orderedProviders
|
||||
.map((provider) => ({
|
||||
...provider,
|
||||
chatModels: provider.chatModels.filter(
|
||||
(model) =>
|
||||
model.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
provider.name.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
),
|
||||
}))
|
||||
.filter((provider) => provider.chatModels.length > 0);
|
||||
|
||||
return (
|
||||
<Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<PopoverButton
|
||||
type="button"
|
||||
className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
|
||||
>
|
||||
<Cpu size={16} className="text-sky-500" />
|
||||
</PopoverButton>
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<PopoverPanel
|
||||
className="absolute z-10 w-[230px] sm:w-[270px] md:w-[300px] right-0"
|
||||
static
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.1, ease: 'easeOut' }}
|
||||
className="origin-top-right bg-light-primary dark:bg-dark-primary max-h-[300px] sm:max-w-none border rounded-lg border-light-200 dark:border-dark-200 w-full flex flex-col shadow-lg overflow-hidden"
|
||||
>
|
||||
<div className="p-2 border-b border-light-200 dark:border-dark-200">
|
||||
<div className="relative">
|
||||
<Search
|
||||
size={16}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-black/40 dark:text-white/40"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search models..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-8 pr-3 py-2 bg-light-secondary dark:bg-dark-secondary rounded-lg placeholder:text-xs placeholder:-translate-y-[1.5px] text-xs text-black dark:text-white placeholder:text-black/40 dark:placeholder:text-white/40 focus:outline-none border border-transparent transition duration-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[320px] overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2
|
||||
className="animate-spin text-black/40 dark:text-white/40"
|
||||
size={24}
|
||||
/>
|
||||
</div>
|
||||
) : filteredProviders.length === 0 ? (
|
||||
<div className="text-center py-16 px-4 text-black/60 dark:text-white/60 text-sm">
|
||||
{searchQuery
|
||||
? 'No models found'
|
||||
: 'No chat models configured'}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col">
|
||||
{filteredProviders.map((provider, providerIndex) => (
|
||||
<div key={provider.id}>
|
||||
<div className="px-4 py-2.5 sticky top-0 bg-light-primary dark:bg-dark-primary border-b border-light-200/50 dark:border-dark-200/50">
|
||||
<p className="text-xs text-black/50 dark:text-white/50 uppercase tracking-wider">
|
||||
{provider.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col px-2 py-2 space-y-0.5">
|
||||
{provider.chatModels.map((model) => (
|
||||
<button
|
||||
key={model.key}
|
||||
onClick={() =>
|
||||
handleModelSelect(provider.id, model.key)
|
||||
}
|
||||
type="button"
|
||||
className={cn(
|
||||
'px-3 py-2 flex items-center justify-between text-start duration-200 cursor-pointer transition rounded-lg group',
|
||||
chatModelProvider?.providerId ===
|
||||
provider.id &&
|
||||
chatModelProvider?.key === model.key
|
||||
? 'bg-light-secondary dark:bg-dark-secondary'
|
||||
: 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center space-x-2.5 min-w-0 flex-1">
|
||||
<Cpu
|
||||
size={15}
|
||||
className={cn(
|
||||
'shrink-0',
|
||||
chatModelProvider?.providerId ===
|
||||
provider.id &&
|
||||
chatModelProvider?.key === model.key
|
||||
? 'text-sky-500'
|
||||
: 'text-black/50 dark:text-white/50 group-hover:text-black/70 group-hover:dark:text-white/70',
|
||||
)}
|
||||
/>
|
||||
<p
|
||||
className={cn(
|
||||
'text-xs truncate',
|
||||
chatModelProvider?.providerId ===
|
||||
provider.id &&
|
||||
chatModelProvider?.key === model.key
|
||||
? 'text-sky-500 font-medium'
|
||||
: 'text-black/70 dark:text-white/70 group-hover:text-black dark:group-hover:text-white',
|
||||
)}
|
||||
>
|
||||
{model.name}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{providerIndex < filteredProviders.length - 1 && (
|
||||
<div className="h-px bg-light-200 dark:bg-dark-200" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</PopoverPanel>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelSelector;
|
||||
@@ -0,0 +1,114 @@
|
||||
import { ChevronDown, Sliders, Star, Zap } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverPanel,
|
||||
Transition,
|
||||
} from '@headlessui/react';
|
||||
import { Fragment } from 'react';
|
||||
import { useChat } from '@/lib/hooks/useChat';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
|
||||
const OptimizationModes = [
|
||||
{
|
||||
key: 'speed',
|
||||
title: 'Speed',
|
||||
description: 'Prioritize speed and get the quickest possible answer.',
|
||||
icon: <Zap size={16} className="text-[#FF9800]" />,
|
||||
},
|
||||
{
|
||||
key: 'balanced',
|
||||
title: 'Balanced',
|
||||
description: 'Find the right balance between speed and accuracy',
|
||||
icon: <Sliders size={16} className="text-[#4CAF50]" />,
|
||||
},
|
||||
{
|
||||
key: 'quality',
|
||||
title: 'Quality',
|
||||
description: 'Get the most thorough and accurate answer',
|
||||
icon: (
|
||||
<Star
|
||||
size={16}
|
||||
className="text-[#2196F3] dark:text-[#BBDEFB] fill-[#BBDEFB] dark:fill-[#2196F3]"
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const Optimization = () => {
|
||||
const { optimizationMode, setOptimizationMode } = useChat();
|
||||
|
||||
return (
|
||||
<Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<PopoverButton
|
||||
type="button"
|
||||
className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white focus:outline-none"
|
||||
>
|
||||
<div className="flex flex-row items-center space-x-1">
|
||||
{
|
||||
OptimizationModes.find((mode) => mode.key === optimizationMode)
|
||||
?.icon
|
||||
}
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={cn(
|
||||
open ? 'rotate-180' : 'rotate-0',
|
||||
'transition duration:200',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</PopoverButton>
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<PopoverPanel
|
||||
className="absolute z-10 w-64 md:w-[250px] left-0"
|
||||
static
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.1, ease: 'easeOut' }}
|
||||
className="origin-top-left flex flex-col space-y-2 bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-2 max-h-[200px] md:max-h-none overflow-y-auto"
|
||||
>
|
||||
{OptimizationModes.map((mode, i) => (
|
||||
<PopoverButton
|
||||
onClick={() => setOptimizationMode(mode.key)}
|
||||
key={i}
|
||||
className={cn(
|
||||
'p-2 rounded-lg flex flex-col items-start justify-start text-start space-y-1 duration-200 cursor-pointer transition focus:outline-none',
|
||||
optimizationMode === mode.key
|
||||
? 'bg-light-secondary dark:bg-dark-secondary'
|
||||
: 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-row justify-between w-full text-black dark:text-white">
|
||||
<div className="flex flex-row space-x-1">
|
||||
{mode.icon}
|
||||
<p className="text-xs font-medium">{mode.title}</p>
|
||||
</div>
|
||||
{mode.key === 'quality' && (
|
||||
<span className="bg-sky-500/70 dark:bg-sky-500/40 border border-sky-600 px-1 rounded-full text-[10px] text-white">
|
||||
Beta
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-black/70 dark:text-white/70 text-xs">
|
||||
{mode.description}
|
||||
</p>
|
||||
</PopoverButton>
|
||||
))}
|
||||
</motion.div>
|
||||
</PopoverPanel>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default Optimization;
|
||||
93
apps/frontend/src/components/MessageInputActions/Sources.tsx
Normal file
93
apps/frontend/src/components/MessageInputActions/Sources.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import { useChat } from '@/lib/hooks/useChat';
|
||||
import {
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverPanel,
|
||||
Switch,
|
||||
} from '@headlessui/react';
|
||||
import {
|
||||
GlobeIcon,
|
||||
GraduationCapIcon,
|
||||
NetworkIcon,
|
||||
} from '@phosphor-icons/react';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
|
||||
const sourcesList = [
|
||||
{
|
||||
name: 'Web',
|
||||
key: 'web',
|
||||
icon: <GlobeIcon className="h-[16px] w-auto" />,
|
||||
},
|
||||
{
|
||||
name: 'Academic',
|
||||
key: 'academic',
|
||||
icon: <GraduationCapIcon className="h-[16px] w-auto" />,
|
||||
},
|
||||
{
|
||||
name: 'Social',
|
||||
key: 'discussions',
|
||||
icon: <NetworkIcon className="h-[16px] w-auto" />,
|
||||
},
|
||||
];
|
||||
|
||||
const Sources = () => {
|
||||
const { sources, setSources } = useChat();
|
||||
|
||||
return (
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<PopoverButton className="flex items-center justify-center active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white">
|
||||
<GlobeIcon className="h-[18px] w-auto" />
|
||||
</PopoverButton>
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<PopoverPanel
|
||||
static
|
||||
className="absolute z-10 w-64 md:w-[225px] right-0"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.1, ease: 'easeOut' }}
|
||||
className="origin-top-right flex flex-col bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 w-full p-1 max-h-[200px] md:max-h-none overflow-y-auto shadow-lg"
|
||||
>
|
||||
{sourcesList.map((source, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex flex-row justify-between hover:bg-light-100 hover:dark:bg-dark-100 rounded-md py-3 px-2 cursor-pointer"
|
||||
onClick={() => {
|
||||
if (!sources.includes(source.key)) {
|
||||
setSources([...sources, source.key]);
|
||||
} else {
|
||||
setSources(sources.filter((s) => s !== source.key));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row space-x-1.5 text-black/80 dark:text-white/80">
|
||||
{source.icon}
|
||||
<p className="text-xs">{source.name}</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={sources.includes(source.key)}
|
||||
className="group relative flex h-4 w-7 shrink-0 cursor-pointer rounded-full bg-light-200 dark:bg-white/10 p-0.5 duration-200 ease-in-out focus:outline-none transition-colors disabled:opacity-60 disabled:cursor-not-allowed data-[checked]:bg-sky-500 dark:data-[checked]:bg-sky-500"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none inline-block size-3 translate-x-[1px] group-data-[checked]:translate-x-3 rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</PopoverPanel>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sources;
|
||||
19
apps/frontend/src/components/MessageRenderer/Citation.tsx
Normal file
19
apps/frontend/src/components/MessageRenderer/Citation.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
const Citation = ({
|
||||
href,
|
||||
children,
|
||||
}: {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default Citation;
|
||||
@@ -0,0 +1,102 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
|
||||
const darkTheme = {
|
||||
'hljs-comment': {
|
||||
color: '#8b949e',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: '#8b949e',
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: '#ff7b72',
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: '#ff7b72',
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: '#ff7b72',
|
||||
},
|
||||
'hljs-name': {
|
||||
color: '#ff7b72',
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: '#ff7b72',
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: '#ff7b72',
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: '#ff7b72',
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: '#ff7b72',
|
||||
},
|
||||
'hljs-number': {
|
||||
color: '#f2cc60',
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: '#f2cc60',
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: '#f2cc60',
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: '#f2cc60',
|
||||
},
|
||||
'hljs-type': {
|
||||
color: '#f2cc60',
|
||||
},
|
||||
'hljs-params': {
|
||||
color: '#f2cc60',
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: '#f2cc60',
|
||||
},
|
||||
'hljs-link': {
|
||||
color: '#f2cc60',
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: '#58a6ff',
|
||||
},
|
||||
'hljs-string': {
|
||||
color: '#7ee787',
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: '#7ee787',
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: '#7ee787',
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: '#7ee787',
|
||||
},
|
||||
'hljs-title': {
|
||||
color: '#79c0ff',
|
||||
},
|
||||
'hljs-section': {
|
||||
color: '#79c0ff',
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: '#c297ff',
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: '#c297ff',
|
||||
},
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
background: '#0d1117',
|
||||
color: '#c9d1d9',
|
||||
padding: '0.75em',
|
||||
border: '1px solid #21262d',
|
||||
borderRadius: '10px',
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
} satisfies Record<string, CSSProperties>;
|
||||
|
||||
export default darkTheme;
|
||||
@@ -0,0 +1,102 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
|
||||
const lightTheme = {
|
||||
'hljs-comment': {
|
||||
color: '#6e7781',
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: '#6e7781',
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: '#d73a49',
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: '#d73a49',
|
||||
},
|
||||
'hljs-tag': {
|
||||
color: '#d73a49',
|
||||
},
|
||||
'hljs-name': {
|
||||
color: '#d73a49',
|
||||
},
|
||||
'hljs-selector-id': {
|
||||
color: '#d73a49',
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: '#d73a49',
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: '#d73a49',
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: '#d73a49',
|
||||
},
|
||||
'hljs-number': {
|
||||
color: '#b08800',
|
||||
},
|
||||
'hljs-built_in': {
|
||||
color: '#b08800',
|
||||
},
|
||||
'hljs-builtin-name': {
|
||||
color: '#b08800',
|
||||
},
|
||||
'hljs-literal': {
|
||||
color: '#b08800',
|
||||
},
|
||||
'hljs-type': {
|
||||
color: '#b08800',
|
||||
},
|
||||
'hljs-params': {
|
||||
color: '#b08800',
|
||||
},
|
||||
'hljs-meta': {
|
||||
color: '#b08800',
|
||||
},
|
||||
'hljs-link': {
|
||||
color: '#b08800',
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: '#0a64ae',
|
||||
},
|
||||
'hljs-string': {
|
||||
color: '#22863a',
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: '#22863a',
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: '#22863a',
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: '#22863a',
|
||||
},
|
||||
'hljs-title': {
|
||||
color: '#005cc5',
|
||||
},
|
||||
'hljs-section': {
|
||||
color: '#005cc5',
|
||||
},
|
||||
'hljs-keyword': {
|
||||
color: '#6f42c1',
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: '#6f42c1',
|
||||
},
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
background: '#ffffff',
|
||||
color: '#24292f',
|
||||
padding: '0.75em',
|
||||
border: '1px solid #e8edf1',
|
||||
borderRadius: '10px',
|
||||
},
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
} satisfies Record<string, CSSProperties>;
|
||||
|
||||
export default lightTheme;
|
||||
@@ -0,0 +1,64 @@
|
||||
'use client';
|
||||
|
||||
import { CheckIcon, CopyIcon } from '@phosphor-icons/react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter';
|
||||
import darkTheme from './CodeBlockDarkTheme';
|
||||
import lightTheme from './CodeBlockLightTheme';
|
||||
|
||||
const CodeBlock = ({
|
||||
language,
|
||||
children,
|
||||
}: {
|
||||
language: string;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const syntaxTheme = useMemo(() => {
|
||||
if (!mounted) return lightTheme;
|
||||
return resolvedTheme === 'dark' ? darkTheme : lightTheme;
|
||||
}, [mounted, resolvedTheme]);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
className="absolute top-2 right-2 p-1"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(children as string);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}}
|
||||
>
|
||||
{copied ? (
|
||||
<CheckIcon
|
||||
size={16}
|
||||
className="absolute top-2 right-2 text-black/70 dark:text-white/70"
|
||||
/>
|
||||
) : (
|
||||
<CopyIcon
|
||||
size={16}
|
||||
className="absolute top-2 right-2 transition duration-200 text-black/70 dark:text-white/70 hover:text-gray-800/70 hover:dark:text-gray-300/70"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
<SyntaxHighlighter
|
||||
language={language}
|
||||
style={syntaxTheme}
|
||||
showInlineLineNumbers
|
||||
>
|
||||
{children as string}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeBlock;
|
||||
165
apps/frontend/src/components/MessageSources.tsx
Normal file
165
apps/frontend/src/components/MessageSources.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
DialogTitle,
|
||||
Transition,
|
||||
TransitionChild,
|
||||
} from '@headlessui/react';
|
||||
import { File } from 'lucide-react';
|
||||
import { Fragment, useState } from 'react';
|
||||
import { Chunk } from '@/lib/types';
|
||||
|
||||
const MessageSources = ({ sources }: { sources: Chunk[] }) => {
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
|
||||
const closeModal = () => {
|
||||
setIsDialogOpen(false);
|
||||
document.body.classList.remove('overflow-hidden-scrollable');
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
setIsDialogOpen(true);
|
||||
document.body.classList.add('overflow-hidden-scrollable');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
{sources.slice(0, 3).map((source, i) => (
|
||||
<a
|
||||
className="bg-light-100 hover:bg-light-200 dark:bg-dark-100 dark:hover:bg-dark-200 transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
|
||||
key={i}
|
||||
href={source.metadata.url}
|
||||
target="_blank"
|
||||
>
|
||||
<p className="dark:text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
{source.metadata.title}
|
||||
</p>
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<div className="flex flex-row items-center space-x-1">
|
||||
{source.metadata.url.includes('file_id://') ? (
|
||||
<div className="bg-dark-200 hover:bg-dark-100 transition duration-200 flex items-center justify-center w-6 h-6 rounded-full">
|
||||
<File size={12} className="text-white/70" />
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
src={`https://s2.googleusercontent.com/s2/favicons?domain_url=${source.metadata.url}`}
|
||||
width={16}
|
||||
height={16}
|
||||
alt="favicon"
|
||||
className="rounded-lg h-4 w-4"
|
||||
/>
|
||||
)}
|
||||
<p className="text-xs text-black/50 dark:text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
{source.metadata.url.includes('file_id://')
|
||||
? 'Uploaded File'
|
||||
: source.metadata.url.replace(/.+\/\/|www.|\..+/g, '')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 text-xs">
|
||||
<div className="bg-black/50 dark:bg-white/50 h-[4px] w-[4px] rounded-full" />
|
||||
<span>{i + 1}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
{sources.length > 3 && (
|
||||
<button
|
||||
onClick={openModal}
|
||||
className="bg-light-100 hover:bg-light-200 dark:bg-dark-100 dark:hover:bg-dark-200 transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
|
||||
>
|
||||
<div className="flex flex-row items-center space-x-1">
|
||||
{sources.slice(3, 6).map((source, i) => {
|
||||
return source.metadata.url === 'File' ? (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-dark-200 hover:bg-dark-100 transition duration-200 flex items-center justify-center w-6 h-6 rounded-full"
|
||||
>
|
||||
<File size={12} className="text-white/70" />
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
key={i}
|
||||
src={`https://s2.googleusercontent.com/s2/favicons?domain_url=${source.metadata.url}`}
|
||||
width={16}
|
||||
height={16}
|
||||
alt="favicon"
|
||||
className="rounded-lg h-4 w-4"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="text-xs text-black/50 dark:text-white/50">
|
||||
View {sources.length - 3} more
|
||||
</p>
|
||||
</button>
|
||||
)}
|
||||
<Transition appear show={isDialogOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-50" onClose={closeModal}>
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-out duration-200"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-100"
|
||||
leaveFrom="opacity-100 scale-200"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel className="w-full max-w-md transform rounded-2xl bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 p-6 text-left align-middle shadow-xl transition-all">
|
||||
<DialogTitle className="text-lg font-medium leading-6 dark:text-white">
|
||||
Sources
|
||||
</DialogTitle>
|
||||
<div className="grid grid-cols-2 gap-2 overflow-auto max-h-[300px] mt-2 pr-2">
|
||||
{sources.map((source, i) => (
|
||||
<a
|
||||
className="bg-light-secondary hover:bg-light-200 dark:bg-dark-secondary dark:hover:bg-dark-200 border border-light-200 dark:border-dark-200 transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
|
||||
key={i}
|
||||
href={source.metadata.url}
|
||||
target="_blank"
|
||||
>
|
||||
<p className="dark:text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
{source.metadata.title}
|
||||
</p>
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<div className="flex flex-row items-center space-x-1">
|
||||
{source.metadata.url === 'File' ? (
|
||||
<div className="bg-dark-200 hover:bg-dark-100 transition duration-200 flex items-center justify-center w-6 h-6 rounded-full">
|
||||
<File size={12} className="text-white/70" />
|
||||
</div>
|
||||
) : (
|
||||
<img
|
||||
src={`https://s2.googleusercontent.com/s2/favicons?domain_url=${source.metadata.url}`}
|
||||
width={16}
|
||||
height={16}
|
||||
alt="favicon"
|
||||
className="rounded-lg h-4 w-4"
|
||||
/>
|
||||
)}
|
||||
<p className="text-xs text-black/50 dark:text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
{source.metadata.url.replace(
|
||||
/.+\/\/|www.|\..+/g,
|
||||
'',
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 text-xs">
|
||||
<div className="bg-black/50 dark:bg-white/50 h-[4px] w-[4px] rounded-full" />
|
||||
<span>{i + 1}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageSources;
|
||||
327
apps/frontend/src/components/Navbar.tsx
Normal file
327
apps/frontend/src/components/Navbar.tsx
Normal file
@@ -0,0 +1,327 @@
|
||||
import { Clock, Edit, Share, Trash, FileText, FileDown } from 'lucide-react';
|
||||
import { Message } from './ChatWindow';
|
||||
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';
|
||||
import { useChat, Section } from '@/lib/hooks/useChat';
|
||||
import { SourceBlock } from '@/lib/types';
|
||||
|
||||
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 = (sections: Section[], title: string) => {
|
||||
const date = new Date(
|
||||
sections[0].message.createdAt || Date.now(),
|
||||
).toLocaleString();
|
||||
let md = `# 💬 Chat Export: ${title}\n\n`;
|
||||
md += `*Exported on: ${date}*\n\n---\n`;
|
||||
|
||||
sections.forEach((section, idx) => {
|
||||
md += `\n---\n`;
|
||||
md += `**🧑 User**
|
||||
`;
|
||||
md += `*${new Date(section.message.createdAt).toLocaleString()}*\n\n`;
|
||||
md += `> ${section.message.query.replace(/\n/g, '\n> ')}\n`;
|
||||
|
||||
if (section.message.responseBlocks.length > 0) {
|
||||
md += `\n---\n`;
|
||||
md += `**🤖 Assistant**
|
||||
`;
|
||||
md += `*${new Date(section.message.createdAt).toLocaleString()}*\n\n`;
|
||||
md += `> ${section.message.responseBlocks
|
||||
.filter((b) => b.type === 'text')
|
||||
.map((block) => block.data)
|
||||
.join('\n')
|
||||
.replace(/\n/g, '\n> ')}\n`;
|
||||
}
|
||||
|
||||
const sourceResponseBlock = section.message.responseBlocks.find(
|
||||
(block) => block.type === 'source',
|
||||
) as SourceBlock | undefined;
|
||||
|
||||
if (
|
||||
sourceResponseBlock &&
|
||||
sourceResponseBlock.data &&
|
||||
sourceResponseBlock.data.length > 0
|
||||
) {
|
||||
md += `\n**Citations:**\n`;
|
||||
sourceResponseBlock.data.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 = (sections: Section[], title: string) => {
|
||||
const doc = new jsPDF();
|
||||
const date = new Date(
|
||||
sections[0]?.message?.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);
|
||||
|
||||
sections.forEach((section, idx) => {
|
||||
if (y > pageHeight - 30) {
|
||||
doc.addPage();
|
||||
y = 15;
|
||||
}
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('User', 10, y);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.setFontSize(10);
|
||||
doc.setTextColor(120);
|
||||
doc.text(`${new Date(section.message.createdAt).toLocaleString()}`, 40, y);
|
||||
y += 6;
|
||||
doc.setTextColor(30);
|
||||
doc.setFontSize(12);
|
||||
const userLines = doc.splitTextToSize(section.message.query, 180);
|
||||
for (let i = 0; i < userLines.length; i++) {
|
||||
if (y > pageHeight - 20) {
|
||||
doc.addPage();
|
||||
y = 15;
|
||||
}
|
||||
doc.text(userLines[i], 12, y);
|
||||
y += 6;
|
||||
}
|
||||
y += 6;
|
||||
doc.setDrawColor(230);
|
||||
if (y > pageHeight - 10) {
|
||||
doc.addPage();
|
||||
y = 15;
|
||||
}
|
||||
doc.line(10, y, 200, y);
|
||||
y += 4;
|
||||
|
||||
if (section.message.responseBlocks.length > 0) {
|
||||
if (y > pageHeight - 30) {
|
||||
doc.addPage();
|
||||
y = 15;
|
||||
}
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Assistant', 10, y);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.setFontSize(10);
|
||||
doc.setTextColor(120);
|
||||
doc.text(
|
||||
`${new Date(section.message.createdAt).toLocaleString()}`,
|
||||
40,
|
||||
y,
|
||||
);
|
||||
y += 6;
|
||||
doc.setTextColor(30);
|
||||
doc.setFontSize(12);
|
||||
const assistantLines = doc.splitTextToSize(
|
||||
section.parsedTextBlocks.join('\n'),
|
||||
180,
|
||||
);
|
||||
for (let i = 0; i < assistantLines.length; i++) {
|
||||
if (y > pageHeight - 20) {
|
||||
doc.addPage();
|
||||
y = 15;
|
||||
}
|
||||
doc.text(assistantLines[i], 12, y);
|
||||
y += 6;
|
||||
}
|
||||
|
||||
const sourceResponseBlock = section.message.responseBlocks.find(
|
||||
(block) => block.type === 'source',
|
||||
) as SourceBlock | undefined;
|
||||
|
||||
if (
|
||||
sourceResponseBlock &&
|
||||
sourceResponseBlock.data &&
|
||||
sourceResponseBlock.data.length > 0
|
||||
) {
|
||||
doc.setFontSize(11);
|
||||
doc.setTextColor(80);
|
||||
if (y > pageHeight - 20) {
|
||||
doc.addPage();
|
||||
y = 15;
|
||||
}
|
||||
doc.text('Citations:', 12, y);
|
||||
y += 5;
|
||||
sourceResponseBlock.data.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 = () => {
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [timeAgo, setTimeAgo] = useState<string>('');
|
||||
|
||||
const { sections, chatId } = useChat();
|
||||
|
||||
useEffect(() => {
|
||||
if (sections.length > 0 && sections[0].message) {
|
||||
const newTitle =
|
||||
sections[0].message.query.length > 30
|
||||
? `${sections[0].message.query.substring(0, 30).trim()}...`
|
||||
: sections[0].message.query || 'New Conversation';
|
||||
|
||||
setTitle(newTitle);
|
||||
const newTimeAgo = formatTimeDifference(
|
||||
new Date(),
|
||||
sections[0].message.createdAt,
|
||||
);
|
||||
setTimeAgo(newTimeAgo);
|
||||
}
|
||||
}, [sections]);
|
||||
|
||||
useEffect(() => {
|
||||
const intervalId = setInterval(() => {
|
||||
if (sections.length > 0 && sections[0].message) {
|
||||
const newTimeAgo = formatTimeDifference(
|
||||
new Date(),
|
||||
sections[0].message.createdAt,
|
||||
);
|
||||
setTimeAgo(newTimeAgo);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="sticky -mx-4 lg:mx-0 top-0 z-40 bg-light-primary/95 dark:bg-dark-primary/95 backdrop-blur-sm border-b border-light-200/50 dark:border-dark-200/30">
|
||||
<div className="px-4 lg:px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center min-w-0">
|
||||
<a
|
||||
href="/"
|
||||
className="lg:hidden mr-3 p-2 -ml-2 rounded-lg hover:bg-light-secondary dark:hover:bg-dark-secondary transition-colors duration-200"
|
||||
>
|
||||
<Edit size={18} className="text-black/70 dark:text-white/70" />
|
||||
</a>
|
||||
<div className="hidden lg:flex items-center gap-2 text-black/50 dark:text-white/50 min-w-0">
|
||||
<Clock size={14} />
|
||||
<span className="text-xs whitespace-nowrap">{timeAgo} ago</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 mx-4 min-w-0">
|
||||
<h1 className="text-center text-sm font-medium text-black/80 dark:text-white/90 truncate">
|
||||
{title || 'New Conversation'}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 min-w-0">
|
||||
<Popover className="relative">
|
||||
<PopoverButton className="p-2 rounded-lg hover:bg-light-secondary dark:hover:bg-dark-secondary transition-colors duration-200">
|
||||
<Share size={16} className="text-black/60 dark:text-white/60" />
|
||||
</PopoverButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<PopoverPanel className="absolute right-0 mt-2 w-64 origin-top-right rounded-2xl bg-light-primary dark:bg-dark-primary border border-light-200 dark:border-dark-200 shadow-xl shadow-black/10 dark:shadow-black/30 z-50">
|
||||
<div className="p-3">
|
||||
<div className="mb-2">
|
||||
<p className="text-xs font-medium text-black/40 dark:text-white/40 uppercase tracking-wide">
|
||||
Export Chat
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<button
|
||||
className="w-full flex items-center gap-3 px-3 py-2 text-left rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition-colors duration-200"
|
||||
onClick={() => exportAsMarkdown(sections, title || '')}
|
||||
>
|
||||
<FileText size={16} className="text-[#24A0ED]" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-black dark:text-white">
|
||||
Markdown
|
||||
</p>
|
||||
<p className="text-xs text-black/50 dark:text-white/50">
|
||||
.md format
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className="w-full flex items-center gap-3 px-3 py-2 text-left rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition-colors duration-200"
|
||||
onClick={() => exportAsPDF(sections, title || '')}
|
||||
>
|
||||
<FileDown size={16} className="text-[#24A0ED]" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-black dark:text-white">
|
||||
PDF
|
||||
</p>
|
||||
<p className="text-xs text-black/50 dark:text-white/50">
|
||||
Document format
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</Transition>
|
||||
</Popover>
|
||||
<DeleteChat
|
||||
redirect
|
||||
chatId={chatId!}
|
||||
chats={[]}
|
||||
setChats={() => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
71
apps/frontend/src/components/NewsArticleWidget.tsx
Normal file
71
apps/frontend/src/components/NewsArticleWidget.tsx
Normal file
@@ -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-2xl border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/25 flex flex-row items-stretch w-full h-24 min-h-[96px] max-h-[96px] p-0 overflow-hidden">
|
||||
{loading ? (
|
||||
<div className="animate-pulse flex flex-row items-stretch w-full h-full">
|
||||
<div className="w-24 min-w-24 max-w-24 h-full bg-light-200 dark:bg-dark-200" />
|
||||
<div className="flex flex-col justify-center flex-1 px-3 py-2 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-stretch w-full h-full relative overflow-hidden group"
|
||||
>
|
||||
<div className="relative w-24 min-w-24 max-w-24 h-full overflow-hidden">
|
||||
<img
|
||||
className="object-cover w-full h-full bg-light-200 dark:bg-dark-200 group-hover:scale-110 transition-transform duration-300"
|
||||
src={
|
||||
new URL(article.thumbnail).origin +
|
||||
new URL(article.thumbnail).pathname +
|
||||
`?id=${new URL(article.thumbnail).searchParams.get('id')}`
|
||||
}
|
||||
alt={article.title}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center flex-1 px-3 py-2">
|
||||
<div className="font-semibold text-xs text-black dark:text-white leading-tight line-clamp-2 mb-1">
|
||||
{article.title}
|
||||
</div>
|
||||
<p className="text-black/60 dark:text-white/60 text-[10px] leading-relaxed line-clamp-2">
|
||||
{article.content}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsArticleWidget;
|
||||
152
apps/frontend/src/components/SearchImages.tsx
Normal file
152
apps/frontend/src/components/SearchImages.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { ImagesIcon, PlusIcon } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import Lightbox from 'yet-another-react-lightbox';
|
||||
import 'yet-another-react-lightbox/styles.css';
|
||||
import { Message } from './ChatWindow';
|
||||
|
||||
type Image = {
|
||||
url: string;
|
||||
img_src: string;
|
||||
title: string;
|
||||
};
|
||||
|
||||
const SearchImages = ({
|
||||
query,
|
||||
chatHistory,
|
||||
messageId,
|
||||
}: {
|
||||
query: string;
|
||||
chatHistory: [string, string][];
|
||||
messageId: string;
|
||||
}) => {
|
||||
const [images, setImages] = useState<Image[] | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [slides, setSlides] = useState<any[]>([]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!loading && images === null && (
|
||||
<button
|
||||
id={`search-images-${messageId}`}
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
|
||||
const chatModelProvider = localStorage.getItem(
|
||||
'chatModelProviderId',
|
||||
);
|
||||
const chatModel = localStorage.getItem('chatModelKey');
|
||||
|
||||
const res = await fetch(`/api/images`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: query,
|
||||
chatHistory: chatHistory,
|
||||
chatModel: {
|
||||
providerId: chatModelProvider,
|
||||
key: chatModel,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
const images = data.images ?? [];
|
||||
setImages(images);
|
||||
setSlides(
|
||||
images.map((image: Image) => {
|
||||
return {
|
||||
src: image.img_src,
|
||||
};
|
||||
}),
|
||||
);
|
||||
setLoading(false);
|
||||
}}
|
||||
className="border border-dashed border-light-200 dark:border-dark-200 hover:bg-light-200 dark:hover:bg-dark-200 active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg dark:text-white text-sm w-full"
|
||||
>
|
||||
<div className="flex flex-row items-center space-x-2">
|
||||
<ImagesIcon size={17} />
|
||||
<p>Search images</p>
|
||||
</div>
|
||||
<PlusIcon className="text-[#24A0ED]" size={17} />
|
||||
</button>
|
||||
)}
|
||||
{loading && (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-light-secondary dark:bg-dark-secondary h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{images !== null && images.length > 0 && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{images.length > 4
|
||||
? images.slice(0, 3).map((image, i) => (
|
||||
<img
|
||||
onClick={() => {
|
||||
setOpen(true);
|
||||
setSlides([
|
||||
slides[i],
|
||||
...slides.slice(0, i),
|
||||
...slides.slice(i + 1),
|
||||
]);
|
||||
}}
|
||||
key={i}
|
||||
src={image.img_src}
|
||||
alt={image.title}
|
||||
className="h-full w-full aspect-video object-cover rounded-lg transition duration-200 active:scale-95 hover:scale-[1.02] cursor-zoom-in"
|
||||
/>
|
||||
))
|
||||
: images.map((image, i) => (
|
||||
<img
|
||||
onClick={() => {
|
||||
setOpen(true);
|
||||
setSlides([
|
||||
slides[i],
|
||||
...slides.slice(0, i),
|
||||
...slides.slice(i + 1),
|
||||
]);
|
||||
}}
|
||||
key={i}
|
||||
src={image.img_src}
|
||||
alt={image.title}
|
||||
className="h-full w-full aspect-video object-cover rounded-lg transition duration-200 active:scale-95 hover:scale-[1.02] cursor-zoom-in"
|
||||
/>
|
||||
))}
|
||||
{images.length > 4 && (
|
||||
<button
|
||||
onClick={() => setOpen(true)}
|
||||
className="bg-light-100 hover:bg-light-200 dark:bg-dark-100 dark:hover:bg-dark-200 transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between text-white p-2"
|
||||
>
|
||||
<div className="flex flex-row items-center space-x-1">
|
||||
{images.slice(3, 6).map((image, i) => (
|
||||
<img
|
||||
key={i}
|
||||
src={image.img_src}
|
||||
alt={image.title}
|
||||
className="h-6 w-12 rounded-md lg:h-3 lg:w-6 lg:rounded-sm aspect-video object-cover"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-black/70 dark:text-white/70 text-xs">
|
||||
View {images.length - 3} more
|
||||
</p>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<Lightbox open={open} close={() => setOpen(false)} slides={slides} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchImages;
|
||||
223
apps/frontend/src/components/SearchVideos.tsx
Normal file
223
apps/frontend/src/components/SearchVideos.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { PlayCircle, PlayIcon, PlusIcon, VideoIcon } from 'lucide-react';
|
||||
import { useRef, useState } from 'react';
|
||||
import Lightbox, { GenericSlide, VideoSlide } from 'yet-another-react-lightbox';
|
||||
import 'yet-another-react-lightbox/styles.css';
|
||||
import { Message } from './ChatWindow';
|
||||
|
||||
type Video = {
|
||||
url: string;
|
||||
img_src: string;
|
||||
title: string;
|
||||
iframe_src: string;
|
||||
};
|
||||
|
||||
declare module 'yet-another-react-lightbox' {
|
||||
export interface VideoSlide extends GenericSlide {
|
||||
type: 'video-slide';
|
||||
src: string;
|
||||
iframe_src: string;
|
||||
}
|
||||
|
||||
interface SlideTypes {
|
||||
'video-slide': VideoSlide;
|
||||
}
|
||||
}
|
||||
|
||||
const Searchvideos = ({
|
||||
query,
|
||||
chatHistory,
|
||||
messageId,
|
||||
}: {
|
||||
query: string;
|
||||
chatHistory: [string, string][];
|
||||
messageId: string;
|
||||
}) => {
|
||||
const [videos, setVideos] = useState<Video[] | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [slides, setSlides] = useState<VideoSlide[]>([]);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const videoRefs = useRef<(HTMLIFrameElement | null)[]>([]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!loading && videos === null && (
|
||||
<button
|
||||
id={`search-videos-${messageId}`}
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
|
||||
const chatModelProvider = localStorage.getItem(
|
||||
'chatModelProviderId',
|
||||
);
|
||||
const chatModel = localStorage.getItem('chatModelKey');
|
||||
|
||||
const res = await fetch(`/api/videos`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: query,
|
||||
chatHistory: chatHistory,
|
||||
chatModel: {
|
||||
providerId: chatModelProvider,
|
||||
key: chatModel,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
const videos = data.videos ?? [];
|
||||
setVideos(videos);
|
||||
setSlides(
|
||||
videos.map((video: Video) => {
|
||||
return {
|
||||
type: 'video-slide',
|
||||
iframe_src: video.iframe_src,
|
||||
src: video.img_src,
|
||||
};
|
||||
}),
|
||||
);
|
||||
setLoading(false);
|
||||
}}
|
||||
className="border border-dashed border-light-200 dark:border-dark-200 hover:bg-light-200 dark:hover:bg-dark-200 active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg dark:text-white text-sm w-full"
|
||||
>
|
||||
<div className="flex flex-row items-center space-x-2">
|
||||
<VideoIcon size={17} />
|
||||
<p>Search videos</p>
|
||||
</div>
|
||||
<PlusIcon className="text-[#24A0ED]" size={17} />
|
||||
</button>
|
||||
)}
|
||||
{loading && (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-light-secondary dark:bg-dark-secondary h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{videos !== null && videos.length > 0 && (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{videos.length > 4
|
||||
? videos.slice(0, 3).map((video, i) => (
|
||||
<div
|
||||
onClick={() => {
|
||||
setOpen(true);
|
||||
setSlides([
|
||||
slides[i],
|
||||
...slides.slice(0, i),
|
||||
...slides.slice(i + 1),
|
||||
]);
|
||||
}}
|
||||
className="relative transition duration-200 active:scale-95 hover:scale-[1.02] cursor-pointer"
|
||||
key={i}
|
||||
>
|
||||
<img
|
||||
src={video.img_src}
|
||||
alt={video.title}
|
||||
className="relative h-full w-full aspect-video object-cover rounded-lg"
|
||||
/>
|
||||
<div className="absolute bg-white/70 dark:bg-black/70 text-black/70 dark:text-white/70 px-2 py-1 flex flex-row items-center space-x-1 bottom-1 right-1 rounded-md">
|
||||
<PlayCircle size={15} />
|
||||
<p className="text-xs">Video</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
: videos.map((video, i) => (
|
||||
<div
|
||||
onClick={() => {
|
||||
setOpen(true);
|
||||
setSlides([
|
||||
slides[i],
|
||||
...slides.slice(0, i),
|
||||
...slides.slice(i + 1),
|
||||
]);
|
||||
}}
|
||||
className="relative transition duration-200 active:scale-95 hover:scale-[1.02] cursor-pointer"
|
||||
key={i}
|
||||
>
|
||||
<img
|
||||
src={video.img_src}
|
||||
alt={video.title}
|
||||
className="relative h-full w-full aspect-video object-cover rounded-lg"
|
||||
/>
|
||||
<div className="absolute bg-white/70 dark:bg-black/70 text-black/70 dark:text-white/70 px-2 py-1 flex flex-row items-center space-x-1 bottom-1 right-1 rounded-md">
|
||||
<PlayCircle size={15} />
|
||||
<p className="text-xs">Video</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{videos.length > 4 && (
|
||||
<button
|
||||
onClick={() => setOpen(true)}
|
||||
className="bg-light-100 hover:bg-light-200 dark:bg-dark-100 dark:hover:bg-dark-200 transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between text-white p-2"
|
||||
>
|
||||
<div className="flex flex-row items-center space-x-1">
|
||||
{videos.slice(3, 6).map((video, i) => (
|
||||
<img
|
||||
key={i}
|
||||
src={video.img_src}
|
||||
alt={video.title}
|
||||
className="h-6 w-12 rounded-md lg:h-3 lg:w-6 lg:rounded-sm aspect-video object-cover"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-black/70 dark:text-white/70 text-xs">
|
||||
View {videos.length - 3} more
|
||||
</p>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<Lightbox
|
||||
open={open}
|
||||
close={() => setOpen(false)}
|
||||
slides={slides}
|
||||
index={currentIndex}
|
||||
on={{
|
||||
view: ({ index }) => {
|
||||
const previousIframe = videoRefs.current[currentIndex];
|
||||
if (previousIframe?.contentWindow) {
|
||||
previousIframe.contentWindow.postMessage(
|
||||
'{"event":"command","func":"pauseVideo","args":""}',
|
||||
'*',
|
||||
);
|
||||
}
|
||||
|
||||
setCurrentIndex(index);
|
||||
},
|
||||
}}
|
||||
render={{
|
||||
slide: ({ slide }) => {
|
||||
const index = slides.findIndex((s) => s === slide);
|
||||
return slide.type === 'video-slide' ? (
|
||||
<div className="h-full w-full flex flex-row items-center justify-center">
|
||||
<iframe
|
||||
src={`${slide.iframe_src}${slide.iframe_src.includes('?') ? '&' : '?'}enablejsapi=1`}
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
videoRefs.current[index] = el;
|
||||
}
|
||||
}}
|
||||
className="aspect-video max-h-[95vh] w-[95vw] rounded-2xl md:w-[80vw]"
|
||||
allowFullScreen
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Searchvideos;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user