grunt-phantomcss-gitdiff
Version:
Plugin to do CSS regression testing via PhantomCSS and diff on GitHub
182 lines (141 loc) • 4.92 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>PhantomCSS Demo</title>
<style>
body {
margin: 10px;
background-color: rgb(253, 253, 253);
font-family: Arial;
color: #555;
}
.modal {
position: absolute;
top: 10px;
right: 10px;
left: 10px;
background: rgb(253, 253, 253);
border: 1px solid rgb(180, 180, 180);
border-radius: 3px;
}
.modal-header {
padding: 10px;
background: rgb(240, 240, 240);
border-bottom: 1px solid rgb(210, 210, 210);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.modal-header h3 {
margin: 0;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.modal-footer {
background: rgb(226, 239, 245);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.btn {
display: inline-block;
box-sizing: border-box;
height: 40px;
margin: 10px;
padding: 8px 12px;
vertical-align: top;
background: rgb(100, 150, 200);
border: none;
border-radius: 5px;
box-shadow: inset -1px -1px 1px rgba(0, 0, 0, 0.25);
color: rgb(250, 250, 250);
font-family: Arial;
font-size: 16px;
font-weight: normal;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-align: center;
}
.alert {
margin: 20px;
padding: 15px;
border-radius: 5px;
background: rgb(223, 240, 216);
border: 1px solid rgb(214, 233, 198);
color: rgb(70, 136, 71);
font-family: Helvetica,sans-serif;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div id="coffee-machine-wrapper">
<p>Would you like a coffee?</p>
<button class="btn" id="coffee-machine-button">Go to the Coffee Machine</button>
<div id="myModal" class="modal" style="display: none;">
<div class="modal-header">
<h3 id="myModalLabel">The Coffee Machine</h3>
</div>
<div class="modal-body">
<div class="alert" id="latte-success" style="display: none;">
Here is your <strong>Latte!</strong>. Hmm, tasty!
</div>
<div class="alert" id="cappuccino-success" style="display: none;">
A frothy <strong>Cappuccino!</strong> luverly!
</div>
<div class="text-center alert" id="espresso-option" style="display: none;">
<p><strong>Espresso!</strong> Wanna make that a double?</p>
<p><a class="btn" href="#" id="make-that-a-double">Yup, hit me</a> <a class="btn" href="#" id="single-is-fine">Oh no no no</a></p>
</div>
<div class="alert" id="single-espresso-success" style="display: none;">
Merry <strong>Espresso</strong> drinking.
</div>
<div class="alert" id="double-espresso-success" style="display: none;">
<strong>Double Espresso!</strong>, That'll keep yer going.
</div>
<div id="screen-one">
<br/>
<p class="text-center">What would you like?</p>
<p class="text-center">
<button class="btn" id="cappuccino-button" type="button">Cappuccino</button>
<button class="btn" id="espresso-button" type="button">Espresso</button>
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn" id="close">Close</button>
</div>
</div>
</div>
<script>
document.querySelector('#close').addEventListener('click', function() {
document.querySelector('#myModal').style.display = 'none';
document.querySelector('#screen-one').style.display = '';
document.querySelector('#espresso-option').style.display = 'none';
document.querySelector('#double-espresso-success').style.display = 'none';
document.querySelector('#single-espresso-success').style.display = 'none';
document.querySelector('#cappuccino-success').style.display = 'none';
});
document.querySelector('#coffee-machine-button').addEventListener('click', function() {
document.querySelector('#myModal').style.display = '';
});
document.querySelector('#cappuccino-button').addEventListener('click', function() {
document.querySelector('#screen-one').style.display = 'none';
document.querySelector('#cappuccino-success').style.display = '';
});
document.querySelector('#espresso-button').addEventListener('click', function() {
document.querySelector('#screen-one').style.display = 'none';
document.querySelector('#espresso-option').style.display = '';
});
document.querySelector('#make-that-a-double').addEventListener('click', function() {
document.querySelector('#espresso-option').style.display = 'none';
document.querySelector('#double-espresso-success').style.display = '';
});
document.querySelector('#single-is-fine').addEventListener('click', function() {
document.querySelector('#espresso-option').style.display = 'none';
document.querySelector('#single-espresso-success').style.display = '';
});
</script>
</body>
</html>