iotcat
/
hao-home
mirror of https://github.com/IoTcat/hao-home.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3 Commits
1 Branch
0 Tags
1.1 MiB
 
 
 
Tag: Branch: Tree: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
hao-home/index.html

288 lines
10 KiB
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hao's Home</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hao-homepage@1.0.0/styles.css">
<script type="text/javascript">var block_aplayer = true;</script>
<script src="https://cdn.yimian.xyz/ushio-js/ushio-head.min.js"></script>
<style media="screen">
body {
overflow: hidden;
}
.heart-body {
width: 500px;
margin: 100px auto;
position: relative;
}
.snowfall-flakes:before,
.snowfall-flakes:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 10px;
height: 16px;
background: red;
border-radius: 10px 10px 0 0;
}
.snowfall-flakes:before {
-webkit-transform: rotate(-45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(-45deg);
/* Firefox */
-ms-transform: rotate(-45deg);
/* IE 9 */
-o-transform: rotate(-45deg);
/* Opera */
transform: rotate(-45deg);
}
.snowfall-flakes:after {
left: 4px;
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(45deg);
/* Firefox */
-ms-transform: rotate(45deg);
/* IE 9 */
-o-transform: rotate(45deg);
/* Opera */
transform: rotate(45deg);
}
</style>
</head>
<body id="bg" style="">
<script type="text/javascript">var t = new Date();document.getElementById("bg").style = `background-color:${'#'+('00000'+ (Math.random()*0x1000000<<0).toString(16)).substr(-6)};background-size:cover;background-image: url('https://api.yimian.xyz/img/?path=imgbed/img_155232a2_900x808_8_null_normal.jpeg')`</script>
<div class="container">
<div id="clock"></div>
<div class="weather-container">
<div class="row" id="doSearch" contenteditable="true" >
<div id="msgbox"class="inline">Hi Hao~</div>
</div>
</div>
<div class="bookmark-container">
<div class="bookmark-set">
<div class="bookmark-title">Daily</div>
<div class="bookmark-inner-container">
<a class="bookmark" href="https://google.com/" target="_blank">Google</a>
<a class="bookmark" href="https://baidu.com/" target="_blank">Baidu</a>
<a class="bookmark" href="https://github.com/" target="_blank">Github</a>
</div>
</div>
<div class="bookmark-set">
<div class="bookmark-title">Media</div>
<div class="bookmark-inner-container">
<a class="bookmark" href="https://youtube.com" target="_blank">Youtube</a>
<a class="bookmark" href="https://bilibili.com" target="_blank">Bilibili</a>
<a class="bookmark" href="https://acg.watch" target="_blank">ACG.WATCH</a>
</div>
</div>
<div class="bookmark-set">
<div class="bookmark-title">Study</div>
<div class="bookmark-inner-container">
<a class="bookmark" href="https://vital.liv.ac.uk/" target="_blank">Vital</a>
<a class="bookmark" href="http://plm.liv.ac.uk/" target="_blank">Liv Life</a>
<a class="bookmark" href="https://ebridge.xjtlu.edu.cn/" target="_blank">Ebridge</a>
<a class="bookmark" href="https://ice.xjtlu.edu.cn/" target="_blank">ICE</a>
</div>
</div>
<div class="bookmark-set">
<div class="bookmark-title">Social</div>
<div class="bookmark-inner-container">
<a class="bookmark" href="https://twitter.com" target="_blank">Twitter</a>
<a class="bookmark" href="https://facebook.com" target="_blank">Facebook</a>
<a class="bookmark" href="https://www.eee.dog" target="_blank">IoTcat's Blog</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.yimian.xyz/ushio-js/ushio-footer.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/loktar00/JQuery-Snowfall@1.7.4/dist/snowfall.jquery.min.js"></script>
<script>
// Search on enter key event
function search(e) {
if (e.keyCode == 13) {
var val = document.getElementById("search-field").value;
window.open("https://google.com/search?q=" + val);
}
}
// Get current time and format
function getTime() {
let date = new Date(),
min = date.getMinutes(),
sec = date.getSeconds(),
hour = date.getHours();
return "" +
(hour < 10 ? ("0" + hour) : hour) + ":" +
(min < 10 ? ("0" + min) : min) + ":" +
(sec < 10 ? ("0" + sec) : sec);
}
function DateDifference(Date1,Date2) { //Date1和Date2是2017-07-10格式
var sDate, newDate1, newDate2, Days
aDate = Date1.split("-");
newDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为07-10-2017格式
aDate = Date2.split("-");
newDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
Days = parseInt(Math.abs(newDate1 - newDate2) / 1000 / 60 / 60 / 24); //把差的毫秒数转换为天数
return Days;
}
//msg Box
var msgbox = {
set: (s) => new Promise(resolve => {
var old = $('#msgbox').html();
var interval = 100;
for(var i = 0; i < old.length; i ++){
setTimeout((i)=>{
$('#msgbox').html(old.substring(0, old.length-i-1));
}, i*interval, i);
}
setTimeout(()=>{
for(var i = 0; i < s.length; i ++){
setTimeout((i)=>{
$('#msgbox').html(s.substring(0, i+1));
if(i == s.length-1){
resolve();
}
}, i*interval, i);
}
}, old.length*interval);
}),
arr: [],
push: function(s){
msgbox.arr.push(s);
},
hide: function(){
$('#msgbox').hide();
},
show: function(){
$('#msgbox').show();
},
wait: (t) => new Promise(resolve => {
setTimeout(()=>{
resolve();
}, t);
})
};
(async () => {
var i = 0;
await msgbox.wait(4000);
while(1){
await msgbox.set(msgbox.arr[i]);
if(i < msgbox.arr.length-1){
i++;
}else{
i = 0;
}
await msgbox.wait(3000);
}
})();
var getSearch = function(){
return $('#doSearch').html().match(/(.*)<div\sid/)[1];
}
$('#doSearch').click(function(){
msgbox.hide();
});
$('#doSearch').keyup((event)=>{
if(event.keyCode == 13){
window.open('https://google.com/search?q='+encodeURI(getSearch()));
window.location.reload();
}
});
// 情人节
if((new Date()).getMonth() == 1 && (new Date()).getDate() == 14){
msgbox.push('I Love You ❤❤');
msgbox.push("Happy Valentine's Day");
msgbox.push(`We have spend ${DateDifference('2019-10-19', `${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`)} days Together~`);
msgbox.push('Thanks for being with me o(´^｀)o');
setTimeout(()=>{
$(document).snowfall({
flakeCount: 70,
round: true,
maxSpeed : 8,
maxSize : 5
});
}, 13000);
}
// 生日
else if((new Date()).getMonth() == 2 && (new Date()).getDate() == 25){
msgbox.push('I Love You ❤❤');
msgbox.push("Happy Birthday Day");
msgbox.push(`We have spend ${DateDifference('2019-10-19', `${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`)} days Together~`);
msgbox.push('Thanks for being with me o(´^｀)o');
setTimeout(()=>{
$(document).snowfall({
flakeCount: 70,
round: true,
maxSpeed : 8,
maxSize : 5
});
}, 13000);
}
else{
msgbox.push(`We have spend ${DateDifference('2019-10-19', `${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`)} days Together~`);
}
window.onload = () => {
let xhr = new XMLHttpRequest();
// Request to open weather map
xhr.open('GET', 'https://api.openweathermap.org/data/2.5/weather?q=Liverpool&appid=e5b292ae2f9dae5f29e11499c2d82ece');
xhr.onload = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let json = JSON.parse(xhr.responseText);
console.log(json);
setTimeout(()=>{
msgbox.push(`${json.weather[0].main} - ${(json.main.temp - 273.15).toFixed(1)} °C`);
}, 4000);
} else {
console.log('error msg: ' + xhr.status);
}
}
}
xhr.send();
// Set up the clock
document.getElementById("clock").innerHTML = getTime();
// Set clock interval to tick clock
setInterval( () => {
document.getElementById("clock").innerHTML = getTime();
},100);
}
document.addEventListener("keydown", event => {
if (event.keyCode == 32) { // Spacebar code to open search
document.getElementById('search').style.display = 'flex';
document.getElementById('search-field').focus();
} else if (event.keyCode == 27) { // Esc to close search
document.getElementById('search-field').value = '';
document.getElementById('search-field').blur();
document.getElementById('search').style.display = 'none';
}
});
</script>
<!--<script src='https://cdn.jsdelivr.net/npm/hao-homepage@1.0.0/pio.js'></script>-->
</body>
</html>