From 4d9f94b9afe34956e9d93b1cfe7c753a5161af2f Mon Sep 17 00:00:00 2001 From: GoldenGo <101265437+GoldenGoCoding@users.noreply.github.com> Date: Tue, 23 Aug 2022 21:12:00 +0400 Subject: [PATCH] Add files via upload --- index.html | 42 ++++++++++------- index1.html | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 55 ++++++++++++++++++++-- style.css | 53 +++++++++++++++++---- 4 files changed, 249 insertions(+), 31 deletions(-) create mode 100644 index1.html diff --git a/index.html b/index.html index d355adb..328328f 100644 --- a/index.html +++ b/index.html @@ -7,16 +7,15 @@ - iPadOS in HTML - +
-
+
App Store
 @@ -120,21 +119,29 @@
-
My Shortcuts
+
Shortcuts
+
- - - - + + + + - - + + + + + + + +
- +
+
@@ -152,20 +159,23 @@
- 100% + 100%
-
+ style="display: inline-block;height: 11px; width: 20.5px; border-radius: 4px; border: 1px solid #fff8; padding: 1px;"> +
+
+ style="display: inline-block;height: 4px; width: 1px; background-color: #fff8; border-top-left-radius: 0;border-top-right-radius: 100px;border-bottom-left-radius: 0;border-bottom-right-radius: 100px;position: fixed;margin: 3.5px 20px;margin-right: -3px;">
+ \ No newline at end of file diff --git a/index1.html b/index1.html new file mode 100644 index 0000000..b9a0899 --- /dev/null +++ b/index1.html @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + +
+
+ + + + + Dark + Mode +
+
+
+

context cursor

+

A cursor that takes the shape of the hovered element. Inspired by iPad + Pointer.

+
+
+
+

Demo

+
+
Parallax button + +
+
+
+
Lift button + + + +
+
+
+
+

Usage

+

Default Setup

+

Copy the module into your project. In order to make the cursor works — you need to add a data tag + `data-ccursor` to the HTML element on which you want to use the cursor and run the function in + your JS. +

+
*.HTML <button data-ccursor>Button</button> *.JS contextCursor(); +
+
Parallax button + + + +
+
+
+
+
+

Effects

+

There are two basic effects — Morph (default) and Lift. If you want to use Lift effect just + add it to the data-ccursor attribute.

+
*.HTML — DEFAULT PARALLAX <button data-ccursor>Button</button> *.HTML — LIFT <button data-ccursor=”lift”>Button</button> +
+
Parallax Lift
+
+
+
+
+

Local settings

+

You can disable parallax and paddings effects only for certain elements if you add `noParallax` + and `noPadding` to the `data-ccursor` attribute. You can combine these two props.

+
*.HTML — DEFAULT PARALLAX <button data-ccursor>Button</button> *.HTML — LIFT <button data-ccursor=”lift”>Button</button> +
+
No + parallax No + padding
+
+
+
+
+

Global settings

+

Global settings are settings that will affect all target elements and the cursor itself. You can adjust — + cursor size, cursor speed, parallax shift index on hover, and paddings on hover.

+
*.JS contextCursor({
  radius: 20, //will change the radius/size of the cursor
  transitionSpeed: 0.2, //To change thee cursor speed
  parallaxIndex: 16, //how vv cvv you want to shift elements
  hoverPadding: 6, //will change the cursor padding around target element
}); +
+
+
+

Change styles

+

Cursor styles are written as CSS variables in the root directory, so you can easily overwrite them. Also, + you can change the cursor active style — hover event will add `c-cursor_active` class to the + cursor.

+
*.CSS — CURSOR STYLES :root {
  --main-cursor-clr: rgb(0, 0, 0, 0.2);
  --main-cursor-hover-clr: rgb(0, 0, 0, 0.07);
  --ghost-shadow: 0 7px 15px rgba(0, 0, 0, 0.14);
}

body {
  margin: 0;
  padding: 0;
}

.c-cursor {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 200px;
  background-color: var(--main-cursor-clr);
} +
+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js index dc852c9..3de3c2d 100644 --- a/script.js +++ b/script.js @@ -6,6 +6,7 @@ var icon1 = document.getElementById('icon1'); var icon2 = document.getElementById('icon2').style; var body = document.getElementById('table').style; var dock = document.getElementById('dock').style; +var homeBar = document.getElementById('home-bar'); var batteryDisplay = document.getElementById('bD'); var batteryDisplay2 = document.getElementById('battery').style; var appGrid = document.getElementById('table').style; @@ -47,15 +48,59 @@ function closeCC() { navigator.getBattery().then(function(battery) { battery.addEventListener('levelchange', function() { // Do stuff when the level changes, you can get it - // from battery.level - batteryPercentage = Math.floor(battery.level*100); - batteryDisplay.innerHTML = `${batteryPercentage}%`; + + batteryPercentage = Math.round(battery.level*100); + batteryDisplay.innerHTML = `${batteryPercentage}%`; // from battery.level batteryDisplay2.width = `${batteryPercentage}%`; icon1.src = `wifi ${wifiSignal}.svg`; }) - batteryPercentage = Math.floor(battery.level*100); + batteryPercentage = Math.round(battery.level*100); batteryDisplay.innerHTML = `${batteryPercentage}%`; batteryDisplay2.width = `${batteryPercentage}%`; icon1.src = `wifi ${wifiSignal}.svg`; }); -appGrid.height = `${height - parseFloat(dock.height)}px`; \ No newline at end of file + +var app = document.getElementById('app').style; + +appGrid.height = `${height - parseFloat(dock.height)}px`; + +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'; + 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'; + }); + }); +}); +function delay(milliseconds) { + return new Promise(resolve => setTimeout(resolve, milliseconds)); +} \ No newline at end of file diff --git a/style.css b/style.css index 8fd2ce0..5fc11aa 100644 --- a/style.css +++ b/style.css @@ -38,11 +38,6 @@ html { height: 72.5px; } -table img { - margin: px; - border-radius: 10px; -} - #dock img { margin: 10px; border-radius: 10px; @@ -58,6 +53,8 @@ table * { table img { border: none; + margin: 0; + border-radius: 10px; } table { @@ -67,10 +64,6 @@ table { transition: 0.5s cubic-bezier(0, 0, 0.03, 0.95); } -table::selection { - background-color: transparent; -} - div.center { display: flex; justify-content: center; @@ -131,7 +124,7 @@ div.centerIn { padding: 40px; top: -100%; opacity: 1; - border-radius: 20px; + border-radius: 21px; } .controls-2-2 { @@ -168,4 +161,44 @@ div.centerIn { background-color: #2228; 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; +} +#home-bar { + width: calc(100% / 4); + height: 5px; + background-color: #fffa; + backdrop-filter: invert(1) blur(30px) contrast(10000); + position: fixed; + bottom: -10px; + border-radius: 5px; + transition: 0.5s cubic-bezier(0, 0, 0.03, 0.95); } \ No newline at end of file