[events_listing][recipe_listing]			
    <!-- SIDEBAR -->
        <button onclick="openTab('upload')">📤</button>
        <button onclick="openTab('text')">🔤</button>
    <!-- MAIN -->
        <!-- TOPBAR -->
            <button onclick="undo()">Undo</button>
            <button onclick="redo()">Redo</button>
            <button onclick="saveDesign()">Save</button>
        <!-- TOOL PANELS -->
            <input type="file" id="upload">
            <input type="text" id="textInput" placeholder="Enter text">
            <button onclick="addText()">Add Text</button>
        <!-- CANVAS -->
            <canvas id="canvas" width="420" height="520"></canvas>
        <!-- FRONT BACK SELECT -->
            <img src="YOUR_FRONT_IMAGE" onclick="loadFront(this)">
            <img src="YOUR_BACK_IMAGE" onclick="loadBack(this)">
<style>
#designerApp {
    display: flex;
    height: 100vh;
    font-family: Arial;
}
/* Sidebar */
.sidebar {
    width: 60px;
    background: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
.sidebar button {
    margin: 10px 0;
    font-size: 20px;
    background: none;
    color: white;
    border: none;
    cursor: pointer;
}
/* Main */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Topbar */
.topbar {
    background: #eee;
    padding: 10px;
}
/* Tool Panel */
.tool-panel {
    padding: 10px;
    background: #fafafa;
}
/* Canvas */
.canvas-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ddd;
}
canvas {
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
/* Views */
.views {
    text-align: center;
    padding: 10px;
}
.views img {
    width: 70px;
    margin: 5px;
    cursor: pointer;
    border: 2px solid transparent;
}
.views img.active {
    border: 2px solid #007bff;
}
</style>