first commit

2025-12-31 14:52:01 +01:00
commit fa01cd97e3
46 changed files with 5273 additions and 0 deletions
--- a/src/features/htmlBuilder/generated/GenerateStyle.jsx
+++ b/src/features/htmlBuilder/generated/GenerateStyle.jsx
@@ -0,0 +1,183 @@
+function GenerateStyle() {
+  return (
+    <style>
+      {`
+      .idm_picture__module{
+  --photo-prod-box-bg: #fff;
+  --photo-prod-box-text: #111;
+  --photo-prod-point-shadow: rgba(255,255,255,.5);
+
+  --photo-prod-box-pad-top: 1em;
+  --photo-prod-box-pad-left: 2em;
+
+  --photo-prod-box-width: 30em;
+  --photo-prod-point-size: 24px;
+  
+  --photo-prod-box-radius: 20px;
+  --photo-prod-box-radius-rb: 0px 20px 20px 20px;
+  --photo-prod-box-radius-lb: 20px 0px 20px 20px;
+  --photo-prod-box-radius-lu: 20px 20px 0px 20px;
+  --photo-prod-box-radius-ru: 20px 20px 20px 0px;
+  
+  
+  --photo-prod-point-desktop-top: 0%;
+  --photo-prod-point-desktop-left: 0%;
+  --photo-prod-point-tablet-top: 0%;
+  --photo-prod-point-tablet-left: 0%;
+  --photo-prod-point-mobile-top: 0%;
+  --photo-prod-point-mobile-left: 0%;
+}
+
+.idm_picture__module{
+  position: relative;
+}
+.idm_picture__product{
+  position: absolute;
+  z-index: 10;
+}
+.idm_picture__img{
+  width: 100%;
+}
+
+.idm_picture__overlay{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+/* =========================
+PRODUCT POINT ( + )
+========================= */
+
+.idm_picture__product_point{
+  position: relative;
+  width: var(--photo-prod-point-size);
+  height: var(--photo-prod-point-size);
+  border-radius: 50%;
+
+  background: var(--photo-prod-box-bg);
+  color: var(--photo-prod-box-text);
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 1.6em;
+  font-weight: 600;
+  line-height: 1;
+
+  z-index: 1;
+}
+
+/* Pulsating halo */
+.idm_picture__product_point::before{
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--photo-prod-point-shadow);
+
+  animation: idmPulse 1.5s ease-in-out infinite;
+  z-index: -1;
+}
+
+/* Optional: stop pulse on hover */
+.idm_picture__product:hover .idm_picture__product_point:before{
+  animation-play-state: paused;
+}
+
+/* Focus accessibility */
+.idm_picture__product_point:focus-visible{
+  outline: 2px solid #000;
+  outline-offset: 4px;
+}
+
+/* =========================
+PULSE ANIMATION
+========================= */
+@keyframes idmPulse{
+  0%{
+    opacity: 1;
+    box-shadow: 0 0 0px 0px var(--photo-prod-point-shadow);
+  }
+  70%{
+    box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
+    opacity: 0.8;
+  }
+  100%{
+    box-shadow: 0 0 5px 10px var(--photo-prod-point-shadow);
+    opacity: 0;
+  }
+}
+
+.product_info{
+  background: var(--photo-prod-box-bg);
+  /* display: flex; */
+  flex-direction: column;
+  padding: var(--photo-prod-box-pad-top) var(--photo-prod-box-pad-left);
+  gap: 0.5em;
+  margin-left: var(--photo-prod-box-pad-left);
+  margin-top: var(--photo-prod-box-pad-top);
+  display: none;
+  
+  max-width: var(--photo-prod-box-width);
+  border-radius: var(--photo-prod-box-radius-rb);
+  /* opacity: 0;
+  transition: opacity 0.3s; */
+}
+
+.product_name{
+  font-size: 1.6em;
+  color: var(--photo-prod-box-text);
+}
+
+.product_price{
+  font-size: 1.6em;
+  color: var(--photo-prod-box-text);
+}
+
+.idm_picture__product:hover .product_info{
+  display: flex;
+  animation: idmShowUp 0.3s ease-in-out;
+  /* opacity: 1; */
+}
+
+@keyframes idmShowUp{
+  from{
+    opacity: 0;
+  }
+  to{
+    opacity: 1;
+  }
+}
+
+
+.idm_picture__product{
+  top: var(--photo-prod-point-mobile-top);
+  left: var(--photo-prod-point-mobile-left);
+}
+@media(min-width: 757px){
+  .idm_picture__product{
+    top: var(--photo-prod-point-tablet-top);
+    left: var(--photo-prod-point-tablet-left);
+  }
+}
+@media(min-width: 979px){
+  .idm_picture__product{
+    top: var(--photo-prod-point-desktop-top);
+    left: var(--photo-prod-point-desktop-left);
+  }
+}
+
+.idm_picture__product_point{
+        cursor: grab;
+}
+    `}
+    </style>
+  );
+}
+
+export default GenerateStyle;