@beclab/olaresid 0.1.5 → 0.1.7

package/examples/frontend-demo/src/App.vue

@@ -0,0 +1,1211 @@
+<template>
+	<div class="app">
+		<header>
+			<h1>🔑 OlaresID SDK Demo</h1>
+			<p class="subtitle">Complete SDK functionality demonstration</p>
+		</header>
+
+		<main>
+			<!-- MetaMask Connection -->
+			<section class="card">
+				<h2>🦊 MetaMask Connection</h2>
+
+				<div
+					v-if="currentNetwork"
+					class="network-badge"
+					:class="networkClass"
+				>
+					{{ currentNetwork }} ({{ currentChainId }})
+				</div>
+
+				<div
+					v-if="currentNetwork.startsWith('Unsupported')"
+					class="warning"
+				>
+					⚠️ Please switch to Optimism Mainnet or OP Sepolia Testnet
+					<div class="button-grid-small" style="margin-top: 0.75rem">
+						<button @click="switchToMainnet" class="btn-link">
+							Switch to OP Mainnet
+						</button>
+						<button @click="switchToTestnet" class="btn-link">
+							Switch to OP Testnet
+						</button>
+					</div>
+				</div>
+
+				<div v-if="!walletConnected">
+					<button
+						@click="connectMetaMask"
+						:disabled="connecting"
+						class="btn-primary"
+					>
+						{{
+							connecting ? 'Connecting...' : '🦊 Connect MetaMask'
+						}}
+					</button>
+				</div>
+				<div v-else class="connected-info">
+					<div class="success-badge">
+						✅ Connected: {{ walletAddress }}
+					</div>
+					<button @click="disconnectWallet" class="btn-secondary">
+						Disconnect
+					</button>
+				</div>
+			</section>
+
+			<!-- Domain Input - Top Level -->
+			<section class="card domain-input-section">
+				<h2>🏷️ Domain Configuration</h2>
+				<p class="section-description">
+					Enter your domain name to manage its settings below
+				</p>
+				<div class="form-group">
+					<label class="input-label">Domain Name</label>
+					<input
+						v-model="domainName"
+						placeholder="e.g., alice.olares.com or 1.com"
+						:disabled="!walletConnected"
+						class="input input-large"
+					/>
+				</div>
+				<div v-if="!domainName && walletConnected" class="info-message">
+					👆 Please enter a domain name to access management features
+				</div>
+			</section>
+
+			<!-- Domain Management Area - Only show when domain is entered -->
+			<div v-if="domainName" class="management-area">
+				<!-- Domain Info Demo -->
+				<section class="card subsection">
+					<h3>📋 Domain Info</h3>
+					<div class="button-grid">
+						<button
+							@click="getMetaInfo"
+							:disabled="
+								!domainName ||
+								!walletConnected ||
+								loading.metaInfo
+							"
+							class="btn-primary"
+						>
+							{{
+								loading.metaInfo
+									? 'Loading...'
+									: 'Get Meta Info'
+							}}
+						</button>
+						<button
+							@click="getOwner"
+							:disabled="
+								!domainName || !walletConnected || loading.owner
+							"
+							class="btn-primary"
+						>
+							{{ loading.owner ? 'Loading...' : 'Get Owner' }}
+						</button>
+						<button
+							@click="checkIsOwner"
+							:disabled="
+								!domainName ||
+								!walletConnected ||
+								loading.isOwner
+							"
+							class="btn-secondary"
+						>
+							{{ loading.isOwner ? 'Loading...' : 'Is Owner?' }}
+						</button>
+					</div>
+					<div v-if="results.domainContext" class="result">
+						<pre>{{ results.domainContext }}</pre>
+					</div>
+				</section>
+
+				<!-- IP Address Management -->
+				<section class="card subsection">
+					<h3>🌐 IP Address Management</h3>
+					<div class="form-group">
+						<input
+							v-model="ipAddress"
+							placeholder="e.g., 192.168.1.100"
+							:disabled="!walletConnected"
+							class="input"
+						/>
+					</div>
+					<div class="button-grid">
+						<button
+							@click="setIP"
+							:disabled="
+								!domainName ||
+								!ipAddress ||
+								!walletConnected ||
+								loading.setIP
+							"
+							class="btn-success"
+						>
+							{{ loading.setIP ? 'Setting...' : 'Set IP' }}
+						</button>
+						<button
+							@click="getIP"
+							:disabled="
+								!domainName || !walletConnected || loading.getIP
+							"
+							class="btn-primary"
+						>
+							{{ loading.getIP ? 'Loading...' : 'Get IP' }}
+						</button>
+						<button
+							@click="removeIP"
+							:disabled="
+								!domainName ||
+								!walletConnected ||
+								loading.removeIP
+							"
+							class="btn-danger"
+						>
+							{{ loading.removeIP ? 'Removing...' : 'Remove IP' }}
+						</button>
+					</div>
+					<div v-if="results.ip" class="result success">
+						<pre>{{ results.ip }}</pre>
+					</div>
+				</section>
+
+				<!-- RSA Key Management -->
+				<section class="card subsection">
+					<h3>🔐 RSA Key Management</h3>
+					<div class="button-grid">
+						<button
+							@click="generateRSAKeyPair"
+							:disabled="loading.generateRSA"
+							class="btn-purple"
+						>
+							{{
+								loading.generateRSA
+									? 'Generating...'
+									: '🔑 Generate RSA Key Pair'
+							}}
+						</button>
+					</div>
+
+					<div v-if="rsaKeyPair" class="rsa-keys">
+						<div class="key-display">
+							<strong>Public Key (PEM):</strong>
+							<pre
+								>{{
+									rsaKeyPair.publicKey.substring(0, 100)
+								}}...</pre
+							>
+						</div>
+						<div class="key-display">
+							<strong>Private Key (PEM):</strong>
+							<pre
+								>{{
+									rsaKeyPair.privateKey.substring(0, 100)
+								}}...</pre
+							>
+						</div>
+					</div>
+
+					<div class="button-grid">
+						<button
+							@click="setRSAPublicKey"
+							:disabled="
+								!domainName ||
+								!rsaKeyPair ||
+								!walletConnected ||
+								loading.setRSA
+							"
+							class="btn-success"
+						>
+							{{
+								loading.setRSA
+									? 'Setting...'
+									: 'Set RSA Public Key'
+							}}
+						</button>
+						<button
+							@click="getRSAPublicKey"
+							:disabled="
+								!domainName ||
+								!walletConnected ||
+								loading.getRSA
+							"
+							class="btn-primary"
+						>
+							{{
+								loading.getRSA
+									? 'Loading...'
+									: 'Get RSA Public Key'
+							}}
+						</button>
+						<button
+							@click="removeRSAPublicKey"
+							:disabled="
+								!domainName ||
+								!walletConnected ||
+								loading.removeRSA
+							"
+							class="btn-danger"
+						>
+							{{
+								loading.removeRSA
+									? 'Removing...'
+									: 'Remove RSA Key'
+							}}
+						</button>
+					</div>
+
+					<div v-if="results.rsa" class="result purple">
+						<pre>{{ results.rsa }}</pre>
+					</div>
+				</section>
+			</div>
+
+			<!-- Toast Messages -->
+			<div v-if="toast.show" class="toast" :class="toast.type">
+				{{ toast.message }}
+			</div>
+		</main>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue';
+import * as OlaresIDModule from '@beclab/olaresid';
+import { ethers } from 'ethers';
+
+const OlaresID = (OlaresIDModule as any).default || OlaresIDModule;
+const { createRsaKeyPair } = OlaresIDModule as any;
+
+declare global {
+	interface Window {
+		ethereum?: any;
+	}
+}
+
+// State
+const domainName = ref('1.com');
+const ipAddress = ref('192.168.1.100');
+const rsaKeyPair = ref<any>(null);
+
+// Loading states
+const loading = reactive({
+	metaInfo: false,
+	owner: false,
+	isOwner: false,
+	setIP: false,
+	getIP: false,
+	removeIP: false,
+	generateRSA: false,
+	setRSA: false,
+	getRSA: false,
+	removeRSA: false
+});
+
+// Results
+const results = reactive({
+	domainContext: '',
+	ip: '',
+	rsa: ''
+});
+
+// MetaMask state
+const walletConnected = ref(false);
+const walletAddress = ref('');
+const connecting = ref(false);
+const currentNetwork = ref('');
+const currentChainId = ref('');
+const networkClass = ref('');
+
+// Toast state
+const toast = reactive({
+	show: false,
+	message: '',
+	type: 'info'
+});
+
+// Initialize OlaresID
+let olaresId = OlaresID.createTestnet();
+
+onMounted(async () => {
+	await checkMetaMaskConnection();
+
+	if (typeof window.ethereum !== 'undefined') {
+		window.ethereum.on('chainChanged', handleChainChanged);
+		window.ethereum.on('accountsChanged', handleAccountsChanged);
+	}
+});
+
+const showToast = (
+	message: string,
+	type: 'success' | 'error' | 'info' = 'info'
+) => {
+	toast.message = message;
+	toast.type = type;
+	toast.show = true;
+	setTimeout(() => {
+		toast.show = false;
+	}, 3000);
+};
+
+const handleChainChanged = async (chainId: string) => {
+	console.log('Chain changed to:', chainId);
+	currentChainId.value = chainId;
+	currentNetwork.value = getNetworkName(chainId);
+
+	if (!isSupportedNetwork(chainId)) {
+		networkClass.value = 'unsupported';
+		if (walletConnected.value) {
+			olaresId.clearSigner();
+		}
+		showToast(
+			`⚠️ Unsupported network detected. Please switch to Optimism Mainnet or OP Sepolia Testnet.`,
+			'error'
+		);
+		return;
+	}
+
+	await reinitializeOlaresId();
+	showToast(`✅ Network switched to ${currentNetwork.value}`, 'success');
+};
+
+const handleAccountsChanged = async (accounts: string[]) => {
+	console.log('Accounts changed:', accounts);
+	if (accounts.length === 0) {
+		disconnectWallet();
+	} else if (accounts[0] !== walletAddress.value) {
+		walletAddress.value = accounts[0];
+		await setSignerToOlaresId();
+	}
+};
+
+const getNetworkName = (chainId: string): string => {
+	const networks: Record<string, string> = {
+		'0xa': 'Optimism Mainnet',
+		'0xaa37dc': 'OP Sepolia Testnet'
+	};
+	return networks[chainId] || `Unsupported Network (Chain ID: ${chainId})`;
+};
+
+const isMainnet = (chainId: string): boolean => {
+	return chainId === '0xa';
+};
+
+const isSupportedNetwork = (chainId: string): boolean => {
+	return chainId === '0xa' || chainId === '0xaa37dc';
+};
+
+const reinitializeOlaresId = async () => {
+	if (!isSupportedNetwork(currentChainId.value)) {
+		currentNetwork.value = getNetworkName(currentChainId.value);
+		networkClass.value = 'unsupported';
+		return;
+	}
+
+	const isMainnetNetwork = isMainnet(currentChainId.value);
+
+	try {
+		if (isMainnetNetwork) {
+			olaresId = OlaresID.createMainnet();
+			currentNetwork.value = 'Optimism Mainnet';
+			networkClass.value = 'mainnet';
+		} else {
+			olaresId = OlaresID.createTestnet();
+			currentNetwork.value = 'OP Sepolia Testnet';
+			networkClass.value = 'testnet';
+		}
+
+		if (walletConnected.value && walletAddress.value) {
+			await setSignerToOlaresId();
+			console.log(
+				'OlaresID reinitialized with new network and signer set'
+			);
+		} else {
+			console.log('OlaresID reinitialized with new network');
+		}
+	} catch (err) {
+		console.error('Error reinitializing OlaresID:', err);
+		showToast('Failed to reinitialize OlaresID', 'error');
+	}
+};
+
+const checkMetaMaskConnection = async () => {
+	if (typeof window.ethereum !== 'undefined') {
+		try {
+			const chainId = await window.ethereum.request({
+				method: 'eth_chainId'
+			});
+			currentChainId.value = chainId;
+			await reinitializeOlaresId();
+
+			const accounts = await window.ethereum.request({
+				method: 'eth_accounts'
+			});
+			if (accounts.length > 0) {
+				walletAddress.value = accounts[0];
+				walletConnected.value = true;
+				await setSignerToOlaresId();
+			}
+		} catch (err) {
+			console.error('Error checking MetaMask connection:', err);
+		}
+	}
+};
+
+const connectMetaMask = async () => {
+	if (typeof window.ethereum === 'undefined') {
+		showToast(
+			'MetaMask not detected. Please install MetaMask extension.',
+			'error'
+		);
+		return;
+	}
+
+	connecting.value = true;
+
+	try {
+		const chainId = await window.ethereum.request({
+			method: 'eth_chainId'
+		});
+		currentChainId.value = chainId;
+
+		if (!isSupportedNetwork(chainId)) {
+			showToast(
+				'Unsupported network. Please switch to Optimism Mainnet or OP Sepolia Testnet.',
+				'error'
+			);
+			await reinitializeOlaresId();
+			connecting.value = false;
+			return;
+		}
+
+		await reinitializeOlaresId();
+
+		const accounts = await window.ethereum.request({
+			method: 'eth_requestAccounts'
+		});
+
+		if (accounts.length > 0) {
+			walletAddress.value = accounts[0];
+			walletConnected.value = true;
+			await setSignerToOlaresId();
+			showToast(
+				`Connected: ${walletAddress.value.substring(
+					0,
+					6
+				)}...${walletAddress.value.substring(38)}`,
+				'success'
+			);
+		}
+	} catch (err: any) {
+		console.error('MetaMask connection error:', err);
+		showToast(`Failed to connect: ${err.message}`, 'error');
+	} finally {
+		connecting.value = false;
+	}
+};
+
+const setSignerToOlaresId = async () => {
+	try {
+		const provider = new ethers.BrowserProvider(window.ethereum);
+		const signer = await provider.getSigner();
+		olaresId.setSigner(signer);
+		console.log('Signer set to OlaresID');
+	} catch (err) {
+		console.error('Error setting signer:', err);
+		throw err;
+	}
+};
+
+const disconnectWallet = () => {
+	walletConnected.value = false;
+	walletAddress.value = '';
+	olaresId.clearSigner();
+	showToast('Wallet disconnected', 'info');
+};
+
+const switchToMainnet = async () => {
+	try {
+		await window.ethereum.request({
+			method: 'wallet_switchEthereumChain',
+			params: [{ chainId: '0xa' }] // OP Mainnet
+		});
+	} catch (error: any) {
+		if (error.code === 4902) {
+			try {
+				await window.ethereum.request({
+					method: 'wallet_addEthereumChain',
+					params: [
+						{
+							chainId: '0xa',
+							chainName: 'Optimism',
+							nativeCurrency: {
+								name: 'Ethereum',
+								symbol: 'ETH',
+								decimals: 18
+							},
+							rpcUrls: ['https://optimism-rpc.publicnode.com'],
+							blockExplorerUrls: [
+								'https://optimistic.etherscan.io'
+							]
+						}
+					]
+				});
+			} catch (addError) {
+				showToast('Failed to add Optimism network', 'error');
+			}
+		} else {
+			showToast('Failed to switch network', 'error');
+		}
+	}
+};
+
+const switchToTestnet = async () => {
+	try {
+		await window.ethereum.request({
+			method: 'wallet_switchEthereumChain',
+			params: [{ chainId: '0xaa37dc' }] // OP Sepolia
+		});
+	} catch (error: any) {
+		if (error.code === 4902) {
+			try {
+				await window.ethereum.request({
+					method: 'wallet_addEthereumChain',
+					params: [
+						{
+							chainId: '0xaa37dc',
+							chainName: 'OP Sepolia',
+							nativeCurrency: {
+								name: 'Ethereum',
+								symbol: 'ETH',
+								decimals: 18
+							},
+							rpcUrls: ['https://sepolia.optimism.io'],
+							blockExplorerUrls: [
+								'https://sepolia-optimistic.etherscan.io'
+							]
+						}
+					]
+				});
+			} catch (addError) {
+				showToast('Failed to add OP Sepolia network', 'error');
+			}
+		} else {
+			showToast('Failed to switch network', 'error');
+		}
+	}
+};
+
+// Domain Info Methods
+const getMetaInfo = async () => {
+	loading.metaInfo = true;
+	results.domainContext = '';
+	try {
+		const domain = olaresId.domain(domainName.value);
+		const metaInfo = await domain.getMetaInfo();
+		results.domainContext = `Meta Info:
+ID: ${metaInfo.id}
+Name: ${metaInfo.name}
+DID: ${metaInfo.did}
+Note: ${metaInfo.note || 'N/A'}
+Allow Subdomain: ${metaInfo.allowSubdomain}`;
+		showToast('Meta info retrieved!', 'success');
+	} catch (err: any) {
+		showToast(`Failed: ${err.message}`, 'error');
+	} finally {
+		loading.metaInfo = false;
+	}
+};
+
+const getOwner = async () => {
+	loading.owner = true;
+	results.domainContext = '';
+	try {
+		const domain = olaresId.domain(domainName.value);
+		const owner = await domain.getOwner();
+		results.domainContext = `Owner Address:\n${owner}`;
+		showToast('Owner retrieved!', 'success');
+	} catch (err: any) {
+		showToast(`Failed: ${err.message}`, 'error');
+	} finally {
+		loading.owner = false;
+	}
+};
+
+const checkIsOwner = async () => {
+	loading.isOwner = true;
+	results.domainContext = '';
+	try {
+		const domain = olaresId.domain(domainName.value);
+		const isOwner = await domain.isOwner();
+		results.domainContext = `Is Owner: ${isOwner ? 'Yes ✅' : 'No ❌'}`;
+		showToast(
+			isOwner ? 'You are the owner!' : 'You are not the owner',
+			isOwner ? 'success' : 'info'
+		);
+	} catch (err: any) {
+		showToast(`Failed: ${err.message}`, 'error');
+	} finally {
+		loading.isOwner = false;
+	}
+};
+
+// IP Methods
+const setIP = async () => {
+	loading.setIP = true;
+	results.ip = '';
+	try {
+		const domain = olaresId.domain(domainName.value);
+		const result = await domain.setIP(ipAddress.value);
+		if (result.success) {
+			results.ip = `IP Set Successfully!
+Transaction Hash: ${result.transactionHash}
+Gas Used: ${result.gasUsed?.toString()}`;
+			showToast('IP address set!', 'success');
+		} else {
+			throw new Error(result.error || 'Failed to set IP');
+		}
+	} catch (err: any) {
+		showToast(`Failed: ${err.message}`, 'error');
+	} finally {
+		loading.setIP = false;
+	}
+};
+
+const getIP = async () => {
+	loading.getIP = true;
+	results.ip = '';
+	try {
+		const domain = olaresId.domain(domainName.value);
+		const ip = await domain.getIP();
+		results.ip = ip ? `IP Address: ${ip}` : 'No IP address set';
+		showToast('IP retrieved!', 'success');
+	} catch (err: any) {
+		showToast(`Failed: ${err.message}`, 'error');
+	} finally {
+		loading.getIP = false;
+	}
+};
+
+const removeIP = async () => {
+	loading.removeIP = true;
+	results.ip = '';
+	try {
+		const domain = olaresId.domain(domainName.value);
+		const result = await domain.removeIP();
+		if (result.success) {
+			results.ip = `IP Removed Successfully!\nTransaction Hash: ${result.transactionHash}`;
+			showToast('IP address removed!', 'success');
+		} else {
+			throw new Error(result.error || 'Failed to remove IP');
+		}
+	} catch (err: any) {
+		showToast(`Failed: ${err.message}`, 'error');
+	} finally {
+		loading.removeIP = false;
+	}
+};
+
+// RSA Methods
+const generateRSAKeyPair = async () => {
+	loading.generateRSA = true;
+	results.rsa = '';
+	try {
+		const keyPair = await createRsaKeyPair();
+		rsaKeyPair.value = {
+			publicKey: keyPair.rsaPublicKey,
+			privateKey: keyPair.rsaPrivateKey
+		};
+		results.rsa = 'RSA Key Pair Generated Successfully!';
+		showToast('RSA key pair generated!', 'success');
+	} catch (err: any) {
+		showToast(`Failed: ${err.message}`, 'error');
+	} finally {
+		loading.generateRSA = false;
+	}
+};
+
+const setRSAPublicKey = async () => {
+	loading.setRSA = true;
+	results.rsa = '';
+	try {
+		const domain = olaresId.domain(domainName.value);
+		const result = await domain.setRSAPublicKey(rsaKeyPair.value.publicKey);
+		if (result.success) {
+			results.rsa = `RSA Public Key Set Successfully!
+Transaction Hash: ${result.transactionHash}
+Gas Used: ${result.gasUsed?.toString()}`;
+			showToast('RSA public key set!', 'success');
+		} else {
+			throw new Error(result.error || 'Failed to set RSA key');
+		}
+	} catch (err: any) {
+		showToast(`Failed: ${err.message}`, 'error');
+	} finally {
+		loading.setRSA = false;
+	}
+};
+
+const getRSAPublicKey = async () => {
+	loading.getRSA = true;
+	results.rsa = '';
+	try {
+		const domain = olaresId.domain(domainName.value);
+		const key = await domain.getRSAPublicKey();
+		results.rsa = key
+			? `RSA Public Key (PEM):\n${key}`
+			: 'No RSA public key set';
+		showToast('RSA key retrieved!', 'success');
+	} catch (err: any) {
+		showToast(`Failed: ${err.message}`, 'error');
+	} finally {
+		loading.getRSA = false;
+	}
+};
+
+const removeRSAPublicKey = async () => {
+	loading.removeRSA = true;
+	results.rsa = '';
+	try {
+		const domain = olaresId.domain(domainName.value);
+		const result = await domain.removeRSAPublicKey();
+		if (result.success) {
+			results.rsa = `RSA Public Key Removed Successfully!\nTransaction Hash: ${result.transactionHash}`;
+			showToast('RSA key removed!', 'success');
+		} else {
+			throw new Error(result.error || 'Failed to remove RSA key');
+		}
+	} catch (err: any) {
+		showToast(`Failed: ${err.message}`, 'error');
+	} finally {
+		loading.removeRSA = false;
+	}
+};
+</script>
+
+<style scoped>
+* {
+	box-sizing: border-box;
+}
+
+.app {
+	min-height: 100vh;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	padding: 2rem 1rem;
+}
+
+header {
+	text-align: center;
+	color: white;
+	margin-bottom: 2rem;
+}
+
+header h1 {
+	font-size: 2.5rem;
+	margin: 0 0 0.5rem 0;
+}
+
+.subtitle {
+	font-size: 1.1rem;
+	opacity: 0.9;
+	margin: 0;
+}
+
+main {
+	max-width: 900px;
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+.card {
+	background: white;
+	border-radius: 12px;
+	padding: 2rem;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.card h2 {
+	margin: 0 0 1.5rem 0;
+	color: #333;
+	font-size: 1.5rem;
+}
+
+.network-badge {
+	display: inline-block;
+	padding: 0.5rem 1rem;
+	border-radius: 20px;
+	font-weight: 600;
+	margin-bottom: 1rem;
+}
+
+.network-badge.mainnet {
+	background: #ff9800;
+	color: white;
+}
+
+.network-badge.testnet {
+	background: #2196f3;
+	color: white;
+}
+
+.network-badge.unsupported {
+	background: #f44336;
+	color: white;
+}
+
+.warning {
+	background: #fff3cd;
+	color: #856404;
+	padding: 0.75rem;
+	border-radius: 8px;
+	margin-bottom: 1rem;
+	border: 1px solid #ffc107;
+}
+
+.connected-info {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.success-badge {
+	background: #d4edda;
+	color: #155724;
+	padding: 0.75rem;
+	border-radius: 8px;
+	border: 1px solid #c3e6cb;
+	font-weight: 500;
+}
+
+.form-group {
+	margin-bottom: 1rem;
+}
+
+.input {
+	width: 100%;
+	padding: 0.875rem;
+	border: 2px solid #e0e0e0;
+	border-radius: 8px;
+	font-size: 1rem;
+	transition: border-color 0.3s;
+}
+
+.input:focus {
+	outline: none;
+	border-color: #667eea;
+}
+
+.input:disabled {
+	background: #f5f5f5;
+	cursor: not-allowed;
+}
+
+/* Domain Input Section - Top Level */
+.domain-input-section {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	border: 3px solid #667eea;
+}
+
+.domain-input-section h2 {
+	color: white;
+	margin-bottom: 0.5rem;
+}
+
+.section-description {
+	color: rgba(255, 255, 255, 0.9);
+	font-size: 0.95rem;
+	margin-bottom: 1rem;
+}
+
+.input-label {
+	display: block;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+	color: white;
+	font-size: 1rem;
+}
+
+.input-large {
+	font-size: 1.1rem;
+	padding: 1rem;
+	background: white;
+	color: #333;
+}
+
+.info-message {
+	background: rgba(255, 255, 255, 0.2);
+	padding: 0.75rem;
+	border-radius: 8px;
+	margin-top: 0.75rem;
+	text-align: center;
+	font-size: 0.95rem;
+	color: white;
+	border: 1px dashed rgba(255, 255, 255, 0.5);
+}
+
+/* Management Area - Container for subsections */
+.management-area {
+	margin-top: 2rem;
+	padding-left: 1.5rem;
+	border-left: 4px solid #667eea;
+	position: relative;
+}
+
+.management-area::before {
+	content: '';
+	position: absolute;
+	left: -2px;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	background: linear-gradient(180deg, #667eea 0%, transparent 100%);
+}
+
+/* Subsection - Child cards */
+.subsection {
+	position: relative;
+	margin-bottom: 1.5rem;
+	border-left: 3px solid #e0e0e0;
+	padding-left: 1.5rem;
+	margin-left: -1.5rem;
+}
+
+.subsection::before {
+	content: '';
+	position: absolute;
+	left: -1.5rem;
+	top: 2rem;
+	width: 1rem;
+	height: 2px;
+	background: #e0e0e0;
+}
+
+.subsection h3 {
+	font-size: 1.25rem;
+	color: #555;
+	margin-bottom: 1rem;
+	font-weight: 600;
+}
+
+.subsection:hover {
+	border-left-color: #667eea;
+}
+
+.subsection:hover::before {
+	background: #667eea;
+}
+
+.button-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+	gap: 0.75rem;
+	margin-bottom: 1rem;
+}
+
+.button-grid-small {
+	display: flex;
+	gap: 0.5rem;
+	margin-bottom: 1rem;
+	flex-wrap: wrap;
+}
+
+button {
+	padding: 0.875rem 1.5rem;
+	border: none;
+	border-radius: 8px;
+	font-size: 1rem;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.3s;
+	min-width: 150px;
+	width: 100%;
+}
+
+button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.btn-primary {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+	transform: translateY(-2px);
+	box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+	background: #f0f0f0;
+	color: #333;
+}
+
+.btn-secondary:hover:not(:disabled) {
+	background: #e0e0e0;
+}
+
+.btn-success {
+	background: #4caf50;
+	color: white;
+}
+
+.btn-success:hover:not(:disabled) {
+	background: #45a049;
+	box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
+}
+
+.btn-danger {
+	background: #f44336;
+	color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+	background: #da190b;
+	box-shadow: 0 5px 15px rgba(244, 67, 54, 0.4);
+}
+
+.btn-purple {
+	background: #9c27b0;
+	color: white;
+}
+
+.btn-purple:hover:not(:disabled) {
+	background: #7b1fa2;
+	box-shadow: 0 5px 15px rgba(156, 39, 176, 0.4);
+}
+
+.btn-link {
+	background: transparent;
+	color: #667eea;
+	border: 1px solid #667eea;
+	padding: 0.5rem 1rem;
+	font-size: 0.9rem;
+}
+
+.btn-link:hover:not(:disabled) {
+	background: #667eea;
+	color: white;
+}
+
+.result {
+	background: #f5f7fa;
+	padding: 1rem;
+	border-radius: 8px;
+	margin-top: 1rem;
+	border-left: 4px solid #667eea;
+}
+
+.result.success {
+	background: #d4edda;
+	border-left-color: #4caf50;
+}
+
+.result.purple {
+	background: #f3e5f5;
+	border-left-color: #9c27b0;
+}
+
+.result pre {
+	margin: 0;
+	font-family: 'Courier New', monospace;
+	font-size: 0.875rem;
+	white-space: pre-wrap;
+	word-break: break-all;
+}
+
+.rsa-keys {
+	background: #f3e5f5;
+	padding: 1rem;
+	border-radius: 8px;
+	margin-bottom: 1rem;
+}
+
+.key-display {
+	margin-bottom: 1rem;
+}
+
+.key-display:last-child {
+	margin-bottom: 0;
+}
+
+.key-display strong {
+	display: block;
+	margin-bottom: 0.5rem;
+	color: #7b1fa2;
+}
+
+.key-display pre {
+	background: white;
+	padding: 0.75rem;
+	border-radius: 4px;
+	margin: 0;
+	font-size: 0.75rem;
+	overflow-x: auto;
+}
+
+.toast {
+	position: fixed;
+	bottom: 2rem;
+	right: 2rem;
+	padding: 1rem 1.5rem;
+	border-radius: 8px;
+	color: white;
+	font-weight: 500;
+	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
+	animation: slideIn 0.3s ease-out;
+	max-width: 400px;
+	z-index: 1000;
+}
+
+.toast.success {
+	background: #4caf50;
+}
+
+.toast.error {
+	background: #f44336;
+}
+
+.toast.info {
+	background: #2196f3;
+}
+
+@keyframes slideIn {
+	from {
+		transform: translateX(400px);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@media (max-width: 768px) {
+	.app {
+		padding: 1rem 0.5rem;
+	}
+
+	header h1 {
+		font-size: 2rem;
+	}
+
+	.card {
+		padding: 1.5rem;
+	}
+
+	.button-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.toast {
+		left: 1rem;
+		right: 1rem;
+		bottom: 1rem;
+	}
+}
+</style>