Lighter 1.4 newtab/desktop
<!DOCTYPE html>
<!-- Tiny, minimalistic, but act as it should newtab/desktop. Tested on Vivaldi (Chromium family).
v.1.4
usage:
shift+enter - go to url
enter - search with google.com
ctrl+enter - search with duckduckgo.com
(you can change both below)
click - show/hide bg animation
contacts:
t.me/Plamcheg
plmch@bk.ru
-->
<head><title>[!]</title>
<style>
body {
margin: 0;
background: #000 fixed no-repeat center 120%;
background-size: 100% auto;
background-image: linear-gradient(#000,#000,#0000,#0000,#0000), url(bg.jpg);
color: #333;
}
#bg {
margin: 0;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
position: fixed;
display: none;
z-index: 2;
pointer-events: none;
background-position: bottom;
background-size: 100% auto;
background-repeat: no-repeat;
left: 0; right: 0;
top: 0; bottom: 0;
}
#bgmp4 {
position: fixed;
display: none;
pointer-events: none;
z-index: 1;
width: 100%;
height: auto;
bottom: -120px;
}
#inputf {
position: fixed;
opacity: 0;
border-radius: 5px;
padding-left: 10px;
background: rgba(0,0,0,0.3);
width: 40%;
height: 45px;
margin-top: 50px;
left: 50%;
transform: translateX(-50%);
border: 0;
outline: 0;
font-size: 20px;
font-family: arial, sans;
color: #ccc;
border-right: none;
z-index: 3;
}
#inputf:focus {
background: rgba(0,0,0,0.8);
color: #fff;
}
#inputf:not(:focus)+span::after {
content: 'unfocused';
display: block;
position: fixed;
margin-top: 100px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
width: 130px;
text-align: center;
background: rgba(0,0,0,0.5);
color: #fff;
font-family: sans;
font-size: 14px;
font-weight: bold;
border-radius: 50px;
z-index: 2;
}
</style>
</head><body>
<input id="inputf" autofocus />
<span></span>
<div id='bg'></div>
<video id='bgmp4' muted loop autoplay>
<source src='bg.mp4' type=video/mp4>
</video>
<script>
var field = document.querySelector("#inputf");
var bg = document.querySelector("#bg");
var bgmp4 = document.querySelector("#bgmp4");
var searchE = 'https://google.com/search?q='; /* search engine for Enter */
var searchE2 = 'https://duckduckgo.com/?q='; /* search engine for crtl+enter */
window.onfocus = function() {
field.focus();
}
field.addEventListener('keydown', function(e) {
var key = e.keyCode;
if (key == 13 && field.value !== '') {
if (e.shiftKey) {
window.open('http://'+field.value,'_blank').focus();
}
else if (e.ctrlKey) {
window.open(searchE2+field.value,'_blank').focus();
}
else {
window.open(searchE+field.value,'_blank').focus();
}
field.style.setProperty('opacity','0');
field.value = '';
}
else if (key == 27) {
field.value = '';
e.stopPropagation();
}
});
/* field visibility */
field.addEventListener('keyup', function(e) {
if (field.value !== '') {
field.style.setProperty('opacity','1');
}
else
{
field.style.setProperty('opacity','0');
}
});
/* click override */
document.addEventListener('mousedown', function(e) {
/* bg change */
if (e) {
if (bg.style.display !== 'block') {
bg.style.display = 'block';
bgmp4.style.display = 'block';
}
else {
bg.style.display = 'none';
bgmp4.style.display = 'none';
}
}
field.focus();
e.preventDefault();
});
/* field ignore click override */
field.addEventListener('mousedown', function(e) {
e.stopPropagation();
});
/* bg right click override */
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
/* field ignore right click override */
field.addEventListener('contextmenu', function(e) {
e.stopPropagation();
});
</script>
</body>
Комментариев нет:
Отправить комментарий