Skip to content

Commit 611a8a6

Browse files
havisVhhavisVh
committed
version 2
1 parent 294bef7 commit 611a8a6

13 files changed

+343
-333
lines changed

‎ButtonFunctions.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,12 @@ async function pwainstall() {
3636
} else if (outcome === 'dismissed') {
3737
console.log('User dismissed the install prompt');
3838
}
39+
}
40+
var urls = {
41+
"TWA" : "https://tabbed.web.app"
42+
}
43+
44+
function goTo(url){
45+
console.log([url,urls.url])
46+
location.href = urls[url]
3947
}

‎counterPage.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<h3>Apparently every framework has this!</h3>
2+
<hr style="width:70%">
3+
4+
<p>Click Below to Increment the counter</p>
5+
<button class="dev_button clickable" style="height:50px" aria-label="Counter button"
6+
onclick="incrementCountby(1)">
7+
Click Me!
8+
</button>
9+
<p id="counter">0</p>

‎fonts/MatSymbolsRounded.woff2

2.57 MB
Binary file not shown.

‎fonts/Poppins-Medium.ttf

153 KB
Binary file not shown.

‎github.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<h3>Links to various extremely useful resources</h3>
2+
<hr style="width:70%">
3+
4+
5+
<p>The Github Repo Page : <a href="https://github.com/havisVh/TabbedWebApp">Github.com</a></p>
6+
<p>Maskable.app : <a href="https://maskable.app/editor">Maskable App</a></p>
7+
<p>Learn more about PWAs : <a href="https://web.dev/progressive-web-apps/">web.dev</a></p>
8+
<p>Font and Icons : <a href="https://fonts.google.com/">Google Fonts</a></p>
9+
<hr style="width:100px">
10+
<p>JS && CSS Minifier extension for VSCode: <a
11+
href="https://marketplace.visualstudio.com/items?itemName=olback.es6-css-minify">Visual Studio
12+
Marketplace</a></p>

‎home.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<h1>Welcome to your first Tabbed Web App</h1>
2+
<hr style="width:70%">
3+
<p>written entirely in HTML and Javascript</p><br>
4+
<p>This is just a demo, a boilerplate if you would...<br>Go out there, make it yours...<br>make it better!
5+
Make your product standout.<br>
6+
Have fun coding!!
7+
</p>

‎index.html

Lines changed: 19 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,31 @@
2626
<div id="mySidenav" class="sidenav">
2727
<div style=" background: #101010;
2828
border-bottom: 2px solid #4c4c4c;
29-
margin-bottom: 21px;">
30-
<img src="logo.png" class="logoSideNav" alt="app logo">
29+
margin-bottom: 21px;
30+
height: 124px;
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: center;
34+
align-items: center;">
35+
<h3 style="font-weight:100;margin: 0px;"><b>HVH&nbsp;</b>|&nbsp;Tabbed Web App</h3>
36+
3137
<span href="javascript:void(0)" class=" material-symbols-rounded closebtn" onclick="closeNav()"
3238
aria-label="close sidebar" id="NOEXCUSE">cancel</span>
33-
<p style="color:#f1f1f1a3;font-size: 14px;text-align: center;">Tabbed Web App</p>
39+
<p style="color:#f1f1f1a3;font-size: 14px;text-align: center;">Demo</p>
3440
</div>
35-
<div class="side-button tablink" onclick="openPage('home',this)" id="defaultOpen" aria-label="open home page">
41+
<div class="side-button tablink" onclick="openRoute('home',this)" id="defaultOpen" aria-label="open home page">
3642
<span class="material-symbols-rounded">home</span>
3743
<p>Home</p>
3844
</div>
39-
<div class="side-button tablink" onclick="openPage('counterPage',this)" aria-label="open counter tab">
45+
<div class="side-button tablink" onclick="openRoute('counterPage',this)" aria-label="open counter tab">
4046
<span class="material-symbols-rounded ">calculate</span>
4147
<p>Counter</p>
4248
</div>
43-
<div class="side-button tablink" onclick="openPage('info',this)" aria-label="open info tab">
49+
<div class="side-button tablink" onclick="openRoute('info',this)" aria-label="open info tab">
4450
<span class="material-symbols-rounded">info</span>
4551
<p>Your Info page</p>
4652
</div>
47-
<div class="side-button tablink" style="color: rgba(255, 255, 255, 0.459);" onclick="openPage('github',this)"
53+
<div class="side-button tablink" style="color: rgba(255, 255, 255, 0.459);" onclick="openRoute('github',this)"
4854
aria-label="open help page">
4955
<span class="material-symbols-rounded">code</span>
5056
<p style="color: rgba(255, 255, 255, 0.459);">Github and Stuff!</p>
@@ -62,6 +68,10 @@
6268
style="color: red;display: none;flex-wrap: wrap;flex-direction: row;align-content: center;align-items: center;justify-content: center;">&nbsp;
6369
<span class="material-symbols-rounded">wifi_off</span></span>
6470
<div class="headerButtonContainer">
71+
<button class="dev_button_mobile" id="gotohomepage" onclick="goTo('TWA')"
72+
aria-label="go to Tabbed.web.app">
73+
<span class="material-symbols-rounded clickable" style="font-size:18px">home</span>
74+
</button>
6575
<button class="dev_button_mobile" id="installMobile" onclick="pwainstall()"
6676
aria-label="install to the device">
6777
<span class="material-symbols-rounded clickable" style="font-size:18px">install_mobile</span>
@@ -71,56 +81,10 @@
7181
</button>
7282
</div>
7383
</header>
74-
<!-- HOME PAGE : START-->
75-
<section id="home" class="tabcontent">
76-
77-
<h1>Welcome to your first Tabbed Web App</h1>
78-
<hr style="width:70%">
79-
<p>written entirely in HTML and Javascript</p><br>
80-
<p>This is just a demo, a boilerplate if you would...<br>Go out there, make it yours...<br>make it better!
81-
Make your product standout.<br>
82-
Have fun coding!!
83-
</p>
84-
</section>
85-
<!-- HOME PAGE : END && COUNTER PAGE : START -->
86-
<section id="counterPage" class="tabcontent">
87-
<h3>Apparently every framework has this!</h3>
88-
<hr style="width:70%">
89-
90-
<p>Click Below to Increment the counter</p>
91-
<button class="dev_button clickable" style="height:50px" aria-label="Counter button"
92-
onclick="incrementCountby(1)">
93-
Click Me!
94-
</button>
95-
<p id="counter">0</p>
96-
</section>
97-
<!-- COUNTER PAGE : END && INFO PAGE : START -->
98-
<section id="info" class="tabcontent">
99-
<h3>Okay Alright, I am running out of things to write!</h3>
100-
<hr style="width:70%">
101-
102-
<p>Hey Jeff🔥! 👋🏽</p>
103-
<p>Check the github repo for updates!</p>
104-
<p>...Also run the lighthouse report for free fireworks! 🎆🎇</p>
105-
</section>
106-
<!-- INFO PAGE : END && GITHUB PAGE : START -->
107-
<section id="github" class="tabcontent">
108-
<h3>Links to various extremely useful resources</h3>
109-
<hr style="width:70%">
110-
111-
112-
<p>The Github Repo Page : <a href="https://github.com/havisVh/TabbedWebApp">Github.com</a></p>
113-
<p>Maskable.app : <a href="https://maskable.app/editor">Maskable App</a></p>
114-
<p>Learn more about PWAs : <a href="https://web.dev/progressive-web-apps/">web.dev</a></p>
115-
<p>Font and Icons : <a href="https://fonts.google.com/">Google Fonts</a></p>
116-
<hr style="width:100px">
117-
<p>JS && CSS Minifier extension for VSCode: <a
118-
href="https://marketplace.visualstudio.com/items?itemName=olback.es6-css-minify">Visual Studio
119-
Marketplace</a></p>
120-
84+
<section id="view" class="tabcontent">
12185

86+
<!-- Page Content Goes Here -->
12287
</section>
123-
<!-- GITHUB PAGE : END -->
12488
<script>
12589
var count = 0;
12690
function incrementCountby(k) {

‎info.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<h3>Okay Alright, I am running out of things to write!</h3>
2+
<hr style="width:70%">
3+
4+
<p>Hey Jeff🔥! 👋🏽</p>
5+
<p>Check the github repo for updates!</p>
6+
<p>...Also run the lighthouse report for free fireworks! 🎆🎇</p>

0 commit comments

Comments
 (0)