Back
Version 4
11/7/2024
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function AlbertiCipherDisk({ outerRotation, innerRotation, onRotate }) {
const outerAlphabet = "ABCDEFGHILMNOPQRSTVXZ1234";
const innerAlphabet = "gklnprtvz&xysomqihfdbace";
const renderRing = (alphabet, rotation, isOuter) => (
<div
className={`absolute rounded-full flex items-center justify-center ${
isOuter ? "w-full h-full" : "w-3/4 h-3/4"
} border-2 border-gray-400 dark:border-gray-500`}
style={{
transform: `rotate(${rotation}deg)`,
top: isOuter ? '0' : '12.5%',
left: isOuter ? '0' : '12.5%',
}}
>
{alphabet.split("").map((char, i) => (
<div
key={i}
className="absolute flex items-center justify-center"
style={{
transform: `rotate(${(i * 360) / alphabet.length}deg) translateY(${isOuter ? "-40px" : "-30px"})`,
width: "20px",
height: "20px",
}}
>
<span className="text-sm font-mono">{char}</span>
</div>
))}
</div>
);
return (
all-passwordgen.web.val.run
Updated: November 7, 2024