<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Jedi Name Generator</title>
<style>
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #000;
color: #e0e0e0;
margin: 0;
padding: 0;
background-image: url(‘https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80’);
background-size: cover;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background-color: rgba(0, 0, 0, 0.85);
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 150, 255, 0.3);
width: 90%;
max-width: 700px;
border: 1px solid #0066cc;
}
h1 {
color: #00a2ff;
text-align: center;
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(0, 162, 255, 0.5);
font-family: ‘Pathway Gothic One’, sans-serif;
letter-spacing: 2px;
}
.subtitle {
text-align: center;
color: #6d9ebd;
margin-bottom: 30px;
font-style: italic;
font-size: 1.1rem;
}
.name-display {
font-size: 2.5rem;
text-align: center;
margin: 30px 0;
padding: 20px;
background-color: rgba(0, 30, 60, 0.5);
border-radius: 8px;
border: 1px solid #0066cc;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
color: #00ccff;
font-family: ‘Pathway Gothic One’, sans-serif;
letter-spacing: 1px;
text-shadow: 0 0 8px rgba(0, 204, 255, 0.5);
}
.options {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
justify-content: center;
}
.option-group {
flex: 1;
min-width: 200px;
}
label {
display: block;
margin-bottom: 8px;
color: #00a2ff;
font-size: 0.9rem;
}
select, input {
width: 100%;
padding: 10px;
background-color: #001a33;
color: #e0e0e0;
border: 1px solid #0066cc;
border-radius: 5px;
font-size: 1rem;
}
.button-group {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
button {
background: linear-gradient(to right, #003366, #0066cc);
color: white;
border: none;
padding: 12px 25px;
font-size: 1.1rem;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
button:hover {
background: linear-gradient(to right, #0066cc, #0099ff);
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}
button:active {
transform: translateY(0);
}
.history {
margin-top: 30px;
}
.history h3 {
color: #00a2ff;
border-bottom: 1px solid #0066cc;
padding-bottom: 5px;
}
.history-list {
max-height: 150px;
overflow-y: auto;
background-color: rgba(0, 30, 60, 0.5);
padding: 10px;
border-radius: 5px;
border: 1px solid #0066cc;
margin-top: 10px;
}
.history-item {
padding: 8px 0;
border-bottom: 1px dashed #0066cc;
cursor: pointer;
transition: color 0.2s;
}
.history-item:hover {
color: #00ccff;
}
.history-item:last-child {
border-bottom: none;
}
footer {
text-align: center;
margin-top: 30px;
color: #6d9ebd;
font-size: 0.8rem;
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #001a33;
}
::-webkit-scrollbar-thumb {
background: #0066cc;
border-radius: 4px;
}
@media (max-width: 600px) {
.name-display {
font-size: 1.8rem;
padding: 15px;
min-height: 100px;
}
h1 {
font-size: 2rem;
}
}
</style>
<link href=”https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<h1>JEDI NAME GENERATOR</h1>
<p class=”subtitle”>Discover your true identity in the Jedi Order</p>
<div class=”name-display” id=”nameDisplay”>May the Force be with you</div>
<div class=”options”>
<div class=”option-group”>
<label for=”era”>Jedi Era:</label>
<select id=”era”>
<option value=”old-republic”>Old Republic</option>
<option value=”high-republic”>High Republic</option>
<option value=”prequel”>Prequel Era</option>
<option value=”original”>Original Trilogy</option>
<option value=”new”>New Jedi Order</option>
</select>
</div>
<div class=”option-group”>
<label for=”species”>Species:</label>
<select id=”species”>
<option value=”human”>Human</option>
<option value=”twi’lek”>Twi’lek</option>
<option value=”togruta”>Togruta</option>
<option value=”zabrak”>Zabrak</option>
<option value=”miraluka”>Miraluka</option>
<option value=”kel-dor”>Kel Dor</option>
<option value=”nautolan”>Nautolan</option>
<option value=”mirialan”>Mirialan</option>
</select>
</div>
<div class=”option-group”>
<label for=”alignment”>Alignment:</label>
<select id=”alignment”>
<option value=”balanced”>Balanced</option>
<option value=”light”>Light Side</option>
<option value=”grey”>Grey Jedi</option>
<option value=”dark”>Dark Side</option>
</select>
</div>
</div>
<div class=”button-group”>
<button id=”generateBtn”>Generate Name</button>
<button id=”saveBtn”>Save Name</button>
<button id=”clearBtn”>Clear History</button>
</div>
<div class=”history”>
<h3>Previously Generated Names</h3>
<div class=”history-list” id=”historyList”>
<!– Names will appear here –>
</div>
</div>
<footer>
Not affiliated with Lucasfilm or Disney. For entertainment purposes only.
</footer>
</div>
<script>
// Name components based on Star Wars lore
const nameComponents = {
prefixes: {
human: [“A”, “An”, “Ar”, “B”, “C”, “D”, “E”, “F”, “G”, “H”, “J”, “K”, “L”, “M”, “N”, “O”, “P”, “Q”, “R”, “S”, “T”, “V”, “Z”],
“twi’lek”: [“A”, “B”, “D”, “H”, “J”, “K”, “L”, “M”, “N”, “R”, “S”, “T”, “V”, “Z”],
togruta: [“A”, “Ah”, “B”, “D”, “F”, “H”, “J”, “K”, “L”, “M”, “N”, “R”, “S”, “Sh”, “T”, “V”, “Z”],
zabrak: [“A”, “B”, “D”, “E”, “F”, “G”, “H”, “J”, “K”, “L”, “M”, “N”, “O”, “R”, “S”, “T”, “V”, “Z”],
miraluka: [“A”, “Ad”, “Al”, “Ar”, “B”, “D”, “E”, “F”, “H”, “J”, “K”, “L”, “M”, “N”, “R”, “S”, “T”, “V”, “Z”],
“kel-dor”: [“B”, “D”, “G”, “J”, “K”, “M”, “N”, “P”, “Q”, “S”, “T”, “V”],
nautolan: [“A”, “B”, “D”, “F”, “G”, “H”, “J”, “K”, “L”, “M”, “N”, “Q”, “R”, “S”, “T”, “V”, “Z”],
mirialan: [“A”, “B”, “D”, “E”, “F”, “H”, “J”, “K”, “L”, “M”, “N”, “R”, “S”, “T”, “V”, “Z”]
},
middles: {
human: [“an”, “ar”, “ba”, “be”, “da”, “de”, “el”, “en”, “er”, “es”, “in”, “is”, “ka”, “ke”, “la”, “le”, “ma”, “me”, “na”, “ne”, “ra”, “re”, “sa”, “se”, “ta”, “te”, “va”, “ve”, “za”, “ze”],
“twi’lek”: [“aa”, “ba”, “da”, “ee”, “ka”, “la”, “lee”, “maa”, “na”, “nee”, “ra”, “ree”, “sa”, “see”, “ta”, “tee”, “va”, “vee”, “za”, “zee”],
togruta: [“a”, “ah”, “ba”, “da”, “ha”, “ja”, “ka”, “la”, “ma”, “na”, “ra”, “sa”, “sha”, “ta”, “va”, “za”],
zabrak: [“ar”, “ba”, “da”, “ga”, “ha”, “ja”, “ka”, “la”, “ma”, “na”, “ra”, “sa”, “ta”, “va”, “za”],
miraluka: [“al”, “ar”, “ba”, “da”, “el”, “en”, “er”, “es”, “in”, “is”, “ka”, “la”, “ma”, “na”, “ra”, “sa”, “ta”, “va”, “za”],
“kel-dor”: [“ar”, “ba”, “da”, “ga”, “ja”, “ka”, “la”, “ma”, “na”, “pa”, “qa”, “ra”, “sa”, “ta”, “va”],
nautolan: [“a”, “ba”, “da”, “fa”, “ga”, “ha”, “ja”, “ka”, “la”, “ma”, “na”, “qa”, “ra”, “sa”, “ta”, “va”, “za”],
mirialan: [“a”, “ba”, “da”, “fa”, “ha”, “ja”, “ka”, “la”, “ma”, “na”, “ra”, “sa”, “ta”, “va”, “za”]
},
suffixes: {
human: [“an”, “ar”, “el”, “en”, “er”, “es”, “in”, “is”, “on”, “or”, “us”],
“twi’lek”: [“a”, “ak”, “ar”, “ek”, “ik”, “ok”, “or”, “uk”],
togruta: [“a”, “ah”, “ar”, “ek”, “ik”, “ok”, “or”, “uk”],
zabrak: [“ar”, “ek”, “ik”, “ok”, “or”, “uk”],
miraluka: [“al”, “an”, “ar”, “el”, “en”, “er”, “in”, “is”, “on”, “or”, “us”],
“kel-dor”: [“ar”, “ek”, “ik”, “ok”, “or”, “uk”],
nautolan: [“a”, “ak”, “ar”, “ek”, “ik”, “ok”, “or”, “uk”],
mirialan: [“a”, “ar”, “ek”, “ik”, “ok”, “or”, “uk”]
},
titles: {
“old-republic”: [“the Wise”, “the Ancient”, “the Historian”, “the Keeper”, “the Guardian”, “the Preserver”],
“high-republic”: [“the Explorer”, “the Beacon”, “the Pathfinder”, “the Valiant”, “the Stalwart”, “the Just”],
“prequel”: [“the Brave”, “the Noble”, “the Honorable”, “the Defender”, “the Protector”, “the Peacekeeper”],
“original”: [“the Last”, “the Survivor”, “the Hidden”, “the Exile”, “the Wanderer”, “the Forgotten”],
“new”: [“the Renewed”, “the Reborn”, “the Awakened”, “the Restorer”, “the Teacher”, “the Guide”]
},
darkSide: {
prefixes: [“Darth”, “Lord”, “Dark”, “Shadow”, “Night”, “Void”, “Mal”, “Mor”, “Vor”, “Zal”],
names: [“Vader”, “Maul”, “Sidious”, “Tyranus”, “Bane”, “Revan”, “Nihilus”, “Sion”, “Malak”, “Vitus”, “Zannah”, “Krayt”]
}
};
// DOM elements
const nameDisplay = document.getElementById(‘nameDisplay’);
const generateBtn = document.getElementById(‘generateBtn’);
const saveBtn = document.getElementById(‘saveBtn’);
const clearBtn = document.getElementById(‘clearBtn’);
const historyList = document.getElementById(‘historyList’);
const eraSelect = document.getElementById(‘era’);
const speciesSelect = document.getElementById(‘species’);
const alignmentSelect = document.getElementById(‘alignment’);
// History array
let nameHistory = JSON.parse(localStorage.getItem(‘jediNameHistory’)) || [];
// Display history on load
displayHistory();
// Generate name function
function generateJediName() {
const era = eraSelect.value;
const species = speciesSelect.value;
const alignment = alignmentSelect.value;
let name = ”;
// Dark Side gets special treatment
if (alignment === ‘dark’) {
const prefix = getRandomElement(nameComponents.darkSide.prefixes);
const darkName = getRandomElement(nameComponents.darkSide.names);
name = prefix + ‘ ‘ + darkName;
}
// Grey Jedi sometimes get titles
else if (alignment === ‘grey’ && Math.random() > 0.7) {
const prefix = getRandomElement(nameComponents.darkSide.prefixes.filter(p => p !== “Darth” && p !== “Lord”));
const darkName = getRandomElement(nameComponents.darkSide.names);
name = prefix + ‘ ‘ + darkName;
}
else {
// Normal Jedi name generation
const prefix = getRandomElement(nameComponents.prefixes[species]);
const middle = getRandomElement(nameComponents.middles[species]);
const suffix = getRandomElement(nameComponents.suffixes[species]);
name = prefix + middle + suffix;
// Capitalize first letter
name = name.charAt(0).toUpperCase() + name.slice(1);
// 30% chance to add a title
if (Math.random() > 0.7) {
name += ‘ ‘ + getRandomElement(nameComponents.titles[era]);
}
}
nameDisplay.textContent = name;
return name;
}
// Save name to history
function saveName() {
const currentName = nameDisplay.textContent;
if (currentName && currentName !== ‘May the Force be with you’ && !nameHistory.includes(currentName)) {
nameHistory.unshift(currentName);
if (nameHistory.length > 20) {
nameHistory.pop();
}
localStorage.setItem(‘jediNameHistory’, JSON.stringify(nameHistory));
displayHistory();
}
}
// Display history
function displayHistory() {
historyList.innerHTML = ”;
nameHistory.forEach(name => {
const item = document.createElement(‘div’);
item.className = ‘history-item’;
item.textContent = name;
item.addEventListener(‘click’, () => {
nameDisplay.textContent = name;
});
historyList.appendChild(item);
});
}
// Clear history
function clearHistory() {
nameHistory = [];
localStorage.setItem(‘jediNameHistory’, JSON.stringify(nameHistory));
displayHistory();
}
// Helper function to get random array element
function getRandomElement(array) {
return array[Math.floor(Math.random() * array.length)];
}
// Event listeners
generateBtn.addEventListener(‘click’, generateJediName);
saveBtn.addEventListener(‘click’, saveName);
clearBtn.addEventListener(‘click’, clearHistory);
// Generate first name on load
window.addEventListener(‘load’, generateJediName);
</script>
</body>
</html>