{"id":6914,"date":"2026-10-26T00:27:58","date_gmt":"2026-10-25T23:27:58","guid":{"rendered":"https:\/\/erasmuslife4you.com\/dig-komplet-moj-nacrt-za-mir\/"},"modified":"2026-10-26T13:15:56","modified_gmt":"2026-10-26T12:15:56","slug":"dig-komplet-moj-nacrt-za-mir","status":"publish","type":"page","link":"https:\/\/erasmuslife4you.com\/sl\/dig-komplet-moj-nacrt-za-mir\/","title":{"rendered":"DIG \u2013 KOMPLET \u00bbMOJ NA\u010cRT ZA MIR\u00ab"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6914\" class=\"elementor elementor-6914 elementor-6374\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9c17ea e-flex e-con-boxed e-con e-parent\" data-id=\"d9c17ea\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0c2aea4 e-flex e-con-boxed e-con e-parent\" data-id=\"0c2aea4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d4b6a9 elementor-widget elementor-widget-html\" data-id=\"1d4b6a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"dig-calm-kit\">\n\n<style>\n\n\/* =========================================================\n   DIG \u2013 MY CALM PLAN KIT\n   MODULE 2 \u2022 ACTIVITY 3\n========================================================= *\/\n\n#dig-calm-kit{\n  --azure:#71AFDB;\n  --blue:#286f98;\n  --blue-dark:#173f59;\n  --peach:#F8D4B5;\n  --peach-light:#fff5ec;\n  --blue-light:#eef7fc;\n  --bg:#f7fbfd;\n  --text:#293943;\n  --muted:#58707e;\n  --border:#d9eaf3;\n\n  font-family:Ubuntu,Arial,sans-serif;\n  color:var(--text);\n  background:var(--bg);\n  padding:28px 16px 48px;\n  line-height:1.6;\n  box-sizing:border-box;\n}\n\n#dig-calm-kit *{\n  box-sizing:border-box;\n}\n\n#dig-calm-kit .dig-shell{\n  max-width:960px;\n  margin:0 auto;\n}\n\n\n\/* =========================================================\n   BRANDING\n========================================================= *\/\n\n#dig-calm-kit .dig-topbar{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  gap:28px;\n  flex-wrap:wrap;\n  background:#ffffff;\n  border:1px solid var(--border);\n  border-radius:20px;\n  padding:20px 24px;\n  margin-bottom:18px;\n}\n\n#dig-calm-kit .dig-project-logo{\n  display:block;\n  width:170px;\n  max-width:100%;\n  height:auto;\n}\n\n#dig-calm-kit .dig-eu-logo{\n  display:block;\n  width:215px;\n  max-width:100%;\n  height:auto;\n}\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n#dig-calm-kit .hero{\n  position:relative;\n  overflow:hidden;\n  background:\n    linear-gradient(\n      135deg,\n      rgba(113,175,219,.25),\n      rgba(248,212,181,.55)\n    );\n  border:1px solid rgba(113,175,219,.30);\n  border-radius:30px;\n  padding:40px 38px;\n  margin-bottom:18px;\n}\n\n#dig-calm-kit .hero::after{\n  content:\"\";\n  position:absolute;\n  width:180px;\n  height:180px;\n  right:-60px;\n  top:-70px;\n  border-radius:50%;\n  background:rgba(255,255,255,.38);\n}\n\n#dig-calm-kit .hero > *{\n  position:relative;\n  z-index:1;\n}\n\n#dig-calm-kit .eyebrow{\n  display:inline-block;\n  background:#ffffff;\n  color:var(--blue);\n  border:1px solid rgba(113,175,219,.38);\n  border-radius:999px;\n  padding:7px 14px;\n  margin-bottom:14px;\n  font-size:13px;\n  font-weight:800;\n  letter-spacing:.05em;\n  text-transform:uppercase;\n}\n\n#dig-calm-kit h1{\n  margin:0 0 12px;\n  color:var(--blue-dark);\n  font-size:40px;\n  line-height:1.08;\n  font-weight:800;\n}\n\n#dig-calm-kit .hero-accent{\n  color:var(--blue);\n}\n\n#dig-calm-kit .hero p{\n  margin:0;\n  max-width:730px;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:16px;\n  line-height:1.72;\n}\n\n\n\/* =========================================================\n   BUILD STATUS\n========================================================= *\/\n\n#dig-calm-kit .kit-status{\n  background:#ffffff;\n  border:1px solid var(--border);\n  border-radius:20px;\n  padding:19px 21px;\n  margin-bottom:18px;\n}\n\n#dig-calm-kit .status-top{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  gap:14px;\n  margin-bottom:11px;\n}\n\n#dig-calm-kit .status-title{\n  color:var(--blue-dark);\n  font-weight:800;\n  font-size:15px;\n}\n\n#dig-calm-kit .status-number{\n  color:var(--blue);\n  font-weight:800;\n  font-size:14px;\n}\n\n#dig-calm-kit .status-track{\n  height:9px;\n  background:#e7f0f5;\n  border-radius:999px;\n  overflow:hidden;\n}\n\n#dig-calm-kit .status-fill{\n  width:0;\n  height:100%;\n  background:linear-gradient(\n    90deg,\n    var(--azure),\n    var(--blue)\n  );\n  border-radius:999px;\n  transition:width .35s ease;\n}\n\n#dig-calm-kit .status-note{\n  margin-top:9px;\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:12px;\n}\n\n\n\/* =========================================================\n   SECTIONS\n========================================================= *\/\n\n#dig-calm-kit .step{\n  background:#ffffff;\n  border-radius:23px;\n  padding:27px;\n  margin:18px 0;\n  box-shadow:0 7px 24px rgba(29,65,84,.06);\n}\n\n#dig-calm-kit .step-blue{\n  border-left:6px solid var(--azure);\n}\n\n#dig-calm-kit .step-peach{\n  border-left:6px solid var(--peach);\n}\n\n#dig-calm-kit .step-label{\n  color:var(--blue);\n  font-size:12px;\n  font-weight:800;\n  text-transform:uppercase;\n  letter-spacing:.07em;\n  margin-bottom:5px;\n}\n\n#dig-calm-kit h2{\n  margin:0 0 8px;\n  color:var(--blue-dark);\n  font-size:25px;\n  line-height:1.3;\n}\n\n#dig-calm-kit .help{\n  margin:0 0 18px;\n  color:#425d6d;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:14px;\n  line-height:1.65;\n}\n\n\n\/* =========================================================\n   PRESSURE SITUATIONS\n========================================================= *\/\n\n#dig-calm-kit .situation-grid{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  gap:10px;\n}\n\n#dig-calm-kit .situation-option{\n  position:relative;\n  cursor:pointer;\n}\n\n#dig-calm-kit .situation-option input{\n  position:absolute;\n  opacity:0;\n  pointer-events:none;\n}\n\n#dig-calm-kit .situation-box{\n  min-height:70px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  text-align:center;\n  border:2px solid var(--border);\n  border-radius:16px;\n  background:var(--blue-light);\n  color:var(--blue-dark);\n  font-weight:800;\n  padding:12px;\n  transition:\n    transform .2s ease,\n    border-color .2s ease,\n    background .2s ease;\n}\n\n#dig-calm-kit .situation-option:nth-child(even) .situation-box{\n  background:var(--peach-light);\n}\n\n#dig-calm-kit .situation-option input:checked + .situation-box{\n  border-color:var(--blue);\n  background:#e3f2fa;\n  transform:translateY(-3px);\n}\n\n#dig-calm-kit .other-situation{\n  margin-top:14px;\n}\n\n\n\/* =========================================================\n   FIELDS\n========================================================= *\/\n\n#dig-calm-kit .field-label{\n  display:block;\n  color:var(--blue-dark);\n  font-size:15px;\n  font-weight:800;\n  margin:0 0 8px;\n}\n\n#dig-calm-kit input[type=\"text\"],\n#dig-calm-kit textarea,\n#dig-calm-kit select{\n  width:100%;\n  border:2px solid #cfe2ed;\n  border-radius:13px;\n  background:#ffffff;\n  color:var(--text);\n  padding:13px 14px;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:16px;\n  line-height:1.5;\n  outline:none;\n}\n\n#dig-calm-kit input[type=\"text\"]:focus,\n#dig-calm-kit textarea:focus,\n#dig-calm-kit select:focus{\n  border-color:var(--azure);\n  box-shadow:0 0 0 3px rgba(113,175,219,.18);\n}\n\n\n\/* =========================================================\n   TOOL GRID\n========================================================= *\/\n\n#dig-calm-kit .tool-grid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:11px;\n}\n\n#dig-calm-kit .tool-card{\n  position:relative;\n  display:flex;\n  align-items:flex-start;\n  gap:12px;\n  min-height:92px;\n  padding:16px;\n  border:2px solid var(--border);\n  border-radius:17px;\n  background:#ffffff;\n  cursor:pointer;\n  transition:\n    transform .22s ease,\n    border-color .22s ease,\n    background .22s ease,\n    box-shadow .22s ease;\n}\n\n#dig-calm-kit .tool-card:nth-child(4n+2),\n#dig-calm-kit .tool-card:nth-child(4n+3){\n  background:var(--peach-light);\n}\n\n#dig-calm-kit .tool-card:hover{\n  transform:translateY(-2px);\n  border-color:var(--azure);\n}\n\n#dig-calm-kit .tool-card.is-selected{\n  border-color:var(--blue);\n  background:#e8f5fb;\n  box-shadow:0 7px 18px rgba(40,111,152,.12);\n  transform:translateY(-3px);\n}\n\n#dig-calm-kit .tool-card.is-selected{\n  animation:digToolPop .28s ease;\n}\n\n@keyframes digToolPop{\n\n  0%{\n    transform:scale(.97);\n  }\n\n  60%{\n    transform:scale(1.025);\n  }\n\n  100%{\n    transform:translateY(-3px) scale(1);\n  }\n\n}\n\n#dig-calm-kit .tool-card input{\n  width:20px;\n  height:20px;\n  flex:0 0 20px;\n  margin-top:2px;\n  accent-color:var(--blue);\n}\n\n#dig-calm-kit .tool-copy strong{\n  display:block;\n  color:var(--blue-dark);\n  font-size:15px;\n  margin-bottom:3px;\n}\n\n#dig-calm-kit .tool-copy span{\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:12px;\n  line-height:1.5;\n}\n\n\n\/* =========================================================\n   CUSTOM TOOL\n========================================================= *\/\n\n#dig-calm-kit .custom-tool{\n  margin-top:16px;\n  padding:18px;\n  border:1px dashed #bcd5e3;\n  border-radius:16px;\n  background:var(--blue-light);\n}\n\n#dig-calm-kit .custom-row{\n  display:flex;\n  gap:9px;\n  align-items:stretch;\n}\n\n#dig-calm-kit .custom-row input{\n  flex:1;\n  min-width:0;\n}\n\n#dig-calm-kit .add-tool-btn{\n  flex:0 0 auto;\n  border:0;\n  border-radius:12px;\n  padding:0 17px;\n  min-height:48px;\n  background:var(--blue);\n  color:#ffffff;\n  font-family:Ubuntu,Arial,sans-serif;\n  font-size:14px;\n  font-weight:800;\n  cursor:pointer;\n}\n\n#dig-calm-kit .custom-error,\n#dig-calm-kit .max-message{\n  display:none;\n  margin-top:10px;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:12px;\n  color:#8a5a34;\n}\n\n#dig-calm-kit .custom-error.show,\n#dig-calm-kit .max-message.show{\n  display:block;\n}\n\n\n\/* =========================================================\n   ANIMATED KIT\n========================================================= *\/\n\n#dig-calm-kit .kit-builder{\n  margin-top:22px;\n  padding:22px;\n  border-radius:20px;\n  background:linear-gradient(\n    135deg,\n    #eef7fc,\n    #fff6ee\n  );\n  border:1px solid var(--border);\n}\n\n#dig-calm-kit .kit-builder-head{\n  display:flex;\n  justify-content:space-between;\n  gap:12px;\n  align-items:flex-end;\n  margin-bottom:15px;\n}\n\n#dig-calm-kit .kit-builder-title{\n  color:var(--blue-dark);\n  font-size:18px;\n  font-weight:800;\n}\n\n#dig-calm-kit .kit-builder-note{\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:12px;\n}\n\n#dig-calm-kit .kit-slots{\n  display:grid;\n  grid-template-columns:repeat(5,1fr);\n  gap:8px;\n}\n\n#dig-calm-kit .kit-slot{\n  position:relative;\n  min-height:100px;\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:center;\n  text-align:center;\n  padding:10px 7px;\n  border:2px dashed #cbdde7;\n  border-radius:15px;\n  background:rgba(255,255,255,.72);\n  overflow:hidden;\n  transition:\n    background .25s ease,\n    border-color .25s ease,\n    transform .25s ease;\n}\n\n#dig-calm-kit .slot-number{\n  position:absolute;\n  top:7px;\n  left:9px;\n  color:#8ca5b4;\n  font-size:10px;\n  font-weight:800;\n}\n\n#dig-calm-kit .slot-placeholder{\n  color:#8ca5b4;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:11px;\n  line-height:1.4;\n}\n\n#dig-calm-kit .slot-value{\n  display:none;\n  color:var(--blue-dark);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:12px;\n  font-weight:700;\n  line-height:1.35;\n}\n\n#dig-calm-kit .kit-slot.filled{\n  border-style:solid;\n  border-color:var(--azure);\n  background:#ffffff;\n  animation:digSlotFill .42s cubic-bezier(.2,.8,.2,1);\n}\n\n#dig-calm-kit .kit-slot.filled .slot-placeholder{\n  display:none;\n}\n\n#dig-calm-kit .kit-slot.filled .slot-value{\n  display:block;\n}\n\n@keyframes digSlotFill{\n\n  0%{\n    opacity:.45;\n    transform:translateY(10px) scale(.94);\n  }\n\n  70%{\n    transform:translateY(-2px) scale(1.02);\n  }\n\n  100%{\n    opacity:1;\n    transform:none;\n  }\n\n}\n\n\n\/* =========================================================\n   PRIORITY PLAN\n========================================================= *\/\n\n#dig-calm-kit .priority-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:13px;\n}\n\n#dig-calm-kit .priority-box{\n  background:var(--blue-light);\n  border-radius:17px;\n  padding:18px;\n}\n\n#dig-calm-kit .priority-box:nth-child(2){\n  background:var(--peach-light);\n}\n\n\n\/* =========================================================\n   REMINDER OPTIONS\n========================================================= *\/\n\n#dig-calm-kit .reminder-grid{\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:10px;\n  margin-top:13px;\n}\n\n#dig-calm-kit .reminder-option{\n  position:relative;\n  cursor:pointer;\n}\n\n#dig-calm-kit .reminder-option input{\n  position:absolute;\n  opacity:0;\n}\n\n#dig-calm-kit .reminder-box{\n  display:flex;\n  align-items:center;\n  min-height:64px;\n  padding:13px 15px;\n  background:#ffffff;\n  border:2px solid var(--border);\n  border-radius:14px;\n  color:var(--blue-dark);\n  font-size:13px;\n  font-weight:800;\n  transition:\n    border-color .2s ease,\n    background .2s ease,\n    transform .2s ease;\n}\n\n#dig-calm-kit .reminder-option input:checked + .reminder-box{\n  border-color:var(--blue);\n  background:#e7f4fb;\n  transform:translateY(-2px);\n}\n\n\n\/* =========================================================\n   READY MESSAGE\n========================================================= *\/\n\n#dig-calm-kit .ready-message{\n  display:none;\n  margin:18px 0;\n  padding:18px 20px;\n  border-radius:17px;\n  background:#e8f5fb;\n  border:1px solid #b9dbea;\n  color:var(--blue-dark);\n}\n\n#dig-calm-kit .ready-message.show{\n  display:block;\n  animation:digReady .5s ease;\n}\n\n#dig-calm-kit .ready-message strong{\n  display:block;\n  font-size:17px;\n  margin-bottom:3px;\n}\n\n#dig-calm-kit .ready-message span{\n  font-family:Verdana,Arial,sans-serif;\n  font-size:13px;\n}\n\n@keyframes digReady{\n\n  from{\n    opacity:0;\n    transform:translateY(12px);\n  }\n\n  to{\n    opacity:1;\n    transform:none;\n  }\n\n}\n\n\n\/* =========================================================\n   PERSONAL PLAN\n========================================================= *\/\n\n#dig-calm-kit .plan-card{\n  background:var(--blue-dark);\n  color:#ffffff;\n  border-radius:25px;\n  padding:28px;\n  margin:20px 0;\n  position:relative;\n  overflow:hidden;\n}\n\n#dig-calm-kit .plan-card::after{\n  content:\"\";\n  position:absolute;\n  width:170px;\n  height:170px;\n  right:-80px;\n  bottom:-90px;\n  border-radius:50%;\n  background:rgba(113,175,219,.13);\n}\n\n#dig-calm-kit .plan-card > *{\n  position:relative;\n  z-index:1;\n}\n\n#dig-calm-kit .plan-kicker{\n  color:var(--peach);\n  font-size:12px;\n  font-weight:800;\n  letter-spacing:.07em;\n  text-transform:uppercase;\n}\n\n#dig-calm-kit .plan-title{\n  margin:5px 0 18px;\n  color:#ffffff;\n  font-size:25px;\n  font-weight:800;\n}\n\n#dig-calm-kit .plan-grid{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px;\n}\n\n#dig-calm-kit .plan-item{\n  padding:15px;\n  border-radius:14px;\n  background:rgba(255,255,255,.09);\n  border:1px solid rgba(255,255,255,.13);\n}\n\n#dig-calm-kit .plan-label{\n  color:#b9dff3;\n  font-size:11px;\n  font-weight:800;\n  letter-spacing:.05em;\n  text-transform:uppercase;\n  margin-bottom:4px;\n}\n\n#dig-calm-kit .plan-value{\n  color:#ffffff;\n  font-family:Verdana,Arial,sans-serif;\n  font-size:13px;\n  line-height:1.55;\n  overflow-wrap:anywhere;\n  white-space:pre-wrap;\n}\n\n#dig-calm-kit .plan-tools{\n  grid-column:1 \/ -1;\n}\n\n#dig-calm-kit .plan-message{\n  margin-top:17px;\n  padding-top:16px;\n  border-top:1px solid rgba(255,255,255,.15);\n  color:#ffffff;\n  font-size:19px;\n  line-height:1.45;\n  font-weight:800;\n}\n\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n#dig-calm-kit .actions{\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin:20px 0 8px;\n}\n\n#dig-calm-kit .btn{\n  border:0;\n  border-radius:12px;\n  min-height:47px;\n  padding:13px 18px;\n  cursor:pointer;\n  font-family:Ubuntu,Arial,sans-serif;\n  font-size:15px;\n  font-weight:800;\n}\n\n#dig-calm-kit .btn-primary{\n  color:#ffffff;\n  background:var(--blue);\n}\n\n#dig-calm-kit .btn-secondary{\n  color:var(--blue);\n  background:#ffffff;\n  border:2px solid var(--border);\n}\n\n#dig-calm-kit .privacy{\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:12px;\n}\n\n\n\/* =========================================================\n   FOOTER\n========================================================= *\/\n\n#dig-calm-kit .footer{\n  background:#ffffff;\n  border:1px solid var(--border);\n  border-radius:20px;\n  padding:20px;\n  margin-top:24px;\n}\n\n#dig-calm-kit .footer-top{\n  display:flex;\n  align-items:flex-start;\n  gap:22px;\n  flex-wrap:wrap;\n}\n\n#dig-calm-kit .footer .dig-eu-logo{\n  width:180px;\n}\n\n#dig-calm-kit .disclaimer{\n  flex:1 1 440px;\n  margin:0;\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:11px;\n  line-height:1.6;\n}\n\n#dig-calm-kit .project-number{\n  margin-top:14px;\n  padding-top:12px;\n  border-top:1px solid var(--border);\n  color:var(--muted);\n  font-family:Verdana,Arial,sans-serif;\n  font-size:11px;\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:720px){\n\n  #dig-calm-kit{\n    padding:18px 10px 34px;\n  }\n\n  #dig-calm-kit .hero{\n    padding:28px 22px;\n  }\n\n  #dig-calm-kit h1{\n    font-size:31px;\n  }\n\n  #dig-calm-kit .situation-grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  #dig-calm-kit .tool-grid,\n  #dig-calm-kit .priority-grid,\n  #dig-calm-kit .reminder-grid,\n  #dig-calm-kit .plan-grid{\n    grid-template-columns:1fr;\n  }\n\n  #dig-calm-kit .plan-tools{\n    grid-column:auto;\n  }\n\n  #dig-calm-kit .kit-slots{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  #dig-calm-kit .kit-slot:last-child{\n    grid-column:1 \/ -1;\n  }\n\n  #dig-calm-kit .custom-row{\n    flex-direction:column;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n  #dig-calm-kit *,\n  #dig-calm-kit *::before,\n  #dig-calm-kit *::after{\n    animation:none !important;\n    transition:none !important;\n  }\n\n}\n\n\n\/* =========================================================\n   PRINT\n========================================================= *\/\n\n@media print{\n\n  body{\n    background:#ffffff !important;\n  }\n\n  #dig-calm-kit{\n    background:#ffffff !important;\n    padding:0 !important;\n  }\n\n  #dig-calm-kit .actions,\n  #dig-calm-kit .privacy,\n  #dig-calm-kit .kit-status{\n    display:none !important;\n  }\n\n  #dig-calm-kit .step,\n  #dig-calm-kit .plan-card,\n  #dig-calm-kit .hero,\n  #dig-calm-kit .dig-topbar,\n  #dig-calm-kit .footer{\n    box-shadow:none !important;\n    break-inside:avoid;\n  }\n\n}\n\n<\/style>\n\n\n<div class=\"dig-shell\">\n\n\n  <!-- =====================================================\n       BRANDING\n  ====================================================== -->\n\n  <div class=\"dig-topbar\">\n\n    <img data-recalc-dims=\"1\" decoding=\"async\" class=\"dig-project-logo\" src=\"https:\/\/i0.wp.com\/erasmuslife4you.com\/wp-content\/uploads\/2026\/08\/DIG-FINAL-LOGO1.png?w=640&#038;ssl=1\" alt=\"DIG \u2013 Delay Instant Gratification for a Better Life\">\n\n    <img data-recalc-dims=\"1\" decoding=\"async\" class=\"dig-eu-logo\" src=\"https:\/\/i0.wp.com\/erasmuslife4you.com\/wp-content\/uploads\/2026\/05\/erasmus-logo.png?w=640&#038;ssl=1\" alt=\"Co-funded by the European Union\">\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       HERO\n  ====================================================== -->\n\n  <section class=\"hero\">\n\n    <div class=\"eyebrow\">\n      Module 2 \u2022 Activity 3\n    <\/div>\n\n    <h1>\n      Build My\n      <span class=\"hero-accent\">\n        Calm Plan Kit\n      <\/span>\n    <\/h1>\n\n    <p>\n      Build a small set of tools you can actually use when pressure starts.\n      You do not need to become perfectly calm \u2014 you only need enough space\n      to choose what you do next.\n    <\/p>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       BUILD STATUS\n  ====================================================== -->\n\n  <div class=\"kit-status\">\n\n    <div class=\"status-top\">\n\n      <div class=\"status-title\">\n        My kit\n      <\/div>\n\n      <div class=\"status-number\">\n        <span id=\"kit-count\">0<\/span>\/5 tools\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"status-track\">\n\n      <div class=\"status-fill\" id=\"kit-progress\">\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"status-note\">\n      Build a kit with 3\u20135 tools that feel realistic for you.\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       STEP 1\n  ====================================================== -->\n\n  <section class=\"step step-blue\">\n\n    <div class=\"step-label\">\n      Step 1\n    <\/div>\n\n    <h2>\n      Where does pressure often show up?\n    <\/h2>\n\n    <p class=\"help\">\n      Choose one everyday area where you would like your Calm Plan\n      to be useful.\n    <\/p>\n\n\n    <div class=\"situation-grid\">\n\n\n      <label class=\"situation-option\">\n\n        <input\n          type=\"radio\"\n          name=\"calm-situation\"\n          value=\"school\">\n\n        <span class=\"situation-box\">\n          School or study\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"situation-option\">\n\n        <input\n          type=\"radio\"\n          name=\"calm-situation\"\n          value=\"friends\">\n\n        <span class=\"situation-box\">\n          Friends or social situations\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"situation-option\">\n\n        <input\n          type=\"radio\"\n          name=\"calm-situation\"\n          value=\"home\">\n\n        <span class=\"situation-box\">\n          Home or family\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"situation-option\">\n\n        <input\n          type=\"radio\"\n          name=\"calm-situation\"\n          value=\"self\">\n\n        <span class=\"situation-box\">\n          Pressure I put on myself\n        <\/span>\n\n      <\/label>\n\n\n    <\/div>\n\n\n    <div class=\"other-situation\">\n\n      <label class=\"field-label\" for=\"calm-situation-detail\">\n\n        Make it more specific:\n      <\/label>\n\n      <input\n        id=\"calm-situation-detail\"\n        type=\"text\"\n        autocomplete=\"off\"\n        placeholder=\"For example: before tests, deadlines or difficult conversations\">\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       STEP 2 \u2013 CHOOSE TOOLS\n  ====================================================== -->\n\n  <section class=\"step step-peach\">\n\n    <div class=\"step-label\">\n      Step 2\n    <\/div>\n\n    <h2>\n      Pick 3\u20135 tools for your kit\n    <\/h2>\n\n    <p class=\"help\">\n      Choose strategies you could realistically use in an ordinary pressure\n      moment. Your tools do not have to remove the pressure \u2014 they only need\n      to help you create a little space.\n    <\/p>\n\n\n    <div class=\"tool-grid\">\n\n\n      <label class=\"tool-card\">\n\n        <input\n          type=\"checkbox\"\n          name=\"calm-tool\"\n          value=\"breaths\">\n\n        <span class=\"tool-copy\">\n\n          <strong>\n            5 slow breaths\n          <\/strong>\n\n          <span>\n            Slow down for a few moments before reacting.\n          <\/span>\n\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"tool-card\">\n\n        <input\n          type=\"checkbox\"\n          name=\"calm-tool\"\n          value=\"water\">\n\n        <span class=\"tool-copy\">\n\n          <strong>\n            Drink some water\n          <\/strong>\n\n          <span>\n            Use a simple physical pause before deciding what comes next.\n          <\/span>\n\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"tool-card\">\n\n        <input\n          type=\"checkbox\"\n          name=\"calm-tool\"\n          value=\"movement\">\n\n        <span class=\"tool-copy\">\n\n          <strong>\n            Short walk or stretch\n          <\/strong>\n\n          <span>\n            Move your body briefly and return with a little more space.\n          <\/span>\n\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"tool-card\">\n\n        <input\n          type=\"checkbox\"\n          name=\"calm-tool\"\n          value=\"sentence\">\n\n        <span class=\"tool-copy\">\n\n          <strong>\n            One helpful sentence\n          <\/strong>\n\n          <span>\n            Try something simple such as \u201cOne step at a time.\u201d\n          <\/span>\n\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"tool-card\">\n\n        <input\n          type=\"checkbox\"\n          name=\"calm-tool\"\n          value=\"timer\">\n\n        <span class=\"tool-copy\">\n\n          <strong>\n            Start a 10-minute timer\n          <\/strong>\n\n          <span>\n            Focus only on starting, not finishing everything.\n          <\/span>\n\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"tool-card\">\n\n        <input\n          type=\"checkbox\"\n          name=\"calm-tool\"\n          value=\"phone\">\n\n        <span class=\"tool-copy\">\n\n          <strong>\n            Move my phone away\n          <\/strong>\n\n          <span>\n            Reduce one distraction for a short period.\n          <\/span>\n\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"tool-card\">\n\n        <input\n          type=\"checkbox\"\n          name=\"calm-tool\"\n          value=\"support\">\n\n        <span class=\"tool-copy\">\n\n          <strong>\n            Message someone supportive\n          <\/strong>\n\n          <span>\n            Ask for support, perspective or clarification.\n          <\/span>\n\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"tool-card\">\n\n        <input\n          type=\"checkbox\"\n          name=\"calm-tool\"\n          value=\"write\">\n\n        <span class=\"tool-copy\">\n\n          <strong>\n            Write down the next step\n          <\/strong>\n\n          <span>\n            Move the next action out of your head and onto paper.\n          <\/span>\n\n        <\/span>\n\n      <\/label>\n\n\n    <\/div>\n\n\n\n    <!-- CUSTOM TOOL -->\n\n    <div class=\"custom-tool\">\n\n      <label class=\"field-label\" for=\"custom-tool-input\">\n\n        Have your own tool?\n      <\/label>\n\n\n      <div class=\"custom-row\">\n\n        <input\n          id=\"custom-tool-input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          placeholder=\"Add something that already helps you\">\n\n        <button type=\"button\" class=\"add-tool-btn\" id=\"custom-tool-button\">\n\n          <span class=\"add-copy\">\n            Add to my kit\n          <\/span>\n\n          <span class=\"added-copy\" style=\"display:none;\">\n            Added \u2713\n          <\/span>\n\n        <\/button>\n\n      <\/div>\n\n\n      <div class=\"custom-error\" id=\"custom-error\">\n\n        Write your tool first.\n      <\/div>\n\n\n      <div class=\"max-message\" id=\"max-message\">\n\n        Your kit already has 5 tools. Remove one before adding another.\n      <\/div>\n\n    <\/div>\n\n\n\n    <!-- =================================================\n         ANIMATED KIT\n    ================================================== -->\n\n    <div class=\"kit-builder\">\n\n      <div class=\"kit-builder-head\">\n\n        <div class=\"kit-builder-title\">\n          My kit is filling up\n        <\/div>\n\n        <div class=\"kit-builder-note\">\n          Your choices appear here.\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"kit-slots\">\n\n\n        <div class=\"kit-slot\" data-slot=\"0\">\n\n          <span class=\"slot-number\">\n            1\n          <\/span>\n\n          <span class=\"slot-placeholder\">\n            Choose a tool\n          <\/span>\n\n          <span class=\"slot-value\"><\/span>\n\n        <\/div>\n\n\n        <div class=\"kit-slot\" data-slot=\"1\">\n\n          <span class=\"slot-number\">\n            2\n          <\/span>\n\n          <span class=\"slot-placeholder\">\n            Choose a tool\n          <\/span>\n\n          <span class=\"slot-value\"><\/span>\n\n        <\/div>\n\n\n        <div class=\"kit-slot\" data-slot=\"2\">\n\n          <span class=\"slot-number\">\n            3\n          <\/span>\n\n          <span class=\"slot-placeholder\">\n            Choose a tool\n          <\/span>\n\n          <span class=\"slot-value\"><\/span>\n\n        <\/div>\n\n\n        <div class=\"kit-slot\" data-slot=\"3\">\n\n          <span class=\"slot-number\">\n            4\n          <\/span>\n\n          <span class=\"slot-placeholder\">\n            Optional\n          <\/span>\n\n          <span class=\"slot-value\"><\/span>\n\n        <\/div>\n\n\n        <div class=\"kit-slot\" data-slot=\"4\">\n\n          <span class=\"slot-number\">\n            5\n          <\/span>\n\n          <span class=\"slot-placeholder\">\n            Optional\n          <\/span>\n\n          <span class=\"slot-value\"><\/span>\n\n        <\/div>\n\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       STEP 3 \u2013 PRIORITISE\n  ====================================================== -->\n\n  <section class=\"step step-blue\">\n\n    <div class=\"step-label\">\n      Step 3\n    <\/div>\n\n    <h2>\n      Decide what you will try first\n    <\/h2>\n\n    <p class=\"help\">\n      A plan is easier to use when you already know your first option\n      and your backup.\n    <\/p>\n\n\n    <div class=\"priority-grid\">\n\n\n      <div class=\"priority-box\">\n\n        <label class=\"field-label\" for=\"first-tool\">\n\n          My first tool\n        <\/label>\n\n        <select id=\"first-tool\">\n\n          <option value=\"\">\n            Choose from my kit\n          <\/option>\n\n        <\/select>\n\n      <\/div>\n\n\n      <div class=\"priority-box\">\n\n        <label class=\"field-label\" for=\"backup-tool\">\n\n          If that is not enough, I will try...\n        <\/label>\n\n        <select id=\"backup-tool\">\n\n          <option value=\"\">\n            Choose a backup\n          <\/option>\n\n        <\/select>\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       STEP 4 \u2013 REMINDER\n  ====================================================== -->\n\n  <section class=\"step step-peach\">\n\n    <div class=\"step-label\">\n      Step 4\n    <\/div>\n\n    <h2>\n      What will remind you to use the plan?\n    <\/h2>\n\n    <p class=\"help\">\n      Connect your plan to something you are likely to notice when\n      pressure begins.\n    <\/p>\n\n\n    <div class=\"reminder-grid\">\n\n\n      <label class=\"reminder-option\">\n\n        <input\n          type=\"radio\"\n          name=\"calm-reminder\"\n          value=\"signal\">\n\n        <span class=\"reminder-box\">\n          My first pressure signal\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"reminder-option\">\n\n        <input\n          type=\"radio\"\n          name=\"calm-reminder\"\n          value=\"task\">\n\n        <span class=\"reminder-box\">\n          When I notice the difficult situation\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"reminder-option\">\n\n        <input\n          type=\"radio\"\n          name=\"calm-reminder\"\n          value=\"timer\">\n\n        <span class=\"reminder-box\">\n          A reminder or alarm\n        <\/span>\n\n      <\/label>\n\n\n      <label class=\"reminder-option\">\n\n        <input\n          type=\"radio\"\n          name=\"calm-reminder\"\n          value=\"person\">\n\n        <span class=\"reminder-box\">\n          A person reminding me\n        <\/span>\n\n      <\/label>\n\n\n    <\/div>\n\n\n    <div style=\"margin-top:15px;\">\n\n      <label class=\"field-label\" for=\"reminder-detail\">\n\n        My reminder in my own words:\n      <\/label>\n\n      <input\n        id=\"reminder-detail\"\n        type=\"text\"\n        autocomplete=\"off\"\n        placeholder=\"For example: when my shoulders tense, I pause\">\n\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       KIT READY MESSAGE\n  ====================================================== -->\n\n  <div class=\"ready-message\" id=\"ready-message\">\n\n    <strong>\n      Your kit is taking shape.\n    <\/strong>\n\n    <span>\n      You have at least three realistic tools ready. Now choose which one\n      you want to try first.\n    <\/span>\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       FINAL PERSONAL PLAN\n  ====================================================== -->\n\n  <section class=\"plan-card\">\n\n    <div class=\"plan-kicker\">\n      My Calm Plan\n    <\/div>\n\n    <div class=\"plan-title\">\n      Ready for the next pressure moment.\n    <\/div>\n\n\n    <div class=\"plan-grid\">\n\n\n      <div class=\"plan-item\">\n\n        <div class=\"plan-label\">\n          Pressure situation\n        <\/div>\n\n        <div class=\"plan-value\" id=\"summary-situation\">\n          \u2014\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"plan-item\">\n\n        <div class=\"plan-label\">\n          What will remind me\n        <\/div>\n\n        <div class=\"plan-value\" id=\"summary-reminder\">\n          \u2014\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"plan-item plan-tools\">\n\n        <div class=\"plan-label\">\n          Tools in my kit\n        <\/div>\n\n        <div class=\"plan-value\" id=\"summary-tools\">\n          \u2014\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"plan-item\">\n\n        <div class=\"plan-label\">\n          First I will try\n        <\/div>\n\n        <div class=\"plan-value\" id=\"summary-first\">\n          \u2014\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"plan-item\">\n\n        <div class=\"plan-label\">\n          Then I can try\n        <\/div>\n\n        <div class=\"plan-value\" id=\"summary-backup\">\n          \u2014\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n\n    <div class=\"plan-message\">\n      I do not need to remove all the pressure.\n      I can use one tool, create some space and choose my next step.\n    <\/div>\n\n  <\/section>\n\n\n\n  <!-- =====================================================\n       ACTIONS\n  ====================================================== -->\n\n  <div class=\"actions\">\n\n    <button type=\"button\" class=\"btn btn-primary\" id=\"calm-print\">\n\n      Print \/ Save as PDF\n\n    <\/button>\n\n\n    <button type=\"button\" class=\"btn btn-secondary\" id=\"calm-clear\">\n\n      Clear my kit\n\n    <\/button>\n\n  <\/div>\n\n\n  <div class=\"privacy\">\n    Your answers stay on this page while you are using it.\n    They are not submitted, graded or shared.\n  <\/div>\n\n\n\n  <!-- =====================================================\n       FOOTER\n  ====================================================== -->\n\n  <footer class=\"footer\">\n\n    <div class=\"footer-top\">\n\n      <img data-recalc-dims=\"1\" decoding=\"async\" class=\"dig-eu-logo\" src=\"https:\/\/i0.wp.com\/erasmuslife4you.com\/wp-content\/uploads\/2026\/05\/erasmus-logo.png?w=640&#038;ssl=1\" alt=\"Co-funded by the European Union\">\n\n\n      <p class=\"disclaimer\">\n        Funded by the European Union. Views and opinions expressed are\n        however those of the author(s) only and do not necessarily reflect\n        those of the European Union or the European Education and Culture\n        Executive Agency (EACEA). Neither the European Union nor EACEA can\n        be held responsible for them.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"project-number\">\n      DIG \u2013 Delay Instant Gratification for a Better Life \u00b7\n      Erasmus+ KA220-YOU \u00b7\n      Project No. 2024-1-PL01-KA220-YOU-000247051\n    <\/div>\n\n  <\/footer>\n\n\n<\/div>\n\n\n\n<script>\n\n(function(){\n\n  var root =\n    document.getElementById('dig-calm-kit');\n\n  if(!root || root.dataset.ready === '1'){\n    return;\n  }\n\n  root.dataset.ready = '1';\n\n\n\n  \/* =====================================================\n     ELEMENTS\n  ====================================================== *\/\n\n  var toolInputs =\n    root.querySelectorAll(\n      'input[name=\"calm-tool\"]'\n    );\n\n  var situationInputs =\n    root.querySelectorAll(\n      'input[name=\"calm-situation\"]'\n    );\n\n  var reminderInputs =\n    root.querySelectorAll(\n      'input[name=\"calm-reminder\"]'\n    );\n\n  var kitSlots =\n    root.querySelectorAll('.kit-slot');\n\n  var kitCount =\n    root.querySelector('#kit-count');\n\n  var kitProgress =\n    root.querySelector('#kit-progress');\n\n  var firstTool =\n    root.querySelector('#first-tool');\n\n  var backupTool =\n    root.querySelector('#backup-tool');\n\n  var customInput =\n    root.querySelector('#custom-tool-input');\n\n  var customButton =\n    root.querySelector('#custom-tool-button');\n\n  var customError =\n    root.querySelector('#custom-error');\n\n  var maxMessage =\n    root.querySelector('#max-message');\n\n  var readyMessage =\n    root.querySelector('#ready-message');\n\n  var situationDetail =\n    root.querySelector('#calm-situation-detail');\n\n  var reminderDetail =\n    root.querySelector('#reminder-detail');\n\n  var customToolValue = '';\n\n\n\n  \/* =====================================================\n     GET TOOL LABEL\n  ====================================================== *\/\n\n  function getToolLabel(input){\n\n    var card =\n      input.closest('.tool-card');\n\n    var title =\n      card.querySelector('.tool-copy strong');\n\n    return title\n      ? title.textContent.trim()\n      : '';\n\n  }\n\n\n\n  \/* =====================================================\n     SELECTED TOOLS\n  ====================================================== *\/\n\n  function getSelectedTools(){\n\n    var tools = [];\n\n    toolInputs.forEach(function(input){\n\n      if(input.checked){\n\n        tools.push({\n          key:input.value,\n          label:getToolLabel(input)\n        });\n\n      }\n\n    });\n\n\n    if(customToolValue){\n\n      tools.push({\n        key:'custom-tool',\n        label:customToolValue\n      });\n\n    }\n\n    return tools;\n\n  }\n\n\n\n  \/* =====================================================\n     TOOL CARD VISUAL STATE\n  ====================================================== *\/\n\n  function updateToolCards(){\n\n    toolInputs.forEach(function(input){\n\n      var card =\n        input.closest('.tool-card');\n\n      if(input.checked){\n        card.classList.add('is-selected');\n      }else{\n        card.classList.remove('is-selected');\n      }\n\n    });\n\n  }\n\n\n\n  \/* =====================================================\n     KIT SLOTS\n  ====================================================== *\/\n\n  function updateKitSlots(){\n\n    var tools =\n      getSelectedTools();\n\n\n    kitSlots.forEach(function(slot,index){\n\n      var value =\n        slot.querySelector('.slot-value');\n\n\n      if(tools[index]){\n\n        var previous =\n          value.textContent;\n\n        value.textContent =\n          tools[index].label;\n\n        slot.classList.add('filled');\n\n\n        if(previous !== tools[index].label){\n\n          slot.style.animation = 'none';\n\n          void slot.offsetWidth;\n\n          slot.style.animation = '';\n\n        }\n\n      }else{\n\n        value.textContent = '';\n\n        slot.classList.remove('filled');\n\n      }\n\n    });\n\n\n    kitCount.textContent =\n      tools.length;\n\n\n    kitProgress.style.width =\n      ((tools.length \/ 5) * 100) + '%';\n\n\n    if(tools.length >= 3){\n\n      readyMessage.classList.add('show');\n\n    }else{\n\n      readyMessage.classList.remove('show');\n\n    }\n\n  }\n\n\n\n  \/* =====================================================\n     UPDATE SELECT DROPDOWNS\n  ====================================================== *\/\n\n  function updateToolSelects(){\n\n    var tools =\n      getSelectedTools();\n\n\n    var currentFirst =\n      firstTool.value;\n\n    var currentBackup =\n      backupTool.value;\n\n\n    while(firstTool.options.length > 1){\n      firstTool.remove(1);\n    }\n\n    while(backupTool.options.length > 1){\n      backupTool.remove(1);\n    }\n\n\n    tools.forEach(function(tool){\n\n      var firstOption =\n        document.createElement('option');\n\n      firstOption.value =\n        tool.key;\n\n      firstOption.textContent =\n        tool.label;\n\n      firstTool.appendChild(firstOption);\n\n\n      var backupOption =\n        document.createElement('option');\n\n      backupOption.value =\n        tool.key;\n\n      backupOption.textContent =\n        tool.label;\n\n      backupTool.appendChild(backupOption);\n\n    });\n\n\n    if(\n      tools.some(function(tool){\n        return tool.key === currentFirst;\n      })\n    ){\n\n      firstTool.value =\n        currentFirst;\n\n    }\n\n\n    if(\n      tools.some(function(tool){\n        return tool.key === currentBackup;\n      })\n    ){\n\n      backupTool.value =\n        currentBackup;\n\n    }\n\n  }\n\n\n\n  \/* =====================================================\n     SELECTED SITUATION\n  ====================================================== *\/\n\n  function getSituation(){\n\n    var selected =\n      root.querySelector(\n        'input[name=\"calm-situation\"]:checked'\n      );\n\n\n    var base = '';\n\n\n    if(selected){\n\n      var label =\n        selected\n          .closest('.situation-option')\n          .querySelector('.situation-box');\n\n      if(label){\n\n        base =\n          label.textContent.trim();\n\n      }\n\n    }\n\n\n    var detail =\n      situationDetail.value.trim();\n\n\n    if(base && detail){\n      return base + ' \u2014 ' + detail;\n    }\n\n    if(detail){\n      return detail;\n    }\n\n    return base;\n\n  }\n\n\n\n  \/* =====================================================\n     SELECTED REMINDER\n  ====================================================== *\/\n\n  function getReminder(){\n\n    var selected =\n      root.querySelector(\n        'input[name=\"calm-reminder\"]:checked'\n      );\n\n\n    var base = '';\n\n\n    if(selected){\n\n      var box =\n        selected\n          .closest('.reminder-option')\n          .querySelector('.reminder-box');\n\n      if(box){\n\n        base =\n          box.textContent.trim();\n\n      }\n\n    }\n\n\n    var detail =\n      reminderDetail.value.trim();\n\n\n    if(detail){\n      return detail;\n    }\n\n    return base;\n\n  }\n\n\n\n  \/* =====================================================\n     LABEL FROM TOOL KEY\n  ====================================================== *\/\n\n  function getLabelFromKey(key){\n\n    var tools =\n      getSelectedTools();\n\n\n    var match =\n      tools.find(function(tool){\n\n        return tool.key === key;\n\n      });\n\n\n    return match\n      ? match.label\n      : '';\n\n  }\n\n\n\n  \/* =====================================================\n     SUMMARY\n  ====================================================== *\/\n\n  function updateSummary(){\n\n    var tools =\n      getSelectedTools();\n\n\n    root.querySelector(\n      '#summary-situation'\n    ).textContent =\n      getSituation() || '\u2014';\n\n\n    root.querySelector(\n      '#summary-reminder'\n    ).textContent =\n      getReminder() || '\u2014';\n\n\n    root.querySelector(\n      '#summary-tools'\n    ).textContent =\n      tools.length\n        ? tools\n            .map(function(tool,index){\n              return (index + 1) + '. ' + tool.label;\n            })\n            .join('\\n')\n        : '\u2014';\n\n\n    root.querySelector(\n      '#summary-first'\n    ).textContent =\n      getLabelFromKey(\n        firstTool.value\n      ) || '\u2014';\n\n\n    root.querySelector(\n      '#summary-backup'\n    ).textContent =\n      getLabelFromKey(\n        backupTool.value\n      ) || '\u2014';\n\n  }\n\n\n\n  \/* =====================================================\n     MASTER UPDATE\n  ====================================================== *\/\n\n  function updateAll(){\n\n    updateToolCards();\n    updateKitSlots();\n    updateToolSelects();\n    updateSummary();\n\n  }\n\n\n\n  \/* =====================================================\n     TOOL CHECKBOXES\n  ====================================================== *\/\n\n  toolInputs.forEach(function(input){\n\n    input.addEventListener(\n      'change',\n      function(){\n\n        var selectedCount =\n          getSelectedTools().length;\n\n\n        if(selectedCount > 5){\n\n          input.checked = false;\n\n          maxMessage.classList.add('show');\n\n        }else{\n\n          maxMessage.classList.remove('show');\n\n        }\n\n\n        updateAll();\n\n      }\n    );\n\n  });\n\n\n\n  \/* =====================================================\n     CUSTOM TOOL\n  ====================================================== *\/\n\n  customButton.addEventListener(\n    'click',\n    function(){\n\n      customError.classList.remove('show');\n      maxMessage.classList.remove('show');\n\n\n      if(customToolValue){\n\n        customToolValue = '';\n\n        customInput.disabled = false;\n\n        customInput.value = '';\n\n        customButton\n          .querySelector('.add-copy')\n          .style.display = '';\n\n        customButton\n          .querySelector('.added-copy')\n          .style.display = 'none';\n\n        updateAll();\n\n        return;\n\n      }\n\n\n      var text =\n        customInput.value.trim();\n\n\n      if(!text){\n\n        customError.classList.add('show');\n\n        customInput.focus();\n\n        return;\n\n      }\n\n\n      if(getSelectedTools().length >= 5){\n\n        maxMessage.classList.add('show');\n\n        return;\n\n      }\n\n\n      customToolValue =\n        text;\n\n\n      customInput.disabled =\n        true;\n\n\n      customButton\n        .querySelector('.add-copy')\n        .style.display = 'none';\n\n\n      customButton\n        .querySelector('.added-copy')\n        .style.display = '';\n\n\n      updateAll();\n\n    }\n  );\n\n\n\n  \/* =====================================================\n     OTHER INPUTS\n  ====================================================== *\/\n\n  situationInputs.forEach(function(input){\n\n    input.addEventListener(\n      'change',\n      updateSummary\n    );\n\n  });\n\n\n  reminderInputs.forEach(function(input){\n\n    input.addEventListener(\n      'change',\n      updateSummary\n    );\n\n  });\n\n\n  situationDetail.addEventListener(\n    'input',\n    updateSummary\n  );\n\n\n  reminderDetail.addEventListener(\n    'input',\n    updateSummary\n  );\n\n\n  firstTool.addEventListener(\n    'change',\n    updateSummary\n  );\n\n\n  backupTool.addEventListener(\n    'change',\n    updateSummary\n  );\n\n\n\n  \/* =====================================================\n     PRINT\n  ====================================================== *\/\n\n  root\n    .querySelector('#calm-print')\n    .addEventListener(\n      'click',\n      function(){\n\n        updateSummary();\n\n        window.print();\n\n      }\n    );\n\n\n\n  \/* =====================================================\n     CLEAR\n  ====================================================== *\/\n\n  root\n    .querySelector('#calm-clear')\n    .addEventListener(\n      'click',\n      function(){\n\n\n        toolInputs.forEach(function(input){\n          input.checked = false;\n        });\n\n\n        situationInputs.forEach(function(input){\n          input.checked = false;\n        });\n\n\n        reminderInputs.forEach(function(input){\n          input.checked = false;\n        });\n\n\n        customToolValue = '';\n\n        customInput.disabled = false;\n        customInput.value = '';\n\n        customButton\n          .querySelector('.add-copy')\n          .style.display = '';\n\n        customButton\n          .querySelector('.added-copy')\n          .style.display = 'none';\n\n\n        situationDetail.value = '';\n        reminderDetail.value = '';\n\n        firstTool.value = '';\n        backupTool.value = '';\n\n        customError.classList.remove('show');\n        maxMessage.classList.remove('show');\n\n\n        updateAll();\n\n\n        root.scrollIntoView({\n          behavior:'smooth',\n          block:'start'\n        });\n\n      }\n    );\n\n\n\n  \/* =====================================================\n     INITIALIZE\n  ====================================================== *\/\n\n  updateAll();\n\n\n})();\n\n<\/script>\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Module 2 \u2022 Activity 3 Build My Calm Plan Kit Build a small set of tools you can actually use when pressure starts. You do not need to become perfectly calm \u2014 you only need enough space to choose what you do next. My kit 0\/5 tools Build a kit with 3\u20135 tools that feel [&hellip;]<\/p>\n","protected":false},"author":176376442,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"elearning_container_layout":"tg-site-layout--default","elearning_sidebar_layout":"tg-site-layout--default","elearning_remove_content_margin":false,"elearning_sidebar":"default","elearning_transparent_header":"customizer","elearning_logo":0,"elearning_header_style":"default","elearning_menu_item_color":"","elearning_menu_item_hover_color":"","elearning_menu_item_active_color":"","elearning_menu_item_active_style":"","elearning_page_header":true,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_wpcom_ai_launchpad_about_page":false,"_wpcom_ai_launchpad_gallery_page":false,"_wpcom_ai_launchpad_contact_page":false,"_wpcom_ai_launchpad_events_page":false,"_wpcom_ai_launchpad_video_page":false,"_wpcom_ai_launchpad_portfolio_piece":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"footnotes":""},"class_list":["post-6914","page","type-page","status-publish","hentry"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PhfHCT-1Nw","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/erasmuslife4you.com\/sl\/wp-json\/wp\/v2\/pages\/6914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erasmuslife4you.com\/sl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/erasmuslife4you.com\/sl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/erasmuslife4you.com\/sl\/wp-json\/wp\/v2\/users\/176376442"}],"replies":[{"embeddable":true,"href":"https:\/\/erasmuslife4you.com\/sl\/wp-json\/wp\/v2\/comments?post=6914"}],"version-history":[{"count":1,"href":"https:\/\/erasmuslife4you.com\/sl\/wp-json\/wp\/v2\/pages\/6914\/revisions"}],"predecessor-version":[{"id":6915,"href":"https:\/\/erasmuslife4you.com\/sl\/wp-json\/wp\/v2\/pages\/6914\/revisions\/6915"}],"wp:attachment":[{"href":"https:\/\/erasmuslife4you.com\/sl\/wp-json\/wp\/v2\/media?parent=6914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}