Commit c05123bf authored by Zhai Zirun's avatar Zhai Zirun

styled top bar, got tabs to work on regular page but to be converted to...

styled top bar, got tabs to work on regular page but to be converted to separate js file for extension popup
parent f9e0f3a8
document.getElementById("custom-button").addEventListener("click", openTab(event, 'custom'));
document.getElementById("load-button").addEventListener("click", openTab(event, 'load'));
function openTab(evt, tabName) {
var i, content, tablinks;
content = document.getElementsByClassName("content");
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("custom-button").click();
\ No newline at end of file
This diff is collapsed.
File added
File added
File added
......@@ -5,18 +5,37 @@
<title> clickerance </title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="content.js"></script>
<script src="button.js"></script>
</head>
<body>
<div class="Title"></div>
<h1> Clickerance </h1>
<header class="header">
<div class="header-logo">
<img src="images/logo.png">
</div>
<div class="header-text">
<p class="h-text">clickerance</p>
</div>
</header>
Dairy : <input type="checkbox" id="Dairy"><br>
Meat : <input type="checkbox" id="Meat"><br>
Corn : <input type="checkbox" id="Corn"><br>
Gluten : <input type="checkbox" id="Gluten"><br>
<div class="topbar">
<button class="tablinks" id="custom-button">Your preferences</button>
<button class="tablinks" id="load-button">Get an order on us</button>
</div>
<p>Which ones you can't eat?</p>
<div class="content" id="custom">
Dairy : <input type="checkbox" id="Dairy"><br>
Meat : <input type="checkbox" id="Meat"><br>
Corn : <input type="checkbox" id="Corn"><br>
Gluten : <input type="checkbox" id="Gluten"><br>
<input id="Submit" type="submit" value="Submit">
<p>Which ones you can't eat?</p>
<input id="Submit" type="submit" value="Submit">
</div>
<div class="content" id="load">
blah
</div>
</body>
</html>
.Title
/* nunito-600 - latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 600;
src: url('./fonts/nunito-v14-latin-600.eot'); /* IE9 Compat Modes */
src: local('Nunito SemiBold'), local('Nunito-SemiBold'),
url('./fonts/nunito-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./fonts/nunito-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('./fonts/nunito-v14-latin-600.woff') format('woff'), /* Modern Browsers */
url('./fonts/nunito-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('./fonts/nunito-v14-latin-600.svg#Nunito') format('svg'); /* Legacy iOS */
}
.html {
width: 430px;
}
body {
font-family: 'Nunito', sans-serif;
min-height: 430px;
}
/* ----- header ----- */
.header
{
text-align: justify;
font: 40px helvetica, sans-serif;
overflow: hidden;
background-color: #51C2A9;
min-width: 300px;
box-shadow: 0 0 3px #adadad;
}
.header-logo {
display: inline-block;
position: absolute;
margin: 0;
padding: 0;
left: 25px;
top: 17px;
}
.header-logo img {
width: 50px;
}
.h-text {
color: white;
background-color: #47BD95;
padding: 28px
text-align: center;
font-size: 18px;
padding: 1px;
vertical-align: middle;
}
/* ----- topbar ----- */
.topbar {
height: 30px;
overflow: hidden;
}
.topbar button {
width: 150px;
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 5px;
transition: 0.3s;
font-family: 'Nunito', sans-serif;
}
.tab button:hover {
border-bottom: 3px solid #51C2A9;
}
.topbar button.active {
border-bottom: 3px solid #51C2A9;
}
/* ----- main-window -----*/
.content {
display: none;
padding: 6px 12px;
background: #f5f5f5;
border: 1px solid #adadad;
box-shadow: 0 0 3px #adadad;
min-height: 250px;
}
.nameWrapper___4c05X {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment