295 lines
13 KiB
HTML
295 lines
13 KiB
HTML
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>New Tab</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="tab-background">
|
||
|
|
<img src="./backgrounds/27588471/background.jpg" />
|
||
|
|
<p id="wallpaper-credit">
|
||
|
|
Photo by <a href="https://www.pexels.com/photo/elbsandsteingebirge-27588471/">Wolfgang Weiser</a> on Pexels
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar">
|
||
|
|
<button id="main-clock">
|
||
|
|
<span>12:00PM</span>
|
||
|
|
</button>
|
||
|
|
<button onclick="ShowSettings()" id="open-settings">
|
||
|
|
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#FFFFFF"><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-popups">
|
||
|
|
<div id="settings-popup">
|
||
|
|
<p>Wallpaper</p>
|
||
|
|
<button disabled style="opacity: 0.5;" class="wide-selector"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#FFFFFF"><path d="M21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4V3.6C3 3.26863 3.26863 3 3.6 3H20.4C20.7314 3 21 3.26863 21 3.6Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 16L10 13L21 18" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 10C14.8954 10 14 9.10457 14 8C14 6.89543 14.8954 6 16 6C17.1046 6 18 6.89543 18 8C18 9.10457 17.1046 10 16 10Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg> <span>Select a New Wallpaper</span></button>
|
||
|
|
<p>Search</p>
|
||
|
|
<select disabled style="opacity: 0.5;">
|
||
|
|
<option>DuckDuckGo</option>
|
||
|
|
<option>Brave</option>
|
||
|
|
<option>4get</option>
|
||
|
|
<option>Whoogle</option>
|
||
|
|
<option>Leta</option>
|
||
|
|
<option>Araa</option>
|
||
|
|
<option>Bing</option>
|
||
|
|
<option>Yandex</option>
|
||
|
|
<option>Google</option>
|
||
|
|
</select>
|
||
|
|
<p>Interface</p>
|
||
|
|
<button id="search-btn-toggle" class="toggles">
|
||
|
|
<span>Search</span>
|
||
|
|
<span id="search-toggle-enabled"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#FFFFFF"><path d="M17 13C17.5523 13 18 12.5523 18 12C18 11.4477 17.5523 11 17 11C16.4477 11 16 11.4477 16 12C16 12.5523 16.4477 13 17 13Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H17C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17Z" stroke="#FFFFFF" stroke-width="1.5"></path></svg></span>
|
||
|
|
<span id="search-toggle-disabled"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#FFFFFF"><path d="M7 13C7.55228 13 8 12.5523 8 12C8 11.4477 7.55228 11 7 11C6.44772 11 6 11.4477 6 12C6 12.5523 6.44772 13 7 13Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H17C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17Z" stroke="#FFFFFF" stroke-width="1.5"></path></svg></span>
|
||
|
|
</button>
|
||
|
|
<button id="main-clock-btn-toggle" class="toggles">
|
||
|
|
<span>Time</span>
|
||
|
|
<span id="main-clock-toggle-enabled"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#FFFFFF"><path d="M17 13C17.5523 13 18 12.5523 18 12C18 11.4477 17.5523 11 17 11C16.4477 11 16 11.4477 16 12C16 12.5523 16.4477 13 17 13Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H17C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17Z" stroke="#FFFFFF" stroke-width="1.5"></path></svg></span>
|
||
|
|
<span id="main-clock-toggle-disabled"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#FFFFFF"><path d="M7 13C7.55228 13 8 12.5523 8 12C8 11.4477 7.55228 11 7 11C6.44772 11 6 11.4477 6 12C6 12.5523 6.44772 13 7 13Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H17C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17Z" stroke="#FFFFFF" stroke-width="1.5"></path></svg></span>
|
||
|
|
</button>
|
||
|
|
<button id="wallpaper-credit-btn-toggle" class="toggles">
|
||
|
|
<span>Wallpaper Credit</span>
|
||
|
|
<span id="wallpaper-credit-toggle-enabled"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#FFFFFF"><path d="M17 13C17.5523 13 18 12.5523 18 12C18 11.4477 17.5523 11 17 11C16.4477 11 16 11.4477 16 12C16 12.5523 16.4477 13 17 13Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H17C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17Z" stroke="#FFFFFF" stroke-width="1.5"></path></svg></span>
|
||
|
|
<span id="wallpaper-credit-toggle-disabled"><?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#FFFFFF"><path d="M7 13C7.55228 13 8 12.5523 8 12C8 11.4477 7.55228 11 7 11C6.44772 11 6 11.4477 6 12C6 12.5523 6.44772 13 7 13Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H17C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17Z" stroke="#FFFFFF" stroke-width="1.5"></path></svg></span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="wallpaper-selector">
|
||
|
|
<div class="wallpaper-selector-header">
|
||
|
|
<p>Wallpapers</p>
|
||
|
|
<button>
|
||
|
|
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5"
|
||
|
|
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#FFFFFF">
|
||
|
|
<path
|
||
|
|
d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426"
|
||
|
|
stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="wallpapers-all">
|
||
|
|
<!-- <img src="https://ipx.sudovanilla.org/https://images.pexels.com/photos/2026454/pexels-photo-2026454.jpeg" />
|
||
|
|
<img src="https://ipx.sudovanilla.org/https://images.pexels.com/photos/1530212/pexels-photo-1530212.jpeg" />
|
||
|
|
<img src="https://ipx.sudovanilla.org/https://images.pexels.com/photos/1624497/pexels-photo-1624497.jpeg" /> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="center-area">
|
||
|
|
<div class="search">
|
||
|
|
<input autofocus onkeypress="if(event.keyCode == 13) {Search()}" placeholder="Search DuckDuckGo" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<!-- Functions -->
|
||
|
|
<script src="./functions/init.js"></script>
|
||
|
|
<script src="./functions/clock.js"></script>
|
||
|
|
<script src="./functions/toggles.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function Search() {
|
||
|
|
var SearchEngine = localStorage.getItem('search-engine')
|
||
|
|
var SearchValue = document.querySelector('.search input').value
|
||
|
|
location.href = `https://duckduckgo.com/?t=h_&q=${SearchValue}`
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background: black;
|
||
|
|
color: white;
|
||
|
|
font-family: Arial, Helvetica, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes StartUp {
|
||
|
|
from {
|
||
|
|
transform: scale(1.2);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-background img {
|
||
|
|
position: fixed;
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
filter: brightness(0.3);
|
||
|
|
z-index: -1;
|
||
|
|
pointer-events: none;
|
||
|
|
animation: 2.4s StartUp ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
#wallpaper-credit {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 6px;
|
||
|
|
left: 12px;
|
||
|
|
color: #bababa;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#wallpaper-credit a {
|
||
|
|
color: #bababa;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 24px;
|
||
|
|
right: 24px;
|
||
|
|
align-items: center;
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
#main-clock {
|
||
|
|
aspect-ratio: inherit;
|
||
|
|
min-height: 40px;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
padding: 0px;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.toolbar button {
|
||
|
|
color: white;
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
aspect-ratio: 1;
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 6px;
|
||
|
|
}
|
||
|
|
.toolbar svg {
|
||
|
|
stroke: gray;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar button:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar-popups>div {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 72px;
|
||
|
|
right: 24px;
|
||
|
|
border-radius: 6px;
|
||
|
|
backdrop-filter: blur(10px) brightness(0.7);
|
||
|
|
max-width: 300px;
|
||
|
|
padding: 6px 24px 24px 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.backgrounds-preview {
|
||
|
|
display: flex;
|
||
|
|
gap: 6px;
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
.backgrounds-preview img {
|
||
|
|
height: 60px;
|
||
|
|
width: 80px;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
select,
|
||
|
|
.wide-selector {
|
||
|
|
color: white;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background: transparent;
|
||
|
|
transition: 0.3s border;
|
||
|
|
border-radius: 6px;
|
||
|
|
border: 2px #474747 solid;
|
||
|
|
padding: 6px 12px;
|
||
|
|
gap: 12px;
|
||
|
|
cursor: pointer;
|
||
|
|
width: 100%;
|
||
|
|
min-height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
select:hover,
|
||
|
|
.wide-selector:hover {
|
||
|
|
border-color: #8e8e8e;
|
||
|
|
transition: 0.3s border;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wallpaper-selector {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 24px;
|
||
|
|
border-radius: 6px;
|
||
|
|
backdrop-filter: blur(10px) brightness(0.7);
|
||
|
|
max-width: 1200px;
|
||
|
|
padding: 6px 24px 24px 24px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%);
|
||
|
|
box-shadow: 0px 0px 100px 0px #171717;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wallpaper-selector-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wallpaper-selector-header button {
|
||
|
|
color: white;
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
aspect-ratio: 1;
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wallpaper-selector-header button:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
.wallpapers-all img {
|
||
|
|
width: 200px;
|
||
|
|
height: 132px;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggles {
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 6px 12px;
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 6px;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggles:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-area {
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%);
|
||
|
|
top: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search input {
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 3rem;
|
||
|
|
padding: 12px 24px;
|
||
|
|
backdrop-filter: blur(4px) brightness(0.7);
|
||
|
|
background: rgba(255, 255, 255, 0.25);
|
||
|
|
width: 500px;
|
||
|
|
transition: 0.3s width;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search input:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
</style>
|