feat: better page layout, contact page
Move the message box and such around, fix the contact page
This commit is contained in:
Zachery Aaron Shores-Chmielewski
parent
a5d56c0bd2
commit
f018534156
5 changed files with 450 additions and 222 deletions
|
|
@ -313,7 +313,21 @@ fn build() {
|
|||
let pubkey_file = "target/public_keys.json";
|
||||
|
||||
if !std::path::Path::new(pubkey_file).exists() {
|
||||
panic!("No public key file. Please generate keys first.");
|
||||
println!("No public keys found at {pubkey_file}. Generating keys automatically...");
|
||||
|
||||
let sk_out = ".local/secrets.json";
|
||||
let num_keys = 100;
|
||||
|
||||
println!("Creating .local directory...");
|
||||
std::fs::create_dir_all(".local").expect("failed to create .local directory");
|
||||
|
||||
println!("Generating {num_keys} keypairs...");
|
||||
println!(" Public keys -> {pubkey_file}");
|
||||
println!(" Secret keys -> {sk_out}");
|
||||
message_tools::gen_keys::generate_keys_to_file(pubkey_file, sk_out, num_keys)
|
||||
.expect("failed to generate keys");
|
||||
|
||||
println!("Key generation complete.");
|
||||
}
|
||||
|
||||
let status = Command::new("mkdir")
|
||||
|
|
|
|||
|
|
@ -65,11 +65,13 @@ async fn main() -> Result<()> {
|
|||
.route("/who", get(serve_path("./routes/who/index.html")?))
|
||||
.route("/api/pubkey", get(async || select_key(&PUBLIC_KEYS)))
|
||||
.route("/contact", get(serve_path("./routes/contact/index.html")?))
|
||||
.route("/contact/message", get(serve_path("./routes/contact/message/index.html")?))
|
||||
.route("/api/publish", post(publish_message))
|
||||
.nest_service("/routes", ServeDir::new("./routes"));
|
||||
|
||||
// run our app with hyper, listening globally on port 3000
|
||||
let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
|
||||
let addr = "0.0.0.0:3000";
|
||||
let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
|
||||
println!("Server running at http://{addr}");
|
||||
axum::serve(listener, app).await.unwrap();
|
||||
|
||||
Ok(())
|
||||
|
|
|
|||
|
|
@ -3,247 +3,147 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Input Form</title>
|
||||
<title>Contact</title>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column; /* Ensure vertical stacking */
|
||||
align-items: center; /* Center horizontally */
|
||||
padding-top: 50px;
|
||||
min-height: 120vh;
|
||||
font-family: system-ui, sans-serif;
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: Cornsilk;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
min-height: 400px;
|
||||
max-height: 1000px;
|
||||
margin-bottom: 20px; /* Add space below the form container */
|
||||
#fractal-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
nav.directory {
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto; /* Center horizontally */
|
||||
.content-overlay {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact-box {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
padding: 2.5rem 3rem;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
nav.directory dt a {
|
||||
.contact-box h2 {
|
||||
color: #fff;
|
||||
margin: 0 0 1.5rem 0;
|
||||
font-weight: normal;
|
||||
font-family: "Gill Sans", sans-serif;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contact-list li {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.contact-list li a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
padding: 0.6rem 1.5rem;
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
transition: background 0.2s;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.contact-list li a:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
nav.back-link {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav.back-link a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding: 0.5rem 1rem;
|
||||
display: inline-block;
|
||||
width: auto; /* Prevent stretching */
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.expandable-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.expandable-header {
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.expandable-content {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 0 0 4px 4px;
|
||||
nav.back-link a:hover {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
<script src="./routes/contact/pkg/message_tools.js"></script>
|
||||
<script>
|
||||
const { make_salt, make_key_bytes, box_message } = wasm_bindgen;
|
||||
var serverPublicKey;
|
||||
|
||||
async function run() {
|
||||
await wasm_bindgen();
|
||||
await fetchPublicKey();
|
||||
|
||||
console.log(`Server pk: ${serverPublicKey}`);
|
||||
|
||||
const form = document.getElementById("message-form");
|
||||
form.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
submit();
|
||||
});
|
||||
}
|
||||
async function fetchPublicKey() {
|
||||
try {
|
||||
const response = await fetch("./api/pubkey");
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const pubkeyJSON = await response.text();
|
||||
serverPublicKey = JSON.parse(pubkeyJSON);
|
||||
} catch (error) {
|
||||
console.error("Error fetching public key:", error);
|
||||
document.getElementById("status").textContent =
|
||||
"Failed to load public key.";
|
||||
}
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
console.log("begin");
|
||||
const user = document.getElementById("name").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const message = document.getElementById("message").value;
|
||||
|
||||
const salt = make_salt();
|
||||
|
||||
const makeKeyBytesArgs = {
|
||||
name: String(user),
|
||||
password: String(password),
|
||||
salt: [...salt],
|
||||
};
|
||||
|
||||
const keyBytes = make_key_bytes(JSON.stringify(makeKeyBytesArgs));
|
||||
console.log(keyBytes);
|
||||
|
||||
const boxMessageArgs = {
|
||||
user: String(user),
|
||||
salt: [...salt],
|
||||
user_sk: [...keyBytes],
|
||||
remote_pk: [...serverPublicKey],
|
||||
plaintext: String(message),
|
||||
};
|
||||
console.log("Boxed preflight: ", JSON.stringify(boxMessageArgs));
|
||||
const boxed = box_message(JSON.stringify(boxMessageArgs));
|
||||
const boxedObj = JSON.parse(boxed); // Parse the boxed string into a JavaScript object
|
||||
console.log(boxedObj);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/publish", {
|
||||
method: "POST", // Specify the method as POST
|
||||
headers: {
|
||||
"Content-Type": "application/json", // Set the Content-Type header for JSON payload
|
||||
},
|
||||
body: JSON.stringify(boxedObj), // Send the boxed object as a JSON string in the body
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
// Handle HTTP errors (status codes outside the 2xx range)
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json(); // Parse the response body as JSON
|
||||
console.log("Success:", result);
|
||||
alert("Sent!");
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
alert("Failed to send message: " + error.message);
|
||||
}
|
||||
|
||||
console.log("End");
|
||||
}
|
||||
|
||||
run();
|
||||
</script>
|
||||
<script>
|
||||
function toggleSection() {
|
||||
const content = document.getElementById("expandableContent");
|
||||
const header = document.querySelector(".expandable-header");
|
||||
if (content.style.display === "block") {
|
||||
content.style.display = "none";
|
||||
header.innerHTML = "How to use ▼";
|
||||
} else {
|
||||
content.style.display = "block";
|
||||
header.innerHTML = "How to use ▲";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="form-container">
|
||||
<form id="message-form">
|
||||
<div class="input-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" />
|
||||
</div>
|
||||
<canvas id="fractal-canvas"></canvas>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="password">Password (optional)</label>
|
||||
<input type="password" id="password" name="password" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" name="message"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<button
|
||||
type="submit"
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #dbdbdb;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="expandable-section">
|
||||
<div class="expandable-header" onclick="toggleSection()">
|
||||
How to use ▼
|
||||
</div>
|
||||
<div class="expandable-content" id="expandableContent">
|
||||
<p>
|
||||
Tell me who you are, and add an optional password. If I do not
|
||||
otherwise have your contact information, please tell me the best way
|
||||
to reach you back.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-overlay">
|
||||
<div class="contact-box">
|
||||
<h2>Contact</h2>
|
||||
<ul class="contact-list">
|
||||
<li><a href="mailto:">Email me</a></li>
|
||||
<li><a href="/contact/message">Direct message</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<nav class="back-link">
|
||||
<a href="/">back to home</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<nav class="directory">
|
||||
<dt><a href="/">back to home</a></dt>
|
||||
</nav>
|
||||
<script src="/routes/root/pkg/fractal_engine.js"></script>
|
||||
<script>
|
||||
(async function() {
|
||||
await wasm_bindgen('/routes/root/pkg/fractal_engine_bg.wasm');
|
||||
|
||||
const canvas = document.getElementById('fractal-canvas');
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
let startTime = performance.now();
|
||||
const animationSpeed = 0.0001;
|
||||
const scale = 4;
|
||||
|
||||
function animate() {
|
||||
const elapsed = performance.now() - startTime;
|
||||
const time = elapsed * animationSpeed;
|
||||
|
||||
try {
|
||||
wasm_bindgen.render_fractal_animated('fractal-canvas', time, scale);
|
||||
} catch (e) {
|
||||
console.error('Fractal render error:', e);
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
312
routes/contact/message/index.html
Normal file
312
routes/contact/message/index.html
Normal file
|
|
@ -0,0 +1,312 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Direct Message</title>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 50px;
|
||||
min-height: 120vh;
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
#fractal-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
min-height: 400px;
|
||||
max-height: 1000px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
nav.directory {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav.directory dt a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding: 0.5rem 1rem;
|
||||
display: inline-block;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
nav.directory dt a:hover {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
padding: 8px;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.expandable-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.expandable-header {
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.expandable-content {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
</style>
|
||||
<script src="/routes/contact/pkg/message_tools.js"></script>
|
||||
<script>
|
||||
const { make_salt, make_key_bytes, box_message } = wasm_bindgen;
|
||||
var serverPublicKey;
|
||||
|
||||
async function run() {
|
||||
await wasm_bindgen();
|
||||
await fetchPublicKey();
|
||||
|
||||
console.log(`Server pk: ${serverPublicKey}`);
|
||||
|
||||
const form = document.getElementById("message-form");
|
||||
form.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
submit();
|
||||
});
|
||||
}
|
||||
async function fetchPublicKey() {
|
||||
try {
|
||||
const response = await fetch("/api/pubkey");
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const pubkeyJSON = await response.text();
|
||||
serverPublicKey = JSON.parse(pubkeyJSON);
|
||||
} catch (error) {
|
||||
console.error("Error fetching public key:", error);
|
||||
document.getElementById("status").textContent =
|
||||
"Failed to load public key.";
|
||||
}
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
console.log("begin");
|
||||
const user = document.getElementById("name").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const message = document.getElementById("message").value;
|
||||
|
||||
const salt = make_salt();
|
||||
|
||||
const makeKeyBytesArgs = {
|
||||
name: String(user),
|
||||
password: String(password),
|
||||
salt: [...salt],
|
||||
};
|
||||
|
||||
const keyBytes = make_key_bytes(JSON.stringify(makeKeyBytesArgs));
|
||||
console.log(keyBytes);
|
||||
|
||||
const boxMessageArgs = {
|
||||
user: String(user),
|
||||
salt: [...salt],
|
||||
user_sk: [...keyBytes],
|
||||
remote_pk: [...serverPublicKey],
|
||||
plaintext: String(message),
|
||||
};
|
||||
console.log("Boxed preflight: ", JSON.stringify(boxMessageArgs));
|
||||
const boxed = box_message(JSON.stringify(boxMessageArgs));
|
||||
const boxedObj = JSON.parse(boxed);
|
||||
console.log(boxedObj);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/publish", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(boxedObj),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log("Success:", result);
|
||||
alert("Sent!");
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
alert("Failed to send message: " + error.message);
|
||||
}
|
||||
|
||||
console.log("End");
|
||||
}
|
||||
|
||||
run();
|
||||
</script>
|
||||
<script>
|
||||
function toggleSection() {
|
||||
const content = document.getElementById("expandableContent");
|
||||
const header = document.querySelector(".expandable-header");
|
||||
if (content.style.display === "block") {
|
||||
content.style.display = "none";
|
||||
header.innerHTML = "How to use ▼";
|
||||
} else {
|
||||
content.style.display = "block";
|
||||
header.innerHTML = "How to use ▲";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="fractal-canvas"></canvas>
|
||||
|
||||
<div class="form-container">
|
||||
<form id="message-form">
|
||||
<div class="input-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="password">Password (optional)</label>
|
||||
<input type="password" id="password" name="password" />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" name="message"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<button
|
||||
type="submit"
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="expandable-section">
|
||||
<div class="expandable-header" onclick="toggleSection()">
|
||||
How to use ▼
|
||||
</div>
|
||||
<div class="expandable-content" id="expandableContent">
|
||||
<p>
|
||||
Tell me who you are, and add an optional password. If I do not
|
||||
otherwise have your contact information, please tell me the best way
|
||||
to reach you back.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="directory">
|
||||
<dt><a href="/contact">back to contact</a></dt>
|
||||
</nav>
|
||||
|
||||
<script src="/routes/root/pkg/fractal_engine.js"></script>
|
||||
<script>
|
||||
(async function() {
|
||||
await wasm_bindgen('/routes/root/pkg/fractal_engine_bg.wasm');
|
||||
|
||||
const canvas = document.getElementById('fractal-canvas');
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
|
||||
let startTime = performance.now();
|
||||
const animationSpeed = 0.0001;
|
||||
const scale = 4;
|
||||
|
||||
function animate() {
|
||||
const elapsed = performance.now() - startTime;
|
||||
const time = elapsed * animationSpeed;
|
||||
|
||||
try {
|
||||
wasm_bindgen.render_fractal_animated('fractal-canvas', time, scale);
|
||||
} catch (e) {
|
||||
console.error('Fractal render error:', e);
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
<nav>
|
||||
<dl>
|
||||
<dt><a href="./who">Who</a></dt>
|
||||
<dt><a href="./contact">Send me a message</a></dt>
|
||||
<dt><a href="./contact">Contact</a></dt>
|
||||
</dl>
|
||||
</nav>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in a new issue