Commit 2dd59910 authored by Porter Libby's avatar Porter Libby
Browse files

work toward seperate pages

parent 18d8487a
......@@ -8,40 +8,60 @@
<link rel="stylesheet" href="public/css/main.css">
<script src="data/careers-data.js"></script>
<script src="public/js/searchbar.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>
</head>
<body>
<div class="parent" style='position: absolute; z-index: 0;'>
<div class="box div1" onclick='openDetails("Campus Life",this)'>
<span class='box-header'>Campus Life</span></br>
<span class='box-prompt'></span>
<div id='container'>
<div id='slide-button'>
Next
</div>
<div class="box div2" onclick='openDetails("Community Engagement", this)'>
<span class='box-header'>Community Engagement</span></br>
<span class='box-prompt'></span>
<div class="parent p0" id='p0' style='position: absolute; z-index: 0;'>
<div class="circle div2" onclick='openDetails("First Year Advising",this)'>
<span class='box-header'>First Year Advising</span></br>
<span class='box-prompt'></span>
</div>
<div class="circle div5" onclick='openDetails("Career Exploration", this)'>
<span class='box-header'>Career Exploration</span></br>
<span class='box-prompt'></span>
</div>
<div class="circle div8" onclick='openDetails("Career Community", this)'>
<span class='box-header'>Career Community</span></br>
<span class='box-prompt'></span>
</div>
</div>
<div class="parent p1" id='p1' style='position: absolute; z-index: 0;'>
<div class="box div1" onclick='openDetails("Campus Life",this)'>
<span class='box-header'>Campus Life</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div2" onclick='openDetails("Community Engagement", this)'>
<span class='box-header'>Community Engagement</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div3" onclick='openDetails("Major Selection", this)'>
<span class='box-header'>Major Selection</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div4" onclick='openDetails("Research", this)'>
<span class='box-header'>Research</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div5" onclick='openDetails("Internship", this)'>
<span class='box-header'>Internship</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div6" onclick='openDetails("Off-Campus Study", this)'>
<span class='box-header'>Off-Campus Study</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div7" onclick='openDetails("Career", this)'>
<span class='box-header'>Career</span></br>
<span class='box-prompt'></span>
</div>
</div>
<div id='details-container'>
<div onclick='closeDetails()' style='width: 100%; height: 100%;'></div>
</div>
<div class="box div3" onclick='openDetails("Major Selection", this)'>
<span class='box-header'>Major Selection</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div4" onclick='openDetails("Research", this)'>
<span class='box-header'>Research</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div5" onclick='openDetails("Internship", this)'>
<span class='box-header'>Internship</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div6" onclick='openDetails("Off-Campus Study", this)'>
<span class='box-header'>Off-Campus Study</span></br>
<span class='box-prompt'></span>
</div>
<div class="box div7" onclick='openDetails("Career", this)'>
<span class='box-header'>Career</span></br>
<span class='box-prompt'></span>
</div>
</div>
<div id='details-container'>
<div onclick='closeDetails()' style='width: 100%; height: 100%;'></div>
</div>
<script>
function openDetails(label, target){
......@@ -74,5 +94,25 @@
container.style.zIndex = -1;
}
</script>
<script type="text/javascript">
var state = 0;
$( "#slide-button" ).click(function() {
console.log('switch')
if (state == 0){
console.log('0')
state = 1; // swtich to second screen
document.getElementById('p0').style.display = 'none';
document.getElementById('p1').style.display = 'grid';
document.getElementById('slide-button').innerHTML = 'Previous';
}
else if (state == 1){
console.log('1')
state = 0; // swtich back to first screen
document.getElementById('p1').style.display = 'none';
document.getElementById('p0').style.display = 'grid';
document.getElementById('slide-button').innerHTML = 'Next';
}
});
</script>
</body>
</html>
\ No newline at end of file
:root{
--block-color-1: coral;
--block-color-1: coral;
--circle-color-1: lightblue;
--detail-color-1: lightgray;
--text-color-1: black;
--text-color-2: #333;
--button-color: lightgreen;
}
html{
......@@ -57,18 +59,36 @@ body {
height: 90vh;
width: 90vw;
padding: 5vh 5vw;
}
}
.p0{
display:grid
}
.p1{
display: none;
}
.box{
width: 100%;
height: 100%;
text-align: center;
cursor: pointer;
border-radius: 8px;
background-color: var(--block-color-1);
}
.box:hover{
font-weight: bold;
}
.circle{
width: 100%;
height: 100%;
text-align: center;
cursor: pointer;
border-radius: 500px;
}
.circle:hover{
font-weight: bold;
}
.box-header {
padding-top: 10px;
display: inline-block;
......@@ -84,21 +104,27 @@ body {
.box-prompt::before{
content: "Click for more details";
}
.div1 { grid-area: 1 / 1 / 2 / 2;
background-color: var(--block-color-1);}
.div2 { grid-area: 2 / 1 / 3 / 2;
background-color: var(--block-color-1);}
.div3 { grid-area: 3 / 1 / 4 / 2;
background-color: var(--block-color-1);}
.div4 { grid-area: 1 / 2 / 2 / 3;
background-color: var(--block-color-1);}
.div5 { grid-area: 2 / 2 / 3 / 3;
background-color: var(--block-color-1);}
.div6 { grid-area: 3 / 2 / 4 / 3;
background-color: var(--block-color-1);}
.div7 { grid-area: 1 / 3 / 2 / 4;
background-color: var(--block-color-1);}
.div8 { grid-area: 2 / 3 / 3 / 4;
background-color: var(--block-color-1);}
.div9 { grid-area: 3 / 3 / 4 / 4;
background-color: var(--block-color-1);}
\ No newline at end of file
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 3 / 2;}
.div3 { grid-area: 3 / 1 / 4 / 2;}
.div4 { grid-area: 1 / 2 / 2 / 3;}
.div5 { grid-area: 2 / 2 / 3 / 3;}
.div6 { grid-area: 3 / 2 / 4 / 3;}
.div7 { grid-area: 1 / 3 / 2 / 4;}
.div8 { grid-area: 2 / 3 / 3 / 4;}
.div9 { grid-area: 3 / 3 / 4 / 4;}
#slide-button{
position: absolute;
margin-left: 45%;
bottom: 20px;
width: 10%;
height: 35px;
padding-top: 15px;
background-color: var(--button-color);
z-index: 3;
text-align: center;
cursor: pointer;
}
#slide-button:hover{
font-weight: bold;
}
\ No newline at end of file
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