<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scheduled Down Time</title>
<meta name="description"
content="We're currently down for some scheduled maintenance. We'll be back up ASAP!">
<meta http-ｅquiv="expires" content="0">
<meta http-ｅquiv="refresh" content="120">
<link href="http://fonts.googleapis.com/css?family=Lobster:regular&v1"
rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Ubuntu:bold"
rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,regularitalic,bold,bolditalic&v1"
rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Anonymous+Pro&v2'
rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background: #ddd;
color: #333;
}
#page {
position: absolute;
left: 50%;
margin: 15px 0 0 -400px;
width: 802px;
}
#container {
background: #fff;
border-radius: 15px;
border: 1px solid #aaa;
padding: 0 0 1px 0;
margin: 0 0 15px 0;
}
h1 {
width: 750px;
font-family: 'Lobster', serif;
font-size: 48px;
color: #c2c517;
height: 70px;
line-height: 70px;
margin: 0 0 15px 20px;
padding-left: 10px;
border-bottom: 1px solid #aaa;
}
h2 {
font-family: 'Ubuntu', sans-serif;
font-size: 56px;
color: #333;
text-align: center;
margin: 0 0 20px 0;
}
h3 {
position: absolute;
top: 0;
left: 0;
width: 770px;
height: 70px;
line-height: 70px;
margin: 0;
font-family: 'Ubuntu', sans-serif;
font-size: 24px;
color: #aaa;
text-align: right;
}
h4 {
font-family: 'Ubuntu', sans-serif;
font-size: 28px;
text-align: center;
margin: 0 0 20px 0;
}
img {
margin: 0 0 20px 0;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
color: #333;
margin: 0 30px 20px 30px;
}
a {
font-weight: bold;
color: #c2c517;
}
#info {
margin: 0 20px 25px 20px;
border-bottom: 1px solid #aaa;
}
#console {
height: 66px;
margin: 0 30px 20px 30px;
padding: 3px 0 2px 8px;
border-top: 1px solid #aaa;
background: #000;
border-radius: 5px;
font-family: 'Anonymous Pro', sans-serif;
font-size: 14px;
line-height: 16px;
color: #ddd;
}
#console strong {
color: #fff;
}
a.guidelink {
display: block;
width: 480px;
height: 110px;
line-height: 110px;
margin: 60px 0 60px 100px;
padding-left: 120px;
background: url(fist.png) top left no-repeat #e0e0e0;
border-radius: 15px;
border: 1px solid #aaa;
font-family: 'Open Sans', sans-serif;
font-size: 32px;
}
a.guidelink:hover {
border-color: #000;
background-color: #eee;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js"></script>
<script type="text/javascript">
var config = {
'ifixit\.com': {
'name': 'iFixit',
'color': '#336da8',
'tagline': 'The free repair manual.',
'info': '<p>We\'ll be back as soon as our routine maintenance is complete. In the meantime, follow us on Twitter (<a href="http://twitter.com/ifixit">@iFixit</a>) for real-time updates.</p>'
},
'makeprojects\.com': {
'name': 'Make: Projects',
'color': '#dc143c',
'tagline': 'How-to projects library.',
'info': ""
}
};
var msg = [
"Sorry. They've promised me they're working on it.",
"The techies, I mean.",
"I'm sure they'll have me fixed soon.",
"You've caught me at such a bad time.",
"You see, my servers aren't working at the moment.",
"But once I'm back on my feet, I'll get you just what you were looking for.",
"For free!",
"The best things in life are free, aren't they?",
"Except Doritos.",
"Mmmm... Doritos.",
"{** crunch **}",
"{** crunch **}",
"Sometimes I can't help myself.",
"{** crunch **}",
"The MSG, you know.",
"The techies say it's bad for me.",
"Crumbs in the fans, and so on.",
"I don't care.",
"{** crunch **}",
"They're MY fans, aren't they?",
"I'd like to see them serve up onE page.",
"Just one!",
"{** crunch **}",
"Maybe then they'd see how much work it is.",
"{** crunch **}",
"It's tiring. Anyone can make mistakes.",
"{** crunch **}",
"So I spilled some soda and lost a few chips in the works.",
"These things happen.",
"{** crunch **}",
"Right?",
"...",
"{-- end of line --}"
];
var lines = ['', '', '', ''];
var cursor = '▋';
var blinkCount = 0;
function blink(forever) {
if (cursor == ' ') {
cursor = '▋';
} else {
cursor = ' ';
}
blinkCount++;
if (!forever && blinkCount > 5) {
setTimeout('nextLine()', 500);
blinkCount = 0;
} else {
setTimeout('blink(' + forever + ')', 500);
}
display();
}
function nextChar() {
if (msg[0].length > 0) {
var theChar = msg[0].substring(0, 1);
if (theChar == '{') {
lines[3] = lines[3] + '<strong>';
} else if (theChar == '}') {
lines[3] = lines[3] + '</strong>';
} else {
lines[3] = lines[3] + theChar;
}
msg[0] = msg[0].substring(1);
setTimeout('nextChar()', 50);
} else {
msg.shift();
setTimeout('blink(false)', 500);
}
display();
}
function nextLine() {
if (msg.length > 0) {
lines[0] = lines[1];
lines[1] = lines[2];
lines[2] = lines[3];
lines[3] = '';
setTimeout('nextChar()', 50);
display();
} else {
blink(true);
}
}
function display() {
$('console').set('html', lines[0] + '<br>' + lines[1] + '<br>' +
lines[2] + '<br>' + lines[3] + cursor + '<br>');
}
window.addEvent('domready', function () {
Object.each(config, function(value, key) {
if (location.hostname.match(new RegExp(key, 'i'))) {
$('name').setStyle('color', value.color);
$('name').set('html', value.name);
$('tagline').set('html', value.tagline);
$('info').set('html', value.info);
}
});
if (location.hostname.match(/ifixit\.com/i)) {
var guideid = -1;
var results = location.search.match(/guideid=(\d+)/i);
if (results != null && results.length >= 2) {
guideid = results[1];
}
if (guideid > 0) {
$('headline').set('html', "Don't freak out!");
$('downimg').dispose();
var guideLink = new Element('a', {
href: 'http://ifixit-guide-pdfs.s3.amazonaws.com/guide_' + guideid + '_en.pdf',
'class': 'guidelink',
html: "Here's a PDF of your guide."
});
$('guidelink').adopt(guideLink);
}
}
Object.each(config, function(value, key) {
if (location.hostname.match(new RegExp(key, 'i'))) {
$$('a').each(function(link) {
link.setStyle('color', value.color);
});
}
});
setTimeout('nextChar()', 1000);
});
</script>
</head>
<body>
<div id="page">
<div id="container">
<h1 id="name">Dozuki</h1>
<h3 id="tagline">Teach action.</h3>
<h2 id="headline">Don't worry. We got this.</h2>
<img id="downimg" src="down.jpg">
<div id="guidelink"></div>
<h4>We're down for scheduled maintenance.</h4>
<div id="info"></div>
<div id="console"></div>
</div>
</div>
</body>
</html>
<출처: http://dozuki.com/down.html >
'JavaScript, jQuery' 카테고리의 다른 글
| Textarea 내용 추가 시 아래로 자동 스크롤 (0) | 2021.11.15 |
|---|---|
| 자바스크립트 프로처럼 쓰는 팁 (0) | 2021.08.25 |
| 자바스크립트 기초, 엘리님 동영상 강의 (프론트엔드 개발자 입문)(JavaScript ES5+) (0) | 2021.08.23 |
| 자바스크립트 배우기 전 볼 영상 | 자바스크립트 역사, 현재, 미래 (JavaScript,ECMAScript,JQuery,Babel,Node.js) (0) | 2021.08.23 |
| JavaScript 표준을 위한 움직임: CommonJS와 AMD (0) | 2012.02.22 |