-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (126 loc) · 7.48 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<script src="./pablo.js/pablo.js" type="application/javascript"></script>
<script src="logo-generator.js" type="application/javascript"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="mfglabs-iconset/css/mfglabs_iconset.css" />
<title>Logo Generator 2</title>
</head>
<body>
<div id="generator_app">
<form id="control_form" method="post" action="test.php">
<div id="logo">
</div>
<div id="controls">
<div>
<label for="select-wrapper">Logo-Satz</label>
<div id="select-wrapper" class="select-wrapper fa fa-angle-down">
<select id="logo_set" name="logo_set" value="">
<option>JEF</option>
<option>EUD</option>
<option>Evil Corp</option>
</select>
</div>
</div>
<div id="lines_container">
<div class="line">
<label for="input_line1">Erste Zeile</label>
<input type="text" id="input_line1" class="input_line" name="line[]" />
</div>
<div class="line">
<label for="input_line2">Zweite Zeile</label>
<input type="text" id="input_line2" class="input_line" name="line[]" />
</div>
</div>
<div>
<label for="btn_generate_package"></label>
<button type="button" id="btn_generate_package">Logo-Paket erstellen und herunterladen...</button>
</div>
</div>
</form>
</div>
<div id="info_block">
<div id="colour_management logogen_information"> <!-- icon-information_white -->
<div lang="de">
<h1>Hinweis</h1>
<p>Der Logo-Generator unterstützt aus verschiedenen technischen Gründen kein CMYK sondern nur RGB.
Dies wird jedoch für viele Druckprodukte (zum Beispiel Flyer) benötigt. Um dieses Problem zu umgehen,
hat sich bisher als praktisch gangbare Lösung folgendes Vorgehen bewährt:
</p>
<ol>
<li>Benutzen Sie eine den Anforderungen (z.B. Hintergrundfarben) entsprechenden Variante des RGB-Logos.</li>
<li>Importieren Sie die SVG-Datei in das Grafikprogramm (z.B. Scribus oder InDesign)</li>
<li>Tauschen Sie die wenigen (üblicherweise 3 oder weniger) RGB-Farben durch ihre CMYK-Pendants manuell aus.</li>
</ol>
<p>Dem Logo-Archiv, das der Logo-Generator erstellt, liegt daher eine Datei mit den korrespondierenden
Farbwerten bei.
</p>
<div lang="en">
<h1>Note</h1>
<p>For technical reasons, the Logo Generator only supports RGB and no CMYK.
However, the latter is necessary for many print products (for example flyers). To work around this problem,
the following procedure has so far proven practical:
</p>
<ol>
<li>Use an RGB variant of the logo that suits the graphical requirements (e.g. background colour).</li>
<li>Import the SVG file into the graphics programme (e.g. Scribus or InDesign)</li>
<li>Exchange the few (typically 3 or less) RGB colours by their CMYK analogues.</li>
</ol>
<p>The generator adds a file to the logo archive that lists the corresponding colour values.
</p>
</div>
</div>
<div id="logo_width"> <!-- icon-information_white -->
<div lang="de">
<h1>Hinweis</h1>
<p>Der selbst eingegebene Text soll nicht breiter sein als der "EuropaUnion"-Schriftzug.
Da dies nicht immer möglich ist, wird auch bei Überschreitung ein Logo-Satz erzeugt. Dieser enthält
die Markierungen zur Überbreite (gestrichelte Linie, grauer Bereich) jedoch nicht.</p>
<h1>Tipps</h1>
<p>Sie können Zeichen sparen, indem Sie unnötige Dinge weglassen.</p>
<p>Beispielsweise soll die Bezeichnung der Rechtsform ("e.V.") nicht im Logo erscheinen. Lassen Sie sie einfach weg. Auch sollten Organisationsbezeichnungen wie "Landesverband", "Kreisverband" oder "Ortsverband" nicht
im Logo erscheinen.</p>
<p>Es gibt zwei Varianten des Logos: Einzeilig und Zweizeilig. Passt der Name nicht in die einzeilige Variante,
versuchen Sie es mit der zweizeiligen Variante.</p>
</div>
<div lang="en">
<h1>Note</h1>
<p>The text you enter is supposed to not exceed the "EuropaUnion" lettering.
As this is not always possible, a logo set is generated anyway. The markings you see to
tell you, that text is too wide, will not show up in the logo set.</p>
<h1>Tips</h1>
<p>You can save characters by leaving out unnecessary stuff.</p>
<p>For example, you should leave out the legal form ("e.V.") as it is not supposed to show in the logo.
Likewise, organisational units like "chapter", "local union", "national association"
are not supposed to show.</p>
<p>There are two variations of the logo: single-line and two-line. If the chapter name does not fit
in the single-line version, try the two-line version.</p>
</div>
</div>
<div id="acknowledgements">
<div lang="de">
<h1>Ehre, wem Ehre gebührt!</h1>
<p>Dieser Logo-Generator verwendet verschiedene Opensource-Bibliotheken und -Programme, ohne die er nicht funktionieren oder noch schrecklicher aussehen würde.</p>
<p>Teile dieser Pakete in ggf. veralteten Versionen sind in diesem Repository enthalten.</p>
<ul>
<li><a href="https://mfglabs.github.io/mfglabs-iconset/">Das Iconset von MFG Labs</a> (<a href="https://creativecommons.org/licenses/by/3.0/deed.de">unter CC-BY 3.0</a>)</li>
<li><a href="https://github.com/premasagar/pablo">pablo.js</a> (<a href="https://opensource.org/licenses/mit-license.php">unter MIT License</a>)</li>
<li><a href="https://github.com/meyfa/php-svg">php-svg</a> (<a href="https://opensource.org/licenses/mit-license.php">unter MIT License</a>)</li>
</ul>
</div>
<div lang="en">
<h1>Hall of Coders' Fame!</h1>
<p>This logo generator uses several open source libraries without which it would not function or look even more hideous.</p>
<p>Parts of these packages (in likely outdated versions) are part of this repository.</p>
<ul>
<li><a href="https://mfglabs.github.io/mfglabs-iconset/">The Icon Set by MFG Labs</a> (<a href="https://creativecommons.org/licenses/by/3.0/deed.de">under CC-BY 3.0</a>)</li>
<li><a href="https://github.com/premasagar/pablo">pablo.js</a> (<a href="https://opensource.org/licenses/mit-license.php">under MIT License</a>)</li>
<li><a href="https://github.com/meyfa/php-svg">php-svg</a> (<a href="https://opensource.org/licenses/mit-license.php">under MIT License</a>)</li>
</ul>
</div>
</div>
</div>
</body>
</html>