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 23, 2022
1 parent 98e98c6 commit 4d9f94b
Show file tree
Hide file tree
Showing 4 changed files with 249 additions and 31 deletions.
42 changes: 26 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,15 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="Sanay Nair">
<meta property="og:title" content="Sanay Nair">
<link rel="stylesheet" href="style.css">
<title>iPadOS in HTML</title>
</head>

<body>
<table id="table">
<table onmouse id="table">
<tr>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/app-store-2365235.svg" height="48"
width="48"></div>
<div id="" class="center"><img data-ccursor src="./36709/ios-icons/svg/app-store-2365235.svg"
height="48" width="48"></div>
<div class="center text">App Store</div>
</td>
<td>
Expand Down Expand Up @@ -120,21 +119,29 @@
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/my-shortcuts-1575945.svg" height="48"
width="48"></div>
<div class="center text">My Shortcuts</div>
<div class="center text">Shortcuts</div>
</td>
</tr>
</table>
<div id="app"></div>
<div class="center">
<div id="dock">
<img data-ccursor="lift" src="./36709/ios-icons/svg/app-store-2365235.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/apple-music-2365226.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/apple-store-1575941.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/apple-tv-1575940.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/news-2365224.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/notes-2365245.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/photos-2365244.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/podcasts-2365243.svg" height="48" width="48">
<span class="separator"></span>
<img data-ccursor="lift" src="./36709/ios-icons/svg/books-2365234.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/calculator-1575939.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/reminders-2365242.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/safari-2365241.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/settings-2365240.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/stocks-2365239.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/translate-2365238.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/voice-memos-1575942.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/wallet-2365237.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/weather-2365236.svg" height="48" width="48">
</div>
</h1>
<div data-ccursor id="home-bar"></div>
</div>
<div id="CC">
<div onclick="closeCC()" id="controlCenter">
<div>
Expand All @@ -152,20 +159,23 @@
</div>
</div>
<div onclick="openCC()" draggable="true" data-ccursor="noPadding" id="control-center-trig">
<img id="icon1" style="padding: 0 0px;height: 20px;transition: 0.5s;" src="wifi 2.svg" alt=""><span id="bD">100%</span>
<img id="icon1" style="padding: 0 0px;height: 20px;transition: 0.5s;" src="wifi 2.svg" alt=""><span
id="bD">100%</span>
<div id="icon2" class="centerIn" style="margin: 2px; transition: 0.5s;">
<div
style="display: inline-block;height: 11px; width: 22.5px; border-radius: 4px; border: 1px solid #fff8; padding: 1px;">
<div id="battery" style="height: 100%; width: 100%; background-color: #fff; border-radius: 2px;"></div>
style="display: inline-block;height: 11px; width: 20.5px; border-radius: 4px; border: 1px solid #fff8; padding: 1px;">
<div id="battery" style="height: 100%; width: 100%; background-color: #fff; border-radius: 2px;">
</div>
</div>
<div
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 22px;margin-right: -3px;">
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;">
</div>
</div>
</div>
</body>
<link href="lib/style.css?0705114f45538bdfddf2" rel="stylesheet">
<script src="lib/main.1b3cb8da41fa378dcfd7.js?0705114f45538bdfddf2"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

</html>
130 changes: 130 additions & 0 deletions index1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="Pavel Laptev">
<meta property="og:title" content="Pavel Laptev">
<meta property="og:image"
content="https://raw.githubusercontent.com/PavelLaptev/context-cursor/master/preview/assets/og-preview.png">
<meta property="og:url" content="https://pavellaptev.github.io/context-cursor/">
<meta property="og:description"
content="An experimental cursor that takes the shape of the hovered element inspired by iPad poineter.">
<link rel="icon" href="lib/ico-16x16.png?0705114f45538bdfddf2">
<link href="lib/style.css?0705114f45538bdfddf2" rel="stylesheet">
</head>

<body>
<div class="wrap">
<section class="navigation"><a href="https://medium.com/@PavelLaptev/ipad-pointer-on-the-web-f3aaf48d515c"
target="_blank" class="btn-transparent" data-ccursor title="Article on Medium"><i class="btn-icon"><svg
fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.348 3.555C0 5.573 0 8.382 0 14s0 8.427 1.348 10.445a8 8 0 002.207 2.207C5.573 28 8.382 28 14 28s8.427 0 10.445-1.348a8.001 8.001 0 002.207-2.207C28 22.427 28 19.618 28 14s0-8.427-1.348-10.445a8 8 0 00-2.207-2.207C22.427 0 19.618 0 14 0S5.573 0 3.555 1.348a8 8 0 00-2.207 2.207zm23.5 17.893v.33h-8.54v-.33l1.759-1.535c.173-.156.173-.202.173-.44v-8.907l-4.89 11.175h-.662L6.994 10.566v7.49a.975.975 0 00.316.86l2.288 2.496v.329H3.111v-.33L5.4 18.917a.934.934 0 00.294-.86v-8.66a.724.724 0 00-.273-.641L3.386 6.552v-.33H9.7l4.88 9.63 4.291-9.63h6.019v.33L23.15 8.05a.437.437 0 00-.194.44V19.51a.437.437 0 00.194.44l1.697 1.498z" />
</svg> </i></a><a href="https://github.com/PavelLaptev/context-cursor" target="_blank"
class="btn-transparent" data-ccursor title="GitHub Repository"><i class="btn-icon"><svg fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 0C6.265 0 0 6.423 0 14.354c0 6.352 4.008 11.717 9.572 13.619.7.125.963-.305.963-.682 0-.341-.018-1.471-.018-2.674-3.517.664-4.427-.879-4.707-1.686-.157-.413-.84-1.687-1.435-2.028-.49-.269-1.19-.933-.018-.95 1.103-.019 1.89 1.04 2.153 1.47 1.26 2.172 3.273 1.562 4.078 1.185.122-.933.49-1.561.892-1.92-3.115-.359-6.37-1.597-6.37-7.087 0-1.562.542-2.853 1.435-3.858-.14-.359-.63-1.83.14-3.804 0 0 1.173-.377 3.85 1.471a12.69 12.69 0 013.5-.484c1.19 0 2.38.161 3.5.484 2.677-1.866 3.85-1.471 3.85-1.471.77 1.974.28 3.445.14 3.804.893 1.005 1.435 2.279 1.435 3.857 0 5.509-3.273 6.729-6.387 7.088.507.448.944 1.31.944 2.655 0 1.92-.017 3.463-.017 3.948 0 .377.262.825.962.682C23.992 26.07 28 20.688 28 14.354 28 6.424 21.735 0 14 0z" />
</svg> </i></a><a href="https://pavellaptev.github.io/" target="_blank" class="btn-transparent"
data-ccursor title="My Website"><i class="btn-icon btn-icon-ava"></i></a>
<a href="#" class="btn-colormode" id="darkmode-button" data-ccursor title="Switch color modes"><span>Dark
Mode</span> <i class="btn-icon">
<div class="moon-icon" id="moon-icon"></div>
</i></a></section>
<section class="title">
<h1 class="title-header">context cursor</h1>
<h3 class="title-subheader">A cursor that takes the shape of the hovered element. Inspired by <a
href="https://developer.apple.com/videos/play/wwdc2020/10640" data-ccursor target="_blank">iPad
Pointer</a>.</h3>
</section>
<hr>
<section class="section">
<h2>Demo</h2>
<div class="preview">
<div class="btn-wrap"><a href="#" class="btn-primary" data-ccursor><span>Parallax button</span></a> <a
href="#" class="btn-transparent" data-ccursor><i class="btn-icon"><svg fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 0C6.265 0 0 6.423 0 14.354c0 6.352 4.008 11.717 9.572 13.619.7.125.963-.305.963-.682 0-.341-.018-1.471-.018-2.674-3.517.664-4.427-.879-4.707-1.686-.157-.413-.84-1.687-1.435-2.028-.49-.269-1.19-.933-.018-.95 1.103-.019 1.89 1.04 2.153 1.47 1.26 2.172 3.273 1.562 4.078 1.185.122-.933.49-1.561.892-1.92-3.115-.359-6.37-1.597-6.37-7.087 0-1.562.542-2.853 1.435-3.858-.14-.359-.63-1.83.14-3.804 0 0 1.173-.377 3.85 1.471a12.69 12.69 0 013.5-.484c1.19 0 2.38.161 3.5.484 2.677-1.866 3.85-1.471 3.85-1.471.77 1.974.28 3.445.14 3.804.893 1.005 1.435 2.279 1.435 3.857 0 5.509-3.273 6.729-6.387 7.088.507.448.944 1.31.944 2.655 0 1.92-.017 3.463-.017 3.948 0 .377.262.825.962.682C23.992 26.07 28 20.688 28 14.354 28 6.424 21.735 0 14 0z" />
</svg></i></a></div>
</div>
<div class="preview preview_last">
<div class="btn-wrap"><a href="#" class="btn-primary" data-ccursor="lift"><span>Lift button</span></a>
<a href="#" class="btn-transparent" data-ccursor="lift"><i class="btn-icon"><svg fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 0C6.265 0 0 6.423 0 14.354c0 6.352 4.008 11.717 9.572 13.619.7.125.963-.305.963-.682 0-.341-.018-1.471-.018-2.674-3.517.664-4.427-.879-4.707-1.686-.157-.413-.84-1.687-1.435-2.028-.49-.269-1.19-.933-.018-.95 1.103-.019 1.89 1.04 2.153 1.47 1.26 2.172 3.273 1.562 4.078 1.185.122-.933.49-1.561.892-1.92-3.115-.359-6.37-1.597-6.37-7.087 0-1.562.542-2.853 1.435-3.858-.14-.359-.63-1.83.14-3.804 0 0 1.173-.377 3.85 1.471a12.69 12.69 0 013.5-.484c1.19 0 2.38.161 3.5.484 2.677-1.866 3.85-1.471 3.85-1.471.77 1.974.28 3.445.14 3.804.893 1.005 1.435 2.279 1.435 3.857 0 5.509-3.273 6.729-6.387 7.088.507.448.944 1.31.944 2.655 0 1.92-.017 3.463-.017 3.948 0 .377.262.825.962.682C23.992 26.07 28 20.688 28 14.354 28 6.424 21.735 0 14 0z" />
</svg></i></a>
</div>
</div>
</section>
<section class="section">
<h2>Usage</h2>
<h3>Default Setup</h3>
<p>Copy the module into your project. In order to make the cursor works — you need to add a data tag
<b>`data-ccursor`</b> to the HTML element on which you want to use the cursor and run the function in
your JS.
</p>
<div class="codepreview"><code
class="code"><span class="code-file">*.HTML </span><span>&lt;button data-ccursor&gt;Button&lt;/button&gt; </span><span class="code-file">*.JS </span><span>contextCursor();</span></code>
<div class="preview">
<div class="btn-wrap"><a href="#" class="btn-primary" data-ccursor><span>Parallax button</span></a>
<a href="#" class="btn-transparent" data-ccursor><i class="btn-icon"><svg fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 0C6.265 0 0 6.423 0 14.354c0 6.352 4.008 11.717 9.572 13.619.7.125.963-.305.963-.682 0-.341-.018-1.471-.018-2.674-3.517.664-4.427-.879-4.707-1.686-.157-.413-.84-1.687-1.435-2.028-.49-.269-1.19-.933-.018-.95 1.103-.019 1.89 1.04 2.153 1.47 1.26 2.172 3.273 1.562 4.078 1.185.122-.933.49-1.561.892-1.92-3.115-.359-6.37-1.597-6.37-7.087 0-1.562.542-2.853 1.435-3.858-.14-.359-.63-1.83.14-3.804 0 0 1.173-.377 3.85 1.471a12.69 12.69 0 013.5-.484c1.19 0 2.38.161 3.5.484 2.677-1.866 3.85-1.471 3.85-1.471.77 1.974.28 3.445.14 3.804.893 1.005 1.435 2.279 1.435 3.857 0 5.509-3.273 6.729-6.387 7.088.507.448.944 1.31.944 2.655 0 1.92-.017 3.463-.017 3.948 0 .377.262.825.962.682C23.992 26.07 28 20.688 28 14.354 28 6.424 21.735 0 14 0z" />
</svg></i></a>
</div>
</div>
</div>
</section>
<section class="section">
<h3>Effects</h3>
<p>There are two basic effects — <b>Morph</b> (default) and <b>Lift</b>. If you want to use Lift effect just
add it to the data-ccursor attribute.</p>
<div class="codepreview"><code
class="code"><span class="code-file">*.HTML — DEFAULT PARALLAX </span><span>&lt;button data-ccursor&gt;Button&lt;/button&gt; </span><span class="code-file">*.HTML — LIFT </span><span>&lt;button data-ccursor=<b>”lift”</b>&gt;Button&lt;/button&gt;</span></code>
<div class="preview">
<div class="btn-wrap"><a href="#" class="btn-primary" data-ccursor><span>Parallax</span></a> <a
href="#" class="btn-primary" data-ccursor="lift"><span>Lift</span></a></div>
</div>
</div>
</section>
<section class="section">
<h3>Local settings</h3>
<p>You can disable parallax and paddings effects only for certain elements if you add <b>`noParallax`</b>
and <b>`noPadding`</b> to the <b>`data-ccursor`</b> attribute. You can combine these two props.</p>
<div class="codepreview"><code
class="code"><span class="code-file">*.HTML — DEFAULT PARALLAX </span><span>&lt;button data-ccursor&gt;Button&lt;/button&gt; </span><span class="code-file">*.HTML — LIFT </span><span>&lt;button data-ccursor=<b>”lift”</b>&gt;Button&lt;/button&gt;</span></code>
<div class="preview">
<div class="btn-wrap"><a href="#" class="btn-primary" data-ccursor="noParallax"><span>No
parallax</span></a> <a href="#" class="btn-primary" data-ccursor="noPadding"><span>No
padding</span></a></div>
</div>
</div>
</section>
<section class="section">
<h3>Global settings</h3>
<p>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.</p>
<div class="codepreview"><code
class="code"><span class="code-file">*.JS </span><span>contextCursor({<br>  radius: 20, //will change the radius/size of the cursor<br>  transitionSpeed: 0.2, //To change thee cursor speed<br>  parallaxIndex: 16, //how vv cvv you want to shift elements<br>  hoverPadding: 6, //will change the cursor padding around target element<br>});</span></code>
</div>
</section>
<section class="section">
<h3>Change styles</h3>
<p>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 <b>`c-cursor_active`</b> class to the
cursor.</p>
<div class="codepreview"><code
class="code"><span class="code-file">*.CSS — CURSOR STYLES </span><span>:root {<br>  --main-cursor-clr: rgb(0, 0, 0, 0.2);<br>  --main-cursor-hover-clr: rgb(0, 0, 0, 0.07);<br>  --ghost-shadow: 0 7px 15px rgba(0, 0, 0, 0.14);<br>}<br><br>body {<br>  margin: 0;<br>  padding: 0;<br>}<br><br>.c-cursor {<br>  position: fixed;<br>  z-index: 9999;<br>  pointer-events: none;<br>  border-radius: 200px;<br>  background-color: var(--main-cursor-clr);<br>}</span></code>
</div>
</section>
</div>
<script src="lib/main.1b3cb8da41fa378dcfd7.js?0705114f45538bdfddf2"></script>
</body>

</html>
Loading

0 comments on commit 4d9f94b

Please sign in to comment.