-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (160 loc) · 10.5 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JDTK68EK7E"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-JDTK68EK7E');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BrandGrab: Plug-n-play widget for sharing your logos on the internet.</title>
<meta name="description" content="BrandGrab">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@colinkeany">
<meta name="twitter:title" content="Plug-n-play widget for sharing your logos on the internet.">
<meta name="twitter:creator" content="@colinkeany">
<meta name="twitter:description" content="BrandGrab">
<meta name="twitter:image:src" content="https://colinkeany.github.io/brandgrab/og.jpg">
<!-- Facebook -->
<meta property="og:url" content="https://colinkeany.github.io/brandgrab">
<meta property="og:title" content="Plug-n-play widget for sharing your logos on the internet.">
<meta property="og:description" content="BrandGrab">
<meta property="og:site_name" content="BrandGrab">
<meta property="og:image" content="https://colinkeany.github.io/brandgrab/og.jpg">
<meta property="og:type" content="website">
<meta name="robots" content="noodp">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="canonical" href="https://colinkeany.github.io/brandgrab">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="assets/css/base.css" rel="stylesheet">
</head>
<body>
<a class="ph-banner" tabindex="0" href="https://www.producthunt.com/posts/brandgrab?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-brandgrab" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=413130&theme=light" alt="BrandGrab - Plug-n-play app for sharing your logos on the internet. | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
<div id="main">
<div class="section d-flex align-items-center flex-column">
<img src="glyph.svg" height="80" width="80">
<h1 class="fw-bold mt-3">BrandGrab</h1>
<h4 class="mt-2 mb-0 fw-normal text-center">Plug-n-play widget for sharing your logos on the internet.</h4>
<div class="d-flex gap-3 mt-4">
<a href="https://github.com/colinkeany/brandgrab/releases/tag/v1.0" class="btn btn-light">Latest Release (v1.0)</a>
<a href="https://github.com/colinkeany/brandgrab" class="btn btn-dark">Get Started</a>
</div>
<a class="ph-banner mobile" href="https://www.producthunt.com/posts/brandgrab?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-brandgrab" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=413130&theme=light" alt="BrandGrab - Plug-n-play app for sharing your logos on the internet. | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
</div>
<div class="iframe-section">
<iframe src="src/index.html" frameborder="0" width="100%"></iframe>
</div>
<div class="section">
<h2 class="fw-bold">What is BrandGrab?</h2>
<p>BrandGrab gives your visitors an easy-to-use interface for customizing and downloading your logos.</p>
<p>It was built to solve the tricky problem of ensuring your brand identity is represented accurately across the internet. Using BrandGrab, you can control which versions of your logo are available for download. Control the end result by only supplying visitors with your most up-to-date logo(s) and preferred colors. Visitors will have the options to download your logo as an SVG, PNG or JPG as well as copy the SVG to clipboard to be used in their design software or code.</p>
</div>
<div class="section">
<h2 class="fw-bold">Getting Started</h2>
<p>The easiest way to get started is to download the <a href="https://github.com/colinkeany/brandgrab/releases">latest release</a>. This folder includes the HTML template which is hard-coded to pull the necessary JS and CSS from JSDelivr. The template also includes <code>svgData.js</code>, which is where you'll add your different logo styles as <code>svg</code> code.</p>
</div>
<div class="section">
<h4 class="fw-bold">JSDelivr</h4>
<p>For reference, BrandGrab source code for CSS and JS is available via JSDelivr. If you fork the repo or download the <a href="https://github.com/colinkeany/brandgrab/releases">latest release</a>, the CSS and JS will already be available in the code.</p>
<pre><code>https://cdn.jsdelivr.net/gh/colinkeany/brandgrab@latest/src/assets/css/brandgrab.css
https://cdn.jsdelivr.net/gh/colinkeany/brandgrab@latest/src/assets/js/brandgrab.1.0.js</code></pre>
</div>
<div class="section">
<h4 class="fw-bold">Adding Logo Data</h4>
<p>Using the template, you can modify the <code>svgData.js</code> file to swap out the placeholder logos with your own.</p>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<i class="bi bi-info-circle-fill me-2"></i>
<div>
The current version assumes your logos are one-color SVGs.
</div>
</div>
<table class="table table-bordered">
<thead class="table-light">
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>default</code></td>
<td>boolean</td>
<td>Set this option to <code>true</code> on the logo that you would like to show first. This option is <code>false</code> by default.</td>
</tr>
<tr>
<td><code>logoSVG</code></td>
<td>string</td>
<td>Add your <code><svg></code> code here, ideally with no line breaks.</td>
</tr>
<tr>
<td><code>label</code></td>
<td>string</td>
<td>A label describes the type of logo. For example, <code>Wordmark</code>, <code>Glyph</code>, <code>Stacked</code>, etc.</td>
</tr>
</tbody>
</table>
<pre><code>var data = [
{
default: true,
logoSVG: '<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="30" fill="#FF0000"/></svg>',
label: 'Wordmark'
},
{
logoSVG: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="20" fill="#0038FF"/></svg>',
label: 'Glyph'
}
];</code></pre>
</div>
<div class="section">
<h4 class="fw-bold">Managing Colors</h4>
<p>Customizing colors and color labels is simple! Define the color of the logo, and whether or not it should be presented on a light or dark artboard.</p>
<table class="table table-bordered">
<thead class="table-light">
<tr>
<th class="text-nowrap">Attribute Name</th>
<th class="text-nowrap">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap"><code>data-font-color</code></td>
<td>The color you set here will be applied to the SVG logo on select. This allows any color code. For example, <code>#000</code>, <code>rgba(0,0,0,1)</code> or <code>black</code> are all valid.</td>
</tr>
<tr>
<td class="text-nowrap"><code>data-bg-color</code></td>
<td>Use this to switch the artboard to light or dark mode, depending on the logo color set by <code>data-font-color</code>. Options include <code>bg-white</code> and <code>bg-dark</code>.</td>
</tr>
</tbody>
</table>
<pre><code><div class="form-check">
<input data-font-color="#000000" data-bg-color="bg-white" class="form-check-input" type="radio" name="colorOption" id="colorOptionA" checked>
<label class="form-check-label" for="colorOptionA">
Black
</label>
</div>
<div class="form-check">
<input data-font-color="#FFFFFF" data-bg-color="bg-dark" class="form-check-input" type="radio" name="colorOption" id="colorOptionB">
<label class="form-check-label" for="colorOptionB">
White
</label>
</div></code></pre>
</div>
<div class="section">
<h2 class="fw-bold">Contributing</h2>
<p>For more info on how to contribute please see the <a href="https://github.com/colinkeany/brandgrab/blob/main/CONTRIBUTING.md">contribution guidelines</a>.</p>
<p>Found a bug or would like to request a feature? Feel free to <a href="https://github.com/colinkeany/brandgrab/issues/new">open an issue</a> outlining your request.</p>
</div>
<div class="section">
<h2 class="fw-bold">License</h2>
<p>BrandGrab is licensed under the <a href="https://github.com/colinkeany/brandgrab/blob/main/LICENSE">MIT License</a>.</p>
</div>
</div>
</body>
</html>