Merged in seth/VRFS-5512-jamtrack-landing-pages (pull request #53)

jamtrack landing pages
This commit is contained in:
Seth Call 2025-02-28 03:03:22 +00:00
commit 9d63882e69
106 changed files with 21615 additions and 128 deletions

View File

@ -1,7 +1,53 @@
image: node:14.17.1 image: node:14.21.3
pipelines: pipelines:
branches: branches:
seth/VRFS-5512-jamtrack-landing-pages:
- step:
name: Build Staging
script:
- pushd jam-ui
- npm install
- popd
- pushd jam-ui/cicd
- npm install
- NODE_ENV=production ENVIRONMENT=staging ./generate.sh
- popd
- cd jam-ui
- NODE_ENV=production CI=false REACT_APP_ORIGIN=staging.jamkazam.com REACT_APP_CLIENT_BASE_URL=https://staging.jamkazam.com REACT_APP_API_BASE_URL=https://staging.jamkazam.com/api REACT_APP_BITBUCKET_BUILD_NUMBER=$BITBUCKET_BUILD_NUMBER REACT_APP_BITBUCKET_COMMIT=$BITBUCKET_COMMIT npm run build
artifacts:
- jam-ui/build/**
- step:
name: Deploy to staging - SPA
script:
- pipe: atlassian/aws-s3-deploy:1.6.2
variables:
S3_BUCKET: "jamkazam-ui/stg"
LOCAL_PATH: "jam-ui/build"
EXTRA_ARGS: "--exclude=*backing-tracks/*"
- step:
name: Deploy to staging - backing-tracks
script:
- pipe: atlassian/aws-s3-deploy:1.6.2
variables:
S3_BUCKET: "jamkazam-ui/stg/backing-tracks"
LOCAL_PATH: "jam-ui/build/backing-tracks"
EXTRA_ARGS: "--exclude=*.js --content-type text/html"
- step:
name: Deploy to staging - backing-tracks js
script:
- pipe: atlassian/aws-s3-deploy:1.6.2
variables:
S3_BUCKET: "jamkazam-ui/stg/js"
LOCAL_PATH: "jam-ui/build/js"
EXTRA_ARGS: "--content-type text/javascript"
- step:
name: Deploy to staging - invalidate cloudfront distribution
deployment: staging
script:
- pipe: atlassian/aws-cloudfront-invalidate:0.10.1
variables:
DISTRIBUTION_ID: "E2AQIC9RSON94Q" # ESQDIABYLT0RV
develop: develop:
- step: - step:
name: Build Staging name: Build Staging
@ -15,7 +61,7 @@ pipelines:
name: Deploy to staging name: Deploy to staging
deployment: staging deployment: staging
script: script:
- pipe: atlassian/aws-s3-deploy:1.1.0 - pipe: atlassian/aws-s3-deploy:1.6.2
variables: variables:
S3_BUCKET: "jamkazam-ui/stg" S3_BUCKET: "jamkazam-ui/stg"
LOCAL_PATH: "jam-ui/build" LOCAL_PATH: "jam-ui/build"
@ -35,4 +81,4 @@ pipelines:
- pipe: atlassian/aws-s3-deploy:1.1.0 - pipe: atlassian/aws-s3-deploy:1.1.0
variables: variables:
S3_BUCKET: "jamkazam-ui/prd" S3_BUCKET: "jamkazam-ui/prd"
LOCAL_PATH: "jam-ui/build" LOCAL_PATH: "jam-ui/build"

View File

@ -8,4 +8,5 @@ REACT_APP_BITBUCKET_BUILD_NUMBER=dev
REACT_APP_BITBUCKET_COMMIT=dev REACT_APP_BITBUCKET_COMMIT=dev
REACT_APP_ENV=development REACT_APP_ENV=development
REACT_APP_RECAPTCHA_ENABLED=false REACT_APP_RECAPTCHA_ENABLED=false
REACT_APP_SITE_KEY=6Let8dgSAAAAAFheKGWrs6iaq_hIlPOZ2f3Bb56B REACT_APP_SITE_KEY=6Let8dgSAAAAAFheKGWrs6iaq_hIlPOZ2f3Bb56B
PUBLIC_URL=

View File

@ -1,9 +1,9 @@
HOST=beta.staging.jamkazam.com HOST=beta.staging.jamkazam.com
PORT=4000 PORT=4000
REACT_APP_ORIGIN=staging.jamkazam.com REACT_APP_ORIGIN=staging.jamkazam.com
REACT_APP_BASE_URL=http://beta.staging.jamkazam.com REACT_APP_BASE_URL=https://beta.staging.jamkazam.com
REACT_APP_CLIENT_BASE_URL=https://staging.jamkazam.com REACT_APP_CLIENT_BASE_URL=https://staging.jamkazam.com
REACT_APP_API_BASE_URL=https://staging.jamkazam.com/api REACT_APP_API_BASE_URL=https://staging.jamkazam.com/api
REACT_APP_ENV=staging REACT_APP_ENV=staging
REACT_APP_RECAPTCHA_ENABLED=false REACT_APP_RECAPTCHA_ENABLED=false
REACT_APP_SITE_KEY=6Let8dgSAAAAAFheKGWrs6iaq_hIlPOZ2f3Bb56B REACT_APP_SITE_KEY=6Let8dgSAAAAAFheKGWrs6iaq_hIlPOZ2f3Bb56B

View File

@ -3,6 +3,6 @@
"plugins": ["prettier"], "plugins": ["prettier"],
"rules": { "rules": {
"prettier/prettier": "error", "prettier/prettier": "error",
"react/no-unescaped-entities": false "react/no-unescaped-entities": 0
} }
} }

6
jam-ui/.gitignore vendored
View File

@ -30,4 +30,8 @@ yarn-error.log*
/test-results /test-results
/cypress/videos/ /cypress/videos/
/cypress/screenshots/ /cypress/screenshots/
/public/backing-tracks
/public/js

View File

@ -1,5 +1,14 @@
# JamKazam new react frontend UI/UX # JamKazam new react frontend UI/UX
`jam-ui` is a react app created using `create-react-app` utility. to run the app on your development environment you need to `cd jam-ui` and run `npm run start`
The changes to the source files are auto-loaded but sometimes you might need to force close it by crtl+c and then start manually.
The application files goes under `src` and the react components are placed under `src/components` directory. We have a convention of naming the files using JK prefix in the filename. For example `JKMusicSessions`.
The routes are defined in `jam-ui/src/components/dashboard/JKDashboardMain.js`
## Running react app ## Running react app
In production this React app is supposed to run on beta.jamkazam.com subdomain which is same origin domain to the production Rails app (www.jamkazam.com). This way we utilize same session based user authentication of Rails web app for authenticating users. (It looks for remember_token session cookie in headers and if it is not availale redirect the user to Rails web app sign in page) In production this React app is supposed to run on beta.jamkazam.com subdomain which is same origin domain to the production Rails app (www.jamkazam.com). This way we utilize same session based user authentication of Rails web app for authenticating users. (It looks for remember_token session cookie in headers and if it is not availale redirect the user to Rails web app sign in page)
@ -28,4 +37,3 @@ cd jam-ui
npm run start npm run start
This will open it in a borwser window at http://beta.jamkazam.local:3000. Of course for it to work you also need Rails (web) app and websocket app (websocket-gateway) running. This will open it in a borwser window at http://beta.jamkazam.local:3000. Of course for it to work you also need Rails (web) app and websocket app (websocket-gateway) running.

4
jam-ui/cicd/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
build
output
node_modules
public

1
jam-ui/cicd/.nvmrc Normal file
View File

@ -0,0 +1 @@
22

View File

@ -0,0 +1,7 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"ignore": [
"../src/components/e-commerce/*.js"
]
}

View File

@ -0,0 +1,35 @@
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
import React from "react";
import ReactDOM from "react-dom";
import Main from "../src/Main.js"
import TemplatePage from "../src/components/jamtracks/JKJamTracksLandingTemplatePage.js"
import '../src/helpers/initFA';
import '../src/i18n/config';
const rootElement = document.getElementById("root");
// Ensure props are passed correctly (or fetch from the server)
const props = window.jamtrack_data ? window.jamtrack_data : {
id: rootElement.dataset.id,
plan_code: rootElement.dataset.plan_code,
slug: rootElement.dataset.slug,
artist: rootElement.dataset.artist,
song: rootElement.dataset.song,
location: window.location.pathname,
};
console.log('init', props, rootElement);
// Hydrate the server-rendered React component
//ReactDOM.hydrate(React.createElement(TemplatePage, props), rootElement);
ReactDOM.render(
<Main>
<TemplatePage {...props} />
</Main>, rootElement
);

View File

@ -0,0 +1,19 @@
#!/bin/bash
# check if 1st argument spceified; if it is, then set that to SAVE_TO
if [ -n "$1" ]; then
SAVE_TO="$1"
else
SAVE_TO=`pwd`
fi
echo "Saving to $SAVE_TO"
psql jam -c "COPY( select id, original_artist, name , original_artist_slug, name_slug, plan_code, slug, ('https://www.jamkazam.com/backing-tracks/' || original_artist_slug || '/' || name_slug) as \"URL\", (select name from jam_track_licensors l where l.id = licensor_id) as \"Licensor\", vendor_id as \"Vendor ID\" FROM jam_tracks) TO '$SAVE_TO/jam_tracks_for_jam_ui.$USER.csv' with CSV HEADER;"
# dump all artists
psql jam -c "COPY( select original_artist, original_artist_slug, ('https://www.jamkazam.com/backing-tracks/' || original_artist_slug ) as \"URL\" FROM jam_tracks group by original_artist, original_artist_slug) TO '$SAVE_TO/jam_tracks_for_jam_ui_artists.$USER.csv' with CSV HEADER;"
echo "Moving personal files to $SAVE_TO"
sudo mv $SAVE_TO/jam_tracks_for_jam_ui.$USER.csv .
sudo mv $SAVE_TO/jam_tracks_for_jam_ui_artists.$USER.csv .

152
jam-ui/cicd/generate.js Normal file
View File

@ -0,0 +1,152 @@
const fs = require("fs");
const path = require("path");
const csv = require("csv-parser");
const React = require("react");
const dotenv = require("dotenv");
const ReactDOMServer = require("react-dom/server");
const TemplatePageModule = require("./build/components/jamtracks/JKJamTracksLandingTemplatePage");
var csvFilePath = `jam_tracks_for_jam_ui.${process.env.USER}.csv`
const init = () => {
const node_env = process.env.NODE_ENV || 'development';
const environment = process.env.ENVIRONMENT || 'development';
console.log(`environment=${environment} node_env=${node_env}`);
console.log(dotenv.config({ path: `../.env.${environment}` }));
if (environment === "production" || environment === "staging") {
csvFilePath = `jam_tracks_for_jam_ui.${environment}.csv`;
}
console.log("using csv file", csvFilePath);
if (!process.env.PUBLIC_URL) {
console.log("setting public url", process.env.REACT_APP_BASE_URL);
process.env.PUBLIC_URL = "";
}
//const __dirname = path.resolve(path.dirname(''));
console.log("init done successfully")
}
const generatePages = async (render) => {
const rows = [];
const OUTPUT_DIR = path.join(__dirname, "..", "public", "backing-tracks");
if (!fs.existsSync(OUTPUT_DIR)) {
fs.mkdirSync(OUTPUT_DIR, { recursive: true });
}
console.log("generatPages starting")
const TemplatePage = TemplatePageModule.default;
fs.createReadStream(csvFilePath)
.pipe(csv())
.on("data", (row) => rows.push(row))
.on("end", async () => {
console.log(`Processing ${rows.length} rows...`);
for (const row of rows) {
// id, original_artist, name, original_artist_slug, name_slug, plan_code, slug, URL, licensor, vendor_id
const { id, original_artist, name, original_artist_slug, name_slug, plan_code, slug } = row;
const artist = original_artist;
const song = name;
const location = `/backing-tracks/${original_artist_slug}/${name_slug}`;
const fullPath = process.env.REACT_APP_BASE_URL + location;
const logoPath = process.env.REACT_APP_BASE_URL + "/favicon.svg";
console.log(`Generating ${artist} - ${song}`);
const html = render
? ReactDOMServer.renderToStaticMarkup(
React.createElement(TemplatePage, { id, plan_code, slug, artist, song, location })
)
: "";
const fullHtml = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="/favicon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${artist} - ${song} - Free Backing Track</title>
<link rel="stylesheet" href="${process.env.REACT_APP_BASE_URL}/css/theme.css">
<meta name="description" content="Get free ${song} by ${artist} backing track, plus free tools to mute any part, slow down for practice, record yourself, more">
<meta name="keywords" content="Backing Track, ${artist}, ${song}, Instrumental">
<meta name="author" content="JamKazam">
<!-- Open Graph (Facebook, LinkedIn, etc.) -->
<meta property="og:title" content="${artist} - ${song} | Free Backing Track">
<meta property="og:description" content="Get free ${song} by ${artist} backing track, plus free tools to mute any part, slow down for practice, record yourself, more">
<meta property="og:image" content="${logoPath}">
<meta property="og:url" content="${fullPath}">
<meta property="og:type" content="music.song">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="${artist} - ${song} | Free Backing Track">
<meta name="twitter:description" content="Get free ${song} by ${artist} backing track, plus free tools to mute any part, slow down for practice, record yourself, more">
<meta name="twitter:image" content="${logoPath}">
<!-- Canonical URL -->
<link rel="canonical" href="${fullPath}" />
<!-- Structured Data (Schema.org) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "MusicRecording",
"name": "${song}",
"byArtist": {
"@type": "MusicGroup",
"name": "${artist}"
},
"url": "${fullPath}",
"image": "${logoPath}"
}
</script>
<script>
window.jamtrack_data = {
id: "${id}",
plan_code: "${plan_code}",
slug: "${slug}",
artist: "${artist}",
song: "${song}",
location: "${location}"
}
</script>
</head>
<body>
<div id="root">${html}</div>
<script src="/js/client-hydrate.bundle.js"></script>
</body>
</html>`;
const ARTIST_DIR = path.join(OUTPUT_DIR, original_artist_slug);
if (!fs.existsSync(ARTIST_DIR)) {
fs.mkdirSync(ARTIST_DIR, { recursive: false });
}
console.log("process.env.NODE_ENV=", process.env.NODE_ENV);
const finalOutputPath = process.env.NODE_ENV === "development" ? `${name_slug}.html` : name_slug;
const outputFilePath = path.join(ARTIST_DIR, finalOutputPath);
fs.writeFileSync(outputFilePath, fullHtml);
console.log(`Generated: ${outputFilePath}`);
}
console.log("All pages generated!");
});
};
let render = false;
if (process.argv.length > 2) {
render = process.argv[2] === "true" || process.argv[2] === "yes" || process.argv[2] === "1";
}
init()
generatePages(render);

40
jam-ui/cicd/generate.sh Executable file
View File

@ -0,0 +1,40 @@
#!/bin/bash
# requires node 22 at least
SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
# default NODE_ENV to development if not set
if [ -z "$NODE_ENV" ]; then
NODE_ENV=development
fi
# default ENVIRONMENT to development if not set
if [ -z "$ENVIRONMENT" ]; then
ENVIRONMENT=development
fi
set -eo pipefail
export NODE_ENV
export ENVIRONMENT
echo "cleaning"
rm -rf $SCRIPT_DIR/build
echo "creating build dir - this is for correct image resolution; ideally this wouldn't be needed"
#mkdir -p $SCRIPT_DIR/build/assets/img
#cp -r $SCRIPT_DIR/../src/assets/img/* $SCRIPT_DIR/build/assets/img/
echo "creating client-hydrate.bundle.js for jamtrack landing pages"
# PUBLIC_URL=? for server builds
# NODE_ENV=production for server builds
npx webpack
#cp -r public/* output/
npm run build
echo "run generate.js for all jamtracks defined in the CSV"
NODE_ENV=$NODE_ENV ENVIRONMENT=$ENVIRONMENT npm run generate-song-landing-pages

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,2 @@
id,original_artist,name,original_artist_slug,name_slug,plan_code,slug,URL,Licensor,Vendor ID
1,AC DC,Back in Black,ac-dc,back-in-black,jamtrack-acdc-backinblack,ac-dc-back-in-black,https://www.jamkazam.com/backing-tracks/ac-dc/back-in-black,,
1 id original_artist name original_artist_slug name_slug plan_code slug URL Licensor Vendor ID
2 1 AC DC Back in Black ac-dc back-in-black jamtrack-acdc-backinblack ac-dc-back-in-black https://www.jamkazam.com/backing-tracks/ac-dc/back-in-black

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,2 @@
original_artist,original_artist_slug,URL
AC DC,ac-dc,https://www.jamkazam.com/backing-tracks/ac-dc
1 original_artist original_artist_slug URL
2 AC DC ac-dc https://www.jamkazam.com/backing-tracks/ac-dc

File diff suppressed because it is too large Load Diff

3657
jam-ui/cicd/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

32
jam-ui/cicd/package.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "react-static-site-generator",
"version": "1.0.0",
"description": "A React-based static site generator from CSV",
"main": "generate.js",
"dependencies": {
"csv-parser": "^3.0.0",
"react": "^16.4.1",
"react-dom": "^16.4.1"
},
"scripts": {
"generate-song-landing-pages": "node generate.js",
"build": "babel ../src/ --out-dir build/",
"webpack": "webpack"
},
"author": "",
"license": "MIT",
"devDependencies": {
"@babel/cli": "^7.26.4",
"@babel/core": "^7.26.9",
"@babel/preset-env": "^7.26.9",
"@babel/preset-react": "^7.26.3",
"@babel/register": "^7.25.9",
"@svgr/webpack": "^8.1.0",
"babel-loader": "^9.2.1",
"dotenv-webpack": "^8.1.0",
"image-minimizer-webpack-plugin": "^4.1.3",
"imagemin": "^9.0.0",
"webpack": "^5.98.0",
"webpack-cli": "^6.0.1"
}
}

View File

@ -0,0 +1,55 @@
const path = require("path");
const webpack = require('webpack');
const Dotenv = require("dotenv-webpack");
const environment = process.env.ENVIRONMENT || 'development';
const node_env = process.env.NODE_ENV || 'development';
module.exports = {
entry: "./client-hydrate.js",
output: {
path: path.resolve(__dirname, "..", "public", "js"),
filename: "client-hydrate.bundle.js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
},
},
{
test: /\.svg/,
type: 'asset/inline'
},
{
test: /\.(png|jpe?g|gif)$/i,
type: 'asset',
}
],
},
resolve: {
extensions: [".js", ".jsx"],
alias: {
react: path.resolve('./node_modules/react'),
}
},
devtool: 'eval-source-map',
mode: node_env,
plugins: [
new Dotenv({
path: `../.env.${environment}`
})
],
optimization: {
minimize: node_env === 'production', //only minimize in production
},
};

View File

@ -13,7 +13,7 @@ const cleanCSS = require('gulp-clean-css');
-----------------------------------------------*/ -----------------------------------------------*/
gulp.task('scss', () => gulp.task('scss', () =>
gulp gulp
.src('src/assets/scss/*.scss') .src('src/assets/scss/theme.scss')
.pipe(plumber()) .pipe(plumber())
.pipe(sourcemaps.init()) .pipe(sourcemaps.init())
.pipe( .pipe(
@ -49,7 +49,7 @@ gulp.task('scss:dark', () =>
gulp.task('scss:rtl', () => gulp.task('scss:rtl', () =>
gulp gulp
.src('src/assets/scss/*.scss') .src('src/assets/scss/theme.scss')
.pipe(plumber()) .pipe(plumber())
.pipe(sourcemaps.init()) .pipe(sourcemaps.init())
.pipe( .pipe(

116
jam-ui/package-lock.json generated
View File

@ -305,12 +305,41 @@
} }
}, },
"@babel/helpers": { "@babel/helpers": {
"version": "7.26.7", "version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.7.tgz", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz",
"integrity": "sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==", "integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
"requires": { "requires": {
"@babel/template": "^7.25.9", "@babel/template": "^7.26.9",
"@babel/types": "^7.26.7" "@babel/types": "^7.26.9"
},
"dependencies": {
"@babel/parser": {
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz",
"integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==",
"requires": {
"@babel/types": "^7.26.9"
}
},
"@babel/template": {
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
"integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==",
"requires": {
"@babel/code-frame": "^7.26.2",
"@babel/parser": "^7.26.9",
"@babel/types": "^7.26.9"
}
},
"@babel/types": {
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
"integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
"requires": {
"@babel/helper-string-parser": "^7.25.9",
"@babel/helper-validator-identifier": "^7.25.9"
}
}
} }
}, },
"@babel/highlight": { "@babel/highlight": {
@ -2761,8 +2790,6 @@
}, },
"@fingerprintjs/fingerprintjs": { "@fingerprintjs/fingerprintjs": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/@fingerprintjs/fingerprintjs/-/fingerprintjs-4.6.0.tgz",
"integrity": "sha512-g2z4lF2saGxVT+AQSmJhPSwW/hBn8vnFJMW6UYOMl9ipJT7re0RZbr2+lB2eCZj/lJ89wWc21FMA14v9iOKroQ==",
"requires": { "requires": {
"tslib": "^2.4.1" "tslib": "^2.4.1"
} }
@ -6125,9 +6152,9 @@
} }
}, },
"fsevents": { "fsevents": {
"version": "2.3.2", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"optional": true "optional": true
}, },
"is-number": { "is-number": {
@ -6572,9 +6599,9 @@
} }
}, },
"confusing-browser-globals": { "confusing-browser-globals": {
"version": "1.0.10", "version": "1.0.11",
"resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz", "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
"integrity": "sha512-gNld/3lySHwuhaVluJUKLePYirM3QNCKzVxqAdhJII9/WXKVX5PURzMVJspS1jTslSqjeuG4KMVTSouit5YPHA==" "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA=="
}, },
"connect": { "connect": {
"version": "3.6.6", "version": "3.6.6",
@ -9386,6 +9413,8 @@
}, },
"filestack-js": { "filestack-js": {
"version": "3.32.3", "version": "3.32.3",
"resolved": "https://registry.npmjs.org/filestack-js/-/filestack-js-3.32.3.tgz",
"integrity": "sha512-bEQe3Cbc+jmGwTX3vx0985igDLabODaKbfgILpustZfaVgir3Wuaz35UJWvZbI/bPbJQ7+HON5wKzq7PGXCRUg==",
"requires": { "requires": {
"@babel/runtime": "^7.8.4", "@babel/runtime": "^7.8.4",
"@filestack/loader": "^1.0.9", "@filestack/loader": "^1.0.9",
@ -9719,10 +9748,14 @@
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
}, },
"fsevents": { "fsevents": {
"version": "2.1.2", "version": "1.2.13",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
"optional": true "optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
}, },
"fstream": { "fstream": {
"version": "1.0.12", "version": "1.0.12",
@ -10001,17 +10034,6 @@
"upath": "^1.1.1" "upath": "^1.1.1"
} }
}, },
"fsevents": {
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
"dev": true,
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
},
"glob-parent": { "glob-parent": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@ -12086,18 +12108,6 @@
"micromatch": "^3.1.10", "micromatch": "^3.1.10",
"sane": "^4.0.3", "sane": "^4.0.3",
"walker": "^1.0.7" "walker": "^1.0.7"
},
"dependencies": {
"fsevents": {
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
}
} }
}, },
"jest-jasmine2": { "jest-jasmine2": {
@ -17458,6 +17468,12 @@
} }
} }
} }
},
"fsevents": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
"integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
"optional": true
} }
} }
}, },
@ -20859,16 +20875,6 @@
"upath": "^1.1.1" "upath": "^1.1.1"
} }
}, },
"fsevents": {
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
},
"glob-parent": { "glob-parent": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@ -21320,16 +21326,6 @@
"upath": "^1.1.1" "upath": "^1.1.1"
} }
}, },
"fsevents": {
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
"optional": true,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
},
"glob-parent": { "glob-parent": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",

View File

@ -106,6 +106,7 @@
"eslint-config-prettier": "^4.2.0", "eslint-config-prettier": "^4.2.0",
"eslint-plugin-prettier": "^3.1.4", "eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6", "eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^1.7.0",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0", "gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^4.3.0", "gulp-clean-css": "^4.3.0",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 158 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 158 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 158 KiB

View File

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 499 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g>
<g transform="matrix(1,0,0,1,-57.9807,-32.8429)">
<path d="M556.58,69.309L556.58,142.277C556.58,162.413 540.232,178.761 520.096,178.761L94.466,178.761C74.33,178.761 57.982,162.413 57.982,142.277L57.982,69.309C57.982,49.173 74.33,32.825 94.466,32.825L520.096,32.825C540.232,32.825 556.58,49.173 556.58,69.309Z" style="fill:rgb(64,124,222);stroke:rgb(64,124,222);stroke-width:1px;"/>
</g>
<g transform="matrix(0.735399,0,0,0.685712,16.2125,4.37876)">
<use xlink:href="#_Image1" x="0" y="0" width="200px" height="200px"/>
</g>
<g transform="matrix(0.835193,0,0,0.769777,7.35556,11.1156)">
<g transform="matrix(0,45.5199,41.8804,0,154.724,117.573)">
<clipPath id="_clip2">
<path d="M0.544,-0.515C0.828,-0.515 1.059,-0.285 1.059,-0C1.059,0.285 0.828,0.515 0.544,0.515C0.259,0.515 0.029,0.285 0.029,-0C0.029,-0.285 0.259,-0.515 0.544,-0.515Z" clip-rule="nonzero"/>
</clipPath>
<g clip-path="url(#_clip2)">
<g transform="matrix(-0,0.0285892,0.0285387,-0,-2.90011,-3.90471)">
<use xlink:href="#_Image3" x="118.559" y="102.621" width="37px" height="37px"/>
</g>
</g>
</g>
<g transform="matrix(0.0344151,0,0,0.0374059,147.879,151.575)">
<path d="M0,-154.033C-2.474,-154.033 -5.313,-153.848 -8.173,-153.3L-9.523,-154.65L-31.649,-132.524C-3.542,-126.838 27.743,-109.611 54.701,-82.653C80.678,-56.677 97.623,-26.68 103.909,0.617L125.571,-21.044C126.606,-27.607 126.092,-35.629 123.906,-44.621C118.523,-66.773 103.788,-91.125 83.481,-111.433C69.838,-125.077 54.383,-136.259 38.787,-143.771C24.855,-150.484 11.443,-154.033 0.004,-154.033L0,-154.033Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.0344151,0,0,0.0374059,166.511,149.078)">
<path d="M0,-507.546C-18,-523.546 -68,-504.459 -68,-504.459L-68,-475.459L-101,-475.459L-278.654,-297.806C-305.358,-307.529 -331.964,-304.975 -348.535,-288.403C-348.856,-288.083 -349.147,-287.739 -349.458,-287.411C-352.297,-285.827 -354.972,-283.839 -357.385,-281.425L-521.669,-117.142C-493.562,-111.455 -462.276,-94.229 -435.318,-67.271C-409.342,-41.294 -392.397,-11.297 -386.11,16L-223.034,-147.075C-223.021,-147.089 -223.009,-147.105 -222.995,-147.116C-219.827,-149.073 -216.869,-151.37 -214.186,-154.054C-196.466,-171.772 -194.776,-200.962 -206.983,-229.477L-24,-412.46L-30,-440.459L2,-446.459C2,-446.459 18,-491.546 0,-507.546" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.0344151,0,0,0.0374059,143.804,133.272)">
<path d="M0,480.02C6.414,473.606 15.482,472.258 21.961,472.258L21.965,472.258C40.656,472.258 62.085,482.528 79.286,499.729C93.4,513.843 103.109,531.325 105.923,547.69C107.259,555.464 108.137,569.874 98.994,579.015C92.578,585.432 83.511,586.779 77.034,586.779C65.598,586.779 53.138,582.929 41.248,576.007C59.173,571.815 68.087,566.259 71.21,557.708C74.738,548.046 69.982,536.425 55.308,518.85C48.082,510.198 37.366,505.993 22.547,505.993C14.982,505.993 7.308,507.006 -0.115,507.987C-2.572,508.311 -4.976,508.628 -7.297,508.897C-8.341,500.815 -8.253,488.273 0,480.02M881.888,28.315C881.909,27.528 881.772,26.673 881.425,25.76L881.43,25.758L864.385,-14.544C864.338,-14.654 864.29,-14.768 864.24,-14.884C863.968,-15.528 863.808,-15.906 863.786,-15.957L863.754,-15.944C863.409,-16.629 862.982,-17.33 862.412,-17.934C814.184,-120.121 738.177,-205.502 641.446,-265.845C592.524,-296.364 539.249,-319.919 483.101,-335.857C427.332,-351.688 369.766,-359.714 312.001,-359.714C152.069,-359.714 2.72,-298.442 -108.537,-187.183C-174.663,-121.058 -225.269,-38.981 -254.883,50.173C-284.492,139.309 -293.085,235.418 -279.735,328.11C-269.758,397.378 -239.036,460.967 -193.227,507.163C-169.749,530.837 -143.033,549.315 -113.818,562.083C-83.092,575.512 -50.22,582.321 -16.116,582.321C-8.628,582.321 -1.049,581.981 6.571,581.318C28.379,601.205 54.305,611.779 77.034,611.779C92.498,611.779 106.484,606.881 116.672,596.693C118.715,594.65 120.52,592.438 122.141,590.109L192.627,519.623C193.661,513.059 193.147,505.039 190.962,496.046C185.579,473.894 170.844,449.543 150.536,429.234C136.893,415.59 121.439,404.409 105.843,396.896C91.91,390.183 78.499,386.634 67.06,386.634L67.056,386.634C64.582,386.634 61.742,386.819 58.883,387.368L57.532,386.017L-12.853,456.403C-14.665,458.214 -16.23,460.178 -17.573,462.243C-17.607,462.277 -17.644,462.308 -17.678,462.342C-29.263,473.928 -33.994,490.42 -32.477,508.418C-68.221,503.794 -101.782,488.342 -130.175,463.302C-160.397,436.651 -182.628,400.421 -192.773,361.29C-215.521,273.543 -212.216,178.442 -183.218,86.269C-169.219,41.772 -149.57,-0.79 -124.817,-40.235C-99.785,-80.125 -70.023,-116.034 -36.357,-146.966C12.265,-191.639 67.591,-225.83 128.083,-248.589C185.326,-270.125 246.008,-281.045 308.442,-281.045C370.17,-281.045 431.402,-270.437 490.438,-249.517C549.446,-228.607 603.681,-198.309 651.635,-159.465C701.102,-119.396 741.967,-71.723 773.098,-17.77C806.02,39.288 827.213,102.071 836.09,168.835C843.646,225.67 841.637,283.236 830.116,339.932C818.887,395.194 798.935,448.225 770.812,497.553C742.676,546.908 707.203,591.077 665.38,628.832C622.43,667.606 573.873,698.592 521.06,720.931C457.531,747.801 386.94,762.004 316.918,762.006C270.199,762.006 223.948,755.852 179.45,743.713C126.396,729.239 76.185,706.575 30.214,676.349C22.573,671.326 15.793,665.93 9.236,660.713C-8.354,646.716 -24.969,633.497 -51.561,633.497C-51.883,633.497 -52.202,633.499 -52.526,633.502C-53.249,633.51 -53.974,633.515 -54.695,633.515C-82.262,633.515 -110.339,627.374 -138.146,615.26L-161.46,605.105L-145.145,624.611C-116.379,659.002 -83.567,690.177 -47.623,717.269C-12.579,743.682 25.619,766.355 65.91,784.656C145.235,820.686 233.265,839.732 320.48,839.734L320.491,839.734C424.057,839.734 525.681,813.159 614.362,762.886C741.202,690.982 837.576,573.648 885.73,432.499C931.153,299.356 929.635,156.816 881.888,28.315" style="fill:white;fill-rule:nonzero;"/>
</g>
</g>
<g transform="matrix(1,0,0,1,-4.7583,-15.589)">
<text x="181.54px" y="81.156px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:28px;fill:white;">Download JamKazam</text>
<g transform="matrix(28,0,0,28,453.091,110.072)">
</g>
<text x="182.333px" y="110.072px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:28px;fill:white;">for Windows (Legacy)</text>
</g>
</g>
<defs>
<image id="_Image1" width="200px" height="200px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAyKADAAQAAAABAAAAyAAAAACbWz2VAAAFCElEQVR4Ae3bwU0bARiEUTaiDBqhkRQJhdAIfWzMBcvHDySLMC8nkGZZz/s1N+fhwT8CBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwP8qcNzrg5/n+XR51/O93vfD3/N2HMd7+Yz8brSy383T4ZfHkP1u9GMcL9/9I7/k+b+XHq+xC78r2Ff8rk+Hn/6ErCiBOQEDmTu5wkXAQIqW7JyAgcydXOEiYCBFS3ZOwEDmTq5wETCQoiU7J2AgcydXuAgYSNGSnRMwkLmTK1wEDKRoyc4JGMjcyRUuAgZStGTnBAxk7uQKFwEDKVqycwIGMndyhYuAgRQt2TkBA5k7ucJFwECKluycgIHMnVzhImAgRUt2TsBA5k6ucBEwkKIlOydgIHMnV7gIGEjRkp0TMJC5kytcBAykaMnOCRjI3MkVLgIGUrRk5wQMZO7kChcBAylasnMCBjJ3coWLgIEULdk5AQOZO7nCRcBAipbsnICBzJ1c4SJgIEVLdk7AQOZOrnARMJCiJTsnYCBzJ1e4CBhI0ZKdEzCQuZMrXAQMpGjJzgkYyNzJFS4CBlK0ZOcEDGTu5AoXAQMpWrJzAgYyd3KFi4CBFC3ZOQEDmTu5wkXAQIqW7JyAgcydXOEiYCBFS3ZOwEDmTq5wETCQoiU7J2AgcydXuAgYSNGSnRMwkLmTK1wEDKRoyc4JGMjcyRUuAgZStGTnBAxk7uQKFwEDKVqycwIGMndyhYuAgRQt2TmB416Nz/N8urzr+V7v++HveTuO4718Rn43Wtnv5mm/ECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMBdBXxZ8a7cny/LX7bzZcVPu48fst/N0+GXx5D9bvTjm7wv3/0jv+T5v5cer7ELvyvYV/yuT4ef/H+QgCW6J2AgezfXOAgYSMAS3RMwkL2baxwEDCRgie4JGMjezTUOAgYSsET3BAxk7+YaBwEDCViiewIGsndzjYOAgQQs0T0BA9m7ucZBwEACluiegIHs3VzjIGAgAUt0T8BA9m6ucRAwkIAluidgIHs31zgIGEjAEt0TMJC9m2scBAwkYInuCRjI3s01DgIGErBE9wQMZO/mGgcBAwlYonsCBrJ3c42DgIEELNE9AQPZu7nGQcBAApbonoCB7N1c4yBgIAFLdE/AQPZurnEQMJCAJbonYCB7N9c4CBhIwBLdEzCQvZtrHAQMJGCJ7gkYyN7NNQ4CBhKwRPcEDGTv5hoHAQMJWKJ7Agayd3ONg4CBBCzRPQED2bu5xkHAQAKW6J6AgezdXOMgYCABS3RPwED2bq5xEDCQgCW6J2AgezfXOAgYSMAS3RMwkL2baxwEDCRgie4JGMjezTUOAgYSsET3BAxk7+YaBwEDCViiewIGsndzjYOAgQQs0T0BA9m7ucZBwEACluiegIHs3VzjIGAgAUt0T8BA9m6ucRAwkIAluidw3KvyeZ5Pl3c93+t9P/w9b8dxvJfPyO9GK/vdPO0XAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMCEwD8AEzCh1V2GrQAAAABJRU5ErkJggg=="/>
<image id="_Image3" width="37px" height="37px" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAAlACUDAREAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAABQQGBwH/xAAcEAACAwEBAQEAAAAAAAAAAAAAAwQhMQECIhH/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCus9c88NgfKdtgRUl22SFSnbYEY5/1pFoEp22LAqU7bIipT9siKlO2wIxz/vQTQJTts0yKlO2yIqU/bBCpT9sCMa3vfVEWgSnbZpgVKdtgRUp+2BFSG973850ijkl3lM9WLIqUz1YETKZ6siidsk4Sf//Z"/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 9.5 KiB

View File

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 499 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g>
<g transform="matrix(1,0,0,1,-57.9807,-32.8429)">
<path d="M556.58,69.309L556.58,142.277C556.58,162.413 540.232,178.761 520.096,178.761L94.466,178.761C74.33,178.761 57.982,162.413 57.982,142.277L57.982,69.309C57.982,49.173 74.33,32.825 94.466,32.825L520.096,32.825C540.232,32.825 556.58,49.173 556.58,69.309Z" style="fill:rgb(64,124,222);stroke:rgb(64,124,222);stroke-width:1px;"/>
</g>
<g transform="matrix(0.735399,0,0,0.685712,16.2125,4.37876)">
<use xlink:href="#_Image1" x="0" y="0" width="200px" height="200px"/>
</g>
<g transform="matrix(0.835193,0,0,0.769777,7.35556,11.1156)">
<g transform="matrix(0,45.5199,41.8804,0,154.724,117.573)">
<clipPath id="_clip2">
<path d="M0.544,-0.515C0.828,-0.515 1.059,-0.285 1.059,-0C1.059,0.285 0.828,0.515 0.544,0.515C0.259,0.515 0.029,0.285 0.029,-0C0.029,-0.285 0.259,-0.515 0.544,-0.515Z" clip-rule="nonzero"/>
</clipPath>
<g clip-path="url(#_clip2)">
<g transform="matrix(-0,0.0285892,0.0285387,-0,-2.90011,-3.90471)">
<use xlink:href="#_Image3" x="118.559" y="102.621" width="37px" height="37px"/>
</g>
</g>
</g>
<g transform="matrix(0.0344151,0,0,0.0374059,147.879,151.575)">
<path d="M0,-154.033C-2.474,-154.033 -5.313,-153.848 -8.173,-153.3L-9.523,-154.65L-31.649,-132.524C-3.542,-126.838 27.743,-109.611 54.701,-82.653C80.678,-56.677 97.623,-26.68 103.909,0.617L125.571,-21.044C126.606,-27.607 126.092,-35.629 123.906,-44.621C118.523,-66.773 103.788,-91.125 83.481,-111.433C69.838,-125.077 54.383,-136.259 38.787,-143.771C24.855,-150.484 11.443,-154.033 0.004,-154.033L0,-154.033Z" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.0344151,0,0,0.0374059,166.511,149.078)">
<path d="M0,-507.546C-18,-523.546 -68,-504.459 -68,-504.459L-68,-475.459L-101,-475.459L-278.654,-297.806C-305.358,-307.529 -331.964,-304.975 -348.535,-288.403C-348.856,-288.083 -349.147,-287.739 -349.458,-287.411C-352.297,-285.827 -354.972,-283.839 -357.385,-281.425L-521.669,-117.142C-493.562,-111.455 -462.276,-94.229 -435.318,-67.271C-409.342,-41.294 -392.397,-11.297 -386.11,16L-223.034,-147.075C-223.021,-147.089 -223.009,-147.105 -222.995,-147.116C-219.827,-149.073 -216.869,-151.37 -214.186,-154.054C-196.466,-171.772 -194.776,-200.962 -206.983,-229.477L-24,-412.46L-30,-440.459L2,-446.459C2,-446.459 18,-491.546 0,-507.546" style="fill:white;fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.0344151,0,0,0.0374059,143.804,133.272)">
<path d="M0,480.02C6.414,473.606 15.482,472.258 21.961,472.258L21.965,472.258C40.656,472.258 62.085,482.528 79.286,499.729C93.4,513.843 103.109,531.325 105.923,547.69C107.259,555.464 108.137,569.874 98.994,579.015C92.578,585.432 83.511,586.779 77.034,586.779C65.598,586.779 53.138,582.929 41.248,576.007C59.173,571.815 68.087,566.259 71.21,557.708C74.738,548.046 69.982,536.425 55.308,518.85C48.082,510.198 37.366,505.993 22.547,505.993C14.982,505.993 7.308,507.006 -0.115,507.987C-2.572,508.311 -4.976,508.628 -7.297,508.897C-8.341,500.815 -8.253,488.273 0,480.02M881.888,28.315C881.909,27.528 881.772,26.673 881.425,25.76L881.43,25.758L864.385,-14.544C864.338,-14.654 864.29,-14.768 864.24,-14.884C863.968,-15.528 863.808,-15.906 863.786,-15.957L863.754,-15.944C863.409,-16.629 862.982,-17.33 862.412,-17.934C814.184,-120.121 738.177,-205.502 641.446,-265.845C592.524,-296.364 539.249,-319.919 483.101,-335.857C427.332,-351.688 369.766,-359.714 312.001,-359.714C152.069,-359.714 2.72,-298.442 -108.537,-187.183C-174.663,-121.058 -225.269,-38.981 -254.883,50.173C-284.492,139.309 -293.085,235.418 -279.735,328.11C-269.758,397.378 -239.036,460.967 -193.227,507.163C-169.749,530.837 -143.033,549.315 -113.818,562.083C-83.092,575.512 -50.22,582.321 -16.116,582.321C-8.628,582.321 -1.049,581.981 6.571,581.318C28.379,601.205 54.305,611.779 77.034,611.779C92.498,611.779 106.484,606.881 116.672,596.693C118.715,594.65 120.52,592.438 122.141,590.109L192.627,519.623C193.661,513.059 193.147,505.039 190.962,496.046C185.579,473.894 170.844,449.543 150.536,429.234C136.893,415.59 121.439,404.409 105.843,396.896C91.91,390.183 78.499,386.634 67.06,386.634L67.056,386.634C64.582,386.634 61.742,386.819 58.883,387.368L57.532,386.017L-12.853,456.403C-14.665,458.214 -16.23,460.178 -17.573,462.243C-17.607,462.277 -17.644,462.308 -17.678,462.342C-29.263,473.928 -33.994,490.42 -32.477,508.418C-68.221,503.794 -101.782,488.342 -130.175,463.302C-160.397,436.651 -182.628,400.421 -192.773,361.29C-215.521,273.543 -212.216,178.442 -183.218,86.269C-169.219,41.772 -149.57,-0.79 -124.817,-40.235C-99.785,-80.125 -70.023,-116.034 -36.357,-146.966C12.265,-191.639 67.591,-225.83 128.083,-248.589C185.326,-270.125 246.008,-281.045 308.442,-281.045C370.17,-281.045 431.402,-270.437 490.438,-249.517C549.446,-228.607 603.681,-198.309 651.635,-159.465C701.102,-119.396 741.967,-71.723 773.098,-17.77C806.02,39.288 827.213,102.071 836.09,168.835C843.646,225.67 841.637,283.236 830.116,339.932C818.887,395.194 798.935,448.225 770.812,497.553C742.676,546.908 707.203,591.077 665.38,628.832C622.43,667.606 573.873,698.592 521.06,720.931C457.531,747.801 386.94,762.004 316.918,762.006C270.199,762.006 223.948,755.852 179.45,743.713C126.396,729.239 76.185,706.575 30.214,676.349C22.573,671.326 15.793,665.93 9.236,660.713C-8.354,646.716 -24.969,633.497 -51.561,633.497C-51.883,633.497 -52.202,633.499 -52.526,633.502C-53.249,633.51 -53.974,633.515 -54.695,633.515C-82.262,633.515 -110.339,627.374 -138.146,615.26L-161.46,605.105L-145.145,624.611C-116.379,659.002 -83.567,690.177 -47.623,717.269C-12.579,743.682 25.619,766.355 65.91,784.656C145.235,820.686 233.265,839.732 320.48,839.734L320.491,839.734C424.057,839.734 525.681,813.159 614.362,762.886C741.202,690.982 837.576,573.648 885.73,432.499C931.153,299.356 929.635,156.816 881.888,28.315" style="fill:white;fill-rule:nonzero;"/>
</g>
</g>
<g transform="matrix(1,0,0,1,-4.7583,-15.589)">
<text x="181.54px" y="81.156px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:28px;fill:white;">Download JamKazam</text>
<g transform="matrix(28,0,0,28,394.732,110.072)">
</g>
<text x="240.691px" y="110.072px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:28px;fill:white;">for Windows</text>
</g>
</g>
<defs>
<image id="_Image1" width="200px" height="200px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAyKADAAQAAAABAAAAyAAAAACbWz2VAAAFCElEQVR4Ae3bwU0bARiEUTaiDBqhkRQJhdAIfWzMBcvHDySLMC8nkGZZz/s1N+fhwT8CBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwP8qcNzrg5/n+XR51/O93vfD3/N2HMd7+Yz8brSy383T4ZfHkP1u9GMcL9/9I7/k+b+XHq+xC78r2Ff8rk+Hn/6ErCiBOQEDmTu5wkXAQIqW7JyAgcydXOEiYCBFS3ZOwEDmTq5wETCQoiU7J2AgcydXuAgYSNGSnRMwkLmTK1wEDKRoyc4JGMjcyRUuAgZStGTnBAxk7uQKFwEDKVqycwIGMndyhYuAgRQt2TkBA5k7ucJFwECKluycgIHMnVzhImAgRUt2TsBA5k6ucBEwkKIlOydgIHMnV7gIGEjRkp0TMJC5kytcBAykaMnOCRjI3MkVLgIGUrRk5wQMZO7kChcBAylasnMCBjJ3coWLgIEULdk5AQOZO7nCRcBAipbsnICBzJ1c4SJgIEVLdk7AQOZOrnARMJCiJTsnYCBzJ1e4CBhI0ZKdEzCQuZMrXAQMpGjJzgkYyNzJFS4CBlK0ZOcEDGTu5AoXAQMpWrJzAgYyd3KFi4CBFC3ZOQEDmTu5wkXAQIqW7JyAgcydXOEiYCBFS3ZOwEDmTq5wETCQoiU7J2AgcydXuAgYSNGSnRMwkLmTK1wEDKRoyc4JGMjcyRUuAgZStGTnBAxk7uQKFwEDKVqycwIGMndyhYuAgRQt2TmB416Nz/N8urzr+V7v++HveTuO4718Rn43Wtnv5mm/ECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMBdBXxZ8a7cny/LX7bzZcVPu48fst/N0+GXx5D9bvTjm7wv3/0jv+T5v5cer7ELvyvYV/yuT4ef/H+QgCW6J2AgezfXOAgYSMAS3RMwkL2baxwEDCRgie4JGMjezTUOAgYSsET3BAxk7+YaBwEDCViiewIGsndzjYOAgQQs0T0BA9m7ucZBwEACluiegIHs3VzjIGAgAUt0T8BA9m6ucRAwkIAluidgIHs31zgIGEjAEt0TMJC9m2scBAwkYInuCRjI3s01DgIGErBE9wQMZO/mGgcBAwlYonsCBrJ3c42DgIEELNE9AQPZu7nGQcBAApbonoCB7N1c4yBgIAFLdE/AQPZurnEQMJCAJbonYCB7N9c4CBhIwBLdEzCQvZtrHAQMJGCJ7gkYyN7NNQ4CBhKwRPcEDGTv5hoHAQMJWKJ7Agayd3ONg4CBBCzRPQED2bu5xkHAQAKW6J6AgezdXOMgYCABS3RPwED2bq5xEDCQgCW6J2AgezfXOAgYSMAS3RMwkL2baxwEDCRgie4JGMjezTUOAgYSsET3BAxk7+YaBwEDCViiewIGsndzjYOAgQQs0T0BA9m7ucZBwEACluiegIHs3VzjIGAgAUt0T8BA9m6ucRAwkIAluidw3KvyeZ5Pl3c93+t9P/w9b8dxvJfPyO9GK/vdPO0XAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMCEwD8AEzCh1V2GrQAAAABJRU5ErkJggg=="/>
<image id="_Image3" width="37px" height="37px" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAAlACUDAREAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAABQQGBwH/xAAcEAACAwEBAQEAAAAAAAAAAAAAAwQhMQECIhH/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCus9c88NgfKdtgRUl22SFSnbYEY5/1pFoEp22LAqU7bIipT9siKlO2wIxz/vQTQJTts0yKlO2yIqU/bBCpT9sCMa3vfVEWgSnbZpgVKdtgRUp+2BFSG973850ijkl3lM9WLIqUz1YETKZ6siidsk4Sf//Z"/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 9.5 KiB

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g>
<g>
<g>
<path d="M124.9,25.9L123.1,27.5L122.5,156.7L104.4,139.1C87.8,122.8 86.2,121.5 84.1,121.5C82.4,121.5 81.4,122 80.4,123.2C77.5,126.9 77.3,126.7 101.8,151.2C114.3,163.7 125.3,174.2 126.2,174.5C127.2,174.9 128.4,174.9 129.4,174.5C130.2,174.2 141.3,163.8 153.8,151.4C175.3,130.2 176.7,128.7 176.7,126.6C176.7,123.6 174.5,121.4 171.5,121.4C169.5,121.4 167.7,123 151.4,139.1L133.4,156.9L133.3,92.7C133.2,46.7 132.9,28.1 132.4,27.1C131.7,25.7 129.3,24.2 127.6,24.2C127.2,24.3 125.9,25.1 124.9,25.9Z" style="fill:rgb(64,124,222);fill-rule:nonzero;"/>
<path d="M11.6,147.2L10,148.8L10,227.9L13.8,231.7L127.7,231.7C213,231.7 241.9,231.5 243,230.9C246.1,229.3 246,230.3 246.1,188.6C246.1,149.6 246.1,149 244.7,147.3C242.9,145 239.5,145 237.3,147.2L235.7,148.8L235.7,221.2L20.4,221.2L20.4,185.1C20.4,149.6 20.4,149 19,147.3C17.2,145 13.8,145 11.6,147.2Z" style="fill:rgb(64,124,222);fill-rule:nonzero;"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g>
<g>
<g>
<path d="M114.7,10.6C80.5,14.5 49.1,34 29.4,63.5C25.2,69.9 18.4,83.8 15.9,91.1C8,115.2 8,140.8 16.1,165.1C33.5,217 85.2,250.8 139.3,245.4C183.9,241 223.1,210.6 238.9,168.2C246.2,148.4 248,125.3 243.7,104.4C233.7,55.6 192.3,17.2 142.7,10.9C135.6,9.9 121.7,9.8 114.7,10.6ZM140.5,19C196.1,25 237.5,71.6 237.5,128.1C237.5,165.1 219.6,198.8 189,219.3C167.9,233.4 141.1,239.8 115,236.8C77.7,232.5 46,210.1 29.6,176.5C14.7,146.2 14.8,109.6 29.7,79.3C35.3,67.7 41,59.8 50.4,50.3C67.4,33 90.5,21.8 114.9,19C120.9,18.3 134.3,18.3 140.5,19Z" style="fill:rgb(64,124,222);fill-rule:nonzero;stroke:rgb(64,124,222);stroke-width:1px;"/>
<path d="M104.3,86.7C104.1,87.1 104.1,104.9 104.1,126.3L104.3,165.2L118.9,165.2L118.9,86.3L111.7,86.1C106.3,86 104.5,86.2 104.3,86.7Z" style="fill:rgb(64,124,222);fill-rule:nonzero;stroke:rgb(64,124,222);stroke-width:1px;"/>
<path d="M136.6,87.3C136.4,88.4 136.4,149.5 136.7,162L136.8,165.5L144.3,165.3L151.7,165.1L151.7,86.3L144.3,86.1C136.9,86 136.8,86 136.6,87.3Z" style="fill:rgb(64,124,222);fill-rule:nonzero;stroke:rgb(64,124,222);stroke-width:1px;"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g>
<g>
<g>
<path d="M115,10.4C93.4,12.8 72.1,21.7 54.5,35.4C49.4,39.5 40,48.8 35.7,54.2C22.7,70.3 14.1,90.4 10.9,111.5C9.7,120.1 9.7,136 10.9,144.5C15.3,174 29.7,199.7 52.8,219C78.4,240.4 113.5,250.1 146.3,244.8C197.7,236.4 237.4,196.2 245.1,144.7C246.3,136.3 246.3,119.9 245.1,111.4C241.4,86.2 230.7,64.4 213,46.1C202.5,35.2 192.4,27.9 179.3,21.6C159.4,12 136.4,8 115,10.4ZM146,20.7C193.8,29.3 229.1,65.9 235.9,114.2C236.8,120.8 236.7,136.8 235.6,143.7C230.8,174.4 214.5,200.4 189.1,217.8C168.3,232 142.2,238.7 117.3,236.2C78.4,232.3 44.2,207.5 28.6,172C21.3,155.4 18.5,139.2 19.6,120.5C21.5,86.8 40.8,54.3 69.6,36.2C82.5,28.1 98,22.3 111.8,20.4C114.4,20 117.3,19.6 118.3,19.5C122.1,19.1 140.9,19.8 146,20.7Z" style="fill:rgb(64,124,222);fill-rule:nonzero;stroke:rgb(64,124,222);stroke-width:1px;"/>
<path d="M110,81.1C106.9,82.4 107,80.4 107,128.1L107,172.5L108.3,173.9C109.1,174.7 110.4,175.2 111.6,175.2C113.4,175.2 116.8,172.5 139.5,153.8C153.7,142 165.9,131.8 166.5,131.2C167,130.6 167.5,129.1 167.5,128.1C167.5,127 167,125.6 166.5,125C165.9,124.4 155.1,115.3 142.4,104.8C129.8,94.4 118.2,84.8 116.7,83.6C113.8,81 111.8,80.3 110,81.1ZM136.7,112.3C146.9,120.7 155.3,127.8 155.3,127.9C155.4,128.1 148,134.4 138.9,141.9C129.8,149.5 121.1,156.6 119.6,157.9L116.8,160.3L116.8,128C116.8,102.2 117,95.9 117.6,96.3C117.9,96.7 126.6,103.9 136.7,112.3Z" style="fill:rgb(64,124,222);fill-rule:nonzero;stroke:rgb(64,124,222);stroke-width:1px;"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 976 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 754 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM433.333,566.667L400,566.667L400,279.433L334.067,306.267L321.5,275.4L433.333,229.867L433.333,566.667Z" style="fill:currentColor;fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-104,0)">
<path d="M433.333,566.667L400,566.667L400,279.433L334.067,306.267L321.5,275.4L433.333,229.867L433.333,566.667Z" style="fill:rgb(54,64,79);"/>
</g>
<path d="M416.667,73.333L416.7,73.333C605.029,73.333 760,228.305 760,416.633L760,416.667C760,605.014 605.014,760 416.667,760C228.32,760 73.333,605.014 73.333,416.667C73.333,228.32 228.32,73.333 416.667,73.333ZM416.667,726.667C586.659,726.484 726.484,586.659 726.667,416.667C726.667,246.606 586.728,106.667 416.667,106.667C246.606,106.667 106.667,246.606 106.667,416.667C106.667,586.728 246.606,726.667 416.667,726.667Z" style="fill:rgb(65,64,79);"/>
<g transform="matrix(1,0,0,1.04274,86,-16.8444)">
<path d="M400,237.5C436.38,237.5 466.315,255.853 486.572,290.573C503.293,319.229 512.5,358.093 512.5,400C512.5,441.904 503.293,480.765 486.572,509.424C466.315,544.147 436.38,562.5 400,562.5C363.62,562.5 333.685,544.147 313.428,509.424C296.707,480.765 287.5,441.904 287.5,400C287.5,358.093 296.707,319.229 313.428,290.573C333.685,255.853 363.62,237.5 400,237.5ZM400,537.5C460.443,537.5 487.5,468.442 487.5,400C487.5,331.558 460.443,262.5 400,262.5C339.557,262.5 312.5,331.558 312.5,400C312.5,468.442 339.557,537.5 400,537.5Z" style="fill:rgb(54,64,79);"/>
</g>
<rect x="0" y="0" width="800" height="800" style="fill:none;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667L760,416.633C760,228.305 605.029,73.333 416.7,73.333L416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,566.667L300,566.667L300,550C300,478.1 358.733,446.5 410.567,418.6C456.933,393.667 496.967,372.133 496.967,327.9C494.662,293.374 465.616,266.203 431.013,266.203C428.402,266.203 425.793,266.358 423.2,266.667C398.972,265.071 375.105,273.376 357.1,289.667C342.449,305.897 334.023,326.812 333.333,348.667L300,349C300.61,318.375 312.427,289.011 333.2,266.5C357.361,243.563 389.933,231.559 423.2,233.333C425.859,233.118 428.526,233.011 431.194,233.011C483.988,233.011 528.006,275.156 530.3,327.9C530.3,392.033 475.067,421.733 426.367,447.967C383.933,470.8 343.633,492.467 335.033,533.333L533.333,533.333L533.333,566.667Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM416.667,566.667C360.685,569.763 311.954,526.55 308.333,470.6L341.667,470.6C345.357,508.221 378.986,536.349 416.667,533.333C454.347,536.349 487.976,508.221 491.667,470.6C491.667,437.367 459.433,412.333 416.667,412.333L416.667,379C459.433,379 491.667,355.767 491.667,325C486.519,288.736 453.082,262.73 416.667,266.667C380.251,262.73 346.815,288.736 341.667,325L308.333,325C313.332,270.347 361.94,229.217 416.667,233.333C471.394,229.217 520.001,270.347 525,325C524.463,354.849 507.653,382.132 481.233,396.033C508.041,411.288 524.751,439.757 525,470.6C521.379,526.55 472.648,569.763 416.667,566.667Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM500,566.667L466.667,566.667L466.667,500L252.867,500L500,226.433L500,466.667L566.667,466.667L566.667,500L500,500L500,566.667ZM333.333,466.667L466.667,466.667L466.667,306.9L333.333,466.667Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,266.667L366.667,266.667L366.667,363.267C374.872,360.763 383.266,358.924 391.767,357.767C399.958,356.574 408.223,355.961 416.5,355.933C432.137,355.766 447.69,358.246 462.5,363.267C475.904,367.827 488.308,374.923 499.033,384.167C509.284,393.089 517.474,404.133 523.033,416.533C528.785,429.545 531.672,443.642 531.5,457.867C531.639,472.749 528.747,487.505 523,501.233C517.519,514.275 509.339,526.011 499,535.667C488.189,545.598 475.54,553.32 461.767,558.4C446.484,564.054 430.294,566.856 414,566.667C391.296,567.421 368.813,561.945 349,550.833C331.63,540.587 317.436,525.723 308,507.9L340.533,494.567C346.744,507.907 356.782,519.106 369.367,526.733C382.233,534.696 397.103,538.836 412.233,538.667C423.613,538.78 434.919,536.826 445.6,532.9C455.358,529.331 464.309,523.858 471.933,516.8C479.326,509.848 485.214,501.452 489.233,492.133C497.765,471.869 497.584,448.96 488.733,428.833C484.386,419.375 478.053,410.962 470.167,404.167C461.968,397.233 452.521,391.926 442.333,388.533C431.023,384.747 419.16,382.877 407.233,383C394.458,383.005 381.734,384.629 369.367,387.833C357.012,390.985 345.007,395.374 333.533,400.933L333.333,233.333L533.333,233.333L533.333,266.667Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM376,375.2L376.933,376.133C383.292,371.871 390.428,368.903 397.933,367.4C406.491,365.325 415.261,364.251 424.067,364.2C437.723,364.077 451.278,366.566 464,371.533C475.89,376.187 486.751,383.13 495.967,391.967C505.139,400.949 512.357,411.73 517.167,423.633C522.417,436.541 525.046,450.366 524.9,464.3C525.072,478.615 522.362,492.82 516.933,506.067C511.885,518.266 504.254,529.229 494.567,538.2C484.632,547.271 473.058,554.365 460.467,559.1C432.753,569.194 402.347,569.194 374.633,559.1C362.042,554.365 350.468,547.271 340.533,538.2C330.836,529.238 323.203,518.273 318.167,506.067C312.718,492.814 310.008,478.594 310.2,464.267C310.056,448.233 313.08,432.328 319.1,417.467C324.959,403.138 331.983,389.314 340.1,376.133L430.167,233.333L468.867,233.333L376,375.2ZM343.8,464.267C343.684,474.407 345.506,484.476 349.167,493.933C352.572,502.676 357.735,510.629 364.333,517.3C371.016,523.984 378.943,529.295 387.667,532.933C406.838,540.574 428.229,540.574 447.4,532.933C456.123,529.295 464.051,523.984 470.733,517.3C477.338,510.614 482.51,502.652 485.933,493.9C489.564,484.447 491.373,474.392 491.267,464.267C491.354,454.326 489.626,444.453 486.167,435.133C482.92,426.392 477.904,418.414 471.433,411.7C464.837,404.977 456.882,399.738 448.1,396.333C428.389,388.991 406.678,388.991 386.967,396.333C378.179,399.726 370.221,404.967 363.633,411.7C357.186,418.42 352.193,426.398 348.967,435.133C345.485,444.449 343.734,454.322 343.8,464.267Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,267.067L380.533,566.667L339.367,566.667L495.967,266.667L300,266.667L300,233.333L533.333,233.333L533.333,267.067Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM460.067,391.667C478.022,396.892 493.769,407.882 504.867,422.933C516.974,439.392 523.22,459.444 522.6,479.867C522.811,493.505 519.844,507.007 513.933,519.3C508.379,530.735 500.527,540.903 490.867,549.167C480.882,557.6 469.406,564.09 457.033,568.3C430.883,577.319 402.45,577.319 376.3,568.3C363.927,564.09 352.451,557.6 342.467,549.167C332.806,540.896 324.943,530.73 319.367,519.3C313.455,507.007 310.488,493.505 310.7,479.867C310.603,469.338 312.19,458.861 315.4,448.833C318.357,439.635 322.768,430.969 328.467,423.167C333.962,415.659 340.664,409.115 348.3,403.8C355.953,398.504 364.373,394.411 373.267,391.667L373.267,390.733C365.907,388.301 359.035,384.589 352.967,379.767C346.84,374.902 341.548,369.069 337.3,362.5C332.891,355.697 329.447,348.316 327.067,340.567C324.569,332.641 323.31,324.377 323.333,316.067C323.157,303.536 325.705,291.116 330.8,279.667C335.533,269.083 342.451,259.62 351.1,251.9C359.803,244.2 369.864,238.186 380.767,234.167C403.89,225.774 429.244,225.774 452.367,234.167C463.348,238.149 473.48,244.165 482.233,251.9C490.863,259.638 497.778,269.096 502.533,279.667C507.628,291.116 510.176,303.536 510,316.067C510.007,324.375 508.748,332.637 506.267,340.567C503.848,348.307 500.395,355.685 496,362.5C491.752,369.069 486.46,374.902 480.333,379.767C474.278,384.597 467.417,388.321 460.067,390.767L460.067,391.667ZM344.333,476.133C344.263,485.707 346.005,495.207 349.467,504.133C352.704,512.567 357.717,520.207 364.167,526.533C370.742,532.889 378.515,537.875 387.033,541.2C406.135,548.356 427.198,548.356 446.3,541.2C454.815,537.867 462.586,532.882 469.167,526.533C475.616,520.207 480.63,512.567 483.867,504.133C487.328,495.207 489.07,485.707 489,476.133C489.098,466.709 487.354,457.356 483.867,448.6C480.541,440.349 475.535,432.879 469.167,426.667C462.612,420.334 454.83,415.41 446.3,412.2C427.143,405.349 406.19,405.349 387.033,412.2C378.5,415.402 370.716,420.327 364.167,426.667C357.799,432.879 352.792,440.349 349.467,448.6C345.979,457.356 344.235,466.709 344.333,476.133ZM356,317.933C355.885,326.105 357.474,334.211 360.667,341.733C363.697,348.785 368.145,355.139 373.733,360.4C397.749,382.897 435.584,382.897 459.6,360.4C465.179,355.13 469.625,348.779 472.667,341.733C475.844,334.206 477.433,326.103 477.333,317.933C477.386,309.541 475.8,301.219 472.667,293.433C469.74,286.109 465.376,279.445 459.833,273.833C441.975,256.675 415.558,251.63 392.633,261C385.485,263.998 378.986,268.357 373.5,273.833C367.957,279.445 363.594,286.109 360.667,293.433C357.517,301.214 355.931,309.54 356,317.933Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM464.467,422.467L463.533,421.533C457.191,425.853 450.052,428.868 442.533,430.4C433.983,432.521 425.21,433.618 416.4,433.667C402.741,433.794 389.188,431.258 376.5,426.2C364.574,421.465 353.707,414.406 344.533,405.433C335.311,396.279 328.082,385.316 323.3,373.233C318.088,360.095 315.484,346.067 315.633,331.933C315.479,317.472 318.175,303.12 323.567,289.7C328.526,277.23 336.161,265.998 345.933,256.8C355.837,247.622 367.399,240.416 380,235.567C407.695,225.308 438.171,225.308 465.867,235.567C478.486,240.42 490.069,247.626 500,256.8C509.752,266.016 517.384,277.242 522.367,289.7C527.743,303.124 530.439,317.473 530.3,331.933C530.443,348.223 527.432,364.388 521.433,379.533C515.552,394.065 508.53,408.109 500.433,421.533L410.333,566.667L371.6,566.667L464.467,422.467ZM496.667,331.933C496.737,321.732 494.917,311.605 491.3,302.067C487.949,293.099 482.786,284.918 476.133,278.033C469.478,271.258 461.548,265.865 452.8,262.167C433.658,254.38 412.209,254.38 393.067,262.167C384.321,265.869 376.392,271.261 369.733,278.033C363.081,284.918 357.918,293.099 354.567,302.067C350.961,311.608 349.153,321.734 349.233,331.933C349.123,342.049 350.851,352.102 354.333,361.6C357.545,370.442 362.537,378.531 369,385.367C375.579,392.191 383.548,397.523 392.367,401C412.051,408.485 433.815,408.485 453.5,401C462.307,397.519 470.264,392.187 476.833,385.367C483.311,378.518 488.325,370.419 491.567,361.567C495.029,352.075 496.757,342.037 496.667,331.933Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -118,6 +118,7 @@ const Main = props => {
// eslint-disable-next-line // eslint-disable-next-line
}, [navbarStyle]); }, [navbarStyle]);
if (!isLoaded) { if (!isLoaded) {
toggleStylesheet({ isRTL, isDark }, () => setIsLoaded(true)); toggleStylesheet({ isRTL, isDark }, () => setIsLoaded(true));

Binary file not shown.

After

Width:  |  Height:  |  Size: 976 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 754 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM433.333,566.667L400,566.667L400,279.433L334.067,306.267L321.5,275.4L433.333,229.867L433.333,566.667Z" style="fill:currentColor;fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-104,0)">
<path d="M433.333,566.667L400,566.667L400,279.433L334.067,306.267L321.5,275.4L433.333,229.867L433.333,566.667Z" style="fill:rgb(54,64,79);"/>
</g>
<path d="M416.667,73.333L416.7,73.333C605.029,73.333 760,228.305 760,416.633L760,416.667C760,605.014 605.014,760 416.667,760C228.32,760 73.333,605.014 73.333,416.667C73.333,228.32 228.32,73.333 416.667,73.333ZM416.667,726.667C586.659,726.484 726.484,586.659 726.667,416.667C726.667,246.606 586.728,106.667 416.667,106.667C246.606,106.667 106.667,246.606 106.667,416.667C106.667,586.728 246.606,726.667 416.667,726.667Z" style="fill:rgb(65,64,79);"/>
<g transform="matrix(1,0,0,1.04274,86,-16.8444)">
<path d="M400,237.5C436.38,237.5 466.315,255.853 486.572,290.573C503.293,319.229 512.5,358.093 512.5,400C512.5,441.904 503.293,480.765 486.572,509.424C466.315,544.147 436.38,562.5 400,562.5C363.62,562.5 333.685,544.147 313.428,509.424C296.707,480.765 287.5,441.904 287.5,400C287.5,358.093 296.707,319.229 313.428,290.573C333.685,255.853 363.62,237.5 400,237.5ZM400,537.5C460.443,537.5 487.5,468.442 487.5,400C487.5,331.558 460.443,262.5 400,262.5C339.557,262.5 312.5,331.558 312.5,400C312.5,468.442 339.557,537.5 400,537.5Z" style="fill:rgb(54,64,79);"/>
</g>
<rect x="0" y="0" width="800" height="800" style="fill:none;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667L760,416.633C760,228.305 605.029,73.333 416.7,73.333L416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,566.667L300,566.667L300,550C300,478.1 358.733,446.5 410.567,418.6C456.933,393.667 496.967,372.133 496.967,327.9C494.662,293.374 465.616,266.203 431.013,266.203C428.402,266.203 425.793,266.358 423.2,266.667C398.972,265.071 375.105,273.376 357.1,289.667C342.449,305.897 334.023,326.812 333.333,348.667L300,349C300.61,318.375 312.427,289.011 333.2,266.5C357.361,243.563 389.933,231.559 423.2,233.333C425.859,233.118 428.526,233.011 431.194,233.011C483.988,233.011 528.006,275.156 530.3,327.9C530.3,392.033 475.067,421.733 426.367,447.967C383.933,470.8 343.633,492.467 335.033,533.333L533.333,533.333L533.333,566.667Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM416.667,566.667C360.685,569.763 311.954,526.55 308.333,470.6L341.667,470.6C345.357,508.221 378.986,536.349 416.667,533.333C454.347,536.349 487.976,508.221 491.667,470.6C491.667,437.367 459.433,412.333 416.667,412.333L416.667,379C459.433,379 491.667,355.767 491.667,325C486.519,288.736 453.082,262.73 416.667,266.667C380.251,262.73 346.815,288.736 341.667,325L308.333,325C313.332,270.347 361.94,229.217 416.667,233.333C471.394,229.217 520.001,270.347 525,325C524.463,354.849 507.653,382.132 481.233,396.033C508.041,411.288 524.751,439.757 525,470.6C521.379,526.55 472.648,569.763 416.667,566.667Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM500,566.667L466.667,566.667L466.667,500L252.867,500L500,226.433L500,466.667L566.667,466.667L566.667,500L500,500L500,566.667ZM333.333,466.667L466.667,466.667L466.667,306.9L333.333,466.667Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,266.667L366.667,266.667L366.667,363.267C374.872,360.763 383.266,358.924 391.767,357.767C399.958,356.574 408.223,355.961 416.5,355.933C432.137,355.766 447.69,358.246 462.5,363.267C475.904,367.827 488.308,374.923 499.033,384.167C509.284,393.089 517.474,404.133 523.033,416.533C528.785,429.545 531.672,443.642 531.5,457.867C531.639,472.749 528.747,487.505 523,501.233C517.519,514.275 509.339,526.011 499,535.667C488.189,545.598 475.54,553.32 461.767,558.4C446.484,564.054 430.294,566.856 414,566.667C391.296,567.421 368.813,561.945 349,550.833C331.63,540.587 317.436,525.723 308,507.9L340.533,494.567C346.744,507.907 356.782,519.106 369.367,526.733C382.233,534.696 397.103,538.836 412.233,538.667C423.613,538.78 434.919,536.826 445.6,532.9C455.358,529.331 464.309,523.858 471.933,516.8C479.326,509.848 485.214,501.452 489.233,492.133C497.765,471.869 497.584,448.96 488.733,428.833C484.386,419.375 478.053,410.962 470.167,404.167C461.968,397.233 452.521,391.926 442.333,388.533C431.023,384.747 419.16,382.877 407.233,383C394.458,383.005 381.734,384.629 369.367,387.833C357.012,390.985 345.007,395.374 333.533,400.933L333.333,233.333L533.333,233.333L533.333,266.667Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM376,375.2L376.933,376.133C383.292,371.871 390.428,368.903 397.933,367.4C406.491,365.325 415.261,364.251 424.067,364.2C437.723,364.077 451.278,366.566 464,371.533C475.89,376.187 486.751,383.13 495.967,391.967C505.139,400.949 512.357,411.73 517.167,423.633C522.417,436.541 525.046,450.366 524.9,464.3C525.072,478.615 522.362,492.82 516.933,506.067C511.885,518.266 504.254,529.229 494.567,538.2C484.632,547.271 473.058,554.365 460.467,559.1C432.753,569.194 402.347,569.194 374.633,559.1C362.042,554.365 350.468,547.271 340.533,538.2C330.836,529.238 323.203,518.273 318.167,506.067C312.718,492.814 310.008,478.594 310.2,464.267C310.056,448.233 313.08,432.328 319.1,417.467C324.959,403.138 331.983,389.314 340.1,376.133L430.167,233.333L468.867,233.333L376,375.2ZM343.8,464.267C343.684,474.407 345.506,484.476 349.167,493.933C352.572,502.676 357.735,510.629 364.333,517.3C371.016,523.984 378.943,529.295 387.667,532.933C406.838,540.574 428.229,540.574 447.4,532.933C456.123,529.295 464.051,523.984 470.733,517.3C477.338,510.614 482.51,502.652 485.933,493.9C489.564,484.447 491.373,474.392 491.267,464.267C491.354,454.326 489.626,444.453 486.167,435.133C482.92,426.392 477.904,418.414 471.433,411.7C464.837,404.977 456.882,399.738 448.1,396.333C428.389,388.991 406.678,388.991 386.967,396.333C378.179,399.726 370.221,404.967 363.633,411.7C357.186,418.42 352.193,426.398 348.967,435.133C345.485,444.449 343.734,454.322 343.8,464.267Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,267.067L380.533,566.667L339.367,566.667L495.967,266.667L300,266.667L300,233.333L533.333,233.333L533.333,267.067Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM460.067,391.667C478.022,396.892 493.769,407.882 504.867,422.933C516.974,439.392 523.22,459.444 522.6,479.867C522.811,493.505 519.844,507.007 513.933,519.3C508.379,530.735 500.527,540.903 490.867,549.167C480.882,557.6 469.406,564.09 457.033,568.3C430.883,577.319 402.45,577.319 376.3,568.3C363.927,564.09 352.451,557.6 342.467,549.167C332.806,540.896 324.943,530.73 319.367,519.3C313.455,507.007 310.488,493.505 310.7,479.867C310.603,469.338 312.19,458.861 315.4,448.833C318.357,439.635 322.768,430.969 328.467,423.167C333.962,415.659 340.664,409.115 348.3,403.8C355.953,398.504 364.373,394.411 373.267,391.667L373.267,390.733C365.907,388.301 359.035,384.589 352.967,379.767C346.84,374.902 341.548,369.069 337.3,362.5C332.891,355.697 329.447,348.316 327.067,340.567C324.569,332.641 323.31,324.377 323.333,316.067C323.157,303.536 325.705,291.116 330.8,279.667C335.533,269.083 342.451,259.62 351.1,251.9C359.803,244.2 369.864,238.186 380.767,234.167C403.89,225.774 429.244,225.774 452.367,234.167C463.348,238.149 473.48,244.165 482.233,251.9C490.863,259.638 497.778,269.096 502.533,279.667C507.628,291.116 510.176,303.536 510,316.067C510.007,324.375 508.748,332.637 506.267,340.567C503.848,348.307 500.395,355.685 496,362.5C491.752,369.069 486.46,374.902 480.333,379.767C474.278,384.597 467.417,388.321 460.067,390.767L460.067,391.667ZM344.333,476.133C344.263,485.707 346.005,495.207 349.467,504.133C352.704,512.567 357.717,520.207 364.167,526.533C370.742,532.889 378.515,537.875 387.033,541.2C406.135,548.356 427.198,548.356 446.3,541.2C454.815,537.867 462.586,532.882 469.167,526.533C475.616,520.207 480.63,512.567 483.867,504.133C487.328,495.207 489.07,485.707 489,476.133C489.098,466.709 487.354,457.356 483.867,448.6C480.541,440.349 475.535,432.879 469.167,426.667C462.612,420.334 454.83,415.41 446.3,412.2C427.143,405.349 406.19,405.349 387.033,412.2C378.5,415.402 370.716,420.327 364.167,426.667C357.799,432.879 352.792,440.349 349.467,448.6C345.979,457.356 344.235,466.709 344.333,476.133ZM356,317.933C355.885,326.105 357.474,334.211 360.667,341.733C363.697,348.785 368.145,355.139 373.733,360.4C397.749,382.897 435.584,382.897 459.6,360.4C465.179,355.13 469.625,348.779 472.667,341.733C475.844,334.206 477.433,326.103 477.333,317.933C477.386,309.541 475.8,301.219 472.667,293.433C469.74,286.109 465.376,279.445 459.833,273.833C441.975,256.675 415.558,251.63 392.633,261C385.485,263.998 378.986,268.357 373.5,273.833C367.957,279.445 363.594,286.109 360.667,293.433C357.517,301.214 355.931,309.54 356,317.933Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM464.467,422.467L463.533,421.533C457.191,425.853 450.052,428.868 442.533,430.4C433.983,432.521 425.21,433.618 416.4,433.667C402.741,433.794 389.188,431.258 376.5,426.2C364.574,421.465 353.707,414.406 344.533,405.433C335.311,396.279 328.082,385.316 323.3,373.233C318.088,360.095 315.484,346.067 315.633,331.933C315.479,317.472 318.175,303.12 323.567,289.7C328.526,277.23 336.161,265.998 345.933,256.8C355.837,247.622 367.399,240.416 380,235.567C407.695,225.308 438.171,225.308 465.867,235.567C478.486,240.42 490.069,247.626 500,256.8C509.752,266.016 517.384,277.242 522.367,289.7C527.743,303.124 530.439,317.473 530.3,331.933C530.443,348.223 527.432,364.388 521.433,379.533C515.552,394.065 508.53,408.109 500.433,421.533L410.333,566.667L371.6,566.667L464.467,422.467ZM496.667,331.933C496.737,321.732 494.917,311.605 491.3,302.067C487.949,293.099 482.786,284.918 476.133,278.033C469.478,271.258 461.548,265.865 452.8,262.167C433.658,254.38 412.209,254.38 393.067,262.167C384.321,265.869 376.392,271.261 369.733,278.033C363.081,284.918 357.918,293.099 354.567,302.067C350.961,311.608 349.153,321.734 349.233,331.933C349.123,342.049 350.851,352.102 354.333,361.6C357.545,370.442 362.537,378.531 369,385.367C375.579,392.191 383.548,397.523 392.367,401C412.051,408.485 433.815,408.485 453.5,401C462.307,397.519 470.264,392.187 476.833,385.367C483.311,378.518 488.325,370.419 491.567,361.567C495.029,352.075 496.757,342.037 496.667,331.933Z" style="fill:rgb(54,64,79);fill-rule:nonzero;"/>
<rect x="0" y="0" width="800" height="800" style="fill:none;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -12,3 +12,5 @@
@import './custom/common'; @import './custom/common';
@import './custom/partner_agreement_v1'; @import './custom/partner_agreement_v1';
@import './custom/audio_player'; @import './custom/audio_player';
@import './custom/landing';

View File

@ -11,7 +11,6 @@
border-color: #dc3545; border-color: #dc3545;
} }
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* Choices */ /* Choices */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@ -19,4 +18,4 @@
position:relative; position:relative;
margin-bottom:24px; margin-bottom:24px;
font-size:16px font-size:16px
} }

View File

@ -0,0 +1,313 @@
.content-row.landing-page {
display: flex;
justify-content: space-between;
}
.landing-page {
/* Approximate 1-inch margin using rem */
.container {
max-width: 100%;
padding: 0 0 0 0;
}
.background {
padding: 0 2.54rem; /* 1-inch padding inside */
}
/* Header section */
.header {
height: 2.54rem; /* 1 inch */
background-color: white; /* Dark background */
color: black;
display: flex;
align-items: center; /* Vertically center logo */
padding-left: 2.54rem; /* 1-inch left margin */
}
.logo {
font-size: 1.5rem; /* Mock logo text */
font-weight: bold;
}
h1 {
font-weight: 700;
margin-top: 1.5rem;
font-size: 1.5rem;
color: rgb(54, 64, 79);
margin-bottom: 1.5rem;
}
p {
color: rgb(97, 110, 128);
line-height: 1.25rem;
}
h2 {
text-align:center;
font-weight: 700;
font-size: 1.25rem;
color: rgb(54, 64, 79);
margin-bottom: 1.5rem;
margin-top: 2.0rem;
}
h3 {
font-weight: 700;
font-size: 1.25rem;
color: #5d6f82;
}
.top-title {
text-align:center;
}
.left-column {
flex: 0 0 100%;
padding-right: 15rem;
padding-left: 15rem;
display: grid;
}
.top-region-container {
display: grid;
grid-template-columns: 60% 40%;
gap: 3rem; /* Adds spacing between them */
}
.preview-region {
/* Make it respect the height of the parent */
max-height: 100%; /* Ensures it doesn't exceed parent height */
overflow: auto; /* Enables scrolling if content overflows */
h2 {
font-size:1.25rem;
margin-top:0;
margin-bottom:0;
text-align:left;
}
.card-header p {
font-style:italic;
margin-bottom:0;
}
p {
font-size:.7rem;
line-height:1.25;
}
.mb-3 {
margin-bottom:0 !important;
}
.mr-1 {
margin-right:0 !important;
}
.jamtrack-track {
button {
padding:0 5px 0 0;
width:auto !important;
img {
width:28px !important;
height:28px !important;
margin-top:-3px !important;
}
}
span {
font-size:.7rem;
}
}
}
@media (max-width: 999px) {
.left-column {
flex: 0 0 100%;
padding-right: 10px;
padding-left: 10px;
}
.preview-region {
width: 100%;
right: 0;
position: relative;
top: 0;
}
.top-region-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap:0;
}
#root {
h2 {
margin-top: 1.5rem;
}
}
.awesome-image-left, .awesome-image-right, .awesome-image-left-tall, .awesome-image-right-tall {
width:100% !important;
margin-bottom:1rem;
}
}
.right-column {
}
.background {
background-color: #edf2f9;
}
.content-row {
padding-top: 1rem;
}
/* Optional: Slight background distinction for regions */
.region {
/* padding: 1rem;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 5px; */
}
.center-children {
display: flex;
justify-content: center;
}
.claim-free-backing-track {
padding: 1.0rem 2rem !important;
border-radius: 4px !important;
font-weight: bold !important;
font-size: 1.2rem !important;
}
@media(max-width:767px) {
.claim-free-backing-track {
padding:1.0rem !important;
max-width:80%;
}
}
.claim-free-backing-track-text {
font-size: 0.9rem;
color: #666;
font-style: italic;
margin-top: 0.5rem;
}
.video-wrapper {
width: 100%;
}
.video-container {
width: 100%;
padding-bottom: 53.33%;
position: relative;
}
.video-container iframe {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
.number-icon {
display: inline;
position: relative;
top: -0.1rem;
margin-right: 0.6rem;
svg {
color: #3f7dde;
height: 2.0rem;
width: 2.0rem;
}
}
.awesome-image-right {
width: 50%;
min-width: 150px;
max-width:400px;
float: right;
margin-left: 2rem;
&.trim-down {
width:40%;
}
}
.awesome-text {
overflow:hidden;
display:block;
}
@media (max-width: 600px) {
.awesome-text {
clear:both;
}
.awesome-image-right-tall, .awesome-image-left-tall, .awesome-image-right, .awesome-image-left {
}
}
.awesome-image-left {
width: 50%;
min-width: 150px;
max-width:400px;
float: left;
margin-right: 2rem;
&.trim-down {
width:40%;
}
}
.awesome-image-right-tall {
width: 40%;
min-width: 150px;
max-width:200px;
float: right;
margin-left: 2rem;
}
.awesome-image-left-tall {
width: 40%;
min-width: 150px;
max-width:200px;
float: left;
margin-right: 2rem;
}
/** remove as much padding as possible to the page */
.container {
padding-right: 0 !important;
padding-left: 0 !important;
}
.background {
padding: 0;
}
p {
font-size: 1rem;
font-family: sans-serif;
//text-align: justify;
text-justify: inter-word;
}
.awesome-card {
margin-bottom: 2rem;
}
footer p {
font-size: 0.83333rem;
}
}

View File

@ -17,4 +17,4 @@
/*----------------------------------------------- /*-----------------------------------------------
| User Styles | User Styles
-----------------------------------------------*/ -----------------------------------------------*/
@import 'user'; @import 'user';

View File

@ -1,5 +1,5 @@
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useContext, useEffect, useRef, useState } from 'react';
import { Switch, Redirect } from 'react-router-dom'; import { Switch, Redirect, Route } from 'react-router-dom';
import PrivateRoute from '../../helpers/privateRoute'; import PrivateRoute from '../../helpers/privateRoute';
import NavbarTop from '../navbar/JKNavbarTop'; import NavbarTop from '../navbar/JKNavbarTop';

View File

@ -1,10 +1,11 @@
import React, { useRef, useEffect, useState } from 'react'; import React, { useRef, useEffect, useState } from 'react';
import playIcon from '../../assets/img/icons/play-icon.svg';
import pauseIcon from '../../assets/img/icons/pause-icon.svg';
import downloadIcon from '../../assets/img/icons/download-icon.svg';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const playIcon = '/img/icons/play-icon.svg';
const pauseIcon = '/img/icons/pause-icon.svg';
const downloadIcon = '/img/icons/download-icon.svg';
const JKAudioPlayer = ({ audioUrl, onDownloadClick }) => { const JKAudioPlayer = ({ audioUrl, onDownloadClick }) => {
const audioPlayer = useRef(null); const audioPlayer = useRef(null);
@ -182,4 +183,4 @@ JKAudioPlayer.propTypes = {
onDownloadClick: PropTypes.func.isRequired onDownloadClick: PropTypes.func.isRequired
} }
export default JKAudioPlayer export default JKAudioPlayer

View File

@ -4,7 +4,7 @@ import JKJamTrackTrack from './JKJamTrackTrack';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useResponsive } from '@farfetch/react-context-responsive'; import { useResponsive } from '@farfetch/react-context-responsive';
const JKJamTrackPreview = ({ jamTrack }) => { const JKJamTrackPreview = ({ jamTrack, showMasterDuration = false, columns= true, initialJamTracksShowCount = 6 }) => {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const { greaterThan } = useResponsive(); const { greaterThan } = useResponsive();
@ -15,12 +15,12 @@ const JKJamTrackPreview = ({ jamTrack }) => {
return ( return (
<> <>
{greaterThan.sm ? ( {columns && greaterThan.sm ? (
<Row> <Row>
{jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => ( {jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => (
<Fragment key={track.id} > <Fragment key={track.id} >
<Col className={index + 1 > 6 && !expanded ? 'd-none' : null}> <Col className={index + 1 > initialJamTracksShowCount && !expanded ? 'd-none' : null}>
<JKJamTrackTrack track={track} /> <JKJamTrackTrack track={track} duration={track.track_type === 'Master' ? jamTrack.duration : null} />
</Col> </Col>
{(index + 1) % 2 === 0 && <div className="w-100" />} {(index + 1) % 2 === 0 && <div className="w-100" />}
{(index + 1) === jamTrack.tracks.length && (index + 1) % 2 !== 0 && <div className="col" />} {(index + 1) === jamTrack.tracks.length && (index + 1) % 2 !== 0 && <div className="col" />}
@ -30,14 +30,14 @@ const JKJamTrackPreview = ({ jamTrack }) => {
) : ( ) : (
<Row> <Row>
{jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => ( {jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => (
<Col key={track.id} xs={12} className={index + 1 > 6 && !expanded ? 'd-none mb-3' : 'mb-3'}> <Col key={track.id} xs={12} className={index + 1 > initialJamTracksShowCount && !expanded ? 'd-none mb-3' : 'mb-3'}>
<JKJamTrackTrack track={track} /> <JKJamTrackTrack track={track} duration={track.track_type === 'Master' ? jamTrack.duration : null} />
</Col> </Col>
))} ))}
</Row> </Row>
)} )}
{jamTrack.tracks.length > 6 && ( {jamTrack.tracks.length > initialJamTracksShowCount && (
<Row> <Row>
<Col> <Col>
<a href="#" onClick={toggleMoreTracks}>{expanded ? 'Show fewer tracks' : 'Show all tracks'}</a> <a href="#" onClick={toggleMoreTracks}>{expanded ? 'Show fewer tracks' : 'Show all tracks'}</a>

View File

@ -4,11 +4,13 @@ import { Howl } from 'howler';
import { useJamTrackPreview } from '../../context/JamTrackPreviewContext'; import { useJamTrackPreview } from '../../context/JamTrackPreviewContext';
import { Spinner } from 'reactstrap'; import { Spinner } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import playIcon from '../../assets/img/icons/play-icon.svg';
import pauseIcon from '../../assets/img/icons/pause-icon.svg';
import { useJamTrack } from '../../hooks/useJamTrack'; import { useJamTrack } from '../../hooks/useJamTrack';
import { prettyPrintSeconds } from '../../helpers/utils';
const JKJamTrackTrack = ({ track }) => { const playIcon = '/img/icons/play-icon.svg';
const pauseIcon = '/img/icons/pause-icon.svg';
const JKJamTrackTrack = ({ track, duration = null }) => {
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
//const [isLoaded, setIsLoaded] = useState(false); //const [isLoaded, setIsLoaded] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -125,7 +127,7 @@ const JKJamTrackTrack = ({ track }) => {
<JKInstrumentIcon instrumentId={trackInfo.instrumentId} instrumentName={trackInfo.instrumentDescription} /> <JKInstrumentIcon instrumentId={trackInfo.instrumentId} instrumentName={trackInfo.instrumentDescription} />
</span> </span>
<span> <span>
{trackName(track)} {trackName(track)} {duration && "(" + prettyPrintSeconds(duration) +")"}
</span> </span>
{isLoading && ( {isLoading && (
<span className="ml-1"> <span className="ml-1">

View File

@ -1,14 +1,17 @@
import React from 'react' import React from 'react'
import { useParams, Link } from 'react-router-dom'; import { useParams, Link } from 'react-router-dom';
import JKJamTracksLandingBody from './JKJamTracksLandingBody';
// This page is not the real entry point into a jamtracks landing page,
// as deployed to a server. This is here to facilitate development of the
// landing page when running locally.
// Note: the real entry point is the JKJamTracksLandingTemplatePage component,
// which is used only during build time when generate statice pages as files.
const JKJamTracksLanding = () => { const JKJamTracksLanding = () => {
const { artist, song } = useParams(); const { artist, song } = useParams();
return ( return (
<div> <div>
<h1>JKJamTracksLanding</h1> <JKJamTracksLandingBody artist={artist} song={song} />
<p>artist: {artist}</p>
<p>song: {song}</p>
<Link to="/jamtracks">Back to JamTracks</Link>
</div> </div>
) )
} }

View File

@ -0,0 +1,540 @@
import React, {useEffect, useState} from "react";
import ReactDOM from "react-dom";
import {getCurrentUser, getJamTrackPublic} from '../../helpers/rest';
import JKJamTrackPreview from './JKJamTrackPreview';
import {AppDataProvider} from '../../context/AppDataContext';
import {JamTrackPreviewProvider} from '../../context/JamTrackPreviewContext'
import {useHistory} from "react-router-dom";
import useJamTrackShopping from "../../hooks/useJamTrackShopping";
import UserAuth, {useAuth} from '../../context/UserAuth';
const awesome1 = '/img/landing/jamtracks/Top 10 Image - Number 1.png';
const awesome2 = '/img/landing/jamtracks/Top 10 Image - Number 2.png';
const awesome3 = '/img/landing/jamtracks/Top 10 Image - Number 3.png';
const awesome4 = '/img/landing/jamtracks/Top 10 Image - Number 4.png';
const awesome5 = '/img/landing/jamtracks/Top 10 Image - Number 5.png';
const awesome6 = '/img/landing/jamtracks/Top 10 Image - Number 6.png';
const awesome7 = '/img/landing/jamtracks/Top 10 Image - Number 7.png';
const awesome8 = '/img/landing/jamtracks/Top 10 Image - Number 8.png';
const awesome9 = '/img/landing/jamtracks/Top 10 Image - Number 9.png';
// To test this component in isolation, go to:
// http://beta.jamkazam.local:4000/public/backing-tracks/artist/song
// But this is only for development
const BodyComponent = ({
id = "1",
plan_code = "jamtrack-acdc-backinblack",
slug = "ac-dc-back-in-black",
artist = "AC/DC (defaulted)",
song = "Back in Black (defaulted)",
provided_jam_track = null
}) => {
const [jamTrack, setJamTrack] = useState(provided_jam_track)
const [jamTrackLoading, setJamTrackLoading] = useState(false)
const history = useHistory()
const {addToCart} = useJamTrackShopping()
const { currentUser } = useAuth();
const isLoggedIn = () => {
return currentUser != null
}
const hasFreeJamTrack = () => {
return currentUser == null || currentUser.show_free_jamtrack
}
const ctaClick = () => {
const addJamTrackToCart = async () => {
try {
await addToCart(jamTrack);
} catch (error) {
console.error(error);
alert("Unable to add JamTrack to your cart.");
}
}
if (hasFreeJamTrack()) {
if (isLoggedIn()) {
// add to shopping cart automatically and then redirect to shopping cart page
addJamTrackToCart()
} else {
console.log("no user")
// redirect to the signup screen with the jamtrack & artist params set
window.location.href = "/authentication/basic/signup?artist=" + encodeURIComponent(artist) + '&jamtrack=' + encodeURIComponent(slug)
}
} else {
// This would mean there is a user in context, also, don't show the free option for this user (they already have a free jamtrack)
addJamTrackToCart()
}
}
const CtaButton = () => {
const btnText = hasFreeJamTrack() ? "Claim Free Backing Track" : "Add To Cart"
return <button onClick={ctaClick} className="btn btn-primary claim-free-backing-track">{btnText}</button>
};
//coming to signup page after clicking on jamtrack or artist
useEffect(() => {
const jamtrack_api_options = {plan_code: plan_code}
console.log(`jamtrack properties id=${id} plan_code=${plan_code} slug=${slug} artist=${artist} song=${song}`)
// This ensures we only try once here as well
if (!jamTrackLoading && jamTrack == null) {
// tracks should look like:
console.log("loading jamtrack", jamTrack)
// {
// "id": "43554b1d-d95e-4910-bf4f-ed025f9625f3",
// "part": "Master",
// "instrument": {
// "id": "acoustic guitar",
// "description": "Acoustic Guitar",
// "created_at": "2013-01-03T01:57:43.040Z",
// "updated_at": "2013-01-03T01:57:43.040Z",
// "popularity": 3
// },
// "track_type": "Master",
// "position": 1000,
// "preview_mp3_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-aabb9fc9774e5657a54e00733269abb8.mp3",
// "preview_ogg_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-72bc0b532410e5ac3aa7d89c854ef57b.ogg",
// "preview_aac_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-4402df19d0615844db14fb77bd4da467.aac"
// }
// Out of convenience, we can support both a generated, 'I have everything I need', as well as a developer
// friendly, grab tracks from my local server
const fetchJamTrack = async () => {
try {
const response = await getJamTrackPublic(jamtrack_api_options);
const jamTrack = await response.json();
console.log("jamtrack loaded", jamTrack);
setJamTrack(jamTrack)
setJamTrackLoading(false)
} catch (error) {
console.error(error);
setJamTrackLoading(false)
const dev_track = {
"id": "43554b1d-d95e-4910-bf4f-ed025f9625f3",
"part": "Master",
"instrument": {
"id": "acoustic guitar",
"description": "Acoustic Guitar",
"created_at": "2013-01-03T01:57:43.040Z",
"updated_at": "2013-01-03T01:57:43.040Z",
"popularity": 3
},
"track_type": "Master",
"position": 1000,
"preview_mp3_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-aabb9fc9774e5657a54e00733269abb8.mp3",
"preview_ogg_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-72bc0b532410e5ac3aa7d89c854ef57b.ogg",
"preview_aac_url": "https://jamkazam-staging-public.s3.amazonaws.com/jam_track_previews/AC/DC/Back%20in%20Black/Back%20in%20Black%20Master%20Mix-44100-preview-4402df19d0615844db14fb77bd4da467.aac"
}
setJamTrack({id, tracks: [dev_track]})
}
}
setJamTrackLoading(true);
fetchJamTrack();
}
});
return (
<div>
<UserAuth path={"/"}>
<AppDataProvider>
<JamTrackPreviewProvider>
<div className="content-row landing-page">
<div className="left-column">
<h1 className="top-title">Free {song} By {artist} Backing Track</h1>
<div className="top-region-container">
<div className="region mb-4 top-explanation-region">
<p>Our JamTracks take backing tracks to another level. Click the play icons in the
Preview box
to hear the full backing track mix and each of its parts. You can use our free
website or our
free app to easily make custom backing track mixes e.g. to hear just one part
as you learn
it, to mute that one part to play along with the band, to slow down playback for
practice
while building up your speed, to change pitch/key up or down, and to record
yourself in
high-quality audio and video playing or singing with the track to share with
family and
friends. Click the button below to get your {song} by {artist} backing track
now! Or
scroll down to learn more.
</p>
<div className="center-children">
<CtaButton/>
</div>
<div className="center-children">
<p className="claim-free-backing-track-text hint">Join 300,000+ other musicians
who love our backing tracks!</p>
</div>
</div>
<div className="region mb-4 preview-region card">
<div className="card-header bg-light">
<h2>Preview Backing Track</h2>
<p>{artist} - {song}</p>
</div>
<div className="card-body bg-white">
<p>
Click the play buttons below to preview the master mix and 20-second samples
of each fully isolated part of the backing track.
</p>
{jamTrack != null && <JKJamTrackPreview jamTrack={jamTrack} columns={false}
initialJamTracksShowCount={100}/>}
</div>
</div>
</div>
<div className="region mb-4">
<h2>Watch Video to See How Our Backing Tracks Work</h2>
<div className="video-wrapper">
<div className="video-container">
<iframe src="//www.youtube.com/embed/07zJC7C2ICA" border="0"
allowFullScreen></iframe>
</div>
</div>
</div>
<div className="region mb-4">
<h2>What Makes Our Backing Tracks Awesome?</h2>
<div className="card awesome-card">
<h3 className="card-header">
<div className="number-icon">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}}>
<path
d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM433.333,566.667L400,566.667L400,279.433L334.067,306.267L321.5,275.4L433.333,229.867L433.333,566.667Z"
style={{fill: "currentColor", fillRule: "nonzero"}}/>
<rect x="0" y="0" width="800" height="800"
style={{fill: "none", fillRule: "nonzero"}}/>
</svg>
</div>
Huge, High Quality Backing Track Catalog
</h3>
<p className="card-body bg-light">
<img src={awesome1} className="awesome-image-right"
alt="Backing track screenshot with volume controls for each part"/>
<span className="awesome-text">JamKazam offers a catalog of 9,000+ backing tracks. We carefully curate each backing
track for quality, and every one includes fully isolated tracks for each part of the music -
.e.g. lead vocal, backing vocals, lead guitar, rhythm guitar, keys, bass, drums, etc. This gives
you complete creative control over every aspect of the music and how you want to use it for
learning, practice, recording, mixing, and other creative endeavors.</span></p>
</div>
<div className="card awesome-card">
<h3 className="card-header">
<div className="number-icon">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}}>
<path
d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667L760,416.633C760,228.305 605.029,73.333 416.7,73.333L416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,566.667L300,566.667L300,550C300,478.1 358.733,446.5 410.567,418.6C456.933,393.667 496.967,372.133 496.967,327.9C494.662,293.374 465.616,266.203 431.013,266.203C428.402,266.203 425.793,266.358 423.2,266.667C398.972,265.071 375.105,273.376 357.1,289.667C342.449,305.897 334.023,326.812 333.333,348.667L300,349C300.61,318.375 312.427,289.011 333.2,266.5C357.361,243.563 389.933,231.559 423.2,233.333C425.859,233.118 428.526,233.011 431.194,233.011C483.988,233.011 528.006,275.156 530.3,327.9C530.3,392.033 475.067,421.733 426.367,447.967C383.933,470.8 343.633,492.467 335.033,533.333L533.333,533.333L533.333,566.667Z"
style={{fill: "currentColor", fillRule: "nonzero"}}/>
<rect x="0" y="0" width="800" height="800"
style={{fill: "none", fillRule: "nonzero"}}/>
</svg>
</div>
Solo, Mute, Pan or Set Level on Any Part
</h3>
<p className="card-body bg-light">
<img src={awesome2} className="awesome-image-left-tall"
alt="Backing track screenshot with controls to solo, mute, or pan each part"/>
<span className="awesome-text">When learning to play a part, it's incredibly valuable to be able to hear just one part in
isolation. Once you've learned your part, you can turn around and mute just that one part of
the backing track, and then play along with the rest of the band. Or if you prefer, you can
turn that part down low but keep it around as a subtle hint. Or pan the recorded track into
your left ear while your live performance is panned into your right ear. You are in control.</span></p>
</div>
<div className="card awesome-card">
<h3 className="card-header">
<div className="number-icon">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}}>
<path
d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM416.667,566.667C360.685,569.763 311.954,526.55 308.333,470.6L341.667,470.6C345.357,508.221 378.986,536.349 416.667,533.333C454.347,536.349 487.976,508.221 491.667,470.6C491.667,437.367 459.433,412.333 416.667,412.333L416.667,379C459.433,379 491.667,355.767 491.667,325C486.519,288.736 453.082,262.73 416.667,266.667C380.251,262.73 346.815,288.736 341.667,325L308.333,325C313.332,270.347 361.94,229.217 416.667,233.333C471.394,229.217 520.001,270.347 525,325C524.463,354.849 507.653,382.132 481.233,396.033C508.041,411.288 524.751,439.757 525,470.6C521.379,526.55 472.648,569.763 416.667,566.667Z"
style={{fill: "currentColor", fillRule: "nonzero"}}/>
<rect x="0" y="0" width="800" height="800"
style={{fill: "none", fillRule: "nonzero"}}/>
</svg>
</div>
Make Custom Mixes
</h3>
<p className="card-body bg-light">
<img src={awesome3} className="awesome-image-right-tall"
alt="Backing track screenshot with custom mixes created by the user"/>
<span className="awesome-text">When you've customized your backing track mix, you can easily save your custom mixes to
use them again later without having to recreate them. Your custom mixes are saved to the
JamKazam cloud, so you can access them from almost any Internet-connected device. If you want to use your mixes outside the JamKazam website or app, you can also export
custom mixes as a simple .mp3, .wav, or .ogg audio files to use anywhere.</span></p>
</div>
<div className="card awesome-card">
<h3 className="card-header">
<div className="number-icon">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}}>
<path
d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM500,566.667L466.667,566.667L466.667,500L252.867,500L500,226.433L500,466.667L566.667,466.667L566.667,500L500,500L500,566.667ZM333.333,466.667L466.667,466.667L466.667,306.9L333.333,466.667Z"
style={{fill: "currentColor", fillRule: "nonzero"}}/>
<rect x="0" y="0" width="800" height="800"
style={{fill: "none", fillRule: "nonzero"}}/>
</svg>
</div>
Slow Down Backing Track For Practice
</h3>
<p className="card-body bg-light">
<img src={awesome4} className="awesome-image-left-tall"
alt="Backing track screenshot with controls to slow down or speed up tempo"/>
<span className="awesome-text">You can easily slow down playback of your backing track by a specific % without changing
pitch, so the song still sounds "right", just slower. This is great for building your technique
on tougher sections while gradually increasing tempo. You can also make backing tracks
play faster if you want to hit the jets.</span></p>
</div>
<div className="card awesome-card">
<h3 className="card-header">
<div className="number-icon">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}}>
<path
d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,266.667L366.667,266.667L366.667,363.267C374.872,360.763 383.266,358.924 391.767,357.767C399.958,356.574 408.223,355.961 416.5,355.933C432.137,355.766 447.69,358.246 462.5,363.267C475.904,367.827 488.308,374.923 499.033,384.167C509.284,393.089 517.474,404.133 523.033,416.533C528.785,429.545 531.672,443.642 531.5,457.867C531.639,472.749 528.747,487.505 523,501.233C517.519,514.275 509.339,526.011 499,535.667C488.189,545.598 475.54,553.32 461.767,558.4C446.484,564.054 430.294,566.856 414,566.667C391.296,567.421 368.813,561.945 349,550.833C331.63,540.587 317.436,525.723 308,507.9L340.533,494.567C346.744,507.907 356.782,519.106 369.367,526.733C382.233,534.696 397.103,538.836 412.233,538.667C423.613,538.78 434.919,536.826 445.6,532.9C455.358,529.331 464.309,523.858 471.933,516.8C479.326,509.848 485.214,501.452 489.233,492.133C497.765,471.869 497.584,448.96 488.733,428.833C484.386,419.375 478.053,410.962 470.167,404.167C461.968,397.233 452.521,391.926 442.333,388.533C431.023,384.747 419.16,382.877 407.233,383C394.458,383.005 381.734,384.629 369.367,387.833C357.012,390.985 345.007,395.374 333.533,400.933L333.333,233.333L533.333,233.333L533.333,266.667Z"
style={{fill: "currentColor", fillRule: "nonzero"}}/>
<rect x="0" y="0" width="800" height="800"
style={{fill: "none", fillRule: "nonzero"}}/>
</svg>
</div>
Change Backing Track Pitch/Key
</h3>
<p className="card-body bg-light">
<img src={awesome5} className="awesome-image-right-tall"
alt="Backing track screenshot with controls to change pitch or key"/>
<span className="awesome-text">If you're a singer and you need to bring the song down into your vocal range, or if you're an
instrumentalist and want to change the piece to a different key, you can change the pitch of
any backing track up or down by a specified number of semitones (half steps).</span></p>
</div>
<div className="card awesome-card">
<h3 className="card-header">
<div className="number-icon">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}}>
<path
d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM376,375.2L376.933,376.133C383.292,371.871 390.428,368.903 397.933,367.4C406.491,365.325 415.261,364.251 424.067,364.2C437.723,364.077 451.278,366.566 464,371.533C475.89,376.187 486.751,383.13 495.967,391.967C505.139,400.949 512.357,411.73 517.167,423.633C522.417,436.541 525.046,450.366 524.9,464.3C525.072,478.615 522.362,492.82 516.933,506.067C511.885,518.266 504.254,529.229 494.567,538.2C484.632,547.271 473.058,554.365 460.467,559.1C432.753,569.194 402.347,569.194 374.633,559.1C362.042,554.365 350.468,547.271 340.533,538.2C330.836,529.238 323.203,518.273 318.167,506.067C312.718,492.814 310.008,478.594 310.2,464.267C310.056,448.233 313.08,432.328 319.1,417.467C324.959,403.138 331.983,389.314 340.1,376.133L430.167,233.333L468.867,233.333L376,375.2ZM343.8,464.267C343.684,474.407 345.506,484.476 349.167,493.933C352.572,502.676 357.735,510.629 364.333,517.3C371.016,523.984 378.943,529.295 387.667,532.933C406.838,540.574 428.229,540.574 447.4,532.933C456.123,529.295 464.051,523.984 470.733,517.3C477.338,510.614 482.51,502.652 485.933,493.9C489.564,484.447 491.373,474.392 491.267,464.267C491.354,454.326 489.626,444.453 486.167,435.133C482.92,426.392 477.904,418.414 471.433,411.7C464.837,404.977 456.882,399.738 448.1,396.333C428.389,388.991 406.678,388.991 386.967,396.333C378.179,399.726 370.221,404.967 363.633,411.7C357.186,418.42 352.193,426.398 348.967,435.133C345.485,444.449 343.734,454.322 343.8,464.267Z"
style={{fill: "currentColor", fillRule: "nonzero"}}/>
<rect x="0" y="0" width="800" height="800"
style={{fill: "none", fillRule: "nonzero"}}/>
</svg>
</div>
Make & Share Recordings
</h3>
<p className="card-body bg-light">
<img src={awesome6} className="awesome-image-left-tall"
alt="Backing track screenshot with recording features"/>
<span className="awesome-text">Use the JamKazam app to make either audio-only or video + audio recordings of yourself
playing or singing along with your backing track. The app captures video from built-in or
external webcams and combines this video with the audio of the backing track mixed with
your live performance into a single integrated video, delivering far higher audio quality than
a smartphone recording.</span></p>
</div>
<div className="card awesome-card">
<h3 className="card-header">
<div className="number-icon">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}}>
<path
d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM533.333,267.067L380.533,566.667L339.367,566.667L495.967,266.667L300,266.667L300,233.333L533.333,233.333L533.333,267.067Z"
style={{fill: "currentColor", fillRule: "nonzero"}}/>
<rect x="0" y="0" width="800" height="800"
style={{fill: "none", fillRule: "nonzero"}}/>
</svg>
</div>
Download the Parts of the Backing Track
</h3>
<p className="card-body bg-light">
<img src={awesome7} className="awesome-image-right-tall"
alt="Backing track screenshot with download features"/>
<span className="awesome-text">If you want to use the individual parts of the backing track outside the JamKazam website
or app, you can also download all the individual parts (e.g. lead vocal, drums, bass, etc.) to
your computer to use in a DAW (digital audio workstation) or other apps for creating
remixes, etc.</span></p>
</div>
<div className="card awesome-card">
<h3 className="card-header">
<div className="number-icon">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}}>
<path
d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM460.067,391.667C478.022,396.892 493.769,407.882 504.867,422.933C516.974,439.392 523.22,459.444 522.6,479.867C522.811,493.505 519.844,507.007 513.933,519.3C508.379,530.735 500.527,540.903 490.867,549.167C480.882,557.6 469.406,564.09 457.033,568.3C430.883,577.319 402.45,577.319 376.3,568.3C363.927,564.09 352.451,557.6 342.467,549.167C332.806,540.896 324.943,530.73 319.367,519.3C313.455,507.007 310.488,493.505 310.7,479.867C310.603,469.338 312.19,458.861 315.4,448.833C318.357,439.635 322.768,430.969 328.467,423.167C333.962,415.659 340.664,409.115 348.3,403.8C355.953,398.504 364.373,394.411 373.267,391.667L373.267,390.733C365.907,388.301 359.035,384.589 352.967,379.767C346.84,374.902 341.548,369.069 337.3,362.5C332.891,355.697 329.447,348.316 327.067,340.567C324.569,332.641 323.31,324.377 323.333,316.067C323.157,303.536 325.705,291.116 330.8,279.667C335.533,269.083 342.451,259.62 351.1,251.9C359.803,244.2 369.864,238.186 380.767,234.167C403.89,225.774 429.244,225.774 452.367,234.167C463.348,238.149 473.48,244.165 482.233,251.9C490.863,259.638 497.778,269.096 502.533,279.667C507.628,291.116 510.176,303.536 510,316.067C510.007,324.375 508.748,332.637 506.267,340.567C503.848,348.307 500.395,355.685 496,362.5C491.752,369.069 486.46,374.902 480.333,379.767C474.278,384.597 467.417,388.321 460.067,390.767L460.067,391.667ZM344.333,476.133C344.263,485.707 346.005,495.207 349.467,504.133C352.704,512.567 357.717,520.207 364.167,526.533C370.742,532.889 378.515,537.875 387.033,541.2C406.135,548.356 427.198,548.356 446.3,541.2C454.815,537.867 462.586,532.882 469.167,526.533C475.616,520.207 480.63,512.567 483.867,504.133C487.328,495.207 489.07,485.707 489,476.133C489.098,466.709 487.354,457.356 483.867,448.6C480.541,440.349 475.535,432.879 469.167,426.667C462.612,420.334 454.83,415.41 446.3,412.2C427.143,405.349 406.19,405.349 387.033,412.2C378.5,415.402 370.716,420.327 364.167,426.667C357.799,432.879 352.792,440.349 349.467,448.6C345.979,457.356 344.235,466.709 344.333,476.133ZM356,317.933C355.885,326.105 357.474,334.211 360.667,341.733C363.697,348.785 368.145,355.139 373.733,360.4C397.749,382.897 435.584,382.897 459.6,360.4C465.179,355.13 469.625,348.779 472.667,341.733C475.844,334.206 477.433,326.103 477.333,317.933C477.386,309.541 475.8,301.219 472.667,293.433C469.74,286.109 465.376,279.445 459.833,273.833C441.975,256.675 415.558,251.63 392.633,261C385.485,263.998 378.986,268.357 373.5,273.833C367.957,279.445 363.594,286.109 360.667,293.433C357.517,301.214 355.931,309.54 356,317.933Z"
style={{fill: "currentColor", fillRule: "nonzero"}}/>
<rect x="0" y="0" width="800" height="800"
style={{fill: "none", fillRule: "nonzero"}}/>
</svg>
</div>
Use Plugins with Backing Tracks
</h3>
<p className="card-body bg-light">
<img src={awesome8} className="awesome-image-left trim-down"
alt="Backing track screenshot with audio plugin effect example"/>
<span className="awesome-text">The free JamKazam app lets you easily apply VST & AU plugins to your live performance,
mixed together seamlessly with your backing track. For example, guitarists can apply
popular amp sims like AmpliTube to get just the right guitar tone to match the song, and
vocalists can apply effects like reverb or pitch correction.</span></p>
</div>
<div className="card awesome-card">
<h3 className="card-header">
<div className="number-icon">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}}>
<path
d="M416.667,73.333C228.32,73.333 73.333,228.32 73.333,416.667C73.333,605.014 228.32,760 416.667,760C605.014,760 760,605.014 760,416.667C760,416.656 760,416.644 760,416.633C760,228.305 605.029,73.333 416.7,73.333C416.689,73.333 416.678,73.333 416.667,73.333ZM416.667,726.667C246.606,726.667 106.667,586.728 106.667,416.667C106.667,246.606 246.606,106.667 416.667,106.667C586.728,106.667 726.667,246.606 726.667,416.667C726.484,586.659 586.659,726.484 416.667,726.667ZM464.467,422.467L463.533,421.533C457.191,425.853 450.052,428.868 442.533,430.4C433.983,432.521 425.21,433.618 416.4,433.667C402.741,433.794 389.188,431.258 376.5,426.2C364.574,421.465 353.707,414.406 344.533,405.433C335.311,396.279 328.082,385.316 323.3,373.233C318.088,360.095 315.484,346.067 315.633,331.933C315.479,317.472 318.175,303.12 323.567,289.7C328.526,277.23 336.161,265.998 345.933,256.8C355.837,247.622 367.399,240.416 380,235.567C407.695,225.308 438.171,225.308 465.867,235.567C478.486,240.42 490.069,247.626 500,256.8C509.752,266.016 517.384,277.242 522.367,289.7C527.743,303.124 530.439,317.473 530.3,331.933C530.443,348.223 527.432,364.388 521.433,379.533C515.552,394.065 508.53,408.109 500.433,421.533L410.333,566.667L371.6,566.667L464.467,422.467ZM496.667,331.933C496.737,321.732 494.917,311.605 491.3,302.067C487.949,293.099 482.786,284.918 476.133,278.033C469.478,271.258 461.548,265.865 452.8,262.167C433.658,254.38 412.209,254.38 393.067,262.167C384.321,265.869 376.392,271.261 369.733,278.033C363.081,284.918 357.918,293.099 354.567,302.067C350.961,311.608 349.153,321.734 349.233,331.933C349.123,342.049 350.851,352.102 354.333,361.6C357.545,370.442 362.537,378.531 369,385.367C375.579,392.191 383.548,397.523 392.367,401C412.051,408.485 433.815,408.485 453.5,401C462.307,397.519 470.264,392.187 476.833,385.367C483.311,378.518 488.325,370.419 491.567,361.567C495.029,352.075 496.757,342.037 496.667,331.933Z"
style={{fill: "currentColor", fillRule: "nonzero"}}/>
<rect x="0" y="0" width="800" height="800"
style={{fill: "none", fillRule: "nonzero"}}/>
</svg>
</div>
Use MIDI Instruments with Backing Tracks
</h3>
<p className="card-body bg-light">
<img src={awesome9} className="awesome-image-right trim-down"
alt="Backing track screenshot with MIDI keyboard example"/>
<span className="awesome-text">The free JamKazam app also lets you use MIDI instruments and mix and record this
instrumental audio with backing tracks. For example, keys players can use MIDI keyboard
controllers with plugins to generate traditional piano sounds, Rhodes electric piano,
Hammond organ, and other classic keys tones. And drummers who use electronic kits can
use their favorite plugins to power their percussive audio.</span></p>
</div>
<div className="card awesome-card">
<h3 className="card-header">
<div className="number-icon">
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
strokeLinejoin: "round",
strokeMiterlimit: 2
}}>
<g transform="matrix(1,0,0,1,-104,0)">
<path
d="M433.333,566.667L400,566.667L400,279.433L334.067,306.267L321.5,275.4L433.333,229.867L433.333,566.667Z"
style={{fill: "rgb(54,64,79)"}}/>
</g>
<path
d="M416.667,73.333L416.7,73.333C605.029,73.333 760,228.305 760,416.633L760,416.667C760,605.014 605.014,760 416.667,760C228.32,760 73.333,605.014 73.333,416.667C73.333,228.32 228.32,73.333 416.667,73.333ZM416.667,726.667C586.659,726.484 726.484,586.659 726.667,416.667C726.667,246.606 586.728,106.667 416.667,106.667C246.606,106.667 106.667,246.606 106.667,416.667C106.667,586.728 246.606,726.667 416.667,726.667Z"
style={{fill: "rgb(54,64,79)"}}/>
<g transform="matrix(1,0,0,1.04274,86,-16.8444)">
<path
d="M400,237.5C436.38,237.5 466.315,255.853 486.572,290.573C503.293,319.229 512.5,358.093 512.5,400C512.5,441.904 503.293,480.765 486.572,509.424C466.315,544.147 436.38,562.5 400,562.5C363.62,562.5 333.685,544.147 313.428,509.424C296.707,480.765 287.5,441.904 287.5,400C287.5,358.093 296.707,319.229 313.428,290.573C333.685,255.853 363.62,237.5 400,237.5ZM400,537.5C460.443,537.5 487.5,468.442 487.5,400C487.5,331.558 460.443,262.5 400,262.5C339.557,262.5 312.5,331.558 312.5,400C312.5,468.442 339.557,537.5 400,537.5Z"
style={{fill: "rgb(54,64,79)"}}/>
</g>
<rect x="0" y="0" width="800" height="800" style={{fill: "none"}}/>
</svg>
</div>
Play Live In Sync With Others Over the Internet
</h3>
<div className="card-body bg-light">
<div className="video-wrapper awesome-image-right">
<div className="video-container">
<iframe src="//www.youtube.com/embed/euxDykIqUdo" border="0"
allowFullScreen></iframe>
</div>
</div>
Perhaps the most mind-blowing thing you can do with JamKazam is that you can
play live in
sync with others from different locations over the Internet using the free
JamKazam app
and platform. You can play with your backing tracks in these sessions, with
live musicians
playing some parts and the backing track filling in the others.
</div>
</div>
</div>
<div className="center-children">
<button className="btn btn-primary claim-free-backing-track">Claim Free Backing
Track
</button>
</div>
</div>
</div>
</JamTrackPreviewProvider>
</AppDataProvider>
</UserAuth>
</div>
);
};
export default BodyComponent;

View File

@ -0,0 +1,57 @@
import React, {useContext} from "react";
import { BrowserRouter as Router, ReactDOM } from "react-router-dom";
import JKJamTracksLandingBody from "./JKJamTracksLandingBody";
import AppContext from "../../context/Context";
import {useResponsive} from "@farfetch/react-context-responsive";
import {Navbar} from "reactstrap";
import {topNavbarBreakpoint} from "../../config";
import Logo from "../navbar/Logo";
import {BrowserQueryProvider} from "../../context/BrowserQuery";
import Footer from "../footer/JKFooter";
const TemplatePage = ({ id, plan_code, slug, artist, song, location}) => {
console.log('TemplatePage', id, plan_code, slug, artist, song, location);
const {
isFluid,
isTopNav,
} = useContext(AppContext);
const { greaterThan } = useResponsive();
const paddingClass = greaterThan.sm ? "px-6" : "px-1";
return (
<Router location={location} context={{}}>
<div className={isFluid ? 'container-fluid' : 'container'}>
<div className="content">
<Navbar
light
color="white"
className={`navbar-glass fs--1 font-weight-semi-bold row navbar-top sticky-kit mb-3 py-3 ${paddingClass}`}
expand={isTopNav && topNavbarBreakpoint}
>
<Logo at="navbar-top" id="topLogo" width={240}/>
</Navbar>
<div className={`pt-3 row ${paddingClass}`}>
<BrowserQueryProvider>
<JKJamTracksLandingBody id={id} plan_code={plan_code} slug={slug} song={song} artist={artist}
provided_jam_track={null}/>
</BrowserQueryProvider>
</div>
{/* <div className='px-6 row'> */}
<Footer/>
{/* </div> */}
</div>
</div>
</Router>
);
};
export default TemplatePage;

View File

@ -0,0 +1,7 @@
import React from "react";
const TitleComponent = ({ artist, song }) => {
return <title>{artist} - {song}</title>;
};
export default TitleComponent;

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import logo from '../../assets/img/logos/JK_Logo_blue-2021.png'; const logo = '/img/logos/JK_Logo_blue-2021.png';
const Logo = ({ at, width, className, ...rest }) => { const Logo = ({ at, width, className, ...rest }) => {
return ( return (

View File

@ -1,11 +1,12 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { detectOS, isAppleSilicon } from '../../helpers/utils' import { detectOS, isAppleSilicon } from '../../helpers/utils'
import { getClientDownloads } from '../../helpers/rest' import { getClientDownloads } from '../../helpers/rest'
import DownloadButtonMacAppleMx from '../../assets/img/downloads/Download-Button-Mac-Apple-Mx.svg'
import DownloadButtonMacIntel from '../../assets/img/downloads/Download-Button-Mac-Intel.svg'
import DownloadButtonWindows from '../../assets/img/downloads/Download-Button-Windows.svg'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
const DownloadButtonMacAppleMx = '/img/downloads/Download-Button-Mac-Apple-Mx.svg'
const DownloadButtonMacIntel = '/img/downloads/Download-Button-Mac-Intel.svg'
const DownloadButtonWindows = '/img/downloads/Download-Button-Windows.svg'
const JKDownloads = () => { const JKDownloads = () => {
const [currentOS, setCurrentOS] = useState(null) const [currentOS, setCurrentOS] = useState(null)
const [downloads, setDownloads] = useState({}) const [downloads, setDownloads] = useState({})

View File

@ -1,9 +1,9 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { detectOS, isAppleSilicon } from '../../helpers/utils' import { detectOS, isAppleSilicon } from '../../helpers/utils'
import { getClientDownloads } from '../../helpers/rest' import { getClientDownloads } from '../../helpers/rest'
import DownloadButtonWindowsLegacy from '../../assets/img/downloads/Download-Button-Windows-Legacy.svg'
import DownloadButtonMacLegacy from '../../assets/img/downloads/Download-Button-Mac-Legacy.svg'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
const DownloadButtonWindowsLegacy = '../../assets/img/downloads/Download-Button-Windows-Legacy.svg'
const DownloadButtonMacLegacy = '../../assets/img/downloads/Download-Button-Mac-Legacy.svg'
const JKDownloadsLegacy = () => { const JKDownloadsLegacy = () => {
const [currentOS, setCurrentOS] = useState(null) const [currentOS, setCurrentOS] = useState(null)

View File

@ -13,7 +13,7 @@ export const settings = {
showBurgerMenu: false, // controls showing vertical nav on mobile showBurgerMenu: false, // controls showing vertical nav on mobile
currency: '$', currency: '$',
isNavbarVerticalCollapsed: false, isNavbarVerticalCollapsed: false,
navbarStyle: 'transparent' navbarStyle: 'transparent',
}; };
export const sessionPrivacyMap = { export const sessionPrivacyMap = {
public: 1, public: 1,

View File

@ -16,7 +16,6 @@ export const AppDataProvider = ({ children }) => {
const fpPromise = FingerprintJS.load(); const fpPromise = FingerprintJS.load();
fpPromise.then(fp => { fpPromise.then(fp => {
fp.get().then(result => { fp.get().then(result => {
console.log('visitorId', result);
setAppData(prev => ({...prev, visitorId: result.visitorId})); setAppData(prev => ({...prev, visitorId: result.visitorId}));
}); });
}); });

View File

@ -13,4 +13,4 @@ export const JamTrackPreviewProvider = ({ children}) => {
) )
} }
export const useJamTrackPreview = () => React.useContext(JamTrackPreviewContext) export const useJamTrackPreview = () => React.useContext(JamTrackPreviewContext)

View File

@ -19,6 +19,7 @@ export default function UserAuth({ children, path }) {
checkIsAuthenticated() checkIsAuthenticated()
.then(resp => resp.json()) .then(resp => resp.json())
.then(user => { .then(user => {
window.currentUser = user; window.currentUser = user;
setCurrentUser(user); setCurrentUser(user);
setIsAuthenticated(true); setIsAuthenticated(true);
@ -63,4 +64,4 @@ export default function UserAuth({ children, path }) {
UserAuth.propTypes = { UserAuth.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
path: PropTypes.string path: PropTypes.string
}; };

View File

@ -98,13 +98,13 @@ export const getInstruments = () => {
}); });
}; };
// export const getCurrentUser = () => { export const getCurrentUser = () => {
// return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// apiFetch('/me') apiFetch('/me')
// .then(response => resolve(response)) .then(response => resolve(response))
// .catch(error => reject(error)) .catch(error => reject(error))
// }) })
// } }
export const getFriends = userId => { export const getFriends = userId => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -464,6 +464,16 @@ export const getJamTrack = options => {
}); });
}; };
export const getJamTrackPublic = options => {
const { plan_code } = options;
return new Promise((resolve, reject) => {
// This does not make sense; historical reasons here
apiFetch(`/jamtracks/band/${plan_code}?${new URLSearchParams({plan_code})}`)
.then(response => resolve(response))
.catch(error => reject(error));
});
};
export const getJamTrackBySlug = options => { export const getJamTrackBySlug = options => {
const { slug } = options; const { slug } = options;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -651,4 +661,4 @@ export const getClientDownloads = () => {
.then(response => resolve(response)) .then(response => resolve(response))
.catch(error => reject(error)); .catch(error => reject(error));
}); });
} }

Some files were not shown because too many files have changed in this diff Show More