+ New Shadis icon, App/Splash screen icons

This commit is contained in:
Pogodaanton 2020-07-21 18:08:01 +02:00
parent 9fb551cfc2
commit 45687ba0e5
36 changed files with 68 additions and 30 deletions

View File

@ -44,19 +44,50 @@ if (!empty($segments[0])) {
<head>
<meta charset="utf-8" />
<link rel="icon" href="<?php echo $homepage . "/static/media/favicon.ico"; ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta content="noindex" name="robots">
<link rel="apple-touch-icon" href="<?php echo $homepage . "/static/media/logo192.png"; ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="<?php echo $homepage . "/manifest.json"; ?>" />
<title><?php echo $title; ?></title>
<meta name="title" content="<?php echo $title; ?>">
<meta name="description" content="Share and host your favourite screenshots and screencaptures on your own server!">
<meta name="theme-color" content="#242424" />
<meta name="apple-mobile-web-app-capable" content="yes">
<!--
Following metatags and their respective images were generated with the following command:
> npx pwa-asset-generator ./static/media/logo.svg ./static/media -i ./index.html -m ./manifest.json -b "#242424"
Make sure to transfer the generated iOS metatags from index.html to index.php
-->
<link rel="icon" href="<?php echo $homepage . "/static/media/favicon.ico"; ?>" />
<link rel="mask-icon" href="<?php echo $homepage . "/static/media/safari-pinned-tab.svg"; ?>" color="#d75e00">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo $homepage . "/static/media/apple-icon-180.png"; ?>">
<link rel="apple-touch-icon" sizes="167x167" href="<?php echo $homepage . "/static/media/apple-icon-167.png"; ?>">
<link rel="apple-touch-icon" sizes="152x152" href="<?php echo $homepage . "/static/media/apple-icon-152.png"; ?>">
<link rel="apple-touch-icon" sizes="120x120" href="<?php echo $homepage . "/static/media/apple-icon-120.png"; ?>">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-2048-2732.jpg"; ?>" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-2732-2048.jpg"; ?>" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-1668-2388.jpg"; ?>" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-2388-1668.jpg"; ?>" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-1668-2224.jpg"; ?>" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-2224-1668.jpg"; ?>" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-1536-2048.jpg"; ?>" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-2048-1536.jpg"; ?>" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-1242-2688.jpg"; ?>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-2688-1242.jpg"; ?>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-1125-2436.jpg"; ?>" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-2436-1125.jpg"; ?>" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-828-1792.jpg"; ?>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-1792-828.jpg"; ?>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-1242-2208.jpg"; ?>" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-2208-1242.jpg"; ?>" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-750-1334.jpg"; ?>" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-1334-750.jpg"; ?>" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-640-1136.jpg"; ?>" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="<?php echo $homepage . "/static/media/apple-splash-1136-640.jpg"; ?>" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<?php
echo '<script>var baseDirectory = ';
echo json_encode($base_directory);
@ -94,6 +125,11 @@ if (!empty($segments[0])) {
object-fit: scale-down;
}
</style>
<!-- Basic Unfurling Metadata -->
<title><?php echo $title; ?></title>
<meta name="title" content="<?php echo $title; ?>">
<meta name="description" content="Share and host your favourite screenshots and screencaptures on your own server!">
<link rel="image_src" href="<?php echo $file_url; ?>">
<!-- Facebook OpenGraph Metadata -->

View File

@ -1,25 +1,27 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "Shadis",
"name": "Shadis",
"icons": [
{
"src": "static/media/manifest-icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "static/media/manifest-icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "static/media/favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "static/media/logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "static/media/logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
"theme_color": "#FF6E01",
"background_color": "#242424"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
public/static/media/favicon.ico Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

1
public/static/media/logo.svg Executable file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 226.77 226.77"><defs><style>.cls-1{fill:#ededee;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}.cls-5{fill:url(#linear-gradient-4);}</style><linearGradient id="linear-gradient" x1="52.73" y1="52.98" x2="101.34" y2="119.71" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6100"/><stop offset="0.77" stop-color="#ff8e00"/><stop offset="1" stop-color="#ff9d00"/></linearGradient><linearGradient id="linear-gradient-2" x1="137.83" y1="127.34" x2="199.36" y2="169.84" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff9d00"/><stop offset="0.23" stop-color="#ff8e00"/><stop offset="1" stop-color="#ff6100"/></linearGradient><linearGradient id="linear-gradient-3" x1="72.93" y1="70.4" x2="159.38" y2="43.06" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#adadad"/><stop offset="0.01" stop-color="#b3b3b3"/><stop offset="0.07" stop-color="#c8c8c9"/><stop offset="0.13" stop-color="#d9d9da"/><stop offset="0.21" stop-color="#e4e4e5"/><stop offset="0.33" stop-color="#ebebec"/><stop offset="0.64" stop-color="#ededee"/></linearGradient><linearGradient id="linear-gradient-4" x1="65.39" y1="106.18" x2="154.12" y2="106.04" gradientUnits="userSpaceOnUse"><stop offset="0.27" stop-color="#ededee"/><stop offset="0.58" stop-color="#ebebec"/><stop offset="0.73" stop-color="#e3e3e4"/><stop offset="0.85" stop-color="#d6d6d7"/><stop offset="0.96" stop-color="#c4c4c4"/><stop offset="1" stop-color="#bababa"/></linearGradient></defs><g id="Layer_16" data-name="Layer 16"><polygon class="cls-1" points="208.23 58.44 208.23 168.38 113.02 223.35 83.19 206.13 81.03 204.88 17.8 168.38 17.8 58.44 113.02 3.46 208.23 58.44"/><path class="cls-2" d="M82.33,104.54l52.91,38.82-76.3,40.19L25.25,164.09V62.73L113,12.06l31.63,18.26L71.47,68.88h0l-.77,10.4A28.66,28.66,0,0,0,82.33,104.54Z"/><path class="cls-3" d="M200.79,62.73V164.09L113,214.77l-31.22-18,54.84-28.9a38,38,0,0,0,20.17-30.78l.39-5.28L91.48,83.57l76-40.06Z"/><path class="cls-1" d="M157.2,131.78l-.39,5.28a38,38,0,0,1-20.17,30.78L81.8,196.74h0L74,200.83,51.17,187.64l7.77-4.09h0l76.29-40.19Z"/><polygon class="cls-4" points="175.27 39.41 167.5 43.51 91.48 83.57 79.85 75.03 71.47 68.89 71.47 68.88 144.65 30.32 152.43 26.22 175.27 39.41"/><path class="cls-5" d="M157.2,131.78l-22,11.58L82.33,104.54A28.66,28.66,0,0,1,70.7,79.29l.77-10.4L79.85,75l11.63,8.54Z"/></g></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 791 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="304" height="304" version="1.0" viewBox="0 0 228 228"><path d="M70 38.4L26.5 63.5l-.2 51-.3 51 16.6 9.4c14.4 8.1 16.9 9.2 18.9 8.3a8545 8545 0 0073.2-38.6c.1-.1-11.1-8.5-25-18.6-29.8-21.9-32-23.8-35.5-30.4-2.4-4.5-2.7-6.2-2.7-14.8.1-8.5.3-10 2-11.2 1.1-.8 17.5-9.7 36.5-19.7l34.8-18.4c.2-.2-28.3-16.9-30.8-18-.3-.2-20.1 11-44 24.9z"/><path d="M131.2 64.8a624.7 624.7 0 00-37 20.3c.2.4 11.8 9.2 25.8 19.5s28.4 20.9 31.9 23.7l6.3 5.1-.6 6a42.5 42.5 0 01-11.9 24.1c-4.1 3.5-18.7 11.7-47.4 26.6-7.9 4.1-14.3 7.7-14.3 8 0 .3 6.7 4.5 14.9 9.3l14.9 8.6 43.8-25.3 43.9-25.2.3-45c.2-24.8 0-47.7-.3-51l-.6-6-10.2-5.7-16.2-9.2-6.1-3.5-37.2 19.7z"/></svg>

After

Width:  |  Height:  |  Size: 690 B

View File

@ -0,0 +1,3 @@
export interface LogoProps extends React.ImgHTMLAttributes<HTMLImageElement> {
size?: string;
}

View File

@ -1,4 +1,5 @@
import React, { Component } from "react";
import { LogoProps } from "./Logo.props";
let CustomLogo: React.ComponentClass<any, any> | React.FunctionComponent<any> = undefined;
@ -17,10 +18,6 @@ try {
CustomLogo = CustomLogoImport.default;
} catch (error) {}
interface LogoProps extends React.ImgHTMLAttributes<HTMLImageElement> {
size?: string;
}
// Falling back to a filler image if no module can be found
export default class Logo extends Component<LogoProps> {
render() {
@ -28,10 +25,8 @@ export default class Logo extends Component<LogoProps> {
<CustomLogo {...this.props} />
) : (
<img
src={
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQBAMAAAB8P++eAAAAG1BMVEXMzMyWlpa+vr6cnJy3t7fFxcWjo6OxsbGqqqqN7EKtAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAcklEQVRIiWNgGAWjYBSMglEwsoCysUJzAxoLKzBiMi9oR2NhBSYhxgHBDOVsClAWTqAoqMjAyMDsAWPhBOnhiUBpFlEYCycQZRUGWsguBGPhBCks6UAvBKvBWDhBmFkAMFBa2BygrFEwCkbBKBgFgxoAAFYVFqKYGZ7+AAAAAElFTkSuQmCC"
}
alt={this.props.alt || "Logo"}
src={"./static/media/logo.svg"}
alt={this.props.alt || "Shadis Logo"}
width={this.props.size || "80"}
height={this.props.size || "80"}
/>