From eb76e9106684d91e6cf02e259337a10c84a908e9 Mon Sep 17 00:00:00 2001
From: Welton Moura <weltonmoura@live.com>
Date: Sat, 5 Jul 2025 19:52:15 -0300
Subject: [PATCH] image background card product

---
 gestaoRaul/balcao/templates/viewBalcao.html   |  46 +++++++++---------
 .../comandas/templates/viewcomanda.html       |   9 ++--
 gestaoRaul/db.sqlite3                         | Bin 364544 -> 364544 bytes
 .../comandas/htmx_list_products.html          |  14 +++---
 .../htmx_list_products_balcao.html            |  19 ++++++--
 .../products/htmx_search_products.html        |   2 +
 gestaoRaul/templates/static/base.css          |  21 ++++++++
 7 files changed, 74 insertions(+), 37 deletions(-)

diff --git a/gestaoRaul/balcao/templates/viewBalcao.html b/gestaoRaul/balcao/templates/viewBalcao.html
index 5d1958e..7682493 100644
--- a/gestaoRaul/balcao/templates/viewBalcao.html
+++ b/gestaoRaul/balcao/templates/viewBalcao.html
@@ -72,30 +72,32 @@
           {% for product in products %}
           {% if forloop.counter0 == 0 %}
 
-          <article 
-            name="productBox" 
-            id="productId-{{ product.id }}"
-            class="card-product"
-            onclick="addProductClick({{product.id}} , {{comanda.id}})" 
-            >
-            <p hidden id="{{forloop.counter0}}">{{product.id}}</p>
-            <p hidden id="comanda{{forloop.counter0}}">{{comanda.id}}</p>
-            {{product.name}} <br>
-            <p id="{{product.id}}"></p>
-            R$ {{product.price}}
-          </article>
+             <article 
+                   style="background-image:  url('{{product.image}}');"
+                name="productBox"
+                id="productId-{{ product.id }}" 
+                class="card-product"
+                onclick="addProductClick({{product.id}} )"
+                >
+                <p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
+                <p hidden id="comanda{{forloop.counter0}}" >{{comanda.id}}</p>
+               <p class="card-product-p"> {{product.name}}</p> 
+               <p id="{{product.id}}"></p>
+               <p class="card-product-p"> R$ {{product.price}}</p>
+                </article >
 
-          {% else %}
+        {% else %}
 
-          <article 
-            name="productBox" 
-            id="productId-{{ product.id }}"
-            class="card-product"
-            onclick="addProductClick({{product.id}} , {{comanda.id}})" 
-            >
-            {{product.name}} <br>
-            R$ {{product.price}}
-          </article>
+                <article 
+                   style="background-image:  url('{{product.image}}');"
+                name="productBox"
+                id="productId-{{ product.id }}" 
+                class="card-product" 
+                onclick="addProductClick({{product.id}})"
+                >
+                  <p class="card-product-p"> {{product.name}}</p>
+                 <p class="card-product-p"> R$ {{product.price}}</p>
+                </article >
 
           {% endif %}
 
diff --git a/gestaoRaul/comandas/templates/viewcomanda.html b/gestaoRaul/comandas/templates/viewcomanda.html
index c13ab05..8d6ff2b 100644
--- a/gestaoRaul/comandas/templates/viewcomanda.html
+++ b/gestaoRaul/comandas/templates/viewcomanda.html
@@ -203,9 +203,12 @@ Detalhes {{comanda.name}}
           <input type="text" oninput="searchProduct()" id="search-product" name="search-product" placeholder="Buscar Produto" ><br>
           <div id="product-list" class="grid-list-products">
             {% for product in products %}
-                <div class="card-product" onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
-                  {{product.name}} <br>
-                  R$ {{product.price}}
+                <div 
+                style="background-image:  url('{{product.image}}');"
+                 class="card-product"
+                  onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
+                 <p class="card-product-p"> {{product.name}}</p>
+                 <p class="card-product-p"> R$ {{product.price}}</p>
                 </div >
                 {% endfor %}
               </div>
diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3
index 84aea1effdc4b4c8fa6ece096a9d9a0524743dab..806612a1e16609e777ef45c4604095e7f71a72da 100644
GIT binary patch
delta 1042
zcmZuwU2GIp6u!Unvpd}`rRkcqvD@9%@?&Ra=g!Rjg=#H?LIqp2LQE5PX;-MR7MP_%
zV%pjw2Hj}QYHsv_5Th~rgembRCTOdV5VAf4@}e=3glq&t>VrDF8$=TC$+`EQzk9xO
zZqCBFj)ij_%bjrUgRVh1_jP_ohnp)^{Zp7&@{G4V0}9VT?=Rzh;B!t_(cfHKLwj1c
z1s@`jUqjc`kc1)1Nzvxf&4(|cw?f(p5CZ=${_`dDNl5$hA>HZAC@%Xhbr$C@qvtX7
zb5+qW-&aN36|FzG9Jm>{$In(#7Yh8vzpWyh|4~JgA??%y3U-S8Pv|2xOhFw$q=_RV
zb#r<Zl_J42jrV1Y5OnG9K-=4p`SMltovfW|3S-xhp=cGL)B*GIH6()n0WbDmM;D%^
zHYAcR<S1T(l9ZNosh_{ogBL_Nh94yz6axg~(r17)Zn4Im5ZfQeDr^bY-@U)Yi@o?O
z1rv2p$R?(UsJqp{m1LC3yw-wAAO{nTPQtht&EORY6Xk}GpTb)qQhwvs0N#Rp#rOc8
zms=ZU^)~~sA8>03Z+tzdErC2_0G))4YpZw@YF*&&D*myO4`=!MD()uJ#i@emTJy1q
zmwv#BKwD@7XuA)vd5WDE@f(nDxPosXuv8fh&(F_Af*{fYRrSq7iZZfe<hfn+aH({}
z%NoXX@z_M+wbIn9g;HUnFgc^omWn3|o>we+`ozq%Q8;$=_|)u-XG~3cM$%2EU1qor
zd%5TqQnqt2nLId=c5F6jWmr*v<;bBYXSca5&1}nO+hUBFrU}i{Rs2nrkSKhX(;6A&
z<2ACCpQ(|aHv9`Q10O#ix+pHx$Z<r-Ns#ctNBN%Hgl~?OyCpCHAhb-&=`&M(rW3W2
zS(eHs(>h~T%5rlV5Px?gU%O4(?YiF9lPTt=tPD6GD@Xq?+F@D8)E&R3R5BM4V|Pd&
zB=ib+%+K4yzqm_!k$jlnSSJZ_=PoHhqz*Nu_wJF45DxopJ9%ZD>_!2vZupS+Kk$sN
z9TMOFNp_5pKB@c!S4QXyL=sYYWi-4+!kZQo{OAGN9%&R{Ia!v`Qzo+=GY9*77vp?n
ooVGvGFq-Ksb9Cl+(Xn$F0Ja$8HxE#MK=#vi<j-E`e)?<rA3^&9eE<Le

delta 916
zcmZ{eUuauZ9LLZ3{m%WD+=i6dHn2^vN#~{|=}m6#&7a|)tgV*Kt!=t&;ER#A;LC8(
z4c$vuteaS;MuPlMeAq;An-5ktJSey}^UaQN_vFLshNv$JCD0Y=VAGp)gS~jpfy3{|
zhwt|@d$xP_Y<F!dAOCpU03ZLh`bLV!>VE1A9-o`;e|Nf{%jtgjsD{t7^Q0`nzq)zS
ze9OEL{)I#X_S0((*iJ_qpv##CEE<t;nQ4qM6*=ryW3+D>PDO(G;m%fO=+-iP7HI*t
zGP(Ip(CKTC&^CuDxo`~*A`j|(*azkT8uejN55H$V7p{f=rq6xYMnCwF73Mn~FVd<H
zlcCVP(8}hO)f@1M5e)~Ot)n3T9|%O0n{cehthYtlOHcW$ZP^nT)o#L-cDtrbP-O-B
z^%lYwlu0_X0y3<k@?bF~5Bv(3_b6X-PzR-E;T)&hlQ^qt<>y(~b{UQ1<Dy$Pj1GNt
z=wP{IC9S<9FO67x%B68R_!JtvLx1R{#&}%5vJ)@r2*#MyY*gS<+8WZR*?~e<3iyqR
zpsz~p1?=OLE#Wh=TEdfBy&By@w}(-YYr`0MGYmUem2EIM!8XWT!d+m_k++0Dk<-8@
zXn7GMbnYtNSM*3HE7r%No_zHx_J*YUBYw!K^E$3_PQU#Ol_2=*(>{LZ3t{mxDNQk^
zYOjYr4NcRbrs(6>X|^fiA>#;qkH>HXpO%-K;y4KWgY^cv7VTdX1i~hNT_glcyuXDS
zYvQp^Cs#~oQ|X-J<uV1fAWpOaS-B&U9E{=iL|?6oojc<5Gb$@F&NFt#P1;^Ele5xJ
zG3^#Jxm3R3=A69UBiGi&aUQS}kFwdMU9ehU>!s3}yzP3nCO`N`T;X(MUBoeQCPwG(
zh^~lNbaE-zae}v-4^VwW>;=YJ8oh*f#nG1&^Hc3;*wlD5I-hc~o|DbkY#}i}`G1s`
z%DZm1;0Bajyeoz(qEG#O7wMzQp-W@YQ>x*<9S^faDQJy$DcuBzl^#%Ia_eE`&-{N5
C0`uqq

diff --git a/gestaoRaul/templates/htmx_components/comandas/htmx_list_products.html b/gestaoRaul/templates/htmx_components/comandas/htmx_list_products.html
index 9245b3d..1369fa2 100644
--- a/gestaoRaul/templates/htmx_components/comandas/htmx_list_products.html
+++ b/gestaoRaul/templates/htmx_components/comandas/htmx_list_products.html
@@ -2,13 +2,13 @@
 
 {% for product in products %}
 
-<div 
-        onclick="addProductComanda({{product.id}}, {{comanda_id}}, '{{product.cuisine}}')" 
-        class="card-product"
->
-        {{product.name}} <br>
-        R$ {{product.price}}
-</div>
+        <div 
+                style="background-image:  url('{{product.image}}');"
+                 class="card-product"
+                  onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
+                 <p class="card-product-p"> {{product.name}}</p>
+                 <p class="card-product-p"> R$ {{product.price}}</p>
+                </div >
 
 {% endfor %}
 
diff --git a/gestaoRaul/templates/htmx_components/htmx_list_products_balcao.html b/gestaoRaul/templates/htmx_components/htmx_list_products_balcao.html
index 578b3ac..1239fc7 100644
--- a/gestaoRaul/templates/htmx_components/htmx_list_products_balcao.html
+++ b/gestaoRaul/templates/htmx_components/htmx_list_products_balcao.html
@@ -5,6 +5,7 @@
 {% if forloop.counter0 == 0 %}
 
                 <article 
+                   style="background-image:  url('{{product.image}}');"
                 name="productBox"
                 id="productId-{{ product.id }}" 
                 class="card-product"
@@ -12,20 +13,22 @@
                 >
                 <p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
                 <p hidden id="comanda{{forloop.counter0}}" >{{comanda.id}}</p>
-                {{product.name}} <br> <p id="{{product.id}}"></p>
-                R$ {{product.price}}
+               <p class="card-product-p"> {{product.name}}</p> 
+               <p id="{{product.id}}"></p>
+               <p class="card-product-p"> R$ {{product.price}}</p>
                 </article >
 
         {% else %}
 
                 <article 
+                   style="background-image:  url('{{product.image}}');"
                 name="productBox"
                 id="productId-{{ product.id }}" 
                 class="card-product" 
                 onclick="addProductClick({{product.id}})"
                 >
-                {{product.name}} <br>
-                R$ {{product.price}}
+                  <p class="card-product-p"> {{product.name}}</p>
+                 <p class="card-product-p"> R$ {{product.price}}</p>
                 </article >
 
         {% endif %}
@@ -37,6 +40,12 @@
 
 
 
-
+        <div 
+                style="background-image:  url('{{product.image}}');"
+                 class="card-product"
+                  onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
+                 <p class="card-product-p"> {{product.name}}</p>
+                 <p class="card-product-p"> R$ {{product.price}}</p>
+                </div >
 
 
diff --git a/gestaoRaul/templates/htmx_components/products/htmx_search_products.html b/gestaoRaul/templates/htmx_components/products/htmx_search_products.html
index e31b700..8fe4717 100644
--- a/gestaoRaul/templates/htmx_components/products/htmx_search_products.html
+++ b/gestaoRaul/templates/htmx_components/products/htmx_search_products.html
@@ -16,6 +16,8 @@
 <td id="price-{{product.id}}" >R$ {{product.price}}</td>
 <td  class="hide-on-mobile" id="quantity-{{product.id}}" >{{product.quantity}}</td>
 <td  class="hide-on-mobile" id="category-{{product.id}}" >{{product.category.name}}</td>
+<td hidden class="hide-on-mobile" id="image-{{product.id}}" >{{product.image}}</td>
+
 <td>
   <div class="grid-buttons">
     <img 
diff --git a/gestaoRaul/templates/static/base.css b/gestaoRaul/templates/static/base.css
index 4f35803..cd2420b 100644
--- a/gestaoRaul/templates/static/base.css
+++ b/gestaoRaul/templates/static/base.css
@@ -146,6 +146,7 @@ input, textarea, select {
 
 
 .card-product {
+   position: relative;
   height: 130px;
   width: 150px;
   padding: 10px;
@@ -157,8 +158,28 @@ input, textarea, select {
   box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
   border-radius: 5px;
   transition: transform 0.4s, box-shadow 0.4s;
+    background-size: cover; 
+    background-position: center;
+    background-repeat: no-repeat; 
   }
 
+.card-product::before {
+  content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 150px;
+    height: 130px;
+     background-color: rgba(0, 0, 0, 0.737); 
+}
+
+.card-product-p {
+  position: relative;
+  z-index: 0;
+  color: #ffffff;
+  font-size: 14px;
+}
+
 .card-product:hover {
   transform: scale(1.05);
   transition: transform 0.4s, box-shadow 0.4s;