<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Psychic Name Generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: rgba(25, 25, 35, 0.95);
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
width: 90%;
max-width: 700px;
padding: 40px;
text-align: center;
border: 1px solid #4a4a6d;
position: relative;
overflow: hidden;
}
.container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(120, 0, 255, 0.1) 0%, transparent 70%);
z-index: -1;
}
h1 {
color: #e2e2ff;
margin-bottom: 10px;
font-size: 2.5rem;
text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}
.subtitle {
color: #a0a0c0;
margin-bottom: 30px;
font-size: 1.1rem;
}
.settings {
background-color: rgba(40, 40, 60, 0.6);
border-radius: 15px;
padding: 20px;
margin-bottom: 30px;
text-align: left;
border: 1px solid #4a4a6d;
}
.settings h3 {
color: #c0c0ff;
margin-bottom: 15px;
text-align: center;
font-size: 1.3rem;
}
.setting-group {
margin-bottom: 15px;
}
.setting-group label {
display: block;
margin-bottom: 8px;
color: #b0b0d0;
font-weight: 500;
}
.setting-group select {
width: 100%;
padding: 12px;
border: 1px solid #5a5a8a;
border-radius: 8px;
font-size: 1rem;
background-color: #2a2a3a;
color: #e0e0ff;
outline: none;
}
.setting-group select:focus {
border-color: #8a2be2;
box-shadow: 0 0 8px rgba(138, 43, 226, 0.5);
}
.result-area {
margin: 30px 0;
padding: 30px 20px;
border-radius: 15px;
background: rgba(30, 30, 50, 0.7);
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #5a5a8a;
position: relative;
overflow: hidden;
}
.result-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #8a2be2, #da70d6, #8a2be2);
background-size: 200% 100%;
animation: shimmer 3s infinite linear;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.result-name {
font-size: 2.8rem;
color: #e2e2ff;
font-weight: 700;
margin: 10px 0;
transition: all 0.3s;
text-shadow: 0 0 15px rgba(138, 43, 226, 0.7);
text-align: center;
line-height: 1.2;
}
.result-label {
color: #a0a0c0;
font-size: 1rem;
}
.name-details {
color: #b0b0e0;
margin-top: 15px;
text-align: center;
font-size: 1.1rem;
}
.generate-btn {
background: linear-gradient(to right, #8a2be2, #da70d6);
color: white;
border: none;
padding: 16px 50px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
box-shadow: 0 4px 15px 0 rgba(138, 43, 226, 0.4);
margin: 20px 0;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.generate-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.generate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 7px 20px 0 rgba(138, 43, 226, 0.6);
}
.generate-btn:hover::before {
left: 100%;
}
.generate-btn:active {
transform: translateY(1px);
}
.counter {
margin-top: 20px;
color: #a0a0c0;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.container {
padding: 20px;
}
h1 {
font-size: 2rem;
}
.result-name {
font-size: 2.2rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1><i class="fas fa-crystal-ball"></i> Psychic Name Generator</h1>
<p class="subtitle">Create unique psychic advisor names with AI-inspired creativity</p>
<div class="settings">
<h3>Generation Settings</h3>
<div class="setting-group">
<label for="nameStyle"><i class="fas fa-palette"></i> Name Style:</label>
<select id="nameStyle">
<option value="creative">Creative Fusion</option>
<option value="cultural">Cultural Blend</option>
<option value="modern">Modern Inventive</option>
<option value="traditional">Traditional Mystic</option>
</select>
</div>
<div class="setting-group">
<label for="nameOrigin"><i class="fas fa-globe"></i> Cultural Origin:</label>
<select id="nameOrigin">
<option value="global">Global Fusion</option>
<option value="european">European</option>
<option value="asian">Asian</option>
<option value="african">African</option>
<option value="latin">Latin American</option>
<option value="middleEastern">Middle Eastern</option>
</select>
</div>
<div class="setting-group">
<label for="includeSymbols"><i class="fas fa-star"></i> Include Symbols:</label>
<select id="includeSymbols">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
<div class="result-area">
<p class="result-label">Your generated psychic name will appear here</p>
<div class="result-name" id="resultName">Seraphina Moonweaver</div>
<div class="name-details" id="nameDetails">
<strong>Style:</strong> Creative Fusion | <strong>Specialty:</strong> A cosmically attuned advisor offering celestial guidance.
</div>
<div class="counter" id="counter">Generated: 0 names</div>
</div>
<button class="generate-btn" id="generateBtn"><i class="fas fa-magic"></i> Generate Name</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const generateBtn = document.getElementById('generateBtn');
const resultName = document.getElementById('resultName');
const nameDetails = document.getElementById('nameDetails');
const counter = document.getElementById('counter');
let generatedCount = 0;
let usedNames = new Set(); // Track used names to reduce repetition
// 扩展的女性名字库 - 超过200个不同的名字
const femaleNames = {
// 欧洲名字
european: [
'Adelaide', 'Alessia', 'Amara', 'Anastasia', 'Annabelle', 'Antonia', 'Aurelia', 'Beatrice', 'Bianca', 'Camilla',
'Cassandra', 'Celeste', 'Chiara', 'Clara', 'Clementine', 'Cora', 'Dahlia', 'Eleanor', 'Elena', 'Eliza',
'Esme', 'Evangeline', 'Fiona', 'Florence', 'Gabriella', 'Genevieve', 'Giselle', 'Gwendolyn', 'Helena', 'Imogen',
'Isadora', 'Jasmine', 'Josephine', 'Juliette', 'Liliana', 'Lucinda', 'Magnolia', 'Matilda', 'Nadia', 'Octavia',
'Ophelia', 'Penelope', 'Persephone', 'Phoebe', 'Rosalind', 'Seraphina', 'Sophia', 'Theodora', 'Valentina', 'Vivienne',
'Wilhelmina', 'Zara'
],
// 亚洲名字
asian: [
'Aiko', 'Akari', 'Amaya', 'Ananya', 'Asha', 'Ayumi', 'Chieko', 'Chihiro', 'Emiko', 'Fumiko',
'Hana', 'Haruka', 'Hikari', 'Himari', 'Hiromi', 'Jia', 'Kaori', 'Keiko', 'Kiyomi', 'Lin',
'Mei', 'Miyuki', 'Natsuki', 'Rei', 'Rin', 'Sakura', 'Satsuki', 'Shizuka', 'Sumire', 'Tomoko',
'Yua', 'Yuki', 'Yumi', 'Yuna', 'Yuri', 'Zhen'
],
// 非洲名字
african: [
'Aaliyah', 'Abena', 'Adanna', 'Aisha', 'Aminata', 'Amara', 'Asha', 'Ayana', 'Binta', 'Chiamaka',
'Dakarai', 'Ebele', 'Femi', 'Halima', 'Ife', 'Imani', 'Jendayi', 'Kadija', 'Kelechi', 'Lulu',
'Makena', 'Nala', 'Nia', 'Nneka', 'Olabisi', 'Omolara', 'Rahma', 'Sade', 'Titi', 'Umi',
'Yaa', 'Zahara', 'Zola', 'Zuri'
],
// 拉丁美洲名字
latin: [
'Abril', 'Alba', 'Alegria', 'Amada', 'Amor', 'Anahi', 'Azucena', 'Belicia', 'Carmen', 'Carolina',
'Catalina', 'Consuelo', 'Dalia', 'Dolores', 'Esmeralda', 'Estrella', 'Eva', 'Fernanda', 'Florencia', 'Guadalupe',
'Ines', 'Isabel', 'Jimena', 'Juana', 'Leticia', 'Luz', 'Marisol', 'Nayeli', 'Paloma', 'Paz',
'Rosa', 'Sol', 'Sofia', 'Valentina', 'Ximena', 'Yolanda'
],
// 中东名字
middleEastern: [
'Aaliyah', 'Aisha', 'Alia', 'Amira', 'Aya', 'Dalia', 'Elham', 'Farah', 'Fatima', 'Habiba',
'Hana', 'Jamilah', 'Khadija', 'Layla', 'Leila', 'Mariam', 'Nadia', 'Noor', 'Rania', 'Rasha',
'Salma', 'Samira', 'Sana', 'Shirin', 'Soraya', 'Yasmin', 'Zahra', 'Zainab'
],
// 北美名字
northAmerican: [
'Abigail', 'Addison', 'Avery', 'Brooklyn', 'Charlotte', 'Chloe', 'Ella', 'Emily', 'Emma', 'Grace',
'Harper', 'Hazel', 'Isabella', 'Lily', 'Madison', 'Mia', 'Olivia', 'Penelope', 'Riley', 'Scarlett',
'Sophia', 'Stella', 'Victoria', 'Zoe'
]
};
// 扩展的神秘元素
const mysticalElements = {
titles: ['Mystic', 'Oracle', 'Seer', 'Diviner', 'Sage', 'Prophet', 'Visionary', 'Intuitive', 'Empath', 'Channel', 'Medium', 'Clairvoyant'],
nature: ['Moon', 'Star', 'Sun', 'Sky', 'Ocean', 'Forest', 'River', 'Mountain', 'Crystal', 'Flame', 'Rain', 'Wind', 'Earth', 'Sea', 'Dawn', 'Dusk'],
abstract: ['Dream', 'Soul', 'Spirit', 'Fate', 'Destiny', 'Harmony', 'Serenity', 'Mystery', 'Enigma', 'Echo', 'Grace', 'Hope', 'Faith', 'Joy'],
abilities: ['Whisperer', 'Weaver', 'Keeper', 'Walker', 'Speaker', 'Reader', 'Healer', 'Guide', 'Guardian', 'Shaman', 'Mender', 'Seeker'],
cosmic: ['Nebula', 'Quantum', 'Celestial', 'Astral', 'Ethereal', 'Cosmic', 'Galaxy', 'Stardust', 'Infinity', 'Void', 'Universe', 'Nova'],
elemental: ['Fire', 'Water', 'Earth', 'Air', 'Spirit', 'Light', 'Shadow', 'Energy', 'Aura', 'Vibration', 'Flame', 'Storm']
};
// 现代名字
const modernNames = [
'Zephyr', 'Nova', 'Orion', 'Lyra', 'Kai', 'Sage', 'Rowan', 'Juno', 'Phoenix', 'Aura',
'Zenith', 'Echo', 'Cipher', 'Onyx', 'Ivy', 'Cove', 'Wren', 'Jade', 'Ash', 'Skye',
'Indigo', 'Saffron', 'Coral', 'Ember', 'Flint', 'Haven', 'Meadow', 'Raven', 'Willow', 'Hawk'
];
// 符号
const symbols = ['✨', '🔮', '❤️', '🌙', '🦋', '💫', '🩵', '💎', '🪽', '🧿', '🪐', '☄️', '🪄', '📿', '🌌', '🌠', '🌀'];
// 生成一个全新的名字
function generateNewName() {
const style = document.getElementById('nameStyle').value;
const origin = document.getElementById('nameOrigin').value;
const includeSymbols = document.getElementById('includeSymbols').value === 'yes';
let nameParts = [];
let nameStyle = '';
// 添加符号（如果启用）
let prefixSymbol = '';
let suffixSymbol = '';
if (includeSymbols) {
if (Math.random() > 0.5) prefixSymbol = getRandomElement(symbols) + ' ';
if (Math.random() > 0.5) suffixSymbol = ' ' + getRandomElement(symbols);
}
// 根据所选样式生成名字
switch(style) {
case 'creative':
nameParts = generateCreativeName(origin);
nameStyle = 'Creative Fusion';
break;
case 'cultural':
nameParts = generateCulturalName(origin);
nameStyle = 'Cultural Blend';
break;
case 'modern':
nameParts = generateModernName(origin);
nameStyle = 'Modern Inventive';
break;
case 'traditional':
nameParts = generateTraditionalName(origin);
nameStyle = 'Traditional Mystic';
break;
}
// 应用AI启发的创意修改
nameParts = applyAICreativeModifications(nameParts);
const fullName = prefixSymbol + nameParts.join(' ') + suffixSymbol;
// 检查是否已经使用过这个名字
if (usedNames.has(fullName) && usedNames.size < 500) {
// 如果名字已使用且我们还没有生成太多名字，则重新生成
return generateNewName();
}
usedNames.add(fullName);
const details = generateNameDetails(nameParts, nameStyle);
return {
name: fullName,
details: details
};
}
// 创意名字生成
function generateCreativeName(origin) {
// 从所有类别中随机选择元素
const allElements = [
...mysticalElements.abstract,
...mysticalElements.cosmic,
...mysticalElements.elemental,
...mysticalElements.abilities
];
const structures = [
[getRandomElement(mysticalElements.abstract), getRandomElement(mysticalElements.abilities)],
[getRandomElement(mysticalElements.cosmic), getRandomElement(mysticalElements.abilities)],
[getRandomElement(mysticalElements.titles), getRandomElement(mysticalElements.cosmic)],
[getRandomElement(mysticalElements.elemental), getRandomElement(mysticalElements.abstract)],
['The', getRandomElement(mysticalElements.cosmic), getRandomElement(mysticalElements.abilities)],
[getRandomElement(allElements), getRandomElement(allElements)],
[getRandomElement(mysticalElements.titles), getRandomElement(mysticalElements.nature)],
[getRandomElement(mysticalElements.nature), getRandomElement(mysticalElements.abilities)]
];
return getRandomElement(structures);
}
// 文化名字生成
function generateCulturalName(origin) {
let culturalName;
if (origin === 'global') {
// 从所有文化中随机选择名字
const allCultures = Object.values(femaleNames).flat();
culturalName = getRandomElement(allCultures);
} else {
// 使用特定文化名字
culturalName = getRandomElement(femaleNames[origin] || femaleNames.european);
}
const structures = [
[culturalName],
[getRandomElement(mysticalElements.titles), culturalName],
[culturalName, getRandomElement(mysticalElements.nature)],
[getRandomElement(mysticalElements.abilities), culturalName],
[culturalName, getRandomElement(mysticalElements.abstract)],
[getRandomElement(mysticalElements.titles), culturalName, getRandomElement(mysticalElements.nature)]
];
return getRandomElement(structures);
}
// 现代名字生成
function generateModernName(origin) {
const structures = [
[getRandomElement(modernNames)],
[getRandomElement(modernNames), getRandomElement(mysticalElements.nature)],
[getRandomElement(mysticalElements.titles), getRandomElement(modernNames)],
[getRandomElement(modernNames), getRandomElement(mysticalElements.abilities)],
[getRandomElement(modernNames), getRandomElement(mysticalElements.cosmic)],
[getRandomElement(modernNames), getRandomElement(mysticalNames)]
];
return getRandomElement(structures);
}
// 传统名字生成
function generateTraditionalName(origin) {
// 从所有文化中获取传统名字
const allTraditionalNames = Object.values(femaleNames).flat();
const structures = [
[getRandomElement(mysticalElements.titles), getRandomElement(allTraditionalNames)],
[getRandomElement(allTraditionalNames), getRandomElement(mysticalElements.titles)],
[getRandomElement(mysticalElements.titles), getRandomElement(mysticalElements.nature)],
[getRandomElement(allTraditionalNames), getRandomElement(mysticalElements.nature)],
[getRandomElement(mysticalElements.titles), getRandomElement(allTraditionalNames), getRandomElement(mysticalElements.nature)]
];
return getRandomElement(structures);
}
// 应用AI启发的创意修改
function applyAICreativeModifications(parts) {
// 有时创造性地组合单词（30%几率）
if (Math.random() > 0.7 && parts.length >= 2) {
const combined = parts[0] + parts[1].toLowerCase();
return [combined, ...parts.slice(2)];
}
// 有时添加头韵（20%几率）
if (Math.random() > 0.8 && parts.length >= 2) {
const firstLetter = parts[0].charAt(0);
parts[1] = firstLetter + parts[1].substring(1);
}
return parts;
}
// 生成名字详情文本
function generateNameDetails(parts, style) {
// 提取关键元素用于描述
const hasCosmic = parts.some(part => mysticalElements.cosmic.includes(part));
const hasElemental = parts.some(part => mysticalElements.elemental.includes(part));
const hasAbstract = parts.some(part => mysticalElements.abstract.includes(part));
const hasNature = parts.some(part => mysticalElements.nature.includes(part));
let description = "A ";
// 根据元素添加主要品质
if (hasCosmic) {
description += "cosmically attuned ";
} else if (hasElemental) {
description += "elementally connected ";
} else if (hasAbstract) {
description += "profoundly intuitive ";
} else if (hasNature) {
description += "nature-aligned ";
} else {
description += "spiritually gifted ";
}
description += "advisor ";
// 添加专业领域
const specialties = [
"offering celestial guidance",
"providing soul-level insights",
"connecting with universal energies",
"revealing hidden truths",
"guiding spiritual transformations",
"channeling ancient wisdom",
"interpreting cosmic signs",
"facilitating energy healing",
"reading past life connections",
"navigating dream realms"
];
description += getRandomElement(specialties) + ".";
return `<strong>Style:</strong> ${style} | <strong>Specialty:</strong> ${description}`;
}
// 辅助函数：从数组中随机获取元素
function getRandomElement(array) {
return array[Math.floor(Math.random() * array.length)];
}
// 按钮点击时生成名字
generateBtn.addEventListener('click', function() {
const nameResult = generateNewName();
// 更新显示
resultName.textContent = nameResult.name;
nameDetails.innerHTML = nameResult.details;
// 添加动画
resultName.style.transform = 'scale(1.1)';
setTimeout(() => {
resultName.style.transform = 'scale(1)';
}, 300);
// 更新计数器
generatedCount++;
counter.textContent = `Generated: ${generatedCount} names`;
});
// 生成初始名字
generateBtn.click();
});
</script>
</body>
</html>