Skip to content

Commit 90032e2

Browse files
andrew-codechimpandrew-codechimp
committed
Add tabs
1 parent 10ae74d commit 90032e2

File tree

2 files changed

+170
-125
lines changed

2 files changed

+170
-125
lines changed

‎index.html

Lines changed: 165 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<!--
33
Material Design Lite
44
Copyright 2015 Google Inc. All rights reserved.
5-
5+
66
Licensed under the Apache License, Version 2.0 (the "License");
77
you may not use this file except in compliance with the License.
88
You may obtain a copy of the License at
9-
10-
https://www.apache.org/licenses/LICENSE-2.0
11-
9+
10+
https://www.apache.org/licenses/LICENSE-2.0
11+
1212
Unless required by applicable law or agreed to in writing, software
1313
distributed under the License is distributed on an "AS IS" BASIS,
1414
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -22,28 +22,28 @@
2222
<meta name="description" content="Productivity apps">
2323
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
2424
<title>CodeChimp Apps</title>
25-
25+
2626
<!-- Add to homescreen for Chrome on Android -->
2727
<meta name="mobile-web-app-capable" content="yes">
2828
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
29-
29+
3030
<!-- Add to homescreen for Safari on iOS -->
3131
<meta name="apple-mobile-web-app-capable" content="yes">
3232
<meta name="apple-mobile-web-app-status-bar-style" content="black">
3333
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
3434
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">
35-
35+
3636
<!-- Tile icon for Win8 (144x144 + tile color) -->
3737
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
3838
<meta name="msapplication-TileColor" content="#3372DF">
39-
39+
4040
<link rel="shortcut icon" href="images/favicon.png">
41-
41+
4242
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
43-
<!--
43+
<!--
4444
<link rel="canonical" href="http://www.example.com/">
4545
-->
46-
46+
4747
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
4848
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
4949
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.1.3/material.indigo-pink.min.css">
@@ -54,11 +54,23 @@
5454
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
5555
<div class="mdl-layout__header-row">
5656
<h5>CodeChimp<p>Productivity Apps</h5>
57-
</div>
58-
</header>
59-
<main class="mdl-layout__content">
60-
<div class="mdl-layout__tab-panel is-active" id="apps">
61-
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
57+
</div>
58+
59+
<div class="mdl-layout__header-row portfolio-navigation-row">
60+
<nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
61+
<a class="mdl-navigation__link is-active" id="all">All Apps</a>
62+
<a class="mdl-navigation__link" id="android">Android</a>
63+
<a class="mdl-navigation__link" id="ios">iOS</a>
64+
<!-- <a class="mdl-navigation__link" id="macos">MacOS</a> -->
65+
</nav>
66+
</div>
67+
</header>
68+
<main class="mdl-layout__content">
69+
70+
71+
<div class="mdl-layout__tab-panel is-active" id="apps">
72+
<div class="ios">
73+
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
6274
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--white-100 mdl-color-text--white">
6375
<image src="images/whendo.png"/>
6476
</header>
@@ -73,119 +85,147 @@ <h4 class="mdl-card__title-text"><b>When Do</b>&nbsp;for Apple Watch®</h4>
7385
<div class="mdl-card__actions">
7486
<a href="https://apps.apple.com/us/app/when-do-a-complication/id1485413076" class="mdl-button mdl-button--accent">View on App Store</a>
7587
</div>
88+
</div>
89+
</section>
90+
</div>
91+
<div class="android">
92+
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
93+
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--white-100 mdl-color-text--white">
94+
<image src="images/wearcodes.png"/>
95+
</header>
96+
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
97+
<div class="mdl-card__title">
98+
<h4 class="mdl-card__title-text"><b>Wear Codes</b>&nbspfor Wear OS®</h4>
99+
</div>
100+
<div class="mdl-card__supporting-text">
101+
Wear Codes is an easy way to bring up a handy list of barcodes on your watch for scanning without taking out your phone, use it for paying in Starbucks®, Costa®, Subway®, loyalty cards, boarding passes, sharing your contact details, web sites or just some useful text.<br>
102+
Manage the list of codes on the mobile app and have them appear in a list for easy access on your watch.<br>
103+
Scan an existing card using the built in barcode scanner or type your data in manually.<br>
104+
Import screenshots with barcodes from other apps.<br>
105+
Add existing barcodes, web site addresses and other data straight from email, web pages or other apps via their Share menu.<br><br>
106+
<p><a href="https://codechimp.org/wearcodes/">FAQ Page</a></p>
107+
</div>
108+
<div class="mdl-card__actions">
109+
<a href="https://play.google.com/store/apps/details?id=org.codechimp.qrwear" class="mdl-button mdl-button--accent">View on Google PlayStore</a>
110+
</div>
111+
</div>
112+
</section>
113+
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
114+
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--white-100 mdl-color-text--white">
115+
<image src="images/applinks.png"/>
116+
</header>
117+
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
118+
<div class="mdl-card__title">
119+
<h4 class="mdl-card__title-text"><b>App Links</b></h4>
120+
</div>
121+
<div class="mdl-card__supporting-text">
122+
Get links to the Play Store for the apps you already have installed and share them with friends/social media/anything else you can share to on your phone.</br>
123+
Google Nearby support allows you to easily share app links between people in the same room or your own devices. No exchange of email addresses required, just running App Links near each other is enough to share your app links.</br>
124+
No Ads or limitations, totally free.
125+
</div>
126+
<div class="mdl-card__actions">
127+
<a href="https://play.google.com/store/apps/details?id=org.codechimp.applinks" class="mdl-button mdl-button--accent">View on Google PlayStore</a>
128+
</div>
129+
</div>
130+
</section>
131+
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
132+
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--white-100 mdl-color-text--white">
133+
<image src="images/bartasks.png"/>
134+
</header>
135+
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
136+
<div class="mdl-card__title">
137+
<h4 class="mdl-card__title-text"><b>Bar Tasks</b></h4>
138+
</div>
139+
<div class="mdl-card__supporting-text">
140+
Bar Tasks is a task reminder app that always stays in your notification bar so every time you look at your phone you see the task.<br>
141+
A range of icons are available so you can choose one that most suits your task. Tasks remain in your bar until you deliberately remove them, no mistaken swiping away important reminders.<br>
142+
143+
Add new tasks quickly from an optional persistent notification or by launching the application.
144+
</div>
145+
<div class="mdl-card__actions">
146+
<a href="https://play.google.com/store/apps/details?id=org.codechimp.bartasks" class="mdl-button mdl-button--accent">View on Google PlayStore</a>
147+
</div>
148+
</div>
149+
</section>
150+
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
151+
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--white-100 mdl-color-text--white">
152+
<image src="images/grocerysum.png"/>
153+
</header>
154+
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
155+
<div class="mdl-card__title">
156+
<h4 class="mdl-card__title-text"><b>Grocery Sum</b></h4>
157+
</div>
158+
<div class="mdl-card__supporting-text">
159+
A two in one shopping estimator and list.</br>
160+
Press a combination of buttons to quickly add the approximate value of each item you put in your basket keeping a rough total. Auto memory to add the last item combination again.</br>
161+
Switch to the list tab and see your shopping list, crossing off items as you add them to your basket.</br>
162+
Items are grouped into categories. You can create/edit categories and change the order they appear to match the layout of your store.</br>
163+
Favourites list so you can add items you regularly shop for without typing them in again.
164+
</div>
165+
<div class="mdl-card__actions">
166+
<a href="https://play.google.com/store/apps/details?id=org.codechimp.grocerysum" class="mdl-button mdl-button--accent">View on Google PlayStore</a>
167+
</div>
76168
</div>
77169
</section>
78-
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
79-
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--white-100 mdl-color-text--white">
80-
<image src="images/wearcodes.png"/>
81-
</header>
82-
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
83-
<div class="mdl-card__title">
84-
<h4 class="mdl-card__title-text"><b>Wear Codes</b>&nbspfor Wear OS®</h4>
85-
</div>
86-
<div class="mdl-card__supporting-text">
87-
Wear Codes is an easy way to bring up a handy list of barcodes on your watch for scanning without taking out your phone, use it for paying in Starbucks®, Costa®, Subway®, loyalty cards, boarding passes, sharing your contact details, web sites or just some useful text.<br>
88-
Manage the list of codes on the mobile app and have them appear in a list for easy access on your watch.<br>
89-
Scan an existing card using the built in barcode scanner or type your data in manually.<br>
90-
Import screenshots with barcodes from other apps.<br>
91-
Add existing barcodes, web site addresses and other data straight from email, web pages or other apps via their Share menu.<br><br>
92-
<p><a href="https://codechimp.org/wearcodes/">FAQ Page</a></p>
93-
</div>
94-
<div class="mdl-card__actions">
95-
<a href="https://play.google.com/store/apps/details?id=org.codechimp.qrwear" class="mdl-button mdl-button--accent">View on Google PlayStore</a>
96-
</div>
97-
</div>
98-
</section>
99-
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
100-
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--white-100 mdl-color-text--white">
101-
<image src="images/applinks.png"/>
102-
</header>
103-
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
104-
<div class="mdl-card__title">
105-
<h4 class="mdl-card__title-text"><b>App Links</b></h4>
106-
</div>
107-
<div class="mdl-card__supporting-text">
108-
Get links to the Play Store for the apps you already have installed and share them with friends/social media/anything else you can share to on your phone.</br>
109-
Google Nearby support allows you to easily share app links between people in the same room or your own devices. No exchange of email addresses required, just running App Links near each other is enough to share your app links.</br>
110-
No Ads or limitations, totally free.
111-
</div>
112-
<div class="mdl-card__actions">
113-
<a href="https://play.google.com/store/apps/details?id=org.codechimp.applinks" class="mdl-button mdl-button--accent">View on Google PlayStore</a>
114-
</div>
115-
</div>
116-
</section>
117-
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
118-
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--white-100 mdl-color-text--white">
119-
<image src="images/bartasks.png"/>
120-
</header>
121-
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
122-
<div class="mdl-card__title">
123-
<h4 class="mdl-card__title-text"><b>Bar Tasks</b></h4>
124-
</div>
125-
<div class="mdl-card__supporting-text">
126-
Bar Tasks is a task reminder app that always stays in your notification bar so every time you look at your phone you see the task.<br>
127-
A range of icons are available so you can choose one that most suits your task. Tasks remain in your bar until you deliberately remove them, no mistaken swiping away important reminders.<br>
128-
129-
Add new tasks quickly from an optional persistent notification or by launching the application.
130-
</div>
131-
<div class="mdl-card__actions">
132-
<a href="https://play.google.com/store/apps/details?id=org.codechimp.bartasks" class="mdl-button mdl-button--accent">View on Google PlayStore</a>
133-
</div>
134-
</div>
135-
</section>
136-
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
137-
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--white-100 mdl-color-text--white">
138-
<image src="images/grocerysum.png"/>
139-
</header>
140-
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
141-
<div class="mdl-card__title">
142-
<h4 class="mdl-card__title-text"><b>Grocery Sum</b></h4>
143-
</div>
144-
<div class="mdl-card__supporting-text">
145-
A two in one shopping estimator and list.</br>
146-
Press a combination of buttons to quickly add the approximate value of each item you put in your basket keeping a rough total. Auto memory to add the last item combination again.</br>
147-
Switch to the list tab and see your shopping list, crossing off items as you add them to your basket.</br>
148-
Items are grouped into categories. You can create/edit categories and change the order they appear to match the layout of your store.</br>
149-
Favourites list so you can add items you regularly shop for without typing them in again.
150-
</div>
151-
<div class="mdl-card__actions">
152-
<a href="https://play.google.com/store/apps/details?id=org.codechimp.grocerysum" class="mdl-button mdl-button--accent">View on Google PlayStore</a>
153-
</div>
154-
</div>
155-
</section>
156-
</div>
157-
<footer class="mdl-mini-footer">
158-
<div class="mdl-mini-footer__left-section">
159-
<ul class="mdl-mini-footer__link-list">
160-
<li><a href="mailto:[email protected]" class="mdl-button">Contact Us</a></li>
161-
</ul>
162-
<span>CodeChimp is a small independent software house specialising in productivity apps.<br>
163-
Copyright &copy; 2019 CodeChimp</span><br><br>
164170
</div>
165-
<div class="mdl-mini-footer__right-section">
171+
</div>
172+
<footer class="mdl-mini-footer">
173+
<div class="mdl-mini-footer__left-section">
166174
<ul class="mdl-mini-footer__link-list">
167-
<li><a href="https://twitter.com/AndrewCodeChimp"><img src="images/Twitter_Social_Icon_Square_Color.png" width="48" height="48" title="Twitter" alt="Twitter"></a></li>
175+
<li><a href="mailto:[email protected]" class="mdl-button">Contact Us</a></li>
168176
</ul>
177+
<span>CodeChimp is a small independent software house specialising in productivity apps.<br>
178+
Copyright &copy; 2019 CodeChimp</span><br><br>
179+
</div>
180+
<div class="mdl-mini-footer__right-section">
181+
<ul class="mdl-mini-footer__link-list">
182+
<li><a href="https://twitter.com/AndrewCodeChimp"><img src="images/Twitter_Social_Icon_Square_Color.png" width="48" height="48" title="Twitter" alt="Twitter"></a></li>
183+
</ul>
169184
</div>
170-
</footer>
171-
</div>
172-
</main>
173-
</div>
174-
<script src="https://storage.googleapis.com/code.getmdl.io/1.1.3/material.min.js">
175-
</script>
176-
185+
</footer>
186+
</div>
187+
</main>
188+
</div>
189+
<script
190+
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
191+
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
192+
crossorigin="anonymous"></script>
193+
<script src="https://storage.googleapis.com/code.getmdl.io/1.1.3/material.min.js">
194+
</script>
195+
196+
<script>
197+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
198+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
199+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
200+
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
201+
202+
ga('create', 'UA-2000990-16', 'auto');
203+
ga('require', 'outboundLinkTracker');
204+
ga('require', 'socialTracker');
205+
ga('send', 'pageview');
206+
</script>
207+
177208
<script>
178-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
179-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
180-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
181-
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
182-
183-
ga('create', 'UA-2000990-16', 'auto');
184-
ga('require', 'outboundLinkTracker');
185-
ga('require', 'socialTracker');
186-
ga('send', 'pageview');
187-
</script>
188-
<script async src='js/autotrack.js'></script>
189-
190-
</body>
191-
</html>
209+
var $btns = $('.mdl-navigation__link').on("click", function() {
210+
if (this.id == "all") {
211+
$(".ios").show();
212+
$(".android").show();
213+
}
214+
if (this.id == "ios") {
215+
$(".ios").show();
216+
$(".android").hide();
217+
}
218+
if (this.id == "android") {
219+
$(".ios").hide();
220+
$(".android").show();
221+
}
222+
$btns.removeClass('is-active');
223+
$(this).addClass('is-active');
224+
})
225+
</script>
226+
227+
<script async src='js/autotrack.js'></script>
228+
229+
</body>
230+
</html>
231+

0 commit comments

Comments
 (0)