|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Ren'Py Editor Simulator</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #1a1a1a; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
|
|
|
.renpy-container { |
|
|
background-color: #2d2d2d; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.game-window { |
|
|
background-color: #121212; |
|
|
border: 2px solid #444; |
|
|
border-radius: 4px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.text-box { |
|
|
background: rgba(40, 40, 40, 0.9); |
|
|
border-top: 3px solid #4a6ea9; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
width: 100%; |
|
|
padding: 15px; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
.character { |
|
|
position: absolute; |
|
|
bottom: 120px; |
|
|
max-height: 60%; |
|
|
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5)); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.character-left { |
|
|
left: 10%; |
|
|
} |
|
|
|
|
|
.character-right { |
|
|
right: 10%; |
|
|
} |
|
|
|
|
|
.choice-btn { |
|
|
background: rgba(74, 110, 169, 0.2); |
|
|
border-left: 4px solid #4a6ea9; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.choice-btn:hover { |
|
|
background: rgba(74, 110, 169, 0.4); |
|
|
transform: translateX(5px); |
|
|
} |
|
|
|
|
|
.prompt-area { |
|
|
background: rgba(30, 30, 30, 0.8); |
|
|
border: 1px solid #444; |
|
|
border-radius: 6px; |
|
|
} |
|
|
|
|
|
.tab-btn { |
|
|
border-bottom: 3px solid transparent; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.tab-btn.active { |
|
|
border-bottom-color: #4a6ea9; |
|
|
color: #4a6ea9; |
|
|
} |
|
|
|
|
|
.code-editor { |
|
|
font-family: 'Courier New', monospace; |
|
|
background: #1e1e1e; |
|
|
color: #d4d4d4; |
|
|
} |
|
|
|
|
|
.loading-bar { |
|
|
height: 3px; |
|
|
background: linear-gradient(90deg, #4a6ea9, #6a8bc9); |
|
|
animation: loading 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes loading { |
|
|
0% { width: 0%; left: 0; } |
|
|
50% { width: 100%; left: 0; } |
|
|
100% { width: 0%; left: 100%; } |
|
|
} |
|
|
|
|
|
.file-explorer { |
|
|
border-right: 1px solid #444; |
|
|
} |
|
|
|
|
|
.file-item { |
|
|
padding: 6px 12px; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.file-item:hover { |
|
|
background: rgba(74, 110, 169, 0.2); |
|
|
} |
|
|
|
|
|
.file-item.active { |
|
|
background: rgba(74, 110, 169, 0.4); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="h-screen flex flex-col"> |
|
|
|
|
|
<div class="bg-gray-900 text-gray-300 p-3 flex justify-between items-center border-b border-gray-700"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-gamepad text-blue-400"></i> |
|
|
<h1 class="font-bold">Ren'Py Editor Simulator</h1> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm"> |
|
|
<i class="fas fa-play mr-1"></i> Run |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm"> |
|
|
<i class="fas fa-save mr-1"></i> Save |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex overflow-hidden"> |
|
|
|
|
|
<div class="file-explorer w-64 bg-gray-800 text-gray-300 flex flex-col"> |
|
|
<div class="p-3 border-b border-gray-700 flex justify-between items-center"> |
|
|
<h3 class="font-medium">Project Files</h3> |
|
|
<button class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex-1 overflow-y-auto p-2"> |
|
|
<div class="file-item active mb-1"> |
|
|
<i class="fas fa-folder-open text-yellow-400 mr-2"></i> game/ |
|
|
</div> |
|
|
<div class="file-item ml-4"> |
|
|
<i class="fas fa-file-code text-blue-300 mr-2"></i> script.rpy |
|
|
</div> |
|
|
<div class="file-item ml-4"> |
|
|
<i class="fas fa-file-code text-blue-300 mr-2"></i> options.rpy |
|
|
</div> |
|
|
<div class="file-item ml-4"> |
|
|
<i class="fas fa-file-code text-blue-300 mr-2"></i> screens.rpy |
|
|
</div> |
|
|
<div class="file-item mb-1"> |
|
|
<i class="fas fa-folder text-yellow-400 mr-2"></i> images/ |
|
|
</div> |
|
|
<div class="file-item mb-1"> |
|
|
<i class="fas fa-folder text-yellow-400 mr-2"></i> audio/ |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 border-t border-gray-700"> |
|
|
<button class="w-full bg-blue-600 hover:bg-blue-700 py-2 rounded text-sm"> |
|
|
<i class="fas fa-upload mr-2"></i> Import Ren'Py Game |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<div class="flex border-b border-gray-700 bg-gray-800"> |
|
|
<button class="tab-btn px-4 py-2 text-sm active"> |
|
|
<i class="fas fa-code mr-2"></i> script.rpy |
|
|
</button> |
|
|
<button class="tab-btn px-4 py-2 text-sm"> |
|
|
<i class="fas fa-cog mr-2"></i> options.rpy |
|
|
</button> |
|
|
<button class="tab-btn px-4 py-2 text-sm"> |
|
|
<i class="fas fa-tv mr-2"></i> screens.rpy |
|
|
</button> |
|
|
<button class="tab-btn px-4 py-2 text-sm"> |
|
|
<i class="fas fa-magic mr-2"></i> AI Generator |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex overflow-hidden"> |
|
|
|
|
|
<div class="w-1/2 flex flex-col border-r border-gray-700"> |
|
|
<div class="p-2 bg-gray-800 text-sm text-gray-400 border-b border-gray-700"> |
|
|
script.rpy - Editing |
|
|
</div> |
|
|
<div class="flex-1 overflow-auto code-editor p-4"> |
|
|
<div class="text-blue-400"># This is a sample Ren'Py script</div> |
|
|
<div class="text-blue-400"># You can edit it or generate new scenes with AI</div> |
|
|
<br> |
|
|
<div class="text-purple-400">label start:</div> |
|
|
<div class="ml-4 text-gray-300"> scene bg room with fade</div> |
|
|
<div class="ml-4 text-gray-300"> show alice happy at left</div> |
|
|
<div class="ml-4 text-gray-300"> show bob neutral at right</div> |
|
|
<br> |
|
|
<div class="ml-4 text-yellow-300"> alice "Hi Bob! How are you today?"</div> |
|
|
<div class="ml-4 text-yellow-300"> bob "I'm good, thanks for asking."</div> |
|
|
<br> |
|
|
<div class="ml-4 text-gray-300"> menu:</div> |
|
|
<div class="ml-8 text-cyan-300"> "Ask about his day":</div> |
|
|
<div class="ml-12 text-yellow-300"> alice "How was your day?"</div> |
|
|
<div class="ml-12 text-yellow-300"> bob "It was pretty good, just busy with work."</div> |
|
|
<div class="ml-8 text-cyan-300"> "Invite him for coffee":</div> |
|
|
<div class="ml-12 text-yellow-300"> alice "Want to grab some coffee later?"</div> |
|
|
<div class="ml-12 text-yellow-300"> bob "Sure, that sounds great!"</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 border-t border-gray-700"> |
|
|
<div class="text-sm text-gray-400 mb-2">AI Scene Generator</div> |
|
|
<div class="prompt-area p-3 mb-2"> |
|
|
<textarea class="w-full bg-transparent outline-none resize-none" rows="3" placeholder="Describe the scene you want to generate (e.g. 'Add a scene in the park where Alice confesses her feelings to Bob')"></textarea> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm"> |
|
|
<i class="fas fa-bolt mr-1"></i> Quick Generate |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm"> |
|
|
<i class="fas fa-sliders-h mr-1"></i> Advanced |
|
|
</button> |
|
|
</div> |
|
|
<button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm"> |
|
|
<i class="fas fa-magic mr-1"></i> Generate Scene |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-1/2 flex flex-col"> |
|
|
<div class="p-2 bg-gray-800 text-sm text-gray-400 border-b border-gray-700 flex justify-between"> |
|
|
<div>Game Preview</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-expand"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 relative game-window"> |
|
|
|
|
|
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://i.imgur.com/JjQZQ9j.jpg');"></div> |
|
|
|
|
|
|
|
|
<img class="character character-left" src="https://i.imgur.com/5X5X5X5.png" alt="Alice" style="display: none;"> |
|
|
<img class="character character-right" src="https://i.imgur.com/6Y6Y6Y6.png" alt="Bob" style="display: none;"> |
|
|
|
|
|
|
|
|
<div class="text-box"> |
|
|
<div class="text-blue-400 font-medium mb-2">Alice</div> |
|
|
<div class="text-gray-200 mb-4">Hi Bob! How are you today?</div> |
|
|
|
|
|
|
|
|
<div class="space-y-2"> |
|
|
<button class="choice-btn w-full text-left p-2 rounded text-sm"> |
|
|
Ask about his day |
|
|
</button> |
|
|
<button class="choice-btn w-full text-left p-2 rounded text-sm"> |
|
|
Invite him for coffee |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-2 bg-gray-900 text-xs text-gray-400 border-t border-gray-700 h-24 overflow-y-auto"> |
|
|
<div class="text-green-400">> Game initialized</div> |
|
|
<div class="text-blue-400">> Loading script.rpy</div> |
|
|
<div class="text-blue-400">> Found 2 characters and 1 background</div> |
|
|
<div class="text-gray-400">> Ready to play or generate new scenes</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 text-gray-400 text-xs p-1 flex justify-between border-t border-gray-700"> |
|
|
<div class="flex space-x-4"> |
|
|
<div>Ren'Py 8.1.3</div> |
|
|
<div>Python 3.9</div> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<div>UTF-8</div> |
|
|
<div>Windows (CRLF)</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="import-modal" class="fixed inset-0 bg-black bg-opacity-70 hidden items-center justify-center z-50"> |
|
|
<div class="bg-gray-800 rounded-lg w-full max-w-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-medium">Import Ren'Py Game</h3> |
|
|
<button onclick="document.getElementById('import-modal').classList.add('hidden')" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Import from ZIP</label> |
|
|
<div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500 transition"> |
|
|
<i class="fas fa-file-archive text-3xl text-gray-500 mb-2"></i> |
|
|
<p class="text-sm text-gray-400">Drag & drop your Ren'Py game ZIP file here</p> |
|
|
<p class="text-xs text-gray-500 mt-2">or click to browse files</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-700 pt-4"> |
|
|
<label class="block text-sm font-medium mb-1">Import from URL</label> |
|
|
<div class="flex"> |
|
|
<input type="text" class="flex-1 bg-gray-700 border border-gray-600 rounded-l px-3 py-2 text-sm outline-none focus:border-blue-500" placeholder="https://example.com/game.zip"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 px-4 rounded-r text-sm"> |
|
|
Fetch |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">Supports Itch.io, GitHub, and direct download links</p> |
|
|
</div> |
|
|
|
|
|
<div class="pt-2"> |
|
|
<button class="w-full bg-blue-600 hover:bg-blue-700 py-2 rounded text-sm"> |
|
|
<i class="fas fa-download mr-2"></i> Import Game |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); |
|
|
btn.classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.choice-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
|
|
|
const loadingBar = document.createElement('div'); |
|
|
loadingBar.className = 'loading-bar absolute bottom-0 left-0'; |
|
|
this.appendChild(loadingBar); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const gameWindow = document.querySelector('.game-window'); |
|
|
gameWindow.style.backgroundImage = "url('https://i.imgur.com/K9QkQkQ.jpg')"; |
|
|
|
|
|
|
|
|
document.querySelector('.character-left').style.display = 'block'; |
|
|
document.querySelector('.character-right').style.display = 'none'; |
|
|
|
|
|
|
|
|
document.querySelector('.text-box div:nth-child(1)').textContent = "Bob"; |
|
|
document.querySelector('.text-box div:nth-child(2)').textContent = "It was pretty good, just busy with work."; |
|
|
|
|
|
|
|
|
document.querySelector('.text-box div:nth-child(3)').innerHTML = ''; |
|
|
|
|
|
|
|
|
const continueBtn = document.createElement('button'); |
|
|
continueBtn.className = 'mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm float-right'; |
|
|
continueBtn.innerHTML = 'Continue <i class="fas fa-arrow-right ml-1"></i>'; |
|
|
document.querySelector('.text-box').appendChild(continueBtn); |
|
|
|
|
|
|
|
|
continueBtn.addEventListener('click', () => { |
|
|
|
|
|
gameWindow.style.backgroundImage = "url('https://i.imgur.com/JjQZQ9j.jpg')"; |
|
|
document.querySelector('.character-left').style.display = 'none'; |
|
|
document.querySelector('.character-right').style.display = 'block'; |
|
|
document.querySelector('.text-box div:nth-child(1)').textContent = "Alice"; |
|
|
document.querySelector('.text-box div:nth-child(2)').textContent = "Hi Bob! How are you today?"; |
|
|
|
|
|
|
|
|
const choicesHTML = ` |
|
|
<div class="space-y-2"> |
|
|
<button class="choice-btn w-full text-left p-2 rounded text-sm"> |
|
|
Ask about his day |
|
|
</button> |
|
|
<button class="choice-btn w-full text-left p-2 rounded text-sm"> |
|
|
Invite him for coffee |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
document.querySelector('.text-box div:nth-child(3)').innerHTML = choicesHTML; |
|
|
continueBtn.remove(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.choice-btn').forEach(btn => { |
|
|
btn.addEventListener('click', choiceBtnHandler); |
|
|
}); |
|
|
}); |
|
|
}, 800); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('[class*="fa-upload"]').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
document.getElementById('import-modal').classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('[class*="fa-magic"]').addEventListener('click', function() { |
|
|
const prompt = document.querySelector('.prompt-area textarea').value; |
|
|
if (!prompt) return; |
|
|
|
|
|
|
|
|
const originalText = this.innerHTML; |
|
|
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Generating...'; |
|
|
this.classList.add('opacity-75'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const codeEditor = document.querySelector('.code-editor'); |
|
|
const newCode = ` |
|
|
<div class="text-purple-400">label park_scene:</div> |
|
|
<div class="ml-4 text-gray-300"> scene bg park with fade</div> |
|
|
<div class="ml-4 text-gray-300"> show alice nervous at left</div> |
|
|
<div class="ml-4 text-gray-300"> show bob surprised at right</div> |
|
|
<br> |
|
|
<div class="ml-4 text-yellow-300"> alice "Bob, there's something I need to tell you..."</div> |
|
|
<div class="ml-4 text-yellow-300"> bob "What is it, Alice? You seem nervous."</div> |
|
|
<div class="ml-4 text-yellow-300"> alice "I... I think I have feelings for you."</div> |
|
|
<br> |
|
|
<div class="ml-4 text-gray-300"> menu:</div> |
|
|
<div class="ml-8 text-cyan-300"> "Reciprocate her feelings":</div> |
|
|
<div class="ml-12 text-yellow-300"> bob "I feel the same way!"</div> |
|
|
<div class="ml-12 text-yellow-300"> alice happy "Really? I'm so happy!"</div> |
|
|
<div class="ml-8 text-cyan-300"> "Let her down gently":</div> |
|
|
<div class="ml-12 text-yellow-300"> bob "I'm flattered, but I think we're better as friends."</div> |
|
|
<div class="ml-12 text-yellow-300"> alice sad "Oh... I understand."</div> |
|
|
`; |
|
|
codeEditor.innerHTML += newCode; |
|
|
|
|
|
|
|
|
const consoleOutput = document.querySelector('.console-output'); |
|
|
consoleOutput.innerHTML += ` |
|
|
<div class="text-green-400">> Generated new scene from prompt: "${prompt}"</div> |
|
|
<div class="text-blue-400">> Added label "park_scene" to script.rpy</div> |
|
|
`; |
|
|
consoleOutput.scrollTop = consoleOutput.scrollHeight; |
|
|
|
|
|
|
|
|
this.innerHTML = originalText; |
|
|
this.classList.remove('opacity-75'); |
|
|
|
|
|
|
|
|
const successMsg = document.createElement('div'); |
|
|
successMsg.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded shadow-lg'; |
|
|
successMsg.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Scene generated successfully!'; |
|
|
document.body.appendChild(successMsg); |
|
|
|
|
|
setTimeout(() => { |
|
|
successMsg.remove(); |
|
|
}, 3000); |
|
|
}, 2000); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=zehyr/dee-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
