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>
114 lines
3.0 KiB
PHP
114 lines
3.0 KiB
PHP
<?php
|
|
/**
|
|
* SillyBubble HTML Fallback
|
|
*
|
|
* Creates a chat bubble using HTML/CSS when the GD library is not available
|
|
* Accepts the same parameters as image.php
|
|
*/
|
|
|
|
// Get the text from the URL parameter
|
|
$text = isset($_GET['q']) ? $_GET['q'] : 'Hello world!';
|
|
$style = isset($_GET['style']) ? strtolower($_GET['style']) : 'default';
|
|
|
|
// Decode URL-encoded text
|
|
$text = htmlspecialchars(urldecode($text));
|
|
|
|
// Define styles
|
|
$styles = [
|
|
'default' => [
|
|
'background' => '#c8dcff',
|
|
'border' => '#96aade',
|
|
'text' => '#000000',
|
|
],
|
|
'modern' => [
|
|
'background' => '#646464',
|
|
'border' => '#464646',
|
|
'text' => '#ffffff',
|
|
],
|
|
'retro' => [
|
|
'background' => '#fff0c8',
|
|
'border' => '#dcb48c',
|
|
'text' => '#64321e',
|
|
],
|
|
'minimal' => [
|
|
'background' => '#f5f5f5',
|
|
'border' => '#c8c8c8',
|
|
'text' => '#323232',
|
|
]
|
|
];
|
|
|
|
// Use default style if specified style doesn't exist
|
|
if (!isset($styles[$style])) {
|
|
$style = 'default';
|
|
}
|
|
|
|
// CSS for different shapes
|
|
$shapeCSS = [
|
|
'default' => 'border-radius: 10px;',
|
|
'modern' => 'border-radius: 10px;',
|
|
'retro' => 'border-radius: 0;',
|
|
'minimal' => 'border-radius: 0;',
|
|
];
|
|
|
|
// Output HTML/CSS
|
|
header('Content-Type: text/html');
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chat Bubble</title>
|
|
<style>
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: transparent;
|
|
}
|
|
.bubble-container {
|
|
max-width: 600px;
|
|
position: relative;
|
|
padding: 20px;
|
|
}
|
|
.bubble {
|
|
position: relative;
|
|
background-color: <?php echo $styles[$style]['background']; ?>;
|
|
border: 1px solid <?php echo $styles[$style]['border']; ?>;
|
|
color: <?php echo $styles[$style]['text']; ?>;
|
|
padding: 20px;
|
|
<?php echo $shapeCSS[$style]; ?>
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.5;
|
|
}
|
|
.bubble:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 50px;
|
|
border-width: 15px 15px 0;
|
|
border-style: solid;
|
|
border-color: <?php echo $styles[$style]['background']; ?> transparent;
|
|
}
|
|
.bubble:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -16px;
|
|
left: 49px;
|
|
border-width: 16px 16px 0;
|
|
border-style: solid;
|
|
border-color: <?php echo $styles[$style]['border']; ?> transparent;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bubble-container">
|
|
<div class="bubble">
|
|
<?php echo nl2br($text); ?>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|