Widget 3 boutons pour volet roulant
Bonjour,
Je cherche a créé un widget avec trois boutons pour les volets roulant mais j’ai à chaque fois la duplication des boutons mais je ne sais pas pourquoi.
<div class="cmd cmd-widget">
<div class="somfy-container">
<!-- Ligne du haut : Monter / Descendre -->
<div class="row-top">
<div class="block-btn">
<div class="label">Monter</div>
<button class="somfy-btn" onclick="jeedom.cmd.execute({id:#id_UP#});">
<i class="fa fa-arrow-up"></i>
</button>
</div>
<div class="block-btn">
<div class="label">Descendre</div>
<button class="somfy-btn" onclick="jeedom.cmd.execute({id:#id_DOWN#});">
<i class="fa fa-arrow-down"></i>
</button>
</div>
</div>
<!-- Ligne du bas : Stop (my) -->
<div class="row-bottom">
<div class="block-btn">
<div class="label">Stop</div>
<button class="somfy-btn somfy-my" onclick="jeedom.cmd.execute({id:#id_STOP#});">
my
</button>
</div>
</div>
</div>
<style>
.somfy-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 10px;
}
.row-top {
display: flex;
justify-content: center;
gap: 50px;
width: 100%;
}
.row-bottom {
display: flex;
justify-content: center;
margin-top: -5px;
}
.block-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.label {
color: #ddd;
font-size: 13px;
margin-bottom: 3px;
text-align: center;
}
/* --- STYLE BOUTONS SOMFY --- */
.somfy-btn {
width: 78px;
height: 78px;
border-radius: 50%;
border: 3px solid #4a4a4a;
background: radial-gradient(circle at 30% 30%, #f3f3f3, #bfbfbf 55%, #8b8b8b 100%);
box-shadow:
0 4px 8px rgba(0,0,0,0.45),
inset 0 2px 4px rgba(255,255,255,0.9),
inset 0 -2px 4px rgba(0,0,0,0.45);
color: white;
font-size: 32px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-shadow: 0 2px 3px rgba(0,0,0,0.6);
transition: transform 0.1s, box-shadow 0.1s;
}
.somfy-btn:active {
transform: translateY(2px);
box-shadow:
0 2px 4px rgba(0,0,0,0.3),
inset 0 1px 2px rgba(0,0,0,0.6);
}
/* Bouton my */
.somfy-my {
font-size: 28px;
font-family: "Arial", sans-serif;
text-transform: lowercase;
}
</style>
</div>
)
