-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6f7b665
commit 4d8e9c1
Showing
7 changed files
with
287 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| .cursor { | ||
| width: 20px; | ||
| height: 20px; | ||
| border: 2px solid #00a693; /* Teal green to represent the base of the feather */ | ||
| border-radius: 50%; | ||
| position: absolute; | ||
| transition-duration: 200ms; | ||
| transition-timing-function: ease-out; | ||
| animation: cursorAnim .5s infinite alternate; | ||
| pointer-events: none; | ||
| z-index: 1000; /* To ensure it's above other content */ | ||
| } | ||
|
|
||
| .cursor::after { | ||
| content: ""; | ||
| width: 20px; | ||
| height: 20px; | ||
| position: absolute; | ||
| border: 8px solid #0047ab; /* Deep blue to represent the vibrant color of a peacock feather */ | ||
| border-radius: 50%; | ||
| opacity: 0.5; | ||
| top: -8px; | ||
| left: -8px; | ||
| animation: cursorAnim2 .5s infinite alternate; | ||
| } | ||
|
|
||
| @keyframes cursorAnim { | ||
| from { | ||
| transform: scale(1); | ||
| } | ||
| to { | ||
| transform: scale(0.7); /* Mimicking the gentle movement of a feather */ | ||
| } | ||
| } | ||
|
|
||
| @keyframes cursorAnim2 { | ||
| from { | ||
| transform: scale(1); | ||
| } | ||
| to { | ||
| transform: scale(0.4); /* Smaller scale for a subtle effect */ | ||
| } | ||
| } | ||
|
|
||
| @keyframes cursorAnim3 { | ||
| 0% { | ||
| transform: scale(1); | ||
| } | ||
| 50% { | ||
| transform: scale(3); /* Mimic the feather floating away */ | ||
| border-color: #008080; /* A mix of green and blue for the mid-animation color */ | ||
| } | ||
| 100% { | ||
| transform: scale(1); | ||
| opacity: 0; /* Fade out like a feather drifting out of sight */ | ||
| } | ||
| } | ||
|
|
||
| .expand { | ||
| animation: cursorAnim3 .5s forwards; | ||
| border: 1px solid #00a693; /* Again, the teal green for consistency */ | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| const cursor = document.querySelector('.cursor'); | ||
|
|
||
| document.addEventListener('mousemove', e => { | ||
| cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;") | ||
| }) | ||
|
|
||
| document.addEventListener('click', () => { | ||
| cursor.classList.add("expand"); | ||
|
|
||
| setTimeout(() => { | ||
| cursor.classList.remove("expand"); | ||
| }, 500) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 10px; | ||
| padding: 10px; | ||
| } | ||
| h1 { | ||
| font-size: 1.4em; | ||
| } | ||
|
|
||
| .content { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .support, .more-extensions { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .support img { | ||
| height: 40px; /* Adjust based on your preference */ | ||
| } | ||
|
|
||
| .more-extensions a { | ||
| display: inline-block; | ||
| background-color: #40DCA5; /* Match Buy me a coffee button or choose a different color */ | ||
| color: #ffffff; | ||
| padding: 10px 15px; | ||
| text-decoration: none; | ||
| border-radius: 5px; | ||
| font-family: 'Cookie', cursive; /* Optional: Match Buy me a coffee font */ | ||
| } | ||
|
|
||
| .instructions { | ||
| background-color: #fff; /* Change as per your color theme */ | ||
| border: 1px solid #ddd; /* Light border for some definition */ | ||
| border-radius: 8px; /* Soften the edges */ | ||
| padding: 20px; /* Spacing inside the instructions box */ | ||
| margin: 10px 0; /* Spacing outside, to separate from other elements */ | ||
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow for depth */ | ||
| text-align: center; /* Center the text and button */ | ||
| } | ||
|
|
||
| .instructions p { | ||
| color: #333; /* Dark color for text for better readability */ | ||
| font-size: 14px; /* Adjust based on your preference */ | ||
| margin: 0 0 20px; /* Spacing below the paragraph */ | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Geeta Quote Daily</title> | ||
| <link rel="stylesheet" href="popup.css"> <!-- Ensure you have a popup.css file --> | ||
| </head> | ||
| <body> | ||
| <div class="content"> | ||
| <h1>Geeta Quote Daily</h1> | ||
| <!-- Your existing popup content here --> | ||
| <div class="instructions"> | ||
| <p>Open a new tab in Chrome to see today's Bhagavad Gita quote and start your day with wisdom and peace.</p> | ||
| </div> | ||
| <!-- Buy Me a Coffee Button --> | ||
| <div class="support"> | ||
| <a href="https://www.buymeacoffee.com/rohit.wadhwa" target="_blank"> | ||
| <img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=rohit.wadhwa&button_colour=40DCA5&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00" /> | ||
| </a> | ||
| </div> | ||
|
|
||
| <!-- Link to More Extensions --> | ||
| <div class="more-extensions"> | ||
| <a href="https://chrome.google.com/webstore/search/rohit%20wadhwa?hl=en-GB&authuser=0" target="_blank">Find more of my extensions here</a> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.