Skip to content

Commit 00fa7f8

Browse files
PalmerALPalmerAL
committed
v2 homepage test
1 parent b56dac7 commit 00fa7f8

File tree

3 files changed

+173
-77
lines changed

3 files changed

+173
-77
lines changed

‎home.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const variants = [
2-
['a', 0.7],
3-
['c', 0.3]
2+
['v1', 0.7],
3+
['v2', 0.3]
44
]
55

66
let chosenVariant = ''
@@ -16,11 +16,9 @@ for (let variant of variants) {
1616

1717
document.body.classList.add('variant-' + chosenVariant)
1818

19-
if (chosenVariant === 'c') {
20-
const platform = getUserPlatform()
21-
if (platform === 'windows') {
22-
document.getElementById('header-image').src = 'splash/tabbar-windows.png';
23-
}
19+
if (chosenVariant === 'v2') {
20+
document.getElementById('homepage-v1').hidden = true
21+
document.getElementById('homepage-v2').hidden = false
2422
}
2523

2624
if (window.location.hostname === 'minbrowser.org') {

‎index.html‎

Lines changed: 157 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -14,96 +14,184 @@
1414
</head>
1515

1616
<body>
17-
<div class="hero">
18-
<div class="blue-gradient-background background-block">
17+
<div id="homepage-v1">
18+
<div class="hero">
19+
<div class="blue-gradient-background background-block">
20+
</div>
21+
<div class="centered color-white">
22+
<h1 class="title-heading">Meet Min.</h1>
23+
<h1 class="title-subheading">A smarter web browser.</h1>
24+
<a class="inherit-color" href="https://github.com/minbrowser/min/releases/latest">
25+
<button class="button outlined-button primary-action-button download-button"><span class="button-label">Download Min</span>
26+
</button>
27+
</a>
28+
</div>
1929
</div>
20-
<div class="centered color-white">
21-
<h1 class="title-heading">Meet Min.</h1>
22-
<h1 class="title-subheading">A smarter web browser.</h1>
23-
<a class="inherit-color" href="https://github.com/minbrowser/min/releases/latest">
24-
<button class="button outlined-button primary-action-button download-button"><span class="button-label">Download Min</span>
25-
</button>
26-
</a>
30+
<div class="header-image-container">
31+
<img src="splash/tabbar.png" id="header-image" />
2732
</div>
28-
</div>
29-
<div class="header-image-container">
30-
<img src="splash/tabbar.png" id="header-image" />
31-
</div>
32-
33-
<div class="header-image-spacer"></div>
34-
35-
<div class="section one-column">
36-
<div class="column">
37-
<h1>Browse without distractions</h1>
38-
<p>Tabs in Min take up less space, giving you more room to browse the web. Pages you haven’t looked at in a while fade out, letting you see what’s important, and Focus Mode hides your other tabs to prevent you from getting distracted.
39-
</p>
33+
34+
<div class="header-image-spacer"></div>
35+
36+
<div class="section one-column">
37+
<div class="column">
38+
<h1>Browse without distractions</h1>
39+
<p>Tabs in Min take up less space, giving you more room to browse the web. Pages you haven’t looked at in a while fade out, letting you see what’s important, and Focus Mode hides your other tabs to prevent you from getting distracted.
40+
</p>
41+
</div>
4042
</div>
41-
</div>
42-
<div class="section" layout="left">
43-
<img src="splash/searchbar.png" class="column">
44-
<div class="column">
45-
<h1>Find anything instantly</h1>
46-
<p>See quick definitions and answers with information from <a href="https://duckduckgo.com" target="_blank">DuckDuckGo</a>, including Wikipedia entries and more. Jump to any site quickly with fuzzy search. Or search through the full text of every page you've visited, even if you don't remember the title.
47-
</p>
43+
<div class="section" layout="left">
44+
<img src="splash/searchbar.png" class="column">
45+
<div class="column">
46+
<h1>Find anything instantly</h1>
47+
<p>See quick definitions and answers with information from <a href="https://duckduckgo.com" target="_blank">DuckDuckGo</a>, including Wikipedia entries and more. Jump to any site quickly with fuzzy search. Or search through the full text of every page you've visited, even if you don't remember the title.
48+
</p>
49+
</div>
4850
</div>
49-
</div>
50-
51-
<div class="section light-gray-background" layout="right">
52-
<div class="column">
53-
<h1>Stay organized</h1>
54-
<p>Tabs in Min open next to the current tab, so you’ll never lose your place. When you have too many tabs, you can easily split them into groups to help you stay organized.</p>
51+
52+
<div class="section light-gray-background" layout="right">
53+
<div class="column">
54+
<h1>Stay organized</h1>
55+
<p>Tabs in Min open next to the current tab, so you’ll never lose your place. When you have too many tabs, you can easily split them into groups to help you stay organized.</p>
56+
</div>
57+
<img class="column" src="tour/img/tasks.png" />
5558
</div>
56-
<img class="column" src="tour/img/tasks.png" />
57-
</div>
58-
<div class="section" layout="left">
59-
<img class="column" src="splash/adblock.png" />
60-
<div class="column">
61-
<h1>Protect your privacy</h1>
62-
<p>
63-
Min stops ads and trackers, so you can browse faster without being tracked. And when you’re using a slow or expensive internet connection, it lets you block scripts and images, so pages load faster and use less data.
64-
</p>
59+
<div class="section" layout="left">
60+
<img class="column" src="splash/adblock.png" />
61+
<div class="column">
62+
<h1>Protect your privacy</h1>
63+
<p>
64+
Min stops ads and trackers, so you can browse faster without being tracked. And when you’re using a slow or expensive internet connection, it lets you block scripts and images, so pages load faster and use less data.
65+
</p>
66+
</div>
67+
</div>
68+
69+
<div class="inline-block-wrapper light-gray-background">
70+
<div class="section half-width one-column">
71+
<div class="column">
72+
<h1>Fast and efficient</h1>
73+
<p>
74+
Min is designed to be fast. It uses less battery power, so you don't have to worry about finding a charger.
75+
</p>
76+
</div>
77+
</div>
78+
<div class="section half-width one-column">
79+
<div class="column">
80+
<h1>Open-Source software</h1>
81+
<p>
82+
Min is written entirely with CSS and JavaScript using <a href="https://www.electronjs.org/" target="_blank">Electron</a>, and is open-source software, <a href="https://github.com/minbrowser/min" target="_blank">available on GitHub</a>.
83+
</p>
84+
</div>
85+
</div>
86+
</div>
87+
88+
<div class="section one-column">
89+
<div class="column">
90+
<h1 class="center-heading" style="color: black">Try Min Now</h1>
91+
<a class="inherit-color" href="https://github.com/minbrowser/min/releases/latest">
92+
<button class="button solid-button solid-button-blue primary-action-button download-button" style="margin-top: 1em"><span class="button-label">Download Min</span>
93+
</button>
94+
</a>
95+
</div>
96+
</div>
97+
98+
<div id="footer">
99+
<img src="splash/logo.png" id="logo-image">
100+
<div id="footer-links">
101+
<a href="https://github.com/minbrowser/min">Source Code</a>
102+
<a href="releases/index.html?n=5">Release Notes</a>
103+
<a href="https://github.com/minbrowser/min/issues/new">Send Feedback</a>
104+
<a href="https://github.com/minbrowser/min#contributing-to-min">Contribute</a>
105+
<a href="https://mastodon.world/@minbrowser">Mastodon</a>
106+
</div>
65107
</div>
66108
</div>
109+
<div id="homepage-v2" hidden>
110+
<div class="hero">
111+
<div class="blue-gradient-background background-block">
112+
</div>
113+
<div class="centered color-white">
114+
<h1 class="title-heading">Meet Min.</h1>
115+
<h1 class="title-subheading">A focused, fast browser.</h1>
116+
<a class="inherit-color" href="https://github.com/minbrowser/min/releases/latest">
117+
<button class="button outlined-button primary-action-button download-button"><span class="button-label">Download Min</span>
118+
</button>
119+
</a>
120+
</div>
121+
</div>
122+
<div class="header-image-container">
123+
<img src="splash/tabbar.png" id="header-image" />
124+
</div>
67125

68-
<div class="inline-block-wrapper light-gray-background">
69-
<div class="section half-width one-column">
126+
<div class="header-image-spacer"></div>
127+
128+
<div class="section one-column">
70129
<div class="column">
71-
<h1>Fast and efficient</h1>
72-
<p>
73-
Min is designed to be fast. It uses less battery power, so you don't have to worry about finding a charger.
130+
<h1>Browse without distractions</h1>
131+
<p>Tabs in Min take up less space, giving you more room to browse the web. Pages you haven’t looked at in a while fade out, letting you see what’s important, and Focus Mode hides your other tabs to prevent you from getting distracted.
132+
</p>
133+
</div>
134+
</div>
135+
<div class="section" layout="left">
136+
<img src="splash/searchbar.png" class="column">
137+
<div class="column">
138+
<h1>Organize Everything</h1>
139+
<p>Min lets you search the full text of every page you've visited, right on your device. Tags let you easily organize your bookmarks, and Min will even learn from your bookmarks and suggest similar pages automatically.
74140
</p>
75141
</div>
76142
</div>
77-
<div class="section half-width one-column">
143+
144+
<div class="section light-gray-background" layout="right">
145+
<div class="column">
146+
<h1>Stop Tab Chaos</h1>
147+
<p>Tasks let you easily group and organize your tabs. Keyboard shortcuts let you quickly switch between tasks, and tasks auto-collapse when you're not using them.</p>
148+
</div>
149+
<img class="column" src="tour/img/tasks.png" />
150+
</div>
151+
<div class="section" layout="left">
152+
<img class="column" src="splash/adblock.png" />
78153
<div class="column">
79-
<h1>Open-Source software</h1>
154+
<h1>Protect your privacy</h1>
80155
<p>
81-
Min is written entirely with CSS and JavaScript using <a href="https://www.electronjs.org/" target="_blank">Electron</a>, and is open-source software, <a href="https://github.com/minbrowser/min" target="_blank">available on GitHub</a>.
156+
Min blocks most ads and trackers automatically, so you can browse faster without being tracked, and we don't share your browsing history (<a href="https://github.com/minbrowser/min/blob/master/docs/statistics.md" target="_blank">learn more</a>).
82157
</p>
83158
</div>
84159
</div>
85-
</div>
86160

87-
<div class="section one-column">
88-
<div class="column">
89-
<h1 class="center-heading" style="color: black">Try Min Now</h1>
90-
<a class="inherit-color" href="https://github.com/minbrowser/min/releases/latest">
91-
<button class="button solid-button solid-button-blue primary-action-button download-button" style="margin-top: 1em"><span class="button-label">Download Min</span>
92-
</button>
93-
</a>
161+
<div class="inline-block-wrapper light-gray-background">
162+
<div class="section one-column">
163+
<div class="column">
164+
<h1>Open-Source software</h1>
165+
<p>
166+
Min is open-source software, <a href="https://github.com/minbrowser/min" target="_blank">available on GitHub</a>. It's written entirely in JavaScript, and contributions are always welcomed.
167+
</p>
168+
</div>
169+
</div>
94170
</div>
95-
</div>
96171

97-
<div id="footer">
98-
<img src="splash/logo.png" id="logo-image">
99-
<div id="footer-links">
100-
<a href="https://github.com/minbrowser/min">Source Code</a>
101-
<a href="releases/index.html?n=5">Release Notes</a>
102-
<a href="https://github.com/minbrowser/min/issues/new">Send Feedback</a>
103-
<a href="https://github.com/minbrowser/min#contributing-to-min">Contribute</a>
104-
<a href="https://mastodon.world/@minbrowser">Mastodon</a>
172+
<div class="section one-column">
173+
<div class="column">
174+
<h1 class="center-heading" style="color: black">Try Min Now</h1>
175+
<a class="inherit-color" href="https://github.com/minbrowser/min/releases/latest">
176+
<button class="button solid-button solid-button-blue primary-action-button download-button" style="margin-top: 1em"><span class="button-label">Download Min</span>
177+
</button>
178+
</a>
179+
</div>
105180
</div>
106-
</div>
181+
182+
<div id="footer">
183+
<img src="splash/logo.png" id="logo-image">
184+
<div id="footer-links">
185+
<a href="https://github.com/minbrowser/min">Source Code</a>
186+
<a href="releases/index.html?n=5">Release Notes</a>
187+
<a href="https://github.com/minbrowser/min/wiki">Documentation</a>
188+
<hr>
189+
<a href="https://github.com/minbrowser/min/issues/new">Send Feedback</a>
190+
<a href="https://github.com/minbrowser/min#contributing-to-min">Contribute</a>
191+
<a href="https://mastodon.world/@minbrowser">Follow on Mastodon</a>
192+
</div>
193+
</div>
194+
</div>
107195

108196
<script src="downloadButton.js"></script>
109197
<script src="home.js"></script>

‎splash/splash.css‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
#homepage-v1:not([hidden]),
2+
#homepage-v2:not([hidden]) {
3+
display: contents;
4+
}
5+
16
.header-image-container {
27
position: absolute;
38
top: calc(85% - 5vw);
@@ -46,11 +51,16 @@
4651

4752
#footer #footer-links {
4853
display: inline-block;
49-
padding-left: 2em;
54+
padding-left: 2.5em;
5055
}
5156

5257
#footer #footer-links a {
5358
display: block;
5459
color: #222;
5560
padding: 0.5em 0;
61+
}
62+
63+
#footer hr {
64+
border-top: 1px #ccc solid;
65+
border-bottom: none;
5666
}

0 commit comments

Comments
 (0)