mirror of
https://github.com/pyscript/pyscript.git
synced 2026-02-12 13:00:31 -05:00
119 lines
4.2 KiB
HTML
119 lines
4.2 KiB
HTML
<html>
|
|
<head>
|
|
<title>Antigravity</title>
|
|
<meta charset="utf-8">
|
|
<link rel="icon" type="image/x-icon" href="./favicon.png">
|
|
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
|
|
<link rel="stylesheet" href="./assets/css/examples.css" />
|
|
<link rel="stylesheet" href="./assets/prism/prism.css" />
|
|
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
|
|
<script defer src="./assets/prism/prism.js"></script>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar" style="background-color: #000000;">
|
|
<div class="app-header">
|
|
<a href="/">
|
|
<img src="./logo.png" class="logo">
|
|
</a>
|
|
<a class="title" href="" style="color: #f0ab3c;">Antigravity</a>
|
|
</div>
|
|
</nav>
|
|
<section class="pyscript">
|
|
<py-config>
|
|
[[fetch]]
|
|
files = ["./antigravity.py"]
|
|
</py-config>
|
|
<b>Based on xkcd: antigravity https://xkcd.com/353/.</b>
|
|
<py-script>
|
|
import antigravity
|
|
antigravity.fly()
|
|
</py-script>
|
|
</section>
|
|
<section class="code">
|
|
<div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
|
|
<div id="code-section" class="code-section-hidden">
|
|
<p>index.html</p>
|
|
<pre class="prism-code language-html">
|
|
<code class="language-html">
|
|
<py-config>
|
|
[[fetch]]
|
|
files = ["./antigravity.py"]
|
|
</py-config>
|
|
<py-script>
|
|
import antigravity
|
|
antigravity.fly()
|
|
</py-script>
|
|
</code>
|
|
</pre>
|
|
<p>antigravity.py</p>
|
|
<pre class="prism-code language-python">
|
|
<code class="language-python">
|
|
import random
|
|
import sys
|
|
|
|
from js import DOMParser, document, setInterval
|
|
from pyodide.ffi import create_proxy
|
|
from pyodide.http import open_url
|
|
|
|
|
|
class Antigravity:
|
|
|
|
url = "./antigravity.svg"
|
|
|
|
def __init__(self, target=None, interval=10, append=True, fly=False):
|
|
target = target or sys.stdout._out
|
|
self.target = (
|
|
document.getElementById(target) if isinstance(target, str) else target
|
|
)
|
|
doc = DOMParser.new().parseFromString(
|
|
open_url(self.url).read(), "image/svg+xml"
|
|
)
|
|
self.node = doc.documentElement
|
|
if append:
|
|
self.target.append(self.node)
|
|
else:
|
|
self.target.replaceChildren(self.node)
|
|
self.xoffset, self.yoffset = 0, 0
|
|
self.interval = interval
|
|
if fly:
|
|
self.fly()
|
|
|
|
def fly(self):
|
|
setInterval(create_proxy(self.move), self.interval)
|
|
|
|
def move(self):
|
|
char = self.node.getElementsByTagName("g")[1]
|
|
char.setAttribute("transform", f"translate({self.xoffset}, {-self.yoffset})")
|
|
self.xoffset += random.normalvariate(0, 1) / 20
|
|
if self.yoffset < 50:
|
|
self.yoffset += 0.1
|
|
else:
|
|
self.yoffset += random.normalvariate(0, 1) / 20
|
|
|
|
_auto = Antigravity(append=True)
|
|
fly = _auto.fly
|
|
</code>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
<script>
|
|
const viewCodeButton = document.getElementById("view-code-button");
|
|
const codeSection = document.getElementById("code-section");
|
|
const handleClick = () => {
|
|
if (codeSection.classList.contains("code-section-hidden")) {
|
|
codeSection.classList.remove("code-section-hidden");
|
|
codeSection.classList.add("code-section-visible");
|
|
} else {
|
|
codeSection.classList.remove("code-section-visible");
|
|
codeSection.classList.add("code-section-hidden");
|
|
}
|
|
}
|
|
viewCodeButton.addEventListener("click", handleClick)
|
|
viewCodeButton.addEventListener("keydown", (e) => {
|
|
if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
|
|
handleClick();
|
|
}
|
|
})
|
|
</script>
|
|
</html>
|