<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SillyBubble Image Generator Test</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.bubble-container {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
.bubble {
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.bubble h3 {
margin-top: 0;
}
.bubble img {
max-width: 100%;
height: auto;
display: block;
margin: 10px 0;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.code {
background-color: #f0f0f0;
padding: 10px;
border-radius: 4px;
font-family: monospace;
overflow-x: auto;
}
</style>
</head>
<body>
<h1>SillyBubble Image Generator Test</h1>
<div class="bubble">
<h3>Generate Your Own Chat Bubble</h3>
<div class="form-group">
<label for="text">Text:</label>
<input type="text" id="text" value="Hello, I'm a chat bubble generated on the fly!" />
</div>
<div class="form-group">
<label for="style">Style:</label>
<select id="style">
<option value="default">Default</option>
<option value="modern">Modern</option>
<option value="retro">Retro</option>
<option value="minimal">Minimal</option>
</select>
</div>
<button onclick="generateImage()">Generate Image</button>
<div id="result" style="margin-top: 20px;"></div>
</div>
<div class="bubble-container">
<div class="bubble">
<h3>Default Style</h3>
<img src="image.php?q=This%20is%20the%20default%20style%20for%20chat%20bubbles.%20It%20has%20a%20light%20blue%20background%20with%20rounded%20corners." alt="Default Style Chat Bubble" />
</div>
<div class="bubble">
<h3>Modern Style</h3>
<img src="image.php?q=This%20is%20the%20modern%20style%20for%20chat%20bubbles.%20It%20has%20a%20dark%20background%20with%20white%20text.&style=modern" alt="Modern Style Chat Bubble" />
</div>
<div class="bubble">
<h3>Retro Style</h3>
<img src="image.php?q=This%20is%20the%20retro%20style%20for%20chat%20bubbles.%20It%20has%20a%20warm%20color%20scheme%20and%20square%20corners.&style=retro" alt="Retro Style Chat Bubble" />
</div>
<div class="bubble">
<h3>Minimal Style</h3>
<img src="image.php?q=This%20is%20the%20minimal%20style%20for%20chat%20bubbles.%20It%20has%20a%20clean,%20simple%20design%20with%20square%20corners.&style=minimal" alt="Minimal Style Chat Bubble" />
</div>
</div>
<div class="bubble">
<h3>How to Use in SillyBubble Extension</h3>
<p>The SillyBubble extension uses this image generator to create chat bubbles on the fly. The extension passes text to this script and gets back an image.</p>
<h4>URL Format:</h4>
<div class="code">image.php?q=[URL-ENCODED-TEXT]&style=[STYLE-NAME]</div>
<h4>Available Styles:</h4>
<ul>
<li><strong>default</strong> - Light blue with rounded corners</li>
<li><strong>modern</strong> - Dark with light text</li>
<li><strong>retro</strong> - Warm colors with square corners</li>
<li><strong>minimal</strong> - Clean gray with square corners</li>
</ul>
</div>
<script>
function generateImage() {
const text = document.getElementById('text').value;
const style = document.getElementById('style').value;
const encodedText = encodeURIComponent(text);
let imageUrl = `image.php?q=${encodedText}`;
if (style !== 'default') {
imageUrl += `&style=${style}`;
}
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<h4>Generated Image:</h4>
<img src="${imageUrl}" alt="Generated Chat Bubble" style="max-width: 100%;" />
<h4>URL:</h4>
<div class="code">${imageUrl}</div>
`;
}
</script>
</body>
</html>