Andrew Chen
parent
fe97c0b9c8
commit
855556c1f7
|
|
@ -1,305 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script src="jquery-3.2.1.min.js"></script>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
|
||||||
|
|
||||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
|
|
||||||
<script src="https://use.fontawesome.com/4bcc658a89.js"></script>
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
var info = {
|
|
||||||
personas: {
|
|
||||||
a_persona: {
|
|
||||||
beginner: "a1: beginner stuff",
|
|
||||||
intermediate: "a1: intermediate stuff",
|
|
||||||
advanced: "a1: advanced stuff"
|
|
||||||
},
|
|
||||||
b_persona: {
|
|
||||||
beginner: "b1: beginner stuff",
|
|
||||||
intermediate: "b1: intermediate stuff",
|
|
||||||
advanced: "b1: advanced stuff"
|
|
||||||
},
|
|
||||||
c_persona: {
|
|
||||||
beginner: "c1: beginner stuff",
|
|
||||||
intermediate: "c1: intermediate stuff",
|
|
||||||
advanced: "c1: advanced stuff"
|
|
||||||
},
|
|
||||||
d_persona: {
|
|
||||||
beginner: "d1: beginner stuff",
|
|
||||||
intermediate: "d1: intermediate stuff",
|
|
||||||
advanced: "d1: advanced stuff"
|
|
||||||
},
|
|
||||||
e_persona: {
|
|
||||||
beginner: "e1: beginner stuff",
|
|
||||||
intermediate: "e1: intermediate stuff",
|
|
||||||
advanced: "e1: advanced stuff"
|
|
||||||
},
|
|
||||||
f_persona: {
|
|
||||||
beginner: "f1: beginner stuff",
|
|
||||||
intermediate: "f1: intermediate stuff",
|
|
||||||
advanced: "f1: advanced stuff"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
groups: {
|
|
||||||
a_groups: {
|
|
||||||
beginner: "a1: beginner stuff",
|
|
||||||
intermediate: "a1: intermediate stuff",
|
|
||||||
advanced: "a1: advanced stuff"
|
|
||||||
},
|
|
||||||
b_groups: {
|
|
||||||
beginner: "b1: beginner stuff",
|
|
||||||
intermediate: "b1: intermediate stuff",
|
|
||||||
advanced: "b1: advanced stuff"
|
|
||||||
},
|
|
||||||
c_groups: {
|
|
||||||
beginner: "c1: beginner stuff",
|
|
||||||
intermediate: "c1: intermediate stuff",
|
|
||||||
advanced: "c1: advanced stuff"
|
|
||||||
},
|
|
||||||
d_groups: {
|
|
||||||
beginner: "d1: beginner stuff",
|
|
||||||
intermediate: "d1: intermediate stuff",
|
|
||||||
advanced: "d1: advanced stuff"
|
|
||||||
},
|
|
||||||
e_groups: {
|
|
||||||
beginner: "e1: beginner stuff",
|
|
||||||
intermediate: "e1: intermediate stuff",
|
|
||||||
advanced: "e1: advanced stuff"
|
|
||||||
},
|
|
||||||
f_groups: {
|
|
||||||
beginner: "f1: beginner stuff",
|
|
||||||
intermediate: "f1: intermediate stuff",
|
|
||||||
advanced: "f1: advanced stuff"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
areas: {
|
|
||||||
a_areas: {
|
|
||||||
beginner: "a1: beginner stuff",
|
|
||||||
intermediate: "a1: intermediate stuff",
|
|
||||||
advanced: "a1: advanced stuff"
|
|
||||||
},
|
|
||||||
b_areas: {
|
|
||||||
beginner: "b1: beginner stuff",
|
|
||||||
intermediate: "b1: intermediate stuff",
|
|
||||||
advanced: "b1: advanced stuff"
|
|
||||||
},
|
|
||||||
c_areas: {
|
|
||||||
beginner: "c1: beginner stuff",
|
|
||||||
intermediate: "c1: intermediate stuff",
|
|
||||||
advanced: "c1: advanced stuff"
|
|
||||||
},
|
|
||||||
d_areas: {
|
|
||||||
beginner: "d1: beginner stuff",
|
|
||||||
intermediate: "d1: intermediate stuff",
|
|
||||||
advanced: "d1: advanced stuff"
|
|
||||||
},
|
|
||||||
e_areas: {
|
|
||||||
beginner: "e1: beginner stuff",
|
|
||||||
intermediate: "e1: intermediate stuff",
|
|
||||||
advanced: "e1: advanced stuff"
|
|
||||||
},
|
|
||||||
f_areas: {
|
|
||||||
beginner: "f1: beginner stuff",
|
|
||||||
intermediate: "f1: intermediate stuff",
|
|
||||||
advanced: "f1: advanced stuff"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
challenges: {
|
|
||||||
a_challenges: {
|
|
||||||
beginner: "a1: beginner stuff",
|
|
||||||
intermediate: "a1: intermediate stuff",
|
|
||||||
advanced: "a1: advanced stuff"
|
|
||||||
},
|
|
||||||
b_challenges: {
|
|
||||||
beginner: "b1: beginner stuff",
|
|
||||||
intermediate: "b1: intermediate stuff",
|
|
||||||
advanced: "b1: advanced stuff"
|
|
||||||
},
|
|
||||||
c_challenges: {
|
|
||||||
beginner: "c1: beginner stuff",
|
|
||||||
intermediate: "c1: intermediate stuff",
|
|
||||||
advanced: "c1: advanced stuff"
|
|
||||||
},
|
|
||||||
d_challenges: {
|
|
||||||
beginner: "d1: beginner stuff",
|
|
||||||
intermediate: "d1: intermediate stuff",
|
|
||||||
advanced: "d1: advanced stuff"
|
|
||||||
},
|
|
||||||
e_challenges: {
|
|
||||||
beginner: "e1: beginner stuff",
|
|
||||||
intermediate: "e1: intermediate stuff",
|
|
||||||
advanced: "e1: advanced stuff"
|
|
||||||
},
|
|
||||||
f_challenges: {
|
|
||||||
beginner: "f1: beginner stuff",
|
|
||||||
intermediate: "f1: intermediate stuff",
|
|
||||||
advanced: "f1: advanced stuff"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var selected = {
|
|
||||||
type:'',
|
|
||||||
button: '',
|
|
||||||
level: ''
|
|
||||||
};
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
|
||||||
buildCards();
|
|
||||||
$('.bar1 .navButton').on('click', function(e) {
|
|
||||||
$('.navButton').removeClass("keepShow");
|
|
||||||
$(this).addClass("keepShow");
|
|
||||||
var type = '';
|
|
||||||
|
|
||||||
$('.cards > div').hide();
|
|
||||||
if (/personas/.test(e.currentTarget.className)) {
|
|
||||||
$('.card_personas').show();
|
|
||||||
type = 'personas';
|
|
||||||
}
|
|
||||||
else if (/groups/.test(e.currentTarget.className)) {
|
|
||||||
$('.card_groups').show();
|
|
||||||
type = 'groups';
|
|
||||||
}
|
|
||||||
else if (/areas/.test(e.currentTarget.className)) {
|
|
||||||
$('.card_areas').show();
|
|
||||||
type = 'areas';
|
|
||||||
}
|
|
||||||
else if (/challenges/.test(e.currentTarget.className)) {
|
|
||||||
$('.card_challenges').show();
|
|
||||||
type = 'challenges'
|
|
||||||
}
|
|
||||||
selected.type = type;
|
|
||||||
});
|
|
||||||
|
|
||||||
function buildCards () {
|
|
||||||
for (var c in info) {
|
|
||||||
var card = document.createElement('div');
|
|
||||||
card.className += "card_" + c;
|
|
||||||
|
|
||||||
for (var i in info[c]) {
|
|
||||||
var button = document.createElement('div');
|
|
||||||
button.className += 'buttons';
|
|
||||||
button.setAttribute('data-button', i);
|
|
||||||
button.innerText = i;
|
|
||||||
card.appendChild(button);
|
|
||||||
}
|
|
||||||
$('.cards').append(card);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.bar1 .personas').click();
|
|
||||||
$('.cards .buttons').on('click', handleCardClick);
|
|
||||||
$('.tab1').on('click', function(e) {
|
|
||||||
$('.tab1').removeClass('selected');
|
|
||||||
$(this).addClass('selected');
|
|
||||||
var level = e.currentTarget.className.match(/(?:tab1 )(.+)(?:selected)$/)[1].trim();
|
|
||||||
selected.level = level;
|
|
||||||
setInfoData(level);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function setInfoData(level) {
|
|
||||||
$('.infobar .data').text(info[selected.type][selected.button][selected.level]);
|
|
||||||
$('.infobarWrapper').css('visibility', 'visible');
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCardClick(e) {
|
|
||||||
$('.buttons').removeClass('selected');
|
|
||||||
$(this).addClass('selected');
|
|
||||||
|
|
||||||
$('html,body').animate({scrollTop: $("#subTitle").offset().top},'slow');
|
|
||||||
|
|
||||||
selected.button = e.currentTarget.getAttribute('data-button');
|
|
||||||
var cardText = e.currentTarget.innerText;
|
|
||||||
$('#subTitle').text(cardText);
|
|
||||||
$('.tab1.beginner').click();
|
|
||||||
}
|
|
||||||
|
|
||||||
function clicked_on(){
|
|
||||||
document.getElementById('future-clicked').innerHTML = 'Future World';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<title></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="topheader">
|
|
||||||
Kubernetes User Journeys
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bar1">
|
|
||||||
<div class="navButton personas">Personas</div>
|
|
||||||
<div class="navButton groups">User Groups</div>
|
|
||||||
<div class="navButton areas">Focus Areas</div>
|
|
||||||
<div class="navButton challenges">Challenges</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="cardWrapper">
|
|
||||||
<div class="bar2">I AM...</div>
|
|
||||||
<div class='cards'></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style='text-align: center;'>
|
|
||||||
<div class="bar2" id="subTitle"></div>
|
|
||||||
<div class="bar3">
|
|
||||||
<div class="tab1 beginner">
|
|
||||||
<i class="fa fa-cloud-download" aria-hidden="true" style="font-size:50pt !important;padding-top:7% !important;padding-bottom:15% !important"></i>
|
|
||||||
<br>
|
|
||||||
<div class="tabbottom" style="padding-top:5%;padding-bottom:5%">
|
|
||||||
Beginner
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tab1 intermediate">
|
|
||||||
<i class="fa fa-check-square" aria-hidden="true" style="font-size:50pt !important;padding-top:7% !important;padding-bottom:15% !important"></i>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div class="tabbottom" style="padding-top:5%;padding-bottom:5%">
|
|
||||||
Intermediate
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tab1 advanced">
|
|
||||||
<i class="fa fa-exclamation-circle" aria-hidden="true" style="font-size:50pt !important;padding-top:7% !important;padding-bottom:15% !important"></i>
|
|
||||||
<br>
|
|
||||||
<div class="tabbottom" style="padding-top:5%;padding-bottom:5%">
|
|
||||||
Advanced
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='infobarWrapper'>
|
|
||||||
<div class="infobar">
|
|
||||||
<span style="padding-bottom: 3% ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
|
|
||||||
<a href="docs.html"><div class="whitebar" >
|
|
||||||
<div class="infoicon">
|
|
||||||
<i class="fa fa-retweet" aria-hidden="true" style="padding-bottom:%;float:left;color:#3399ff"></i>
|
|
||||||
</div>
|
|
||||||
<div id="info1" class='data'></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="docs.html"><div class="whitebar">
|
|
||||||
<div class="infoicon">
|
|
||||||
<i class="fa fa-folder-open-o" aria-hidden="true" style="padding:%;float:left;color:#3399ff"></i>
|
|
||||||
</div>
|
|
||||||
<div id="info2" class='data'></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="docs.html"> <div class="whitebar">
|
|
||||||
<div class="infoicon">
|
|
||||||
<i class="fa fa-hdd-o" aria-hidden="true" style="padding:%;float:left;color:#3399ff"></i>
|
|
||||||
</div>
|
|
||||||
<div id="info3" class='data'></div>
|
|
||||||
</a>
|
|
||||||
<!-- <i class="fa fa-arrow-right" aria-hidden="true" style="line-height:0em !important;display:inline;padding-bottom:5%;float:right;color:#3399ff"></i>-->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue