transparent results from the CPAN

transparent
Chandra
view release on metacpan or search on metacpan
examples/canvas_demo.pl view on Meta::CPAN
        margin-bottom: 20px;
    }
    canvas {
        display: block;
        border-radius: 8px;
        cursor: crosshair;
    }
    .toolbar {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 15px;
    }
    .tool-group {
        background: rgba(255,255,255,0.1);
        border-radius: 8px;
        padding: 10px 15px;
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .tool-group label {
        font-size: 12px;
        color: #aaa;
        margin-right: 5px;
    }
    button {
        background: #3498db;
        color: #fff;
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s;
    }
    button:hover {
        background: #2980b9;
        transform: translateY(-1px);
    }
    button.active {
        background: #e74c3c;
    }
    button.clear {
        background: #95a5a6;
    }
    button.clear:hover {
        background: #7f8c8d;
    }
    button.demo {
        background: #27ae60;
    }
    button.demo:hover {
        background: #219a52;
    }
    .color-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all 0.2s;
    }
    .color-btn:hover {
        transform: scale(1.1);
    }
    .color-btn.active {
        border-color: #fff;
        box-shadow: 0 0 10px rgba(255,255,255,0.5);
    }
    .status {
        text-align: center;
        font-size: 12px;
        color: #888;
        margin-top: 10px;
    }
    .features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 15px;
        font-size: 11px;
        color: #888;
    }
    .feature {
        background: rgba(255,255,255,0.05);
        padding: 8px;
        border-radius: 6px;
        text-align: center;
    }
</style>
</head>
<body>
<div class="container">
    <h1>ðŸŽ¨ Chandra::Canvas Demo</h1>
    
    <div class="toolbar">
        <div class="tool-group">
            <label>Shape:</label>
            <button id="btn-rect" class="active" onclick="setShape('rect')">â–¢ Rect</button>
            <button id="btn-circle" onclick="setShape('circle')">â—‹ Circle</button>
            <button id="btn-triangle" onclick="setShape('triangle')">â–³ Triangle</button>
            <button id="btn-star" onclick="setShape('star')">â˜… Star</button>
            <button id="btn-rounded_rect" onclick="setShape('rounded_rect')">â–¢ Rounded</button>
            <button id="btn-bezier" onclick="setShape('bezier')">ã€° Bezier</button>
        </div>
        
        <div class="tool-group">
            <label>Color:</label>
            <div class="color-btn active" style="background:#e74c3c" onclick="setColor('#e74c3c')"></div>
            <div class="color-btn" style="background:#3498db" onclick="setColor('#3498db')"></div>
            <div class="color-btn" style="background:#27ae60" onclick="setColor('#27ae60')"></div>
            <div class="color-btn" style="background:#f39c12" onclick="setColor('#f39c12')"></div>
            <div class="color-btn" style="background:#9b59b6" onclick="setColor('#9b59b6')"></div>
            <div class="color-btn" style="background:#1abc9c" onclick="setColor('#1abc9c')"></div>
        </div>
        
        <div class="tool-group">
            <button class="demo" onclick="drawDemo()">âœ¨ Show All Features</button>
            <button class="clear" onclick="clearCanvas()">ðŸ—‘ Clear</button>
( run in 1.968 second using v1.01-cache-2.11-cpan-75ffa21a3d4 )