Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@GoldenGoCoding
GoldenGoCoding authored Aug 24, 2022
1 parent 4d9f94b commit 203feb1
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 76 deletions.
18 changes: 15 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</head>

<body>
<table onmouse id="table">
<table id="table">
<tr>
<td>
<div id="" class="center"><img data-ccursor src="./36709/ios-icons/svg/app-store-2365235.svg"
Expand Down Expand Up @@ -41,9 +41,9 @@
<div class="center text">Books</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/calculator-1575939.svg" height="48"
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/news-2365224.svg" height="48"
width="48"></div>
<div class="center text">Calculator</div>
<div class="center text">News</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/calendar-2365233.svg" height="48"
Expand Down Expand Up @@ -145,6 +145,18 @@
<div id="CC">
<div onclick="closeCC()" id="controlCenter">
<div>
<div id="top" onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
<div onclick="openCC()" data-ccursor="lift" class="controls-2-2"></div>
</div>
Expand Down
157 changes: 104 additions & 53 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

var CC = document.getElementById('controlCenter').style;
var CoCe = document.getElementById('CC').style;
var CoCe = document.getElementById('CC');
var trig = document.getElementById('control-center-trig').style;
var icon1 = document.getElementById('icon1');
var icon2 = document.getElementById('icon2').style;
Expand All @@ -11,6 +11,18 @@ var batteryDisplay = document.getElementById('bD');
var batteryDisplay2 = document.getElementById('battery').style;
var appGrid = document.getElementById('table').style;
var height = window.innerHeight;
var app = document.getElementById('app');

// apps source code goes here!!
var findMy = `
<h1>Find My!!</h1>
`;
var files = `
<h1>Files!!</h1>
`;
var notFound = `
<h1>Sorry this app is empty</h1>
`;

var batteryPercentage = 100;
var wifiSignal = 2;
Expand All @@ -19,87 +31,126 @@ var wifiSignal = 2;

function openCC() {
CC.top = '0';
CoCe.opacity = '1';
CoCe.zIndex = '0';
CoCe.backdropFilter = 'blur(10px)';
CoCe.style.opacity = '1';
CoCe.style.zIndex = '0';
CoCe.style.backdropFilter = 'blur(10px)';
body.transform = 'scale(0.9)';
dock.transform = 'scale(0.8)';
trig.margin = '15px 20px';
dock.transform = 'scale(0.9)';
app.transform = 'scale(0.9)';
trig.padding = '20px 20px';
trig.width = '275px';
batteryDisplay.style.fontWeight = '900';
batteryDisplay.style.fontSize = '15px';
icon1.style.height = '30px';
icon2.transform = 'scale(1.4)';
icon2.margin = '6px';
}
CoCe.addEventListener('wheel', async function () {
await delay(100);
if (document.getElementById('top').getBoundingClientRect().y < 0) {
trig.backdropFilter = 'blur(20px)';
trig.borderBottom = '1px #fff2 solid';
trig.borderRadius = '0px';
}
else {
trig.backdropFilter = '';
trig.borderBottom = '';
trig.borderRadius = '4px';
}
});
function closeCC() {
CC.top = '-100%';
CoCe.opacity = '0';
CoCe.zIndex = '-1';
CoCe.style.opacity = '0';
CoCe.style.zIndex = '-1';
body.transform = 'scale(1)';
dock.transform = 'scale(1)';
app.transform = 'scale(1)';
trig.padding = '0';
trig.margin = '0';
trig.width = '';
trig.backdropFilter = '';
trig.borderBottom = '';
trig.borderRadius = '4px';
batteryDisplay.style.fontWeight = '500';
batteryDisplay.style.fontSize = '11px';
icon1.style.height = '20px';
icon2.transform = 'scale(1)';
icon2.margin = '2px';
}

navigator.getBattery().then(function(battery) {
battery.addEventListener('levelchange', function() {
// Do stuff when the level changes, you can get it

batteryPercentage = Math.round(battery.level*100);
batteryDisplay.innerHTML = `${batteryPercentage}%`; // from battery.level
batteryDisplay2.width = `${batteryPercentage}%`;
icon1.src = `wifi ${wifiSignal}.svg`;
navigator.getBattery().then(function (battery) {
battery.addEventListener('levelchange', function () {
batteryPercentage = Math.round(battery.level * 100);
batteryDisplay.innerHTML = `${batteryPercentage}%`;
batteryDisplay2.width = `${batteryPercentage}%`;
icon1.src = `wifi ${wifiSignal}.svg`;
})
batteryPercentage = Math.round(battery.level*100);
batteryPercentage = Math.round(battery.level * 100);
batteryDisplay.innerHTML = `${batteryPercentage}%`;
batteryDisplay2.width = `${batteryPercentage}%`;
icon1.src = `wifi ${wifiSignal}.svg`;
});

var app = document.getElementById('app').style;

appGrid.height = `${height - parseFloat(dock.height)}px`;
document.querySelectorAll('img').forEach(function (a, key) {
if (a == icon1) { } else {


document.querySelectorAll('img').forEach(function(a, key) {
a.addEventListener('click', async function() {
var rect = a.getBoundingClientRect();
app.display = 'block';
app.transition = '0.4s cubic-bezier(0, 0, 0, 1)';
app.position = 'fixed';
app.height = '48px';
app.width = '48px';
app.borderRadius = '12px';
app.top = `${rect.y}px`;
app.left = `${rect.x}px`;
await delay();
app.height = '100%';
app.width = '100%';
app.borderRadius = '20px';
app.top = `0`;
app.left = `0`;
app.transition = '0';
dock.bottom = '-100px';
homeBar.style.bottom = '10px';
homeBar.addEventListener('click', async function() {
app.transition = '0.4s cubic-bezier(0, 0, 0, 1)';
app.position = 'fixed';
a.addEventListener('click', async function () {

var rect = a.getBoundingClientRect();
app.style.display = 'block';
app.style.transition = '0.4s cubic-bezier(0, 0, 0, 1)';
app.style.position = 'fixed';
app.style.height = '48px';
app.style.width = '48px';
app.style.borderRadius = '12px';
app.style.top = `${rect.y}px`;
app.style.left = `${rect.x}px`;
await delay();
app.height = '48px';
app.width = '48px';
app.borderRadius = '12px';
app.top = `${rect.y}px`;
app.left = `${rect.x}px`;
app.transition = '0';
dock.bottom = '15px';
homeBar.style.bottom = '-10px';
await delay(500);
app.display = 'none';
app.style.height = '100%';
app.style.width = '100%';
app.style.borderRadius = '20px';
app.style.top = `0`;
app.style.left = `0`;
app.style.transition = '0';
dock.bottom = '-100px';
homeBar.style.bottom = '5px';


homeBar.addEventListener('mouseover', async function () {
await delay(500);
dock.bottom = '15px';
homeBar.onmouseleave = async function () {
await delay(1000);
dock.bottom = '-100px';
};
homeBar.onclick = async function () {
homeBar.onmouseleave = null;
app.style.transition = '0.4s cubic-bezier(0, 0, 0, 1)';
app.style.position = 'fixed';
await delay();
closeCC();
app.style.height = '48px';
app.style.width = '48px';
app.style.borderRadius = '12px';
app.style.top = `${rect.y}px`;
app.style.left = `${rect.x}px`;
app.style.transition = '0';
dock.bottom = '15px';
homeBar.style.bottom = '-10px';
await delay(360);
app.style.display = 'none';
};
});
if (a.src === './36709/ios-icons/svg/files-2365229.svg') {
app.innerHTML = files;
}
if (a.src === './36709/ios-icons/svg/find-my-1575949.svg') {
app.innerHTML = findMy;
}
});
});
}
});
function delay(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
Expand Down
65 changes: 45 additions & 20 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ body {
position: fixed;
height: 100%;
width: 100%;
background-attachment:local;
background-attachment: local;
background-size: cover;
background-position: center;
justify-content: center;
Expand Down Expand Up @@ -86,7 +86,7 @@ div.centerIn {
#control-center-trig {
position: fixed;
top: 0;
right: 15px;
right: 20px;
height: 20px;
z-index: 1;
background-color: transparent;
Expand All @@ -108,7 +108,7 @@ div.centerIn {
backdrop-filter: blur(0px);
padding: 20px;
top: 0;
opacity: 1;
opacity: 0;
border-radius: 20px;
}

Expand All @@ -125,6 +125,7 @@ div.centerIn {
top: -100%;
opacity: 1;
border-radius: 21px;
overflow-y: scroll;
}

.controls-2-2 {
Expand Down Expand Up @@ -162,36 +163,24 @@ div.centerIn {
border-radius: 12px;
backdrop-filter: blur(30px) saturate(2);
}

#home-widgets {
width: 100px;
height: 100%;
display: inline;
}

.right {
display: flex;
justify-content: right;
}
.c-cursor {
position: fixed;
z-index: 2;
pointer-events: none;
border-radius: 200px;
background-color: #fff9;
transition: background-color 0.2s ease-in-out;
}

.c-cursor_active {
background-color: var(--main-cursor-hover-clr);
backdrop-filter: none;
}

.c-cursor-lift_active {
background-color: rgba(0,0,0,0);
backdrop-filter: none;
}
#app {
background: #000;
display: none;
overflow: hidden;
}

#home-bar {
width: calc(100% / 4);
height: 5px;
Expand All @@ -201,4 +190,40 @@ div.centerIn {
bottom: -10px;
border-radius: 5px;
transition: 0.5s cubic-bezier(0, 0, 0.03, 0.95);
z-index: 2;
}

.c-cursor {
position: fixed;
z-index: 2;
pointer-events: none;
border-radius: 200px;
background-color: #fff9;
backdrop-filter: invert(1) saturate(0);
opacity: 0.5;
transition: background-color 0.2s ease-in-out;
}

.c-cursor_active {
background-color: #fffa;
opacity: 0.5;
backdrop-filter: none;
}

.c-cursor-lift_active {
background-color: #fff9;
backdrop-filter: invert(1) saturate(0);
opacity: 0.5;
backdrop-filter: none;
}
@media (prefers-color-scheme: light) {
body {
background-image: url('./light.png');
}
#dock {
background-color: #fff8;
}
#app {
background: #fff;
}
}

0 comments on commit 203feb1

Please sign in to comment.