26-06-2025 (40)

<img src="https://static1.squarespace.com/static/653a2a46b2903c2a45a176c6/t/685a9fdf08f2ce19b28d3c4a/1750769657644/Added_value_modified_without+title.png" usemap="#image-map">
<map name="image-map">
    <area target="_self" alt="Project Brief" title="Project Brief" href="#project-brief" coords="2251,894,1424,611" shape="rect">
    <area target="_self" alt="Initiation Stage Plan" title="Initiation Stage Plan" href="#initiation-stage-plan" coords="1442,997,2616,1248" shape="rect">
    <area target="_self" alt="PID" title="PID" href="#pid" coords="3772,2918,1194,1642" shape="rect">
    <area target="_self" alt="Benefits Mgt Approach" title="Benefits Mgt Approach" href="#benefits-mgt-approach" coords="1453,2941,3243,3169" shape="rect">
    <area target="_self" alt="Work Package Definition" title="Work Package Definition" href="#work-package-definition" coords="2385,3749,1175,3544" shape="rect">
    <area target="_self" alt="Work Package Delivery" title="Work Package Delivery" href="#work-package-delivery" coords="1194,3919,2937,4108" shape="rect">
    <area target="_self" alt="Highlight Exception Report" title="Highlight Exception Report" href="#highlight-exception-report" coords="1194,4131,2848,4317" shape="rect">
    <area target="_self" alt="End Stage Report" title="End Stage Report" href="#end-stage-report" coords="1194,4340,2033,4526" shape="rect">
    <area target="_self" alt="Updated Project Plan" title="Updated Project Plan" href="#updated-project-plan" coords="1473,4572,4201,4788" shape="rect">
    <area target="_self" alt="Project Closure Preparation" title="Project Closure Preparation" href="#project-closure-preparation" coords="2180,7165,3703,7467" shape="rect">
    <area target="_self" alt="End Project Report" title="End Project Report" href="#end-project-report" coords="1445,8004,2520,8247" shape="rect">
</map>
<div class="popup" id="project-brief">
  An awesome pair of headphones!
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="initiation-stage-plan">
  These are the peripherals: the keyboard and the mouse.
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="pid">
  This is my stationery: a notepad and a pen.
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="benefits-mgt-approach">
  Benefits management approach content
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="work-package-definition">
  Work package definition content
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="work-package-delivery">
  Work package delivery content
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="highlight-exception-report">
  Highlight exception report content
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="end-stage-report">
  End stage report content
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="updated-project-plan">
  Updated project plan content
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="project-closure-preparation">
  Project closure preparation content
  <a class="close" href="#">X</a>
</div>
<div class="popup" id="end-project-report">
  End project report content
  <a class="close" href="#">X</a>
</div>
<style>
:root {
  --red: #ff0000;
}
body {
  margin: 0;
  padding: 20px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
area {
  outline: 5px solid var(--red);
  cursor: pointer;
}
.popup {
  padding: 20px;
  background-color: rgba(100, 100, 100, 0.9);
  color: white;
  font-weight: 100;
  font-size: 14px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
  z-index: 1000;
}
.popup:target {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.popup > .close {
  position: absolute;
  right: -10px;
  top: -10px;
  background-color: black;
  padding: 4px 10px;
  text-decoration: none;
  color: white;
}
</style>
<script>
window.addEventListener('load', function() {
    var img = document.querySelector('img[usemap]');
    var originalWidth = 4266;
    var areas = document.querySelectorAll('area');
    
    function resizeMap() {
        var currentWidth = img.offsetWidth;
        var scale = currentWidth / originalWidth;
        
        areas.forEach(function(area) {
            var originalCoords = area.getAttribute('data-original-coords');
            if (!originalCoords) {
                originalCoords = area.getAttribute('coords');
                area.setAttribute('data-original-coords', originalCoords);
            }
            
            var coords = originalCoords.split(',').map(function(coord) {
                return Math.round(coord * scale);
            });
            
            area.setAttribute('coords', coords.join(','));
        });
    }
    
    resizeMap();
    window.addEventListener('resize', resizeMap);
});
</script>