Add app logo and favicon

This commit is contained in:
Mikei386
2026-06-22 16:20:48 +02:00
parent c00f70c03a
commit 26e1879104
5 changed files with 55 additions and 5 deletions
+14
View File
@@ -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;
+11
View File
@@ -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

+15
View File
@@ -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 {
+7 -2
View File
@@ -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>
+8 -3
View File
@@ -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>