a907c4d073
- Create image_html.php as fallback when GD not available - Add test.html page to demonstrate different bubble styles - Update index.js to support rendering bubbles in collapsed tool calls - Improve example.html settings page with new options - Add reference/ to .gitignore 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
157 lines
5.4 KiB
HTML
157 lines
5.4 KiB
HTML
<!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> |