-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of https://github.com/alligatorjazz/AstrologyClock
- Loading branch information
Showing
4 changed files
with
210 additions
and
85 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 @@ | ||
| .vite |
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,80 @@ | ||
| body { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| #webring { | ||
| position: absolute; | ||
| z-index: 10; | ||
| bottom: 0; | ||
| right: 0; | ||
| width: 100vw; | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| transition: all 350ms, opacity 5s; | ||
| } | ||
|
|
||
| #webring > * { | ||
| transition: all 350ms; | ||
| } | ||
|
|
||
|
|
||
| #webring > button { | ||
| transform-origin: 50% 50%; | ||
| background-color: transparent; | ||
| border: none; | ||
| padding: 16px 0; | ||
|
|
||
| } | ||
|
|
||
| #webring > button > img { | ||
| filter: invert(); | ||
| scale: 1.5; | ||
| rotate: 180deg; | ||
| } | ||
|
|
||
| #webring > iframe { | ||
| border: 0; | ||
| position: fixed; | ||
| transform: translateY(100%); | ||
| } | ||
|
|
||
| @keyframes bounce { | ||
| 0% {transform: translateY(0%);} | ||
| 75% {transform: translateY(10%);} | ||
| 100% {transform: translateY(0%);} | ||
| } | ||
|
|
||
|
|
||
| #webring.disabled { | ||
| pointer-events: none; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| #webring.nudge > button { | ||
| animation: bounce 1s ease-in-out infinite; | ||
| } | ||
|
|
||
| #webring.enabled { | ||
| bottom: 2rem; | ||
| } | ||
|
|
||
| #webring.enabled > button > img { | ||
| rotate: 0deg; | ||
| } | ||
|
|
||
| #webring.enabled > button { | ||
| transform: translateY(-125%); | ||
| } | ||
|
|
||
| #webring.enabled > iframe { | ||
| transform: translateY(0%); | ||
| } | ||
|
|
||
| @media (min-width: 600px) { | ||
| #webring { | ||
| width: 30%; | ||
| } | ||
| } |
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,24 @@ | ||
| // states: disabled, nudge, enabled, idle | ||
| const webring = document.getElementById("webring"); | ||
| const button = webring.querySelector("button"); | ||
|
|
||
| setTimeout(() => { | ||
| webring.className = "nudge"; | ||
| }, 1000); | ||
|
|
||
| button.addEventListener("pointerdown", () => { | ||
| console.log("clicked") | ||
| switch (webring.className) { | ||
| case "disabled": | ||
| case "nudge": | ||
| case "idle": | ||
| webring.className = "enabled"; | ||
| break; | ||
| case "enabled": | ||
| webring.className = "idle"; | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
| }); | ||
|
|
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 |
|---|---|---|
| @@ -1,88 +1,108 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Astrology Clock</title> | ||
| <meta charset="utf-8" /> | ||
| <link rel="preload" type="font/ttf" href="Astro.TTF" as="font" /> | ||
| <link rel="stylesheet" type="text/css" href="style.css" /> | ||
| <script data-ad-client="ca-pub-3634678835900463" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | ||
| <!-- Google tag (gtag.js) --> | ||
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-M7LNKLRXP3"></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag(){dataLayer.push(arguments);} | ||
| gtag('js', new Date()); | ||
|
|
||
| gtag('config', 'G-M7LNKLRXP3'); | ||
| </script> | ||
| </head> | ||
| <style> | ||
| canvas { | ||
| position: absolute; | ||
| } | ||
| #time-layer { | ||
| z-index: 5; | ||
| } | ||
| #sign-layer { | ||
| z-index: 4; | ||
| } | ||
| #inner-face-layer { | ||
| z-index: 3; | ||
| } | ||
| #outer-face-layer { | ||
| z-index: 2; | ||
| } | ||
| #background-layer { | ||
| z-index: 1; | ||
| } | ||
| </style> | ||
| <body id="main-body"> | ||
| <!-- initially hidden right-click menu --> | ||
| <div id="menu" class="menu"> | ||
| <ul class="menu-options"> | ||
| <li id="tick_every_second" class="menu-option">Tick Every Second</li> | ||
| <li id="show_moon_phases" class="menu-option">Show Moon Phases</li> | ||
| <li id="show_horizon" class="menu-option">Show Horizon</li> | ||
| <li id="auto_dark_mode" class="menu-option">Auto Dark Mode</li> | ||
| <li id="dark_mode" class="menu-option">Dark Mode</li> | ||
| <hr /> | ||
| <li id="sun" class="menu-option">Show Sun</li> | ||
| <li id="moon" class="menu-option">Show Moon</li> | ||
| <li id="mercury" class="menu-option">Show Mercury</li> | ||
| <li id="venus" class="menu-option">Show Venus</li> | ||
| <li id="mars" class="menu-option">Show Mars</li> | ||
| <li id="saturn" class="menu-option">Show Saturn</li> | ||
| <li id="jupiter" class="menu-option">Show Jupiter</li> | ||
| <li id="uranus" class="menu-option">Show Uranus</li> | ||
| <li id="neptune" class="menu-option">Show Neptune</li> | ||
| <li id="pluto" class="menu-option">Show Pluto</li> | ||
| <hr /> | ||
| <li id="chiron" class="menu-option">Show Chiron</li> | ||
| <li id="lilith" class="menu-option">Show Lilith</li> | ||
| <li id="asc_node" class="menu-option">Show Ascending Lunar Node</li> | ||
| <hr /> | ||
| <li id="midheaven" class="menu-option">Show Midheaven</li> | ||
| <li id="ascendant" class="menu-option">Show Ascendant</li> | ||
| <hr /> | ||
| <li id="part_fortune" class="menu-option">Show Part of Fortune</li> | ||
| <li id="part_spirit" class="menu-option">Show Part of Spirit</li> | ||
| <li id="part_eros" class="menu-option">Show Part of Eros</li> | ||
| </ul> | ||
| </div> | ||
| <div id="info" class="info"> | ||
| Right-click for options | ||
| </div> | ||
| <div class="font_preload" style="opacity: 0"> | ||
| <span style="font-family: Astro, Arial, sans-serif;"></span> | ||
| </div> | ||
| <canvas id="time-layer"></canvas> | ||
| <canvas id="sign-layer"></canvas> | ||
| <canvas id="inner-face-layer"></canvas> | ||
| <canvas id="outer-face-layer"></canvas> | ||
| <canvas id="background-layer"></canvas> | ||
| <script src='https://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script> | ||
| <script src='jquery.longclick-min.js' type='text/javascript'></script> | ||
| <script src="ephemeris-1.2.1.bundle.js" type="text/javascript"></script> | ||
| <script src="clock.js" type="text/javascript"></script> | ||
| </body> | ||
| </html> | ||
| <head> | ||
| <title>Astrology Clock</title> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <link rel="preload" type="font/ttf" href="Astro.TTF" as="font" /> | ||
| <link rel="stylesheet" type="text/css" href="style.css" /> | ||
| <link rel="stylesheet" type="text/css" href="fts.css" /> | ||
|
|
||
| <script data-ad-client="ca-pub-3634678835900463" async | ||
| src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | ||
| <!-- Google tag (gtag.js) --> | ||
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-M7LNKLRXP3"></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag() { dataLayer.push(arguments); } | ||
| gtag('js', new Date()); | ||
|
|
||
| gtag('config', 'G-M7LNKLRXP3'); | ||
| </script> | ||
| </head> | ||
| <style> | ||
| canvas { | ||
| position: absolute; | ||
| } | ||
|
|
||
| #time-layer { | ||
| z-index: 5; | ||
| } | ||
|
|
||
| #sign-layer { | ||
| z-index: 4; | ||
| } | ||
|
|
||
| #inner-face-layer { | ||
| z-index: 3; | ||
| } | ||
|
|
||
| #outer-face-layer { | ||
| z-index: 2; | ||
| } | ||
|
|
||
| #background-layer { | ||
| z-index: 1; | ||
| } | ||
| </style> | ||
|
|
||
| <body id="main-body"> | ||
| <!-- initially hidden right-click menu --> | ||
| <div id="menu" class="menu"> | ||
| <ul class="menu-options"> | ||
| <li id="tick_every_second" class="menu-option">Tick Every Second</li> | ||
| <li id="show_moon_phases" class="menu-option">Show Moon Phases</li> | ||
| <li id="show_horizon" class="menu-option">Show Horizon</li> | ||
| <li id="auto_dark_mode" class="menu-option">Auto Dark Mode</li> | ||
| <li id="dark_mode" class="menu-option">Dark Mode</li> | ||
| <hr /> | ||
| <li id="sun" class="menu-option">Show Sun</li> | ||
| <li id="moon" class="menu-option">Show Moon</li> | ||
| <li id="mercury" class="menu-option">Show Mercury</li> | ||
| <li id="venus" class="menu-option">Show Venus</li> | ||
| <li id="mars" class="menu-option">Show Mars</li> | ||
| <li id="saturn" class="menu-option">Show Saturn</li> | ||
| <li id="jupiter" class="menu-option">Show Jupiter</li> | ||
| <li id="uranus" class="menu-option">Show Uranus</li> | ||
| <li id="neptune" class="menu-option">Show Neptune</li> | ||
| <li id="pluto" class="menu-option">Show Pluto</li> | ||
| <hr /> | ||
| <li id="chiron" class="menu-option">Show Chiron</li> | ||
| <li id="lilith" class="menu-option">Show Lilith</li> | ||
| <li id="asc_node" class="menu-option">Show Ascending Lunar Node</li> | ||
| <hr /> | ||
| <li id="midheaven" class="menu-option">Show Midheaven</li> | ||
| <li id="ascendant" class="menu-option">Show Ascendant</li> | ||
| <hr /> | ||
| <li id="part_fortune" class="menu-option">Show Part of Fortune</li> | ||
| <li id="part_spirit" class="menu-option">Show Part of Spirit</li> | ||
| <li id="part_eros" class="menu-option">Show Part of Eros</li> | ||
| </ul> | ||
| </div> | ||
| <div id="info" class="info"> | ||
| Right-click for options | ||
| </div> | ||
| <div class="font_preload" style="opacity: 0"> | ||
| <span style="font-family: Astro, Arial, sans-serif;"></span> | ||
| </div> | ||
| <div id="webring" class="disabled"> | ||
| <button> | ||
| <img src="https://falchion-fleet-public.us-southeast-1.linodeobjects.com/misc/icons/chevrons-down.svg" alt="Two chevrons pointing down."> | ||
| </button> | ||
| <iframe src="https://fromthesuperhighway.com/webring/source" width="240" height="80"></iframe> | ||
| </div> | ||
| <canvas id="time-layer"></canvas> | ||
| <canvas id="sign-layer"></canvas> | ||
| <canvas id="inner-face-layer"></canvas> | ||
| <canvas id="outer-face-layer"></canvas> | ||
| <canvas id="background-layer"></canvas> | ||
| <script src='https://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script> | ||
| <script src='jquery.longclick-min.js' type='text/javascript'></script> | ||
| <script src="ephemeris-1.2.1.bundle.js" type="text/javascript"></script> | ||
| <script src="fts.js" type="text/javascript"></script> | ||
| <script src="clock.js" type="text/javascript"></script> | ||
| </body> | ||
|
|
||
| </html> |