Add app logo and favicon
This commit is contained in:
@@ -37,6 +37,20 @@ header {
|
|||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobile-brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-brand img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border-radius: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title desc">
|
||||||
|
<title id="title">P-Touch Web</title>
|
||||||
|
<desc id="desc">Label printer icon with a printed P label</desc>
|
||||||
|
<rect width="64" height="64" rx="14" fill="#202020"/>
|
||||||
|
<path d="M13 21h28c6 0 10 4 10 10v10c0 6-4 10-10 10H13c-3 0-5-2-5-5V26c0-3 2-5 5-5Z" fill="#343434" stroke="#707070" stroke-width="2"/>
|
||||||
|
<path d="M20 13h31c3 0 5 2 5 5v20c0 3-2 5-5 5H20V13Z" fill="#f7f7f2" stroke="#d9d9d0" stroke-width="2"/>
|
||||||
|
<path d="M17 17h4v22h-4c-2 0-4-2-4-4V21c0-2 2-4 4-4Z" fill="#111"/>
|
||||||
|
<path d="M27 21h10c6 0 10 4 10 10s-4 10-10 10h-4v7h-6V21Zm6 5v10h4c3 0 5-2 5-5s-2-5-5-5h-4Z" fill="#111"/>
|
||||||
|
<path d="M12 48h30" stroke="#f7f7f2" stroke-width="3" stroke-linecap="round"/>
|
||||||
|
<circle cx="50" cy="50" r="4" fill="#2374e1"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 825 B |
@@ -81,8 +81,23 @@ textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.brand {
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand img {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand div {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand span {
|
.brand span {
|
||||||
|
|||||||
@@ -4,14 +4,19 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>P-Touch Web Editor</title>
|
<title>P-Touch Web Editor</title>
|
||||||
|
<link rel="icon" href="{{ url_for('static', filename='ptouch-web-logo.svg') }}" type="image/svg+xml">
|
||||||
|
<link rel="apple-touch-icon" href="{{ url_for('static', filename='ptouch-web-logo.svg') }}">
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="app-shell">
|
<div class="app-shell">
|
||||||
<header class="topbar">
|
<header class="topbar">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<strong>P-Touch Web</strong>
|
<img src="{{ url_for('static', filename='ptouch-web-logo.svg') }}" alt="" aria-hidden="true">
|
||||||
<span>PT-P700 · <a href="{{ url_for('mobile') }}">Mobile</a></span>
|
<div>
|
||||||
|
<strong>P-Touch Web</strong>
|
||||||
|
<span>PT-P700 · <a href="{{ url_for('mobile') }}">Mobile</a></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbar" aria-label="Werkzeuge">
|
<div class="toolbar" aria-label="Werkzeuge">
|
||||||
<button data-tool="text" title="Textfeld">Text</button>
|
<button data-tool="text" title="Textfeld">Text</button>
|
||||||
|
|||||||
@@ -4,14 +4,19 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
<title>P-Touch Mobile</title>
|
<title>P-Touch Mobile</title>
|
||||||
|
<link rel="icon" href="{{ url_for('static', filename='ptouch-web-logo.svg') }}" type="image/svg+xml">
|
||||||
|
<link rel="apple-touch-icon" href="{{ url_for('static', filename='ptouch-web-logo.svg') }}">
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='mobile.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='mobile.css') }}">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main class="mobile-shell">
|
<main class="mobile-shell">
|
||||||
<header>
|
<header>
|
||||||
<div>
|
<div class="mobile-brand">
|
||||||
<h1>P-Touch Mobile</h1>
|
<img src="{{ url_for('static', filename='ptouch-web-logo.svg') }}" alt="" aria-hidden="true">
|
||||||
<p>PT-P700</p>
|
<div>
|
||||||
|
<h1>P-Touch Mobile</h1>
|
||||||
|
<p>PT-P700</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="{{ url_for('index') }}">Editor</a>
|
<a href="{{ url_for('index') }}">Editor</a>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
Reference in New Issue
Block a user