-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbrand.html
More file actions
264 lines (255 loc) · 18.5 KB
/
brand.html
File metadata and controls
264 lines (255 loc) · 18.5 KB
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Point 2 Point</title>
<link rel="icon" type="image/svg" href="/assets/favicon.svg" />
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<style>
body {
background-color: #0a0a0a;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="w-full backdrop-blur sticky top-0 z-50">
<div class="max-w-6xl mx-auto flex items-center justify-between px-4 py-3">
<div class="flex items-center">
<img src="/assets/logo.svg" alt="Point 2 Point" class="h-10 w-auto" />
</div>
<div class="flex space-x-6">
<a href="/" class="text-white font-medium hover:text-cyan-400 transition">Home</a>
<a href="/brand" class="text-white font-medium hover:text-cyan-400 transition">Brand</a>
</div>
</div>
</nav>
<!-- About Us Section (Tailwind) -->
<section id="about" class="py-24 bg-[#0a0a0a]">
<div class="max-w-4xl mx-auto px-4">
<div class="mb-12 text-center">
<h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-800 bg-clip-text text-transparent">Our Brand</h2>
<p class="text-lg text-gray-300">
We're rebranding to Point 2 Point, a minor change indeed, but one that reflects us better.</br>With our New Name, we needed a new Brand Identity. That's what this is.
</p>
</div>
</div>
</section>
<!-- Licensing Section (Tailwind) -->
<section id="about" class="py-24 bg-[#0a0a0a]">
<div class="max-w-4xl mx-auto px-4">
<div class="mb-12 text-center">
<h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-800 bg-clip-text text-transparent">Licensing</h2>
<p class="text-lg text-gray-300">
All Content on this website is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives (CC BY-NC-ND) 4.0 International License, unless otherwise stated. This means you can share the content for non-commercial purposes without any modifications, as long as you give appropriate credit.
</br></br>
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode.en" class="px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-[#1d546b] to-[#2a6b83] text-white shadow hover:-translate-y-1 transition">View on Creative Commons</a>
<a href="/assets/branding/LICENSE.txt" class="px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-[#1d546b] to-[#2a6b83] text-white shadow hover:-translate-y-1 transition">View in Plain Text</a>
</p>
</div>
</div>
</section>
<!-- Colour Scheme Section (Tailwind) -->
<section id="colours" class="py-24 bg-gradient-to-br from-[#0a0a0a] to-black">
<div class="max-w-4xl mx-auto px-4">
<div class="mb-12 text-center">
<h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-800 bg-clip-text text-transparent">Colour Scheme</h2>
<p class="text-lg text-gray-300 mb-8">
Our brand colours, thoughtfully selected for clarity and vibrancy.
</p>
<div class="flex justify-center">
<div class="bg-white/5 rounded-xl p-8 border border-[#1d546b]/20 shadow flex flex-col items-center max-w-[352px]">
<img src="/assets/branding/SVG/colours.svg" alt="Colour Scheme" class="w-full aspect-[8/11] object-contain rounded" />
<span class="mt-4 text-gray-400 text-sm">Official Colour Palette</span>
<div class="mt-6 flex gap-4">
<a href="/assets/branding/SVG/colours.svg" download class="px-5 py-2 rounded-lg font-semibold bg-gradient-to-r from-cyan-400 to-blue-800 text-white shadow hover:-translate-y-1 transition text-sm">
Download as SVG
</a>
<a href="/assets/branding/PNG/colours.png" download class="px-5 py-2 rounded-lg font-semibold bg-gradient-to-r from-[#1d546b] to-[#2a6b83] text-white shadow hover:-translate-y-1 transition text-sm">
Download as PNG
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Brand Assets Section (Tailwind) -->
<section id="assets" class="py-24 bg-[#0a0a0a]">
<div class="max-w-6xl mx-auto px-4">
<div class="mb-12 text-center">
<h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-800 bg-clip-text text-transparent">Brand Assets</h2>
<p class="text-lg text-gray-300 mb-8">
Download and preview our official brand assets. Click any image to view fullscreen and download.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Card 1: Wordmark -->
<div class="bg-white/5 rounded-xl p-8 border border-[#1d546b]/20 shadow flex flex-col items-center">
<h3 class="text-xl font-semibold text-white mb-4">Wordmark</h3>
<div class="flex flex-col gap-4">
<img src="/assets/branding/SVG/Full Colour Wordmark.svg" alt="Wordmark Full Colour" class="rounded cursor-pointer asset-img max-h-32" data-title="Wordmark - Full Colour" data-svg="/assets/branding/SVG/Full Colour Wordmark.svg" data-png="/assets/branding/PNG/Full Colour Wordmark.png">
<img src="/assets/branding/SVG/Transparent White Wordmark.svg" alt="Wordmark Transparent White" class="rounded cursor-pointer asset-img max-h-32" data-title="Wordmark - Transparent White" data-svg="/assets/branding/SVG/Transparent White Wordmark.svg" data-png="/assets/branding/PNG/Transparent White Wordmark.png">
<img src="/assets/branding/SVG/Transparent Azure Wordmark.svg" alt="Wordmark Transparent Azure" class="rounded cursor-pointer asset-img max-h-32" data-title="Wordmark - Transparent Azure" data-svg="/assets/branding/SVG/Transparent Azure Wordmark.svg" data-png="/assets/branding/PNG/Transparent Azure Wordmark.png">
</div>
</div>
<!-- Card 2: Wordmark with Icon -->
<div class="bg-white/5 rounded-xl p-8 border border-[#1d546b]/20 shadow flex flex-col items-center">
<h3 class="text-xl font-semibold text-white mb-4">Wordmark with Icon</h3>
<div class="flex flex-col gap-4">
<img src="/assets/branding/SVG/Full Colour Wordmark with Logo.svg" alt="Wordmark+Icon Full Colour" class="rounded cursor-pointer asset-img max-h-32" data-title="Wordmark+Icon - Full Colour" data-svg="/assets/branding/SVG/Full Colour Wordmark with Logo.svg" data-png="/assets/branding/PNG/Full Colour Wordmark with Logo.png">
<img src="/assets/branding/SVG/Transparent White Wordmark with Logo.svg" alt="Wordmark+Icon Transparent White" class="rounded cursor-pointer asset-img max-h-32" data-title="Wordmark+Icon - Transparent White" data-svg="/assets/branding/SVG/Transparent White Wordmark with Logo.svg" data-png="/assets/branding/PNG/Transparent White Wordmark with Logo.png">
<img src="/assets/branding/SVG/Transparent Azure Wordmark with Logo.svg" alt="Wordmark+Icon Transparent Azure" class="rounded cursor-pointer asset-img max-h-32" data-title="Wordmark+Icon - Transparent Azure" data-svg="/assets/branding/SVG/Transparent Azure Wordmark with Logo.svg" data-png="/assets/branding/PNG/Transparent Azure Wordmark with Logo.png">
</div>
</div>
<!-- Card 3: Icon -->
<div class="bg-white/5 rounded-xl p-8 border border-[#1d546b]/20 shadow flex flex-col items-center">
<h3 class="text-xl font-semibold text-white mb-4">Icon</h3>
<div class="flex flex-col gap-4">
<img src="/assets/branding/SVG/Full Colour Icon.svg" alt="Icon Full Colour" class="rounded cursor-pointer asset-img max-h-16" data-title="Icon - Full Colour" data-svg="/assets/branding/SVG/Full Colour Icon.svg" data-png="/assets/branding/PNG/Full Colour Icon.png">
<img src="/assets/branding/SVG/Transparent White Icon.svg" alt="Icon Transparent White" class="rounded cursor-pointer asset-img max-h-16" data-title="Icon - Transparent White" data-svg="/assets/branding/SVG/Transparent White Icon.svg" data-png="/assets/branding/PNG/Transparent White Icon.png">
<img src="/assets/branding/SVG/Transparent Azure Icon.svg" alt="Icon Transparent Azure" class="rounded cursor-pointer asset-img max-h-16" data-title="Icon - Transparent Azure" data-svg="/assets/branding/SVG/Transparent Azure Icon.svg" data-png="/assets/branding/PNG/Transparent Azure Icon.png">
<img src="/assets/branding/favicon.svg" alt="Favicon" class="rounded cursor-pointer asset-img max-h-16" data-title="Favicon" data-svg="/assets/branding/favicon.svg" data-png="N/A" data-finalised="false">
</div>
</div>
</div>
</div>
</section>
<!-- Modal for Asset Preview -->
<div id="assetModal" class="fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center hidden">
<div class="bg-[#181e24] rounded-xl shadow-lg p-6 relative max-w-lg w-full flex flex-col items-center">
<button id="closeModal" class="absolute top-3 right-3 text-gray-400 hover:text-white text-2xl">×</button>
<h4 id="modalTitle" class="text-lg font-semibold text-white mb-4"></h4>
<img id="modalImg" src="" alt="Asset Preview" class="w-full max-h-[60vh] object-contain rounded mb-6 bg-white/10 p-4" />
<div id="notFinalisedDisclaimer" class="hidden text-yellow-300 text-sm mb-4 text-center">
<i class="fa fa-exclamation-triangle mr-2"></i>
This asset is <b>not finalised</b> and may change soon.
</div>
<div class="flex gap-4">
<a id="downloadSVG" href="#" download class="px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-cyan-400 to-blue-800 text-white shadow hover:-translate-y-1 transition">Download as SVG</a>
<a id="downloadPNG" href="#" download class="px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-[#1d546b] to-[#2a6b83] text-white shadow hover:-translate-y-1 transition">Download as PNG</a>
</div>
</div>
</div>
<!-- Wallpapers Section (Tailwind) -->
<section id="assets" class="py-24 bg-[#0a0a0a]">
<div class="max-w-6xl mx-auto px-4">
<div class="mb-12 text-center">
<h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-800 bg-clip-text text-transparent">Wallpapers</h2>
<p class="text-lg text-gray-300 mb-8">
Download and preview our official branded wallpapers.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Card 1: 16:9 -->
<div class="bg-white/5 rounded-xl p-8 border border-[#1d546b]/20 shadow flex flex-col items-center">
<h3 class="text-xl font-semibold text-white mb-4">16:9 Landscape</h3>
<div class="flex flex-col gap-4">
<img src="/assets/branding/WP/16_9 Full.png" alt="16:9 Wordmark Wallpaper" class="rounded cursor-pointer asset-img max-h-32" data-title="16:9 Wordmark Wallpaper" data-png="/assets/branding/WP/16_9 Full.png" data-svg="N/A">
<img src="/assets/branding/WP/16_9 Icon.png" alt="16:9 Icon Wallpaper" class="rounded cursor-pointer asset-img max-h-32" data-title="16:9 Icon Wallpaper" data-png="/assets/branding/WP/16_9 Icon.png" data-svg="N/A">
</div>
</div>
<!-- Card 2: 16:10 -->
<div class="bg-white/5 rounded-xl p-8 border border-[#1d546b]/20 shadow flex flex-col items-center">
<h3 class="text-xl font-semibold text-white mb-4">16:10 Landscape</h3>
<div class="flex flex-col gap-4">
<img src="/assets/branding/WP/16_10 Full.png" alt="16:10 Wordmark Wallpaper" class="rounded cursor-pointer asset-img max-h-32" data-title="16:10 Wordmark Wallpaper" data-png="/assets/branding/WP/16_10 Full.png" data-svg="N/A">
<img src="/assets/branding/WP/16_10 Icon.png" alt="16:10 Icon Wallpaper" class="rounded cursor-pointer asset-img max-h-32" data-title="16:10 Icon Wallpaper" data-png="/assets/branding/WP/16_10 Icon.png" data-svg="N/A">
</div>
</div>
<!-- Card 3: 9:16 -->
<div class="bg-white/5 rounded-xl p-8 border border-[#1d546b]/20 shadow flex flex-col items-center">
<h3 class="text-xl font-semibold text-white mb-4">9:16 Portrait</h3>
<div class="flex flex-col gap-4">
<img src="/assets/branding/WP/9_16 Full.png" alt="9:16 Wordmark Wallpaper" class="rounded cursor-pointer asset-img max-h-32" data-title="9:16 Wordmark Wallpaper" data-png="/assets/branding/WP/9_16 Full.png" data-svg="N/A">
<img src="/assets/branding/WP/9_16 Icon.png" alt="9:16 Icon Wallpaper" class="rounded cursor-pointer asset-img max-h-32" data-title="9:16 Icon Wallpaper" data-png="/assets/branding/WP/9_16 Icon.png" data-svg="N/A">
</div>
</div>
<!-- Card 4: 9:21 -->
<div class="bg-white/5 rounded-xl p-8 border border-[#1d546b]/20 shadow flex flex-col items-center">
<h3 class="text-xl font-semibold text-white mb-4">9:21 Portrait</br>(Tall Phones)</h3>
<div class="flex flex-col gap-4">
<img src="/assets/branding/WP/9_21 Full.png" alt="9:21 Wordmark Wallpaper" class="rounded cursor-pointer asset-img max-h-32" data-title="9:21 Wordmark Wallpaper" data-png="/assets/branding/WP/9_21 Full.png" data-svg="N/A">
<img src="/assets/branding/WP/9_21 Icon.png" alt="9:21 Icon Wallpaper" class="rounded cursor-pointer asset-img max-h-32" data-title="9:21 Icon Wallpaper" data-png="/assets/branding/WP/9_21 Icon.png" data-svg="N/A">
</div>
</div>
</div>
</div>
</section>
<!-- Affinity Designer Source Section (Tailwind) -->
<section id="affinity" class="py-24 bg-[#0a0a0a]">
<div class="max-w-4xl mx-auto px-4">
<div class="mb-12 text-center">
<h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-800 bg-clip-text text-transparent">Source File</h2>
<p class="text-lg text-gray-300 mb-8">
Download the official Affinity Designer source file for the base icon.</br>This is not to be modified but is provided for use in Affinity Designer in other designs.
</p>
<div class="flex justify-center">
<div class="bg-white/5 rounded-xl p-8 border border-[#1d546b]/20 shadow flex flex-col items-center max-w-md">
<img src="/assets/branding/SVG/Full Colour Icon.svg" alt="Base Icon Preview" class="w-32 h-32 object-contain rounded mb-6 bg-white/10 p-4" />
<a href="/assets/branding/Base Icon (Affinity).afdesign" download class="px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-cyan-400 to-blue-800 text-white shadow hover:-translate-y-1 transition">
Download as .afdesign
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer (Tailwind) -->
<footer id="contact" class="bg-black py-10">
<div class="max-w-4xl mx-auto px-4">
<div class="text-center text-gray-400 text-sm">
<p>2026 © Point 2 Point - All rights reserved. A joint venture between SB Designs and TurquoiseTNT.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
<script>
// Modal logic for asset preview
document.querySelectorAll('.asset-img').forEach(img => {
img.addEventListener('click', function() {
document.getElementById('modalImg').src = this.getAttribute('data-svg');
document.getElementById('modalTitle').textContent = this.getAttribute('data-title');
document.getElementById('downloadSVG').href = this.getAttribute('data-svg');
document.getElementById('downloadPNG').href = this.getAttribute('data-png');
document.getElementById('assetModal').classList.remove('hidden');
// PNG download button visibility
if(this.getAttribute('data-png')=="N/A") {
document.getElementById('downloadPNG').classList.add('hidden');
} else {
document.getElementById('downloadPNG').classList.remove('hidden');
}
if(this.getAttribute('data-svg')=="N/A") {
document.getElementById('downloadSVG').classList.add('hidden');
document.getElementById('modalImg').src = this.getAttribute('data-png');
} else {
document.getElementById('downloadSVG').classList.remove('hidden');
document.getElementById('modalImg').src = this.getAttribute('data-svg');
}
if(this.getAttribute('data-finalised') === "false") {
document.getElementById('modalImg').classList.add('ring-2', 'ring-yellow-400');
document.getElementById('notFinalisedDisclaimer').classList.remove('hidden');
} else {
document.getElementById('modalImg').classList.remove('ring-2', 'ring-yellow-400');
document.getElementById('notFinalisedDisclaimer').classList.add('hidden');
}
});
});
document.getElementById('closeModal').onclick = function() {
document.getElementById('assetModal').classList.add('hidden');
};
document.getElementById('assetModal').addEventListener('click', function(e) {
if (e.target === this) this.classList.add('hidden');
});
</script>
</body>
</html>