@jjlmoya/utils-home 1.26.0 → 1.27.0

package/src/tool/vampireDrawSimulator/vampire-draw-simulator.css

@@ -0,0 +1,542 @@
+.vamp-wrapper {
+  --vamp-p: #8b5cf6;
+  --vamp-success: #22c55e;
+  --vamp-warn: #f59e0b;
+  --vamp-danger: #ef4444;
+  --vamp-extreme: #b91c1c;
+  --vamp-surface: var(--bg-surface);
+  --vamp-border: var(--border-color);
+  --vamp-text: var(--text-main);
+  --vamp-muted: var(--text-muted);
+  --vamp-page: var(--bg-page);
+  --vamp-base: var(--text-base);
+
+  width: 100%;
+  padding: 1rem 0;
+}
+
+/* ---- SINGLE CARD ---- */
+.vamp-card {
+  width: 100%;
+  max-width: 640px;
+  margin: 0 auto;
+  background: var(--vamp-surface);
+  border: 1px solid var(--vamp-border);
+  border-radius: 24px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ---- HERO ---- */
+.vamp-hero {
+  text-align: center;
+  padding: 1.75rem 1.25rem 1.25rem;
+  border-bottom: 1px solid var(--vamp-border);
+}
+
+.vamp-result-badge {
+  display: inline-block;
+  font-size: 0.6rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+  color: var(--vamp-p);
+  margin-bottom: 0.625rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: 999px;
+  border: 1px solid rgba(139, 92, 246, 0.22);
+  background: rgba(139, 92, 246, 0.05);
+}
+
+.vamp-annual-label {
+  font-size: 0.625rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: var(--vamp-muted);
+  margin: 0 0 0.5rem;
+}
+
+.vamp-annual-value {
+  font-size: clamp(2.8rem, 8vw, 4.5rem);
+  font-weight: 900;
+  line-height: 1;
+  margin: 0;
+  color: var(--vamp-base);
+}
+
+.vamp-annual-unit {
+  font-size: clamp(1.2rem, 3vw, 1.8rem);
+  font-weight: 300;
+  color: var(--vamp-muted);
+}
+
+.vamp-category-badge {
+  display: inline-block;
+  margin-top: 0.75rem;
+  font-size: 0.7rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  padding: 0.4rem 1rem;
+  border-radius: 999px;
+  border: 1px solid;
+}
+
+.vamp-cat-low {
+  color: var(--vamp-success);
+  border-color: rgba(34, 197, 94, 0.35);
+  background: rgba(34, 197, 94, 0.07);
+}
+
+.vamp-cat-moderate {
+  color: #b45309;
+  border-color: rgba(245, 158, 11, 0.35);
+  background: rgba(245, 158, 11, 0.07);
+}
+
+.vamp-cat-high {
+  color: var(--vamp-danger);
+  border-color: rgba(239, 68, 68, 0.35);
+  background: rgba(239, 68, 68, 0.07);
+}
+
+.vamp-cat-extreme {
+  color: var(--vamp-extreme);
+  border-color: rgba(185, 28, 28, 0.4);
+  background: rgba(185, 28, 28, 0.08);
+}
+
+/* ---- STATS ---- */
+.vamp-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.vamp-stat {
+  text-align: center;
+  padding: 0.625rem 0.375rem;
+  border-radius: 14px;
+  background: var(--vamp-page);
+  border: 1px solid var(--vamp-border);
+  transition: transform 0.2s, border-color 0.2s;
+}
+
+.vamp-stat:hover {
+  transform: translateY(-2px);
+  border-color: rgba(139, 92, 246, 0.25);
+}
+
+.vamp-stat-label {
+  font-size: 0.55rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.13em;
+  color: var(--vamp-muted);
+  margin: 0 0 0.25rem;
+}
+
+.vamp-stat-value {
+  font-size: 0.95rem;
+  font-weight: 800;
+  color: var(--vamp-text);
+  margin: 0;
+}
+
+/* ---- BODY (Devices) ---- */
+.vamp-body {
+  padding: 1.25rem;
+  border-bottom: 1px solid var(--vamp-border);
+}
+
+.vamp-section-title {
+  font-size: 0.65rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--vamp-p);
+  margin: 0 0 0.875rem;
+}
+
+.vamp-device-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.vamp-device-row {
+  display: grid;
+  grid-template-columns: 1fr auto 60px auto auto;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.55rem 0.75rem;
+  border-radius: 12px;
+  border: 1px solid var(--vamp-border);
+  background: var(--vamp-page);
+  transition: all 0.2s ease;
+}
+
+.vamp-device-row:hover {
+  border-color: rgba(139, 92, 246, 0.3);
+  transform: translateX(3px);
+}
+
+.vamp-device-name {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--vamp-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vamp-device-watts {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--vamp-muted);
+  white-space: nowrap;
+}
+
+.vamp-device-hours {
+  width: 100%;
+  font-size: 0.85rem;
+  font-weight: 800;
+  color: var(--vamp-text);
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--vamp-border);
+  text-align: center;
+  outline: none;
+  padding: 0.15rem 0;
+  transition: border-color 0.2s;
+}
+
+.vamp-device-hours:focus {
+  border-color: var(--vamp-p);
+}
+
+.vamp-remove-btn {
+  padding: 0.25rem 0.5rem;
+  border-radius: 8px;
+  border: none;
+  background: rgba(239, 68, 68, 0.06);
+  color: var(--vamp-danger);
+  font-size: 0.65rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.vamp-remove-btn:hover {
+  background: rgba(239, 68, 68, 0.14);
+}
+
+.vamp-add-btn {
+  width: 100%;
+  margin-top: 0.625rem;
+  padding: 0.625rem;
+  border-radius: 12px;
+  border: 1px dashed rgba(139, 92, 246, 0.28);
+  background: rgba(139, 92, 246, 0.03);
+  color: var(--vamp-p);
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+}
+
+.vamp-add-btn:hover {
+  background: rgba(139, 92, 246, 0.08);
+  border-style: solid;
+}
+
+/* ---- FOOTER (Price + Currency) ---- */
+.vamp-footer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  padding: 1rem 1.25rem;
+}
+
+.vamp-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding-right: 1rem;
+  border-right: 1px solid var(--vamp-border);
+}
+
+.vamp-field:last-child {
+  border-right: none;
+  padding-right: 0;
+  padding-left: 1rem;
+}
+
+.vamp-label {
+  font-size: 0.6rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--vamp-muted);
+}
+
+.vamp-price-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+}
+
+.vamp-price-input {
+  width: 100%;
+  font-size: 1.375rem;
+  font-weight: 900;
+  color: var(--vamp-text);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid var(--vamp-border);
+  padding: 0.15rem 0;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.vamp-price-input:focus {
+  border-color: var(--vamp-p);
+}
+
+.vamp-price-unit {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vamp-muted);
+  white-space: nowrap;
+}
+
+.vamp-currency-toggle {
+  gap: 0.4rem;
+}
+
+.vamp-currency-label {
+  font-size: 0.6rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--vamp-muted);
+}
+
+.vamp-currency-btns {
+  display: flex;
+  gap: 0.3rem;
+}
+
+.vamp-currency-btn {
+  flex: 1;
+  padding: 0.4rem 0.2rem;
+  border-radius: 8px;
+  border: 1px solid var(--vamp-border);
+  background: var(--vamp-page);
+  color: var(--vamp-muted);
+  font-size: 0.8rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.vamp-currency-btn:hover {
+  border-color: var(--vamp-p);
+  color: var(--vamp-text);
+}
+
+.vamp-currency-active {
+  background: var(--vamp-p);
+  border-color: var(--vamp-p);
+  color: #fff;
+}
+
+/* ---- MODAL ---- */
+.vamp-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.vamp-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(4px);
+}
+
+.vamp-modal-card {
+  position: relative;
+  width: 100%;
+  max-width: 380px;
+  background: var(--vamp-surface);
+  border: 1px solid var(--vamp-border);
+  border-radius: 24px;
+  padding: 1.5rem;
+  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45);
+  animation: vamp-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes vamp-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(16px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.vamp-modal-title {
+  font-size: 1rem;
+  font-weight: 800;
+  color: var(--vamp-text);
+  margin: 0 0 1rem;
+  text-align: center;
+}
+
+.vamp-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  margin-bottom: 1.25rem;
+}
+
+.vamp-modal-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.vamp-modal-label {
+  font-size: 0.6rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.13em;
+  color: var(--vamp-muted);
+}
+
+.vamp-modal-input {
+  width: 100%;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--vamp-text);
+  background: var(--vamp-page);
+  border: 1px solid var(--vamp-border);
+  border-radius: 12px;
+  padding: 0.55rem 0.75rem;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.vamp-modal-input:focus {
+  border-color: var(--vamp-p);
+  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
+}
+
+.vamp-modal-actions {
+  display: flex;
+  gap: 0.625rem;
+}
+
+.vamp-modal-btn {
+  flex: 1;
+  padding: 0.65rem;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+
+.vamp-modal-btn-primary {
+  background: var(--vamp-p);
+  color: #fff;
+  border-color: var(--vamp-p);
+}
+
+.vamp-modal-btn-primary:hover {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+}
+
+.vamp-modal-btn-secondary {
+  background: var(--vamp-page);
+  color: var(--vamp-muted);
+  border-color: var(--vamp-border);
+}
+
+.vamp-modal-btn-secondary:hover {
+  color: var(--vamp-text);
+  border-color: var(--vamp-p);
+}
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 520px) {
+  .vamp-wrapper {
+    padding: 0.75rem 0;
+  }
+
+  .vamp-card {
+    border-radius: 20px;
+  }
+
+  .vamp-hero {
+    padding: 1.5rem 1rem 1rem;
+  }
+
+  .vamp-stats {
+    grid-template-columns: 1fr;
+    gap: 0.4rem;
+  }
+
+  .vamp-body {
+    padding: 1rem;
+  }
+
+  .vamp-footer {
+    grid-template-columns: 1fr;
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  .vamp-field {
+    border-right: none;
+    border-bottom: 1px solid var(--vamp-border);
+    padding-right: 0;
+    padding-bottom: 1rem;
+  }
+
+  .vamp-field:last-child {
+    border-bottom: none;
+    padding-left: 0;
+    padding-bottom: 0;
+  }
+
+  .vamp-device-row {
+    grid-template-columns: 1fr auto;
+    row-gap: 0.35rem;
+  }
+
+  .vamp-device-row .vamp-device-name {
+    grid-column: 1 / -1;
+  }
+
+  .vamp-device-hours {
+    width: 56px;
+  }
+}

package/src/tool/wallPaintingCalculator/bibliography.ts

@@ -1,14 +1,14 @@
 export const bibliography = [
   {
-    name: 'Paint Coverage and Application Guide: Sherwin-Williams',
-    url: 'https://www.sherwin-williams.com/homeowners/how-to/paint-coverage-and-application',
+    name: 'Paint Coverage and Application Guide',
+    url: 'https://www.sherwin-williams.com/home-builders/color/color-education/sw-article-pro-hueandhide',
   },
   {
     name: 'How Much Paint Do I Need: Benjamin Moore',
-    url: 'https://www.benjaminmoore.com/en-us/how-to/how-much-paint-do-i-need',
+    url: 'https://www.benjaminmoore.com/en-us/paint-calculator',
   },
   {
     name: 'Paint Calculator and Coverage Estimator: Dulux',
-    url: 'https://www.dulux.co.uk/en/diy/paint-calculator',
+    url: 'https://www.dulux.co.uk/en/paint-calculator',
   },
 ];

package/src/tools.ts

@@ -10,6 +10,7 @@ import { HEATING_COMPARATOR_TOOL } from './tool/heatingComparator/index';
 import { WIFI_RANGE_SIMULATOR_TOOL } from './tool/wifiRangeSimulator/index';
 import { AC_TONNAGE_CALCULATOR_TOOL } from './tool/acTonnageCalculator/index';
 import { WALL_PAINTING_CALCULATOR_TOOL } from './tool/wallPaintingCalculator/index';
+import { VAMPIRE_DRAW_SIMULATOR_TOOL } from './tool/vampireDrawSimulator/index';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   QR_GENERATOR_TOOL,
@@ -22,5 +23,6 @@ export const ALL_TOOLS: ToolDefinition[] = [
   WIFI_RANGE_SIMULATOR_TOOL,
   AC_TONNAGE_CALCULATOR_TOOL,
   WALL_PAINTING_CALCULATOR_TOOL,
+  VAMPIRE_DRAW_SIMULATOR_TOOL,
 ];