-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
70 lines (70 loc) · 8.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#3D3D3D" />
<meta name="app-title" content="print PWA logos!" />
<link rel="manifest" href="manifest.json">
<link href="styles/pwinter_light.css" type="text/css" rel="stylesheet" media="(prefers-color-scheme: light)">
<link href="styles/pwinter_dark.css" type="text/css" rel="stylesheet" media="(prefers-color-scheme: dark)">
<link href="styles/pwinter.css" rel="stylesheet">
<link rel="shortcut icon" type="image/jpg" href="images/pwinter.png"/>
<script src="scripts/app.js"></script>
<script src="scripts/pwinter.js"></script>
<script src="scripts/pwinter-save.js"></script>
<script src="scripts/pwinter-share.js"></script>
<title>The PWinter</title>
</head>
<body>
<header>
<h1>The PWinter</h1>
<nav id="titleBarIcons">
<svg id="btnNew" class="icon" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.5"><title>New Logo</title><path d="M.75 10.313c0 5.278 4.285 9.563 9.563 9.563 5.278 0 9.563-4.285 9.563-9.563 0-5.278-4.285-9.563-9.563-9.563C5.035.75.75 5.035.75 10.313Zm9.563-4.303v8.606m4.303-4.303H6.01" style="fill:none;stroke:#fff;stroke-width:1.5px"/></svg>
<svg id="btnSave" class="icon" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.5"><title>Save Logo</title><path d="M.75 17.007a2.87 2.87 0 0 0 2.869 2.869h11.475a4.785 4.785 0 0 0 4.782-4.782V3.619A2.87 2.87 0 0 0 17.007.75H3.619A2.87 2.87 0 0 0 .75 3.619v13.388Zm3.825 2.869h9.563v-7.172H4.575v7.172Zm5.26-4.304v1.913m-5.26-7.172h11.476V.75H4.575v9.563Z" style="fill:none;stroke:#fff;stroke-width:1.5px"/></svg>
<svg id="btnShare" class="icon" viewBox="0 0 22 17" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5"><title>Share Logo</title><path d="M1.352 10.002a4.785 4.785 0 0 0 4.782 4.782h9.562a4.785 4.785 0 0 0 4.782-4.782m-9.567 1.35v-10L6.919 5.345l3.992-3.993 4 4" style="fill:none;stroke:#fff;stroke-width:1.5px"/></svg>
</nav>
</header>
<section id="previewPane">
<svg id="pwaLogo" width="100%" height="100%" viewBox="0 100 400 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<title>PWA logo</title>
<g id="pwa-logo">
<path id="svgA" d="M273.151,237.453l8.956,-22.646l25.858,-0l-12.272,-34.354l15.348,-38.812l43.959,116.716l-32.418,0l-7.513,-20.904l-41.918,0" fill="var(--colorA)"/>
<path id="svgW" d="M245.496,258.359l47.058,-116.716l-31.198,-0l-32.192,75.423l-22.891,-75.423l-23.981,-0l-24.578,75.423l-17.334,-34.368l-15.686,48.326l15.927,27.335l30.702,-0l22.211,-67.64l21.176,67.64l30.786,-0" fill="var(--colorW)"/>
<path id="svgP" d="M74.614,218.291l19.216,0c5.822,0 11.006,-0.65 15.551,-1.95l4.971,-15.309l13.888,-42.793c-1.057,-1.677 -2.266,-3.263 -3.624,-4.758c-7.132,-7.893 -17.566,-11.84 -31.303,-11.84l-48.313,0l-0,116.716l29.614,0l-0,-40.066Zm25.437,-49.797c2.785,2.803 4.178,6.555 4.178,11.255c-0,4.736 -1.225,8.491 -3.674,11.268c-2.687,3.085 -7.631,4.626 -14.836,4.626l-11.105,0l-0,-31.355l11.186,-0c6.715,-0 11.465,1.401 14.251,4.206" fill="var(--colorP)"/>
</g>
</svg>
</section>
<section id="colorSelectionPane">
<h2>Letter colours</h2>
<span class="colorSelectionRow">
<input type="color" id="colorPickerP" name="colorP" value="#808080">
<input type="color" id="colorPickerW" name="colorW" value="#808080">
<input type="color" id="colorPickerA" name="colorA" value="#808080">
</span>
<h2>Preview background</h2>
<span class="colorSelectionRow">
<svg class="bgBtn" id="btnLight" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
<title>Preview in light background colour</title>
<path d="m11.647 0 3.219 2.339h3.979l1.229 3.784 3.219 2.339-1.229 3.784 1.229 3.784-3.219 2.339-1.229 3.784h-3.979l-3.219 2.339-3.219-2.339H4.449l-1.23-3.784L0 16.03l1.23-3.784L0 8.462l3.219-2.339 1.23-3.784h3.979L11.647 0Zm0 4.684c4.173 0 7.562 3.388 7.562 7.562s-3.389 7.562-7.562 7.562c-4.174 0-7.563-3.388-7.563-7.562s3.389-7.562 7.563-7.562Z" style="fill:gray"/>
</svg>
<svg class="bgBtn" id="btnDark" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
<title>Preview in dark background colour</title>
<path d="M18.331 19.199C16.385 20.94 13.815 22 11 22 4.929 22 0 17.071 0 11S4.929 0 11 0c2.815 0 5.385 1.06 7.331 2.801-.428-.068-.866-.103-1.312-.103-4.582 0-8.302 3.72-8.302 8.302 0 4.582 3.72 8.302 8.302 8.302.446 0 .884-.035 1.312-.103Zm.622-6.201c.038-.095.13-.156.232-.156.102 0 .193.061.231.156l.437 1.081 1.163.081c.101.007.188.075.22.172.031.097.001.203-.077.268l-.893.749.282 1.131c.025.099-.013.203-.096.263-.082.06-.192.064-.279.01l-.988-.618-.989.618c-.086.054-.196.05-.279-.01-.082-.06-.12-.164-.095-.263l.282-1.131-.893-.749c-.078-.065-.109-.171-.077-.268.031-.097.118-.165.22-.172l1.163-.081.436-1.081Zm-5.959-3.949c.038-.095.129-.156.231-.156.102 0 .193.061.232.156l.436 1.081 1.163.081c.102.007.189.075.22.172.032.097.001.203-.077.268l-.893.749.282 1.131c.025.099-.013.203-.095.263-.083.06-.193.064-.279.01l-.989-.618-.988.618c-.087.054-.197.05-.279-.01-.083-.06-.121-.164-.096-.263l.282-1.131-.893-.749c-.078-.065-.108-.171-.077-.268.032-.097.119-.165.22-.172l1.163-.081.437-1.081Zm5.959-4.453c.038-.095.13-.156.232-.156.102 0 .193.061.231.156l.437 1.081 1.163.081c.101.007.188.075.22.172.031.096.001.203-.077.268l-.893.749.282 1.131c.025.099-.013.203-.096.263-.082.06-.192.063-.279.009l-.988-.618-.989.618c-.086.054-.196.051-.279-.009-.082-.06-.12-.164-.095-.263l.282-1.131-.893-.749c-.078-.065-.109-.172-.077-.268.031-.097.118-.165.22-.172l1.163-.081.436-1.081Z" style="fill:gray"/>
</svg>
</span>
</section>
<footer>
<svg id="btnShareApp" class="logoFooter" viewBox="0 0 73 71" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:10">
<path d="M7.149 8.964h58.11c3.948 0 7.149 3.2 7.149 7.149v21.906c0 3.947-3.201 7.149-7.149 7.149H7.149C3.202 45.168 0 41.966 0 38.019V16.113c0-3.949 3.202-7.149 7.149-7.149Z" style="fill:#c5c5c5;fill-rule:nonzero"/>
<path d="M7.149 8.964h58.11c3.948 0 7.149 3.2 7.149 7.149v21.906c0 3.947-3.201 7.149-7.149 7.149H7.149C3.202 45.168 0 41.966 0 38.019V16.113c0-3.949 3.202-7.149 7.149-7.149Zm0 5.958h58.11c.658 0 1.191.533 1.191 1.191v21.906c0 .657-.533 1.191-1.191 1.191H7.149c-.658 0-1.191-.534-1.191-1.191V16.113c0-.658.533-1.191 1.191-1.191Z" style="fill:#3d3d3d"/>
<path d="M14.351 69.304V28.346h43.706v40.958H14.351Zm-.038-60.34V1.5h43.706v7.464" style="fill:#fff;stroke:#666;stroke-width:3px"/>
<path d="m28.187 48.885 4.467 1.767v5.101l6.777-2.421 7.655 3.028-23.023 8.671v-6.395l4.124-1.481v-8.27Z" style="fill:#3d3d3d;fill-rule:nonzero;stroke:#3d3d3d;stroke-width:.89px"/>
<path d="m25.32 43.431 23.023 9.283V46.56l-14.878-6.35 14.878-4.516V33.1h-9.926l.245.081-13.342 4.177v6.073" style="fill:#4f66cf;fill-rule:nonzero"/>
<path style="fill:#5e5e5e;stroke:#3d3d3d;stroke-width:3.57px" d="M12.067 28.374h48.271V33.1H12.067z"/>
<ellipse cx="10.896" cy="18.16" rx="1.015" ry="1.014" style="fill:#00c800;stroke:#64ff00;stroke-width:3.48px"/>
</svg>
</footer>
</body>
</html>