1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6 <title>Impact Data and Evidence Aggregation Library (IDEAL)</title> 7 <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> 8 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Crimson+Text:wght@400;600&display=swap" rel="stylesheet"> 9 <link rel="stylesheet" href="assets/css/ideal-style.css"> 10 <style> 11 12body { 13 margin: 0; 14 padding: 0; 15 box-sizing: border-box; 16 font-family: 'Open Sans', sans-serif; 17 line-height: 1.6; 18 background-color: #f9f9f9; 19 display: flex; 20 flex-direction: column; 21 min-height: 100vh; 22} 23 24div.content h2 { 25 color: #1f3667; 26} 27strong { 28 color: #1f3667; 29} 30 31/* Header Styles */ 32.header { 33 position: fixed; 34 top: 0; 35 left: 0; 36 width: 100%; 37 padding: 1rem 0; 38 background: rgba(255, 255, 255, 0); 39 backdrop-filter: blur(10px); 40 transition: all 0.3s ease; 41 z-index: 1000; 42 border-bottom: 1px solid rgba(255, 255, 255, 0.1); 43} 44 45.header.scrolled { 46 background: rgba(255, 255, 255, 0.95); 47 backdrop-filter: blur(20px); 48 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 49 box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); 50} 51 52.header-container { 53 max-width: 1200px; 54 margin: 0 auto; 55 padding: 0 2rem; 56} 57 58.header-inner { 59 display: flex; 60 align-items: center; 61 justify-content: space-between; /* NEW: pushes left and right apart */ 62 gap: 2rem; 63} 64 65.logo-wrapper { 66 display: flex; 67 align-items: center; 68 gap: 1rem; 69} 70 71.logo { 72 display: flex; 73 align-items: center; 74 text-decoration: none; 75 color: white; 76 font-size: 1.5rem; 77 font-weight: bold; 78 transition: color 0.3s ease; 79} 80 81.header.scrolled .logo { 82 color: #1f3667; 83} 84 85.logo-icon { 86 width: 80px; 87 height: 80px; 88 margin-right: 0.5rem; 89 position: relative; 90} 91 92/* Logo image switching */ 93.logo-icon img { 94 width: 100%; 95 height: 100%; 96 object-fit: contain; 97 position: absolute; 98 top: 0; 99 left: 0; 100 transition: opacity 0.3s ease; 101} 102 103.logo-icon .logo-white { 104 opacity: 1; 105} 106 107.logo-icon .logo-dark { 108 opacity: 0; 109} 110 111.header.scrolled .logo-icon .logo-white { 112 opacity: 0; 113} 114 115.header.scrolled .logo-icon .logo-dark { 116 opacity: 1; 117} 118 119.logo-tagline { 120 color: rgba(255, 255, 255, 0.9); 121 font-size: 0.9rem; 122 font-weight: 400; 123 transition: color 0.3s ease; 124} 125 126.header.scrolled .logo-tagline { 127 color: #1f3667; 128} 129 130.header-buttons { 131 display: flex; 132 align-items: center; 133 gap: 1rem; 134 margin-left: auto; 135} 136 137/* Search Form Styles */ 138.search-wrapper { 139 position: relative; 140} 141 142.search-form { 143 display: flex; 144 align-items: center; 145 background: rgba(255, 255, 255, 0.1); 146 border: 1px solid rgba(255, 255, 255, 0.2); 147 border-radius: 25px; 148 overflow: hidden; 149 transition: all 0.3s ease; 150 max-width: 300px; 151} 152 153.header.scrolled .search-form { 154 background: rgba(0, 0, 0, 0.05); 155 border-color: rgba(0, 0, 0, 0.1); 156} 157 158.search-input { 159 background: none; 160 border: none; 161 padding: 0.75rem 1rem; 162 color: white; 163 font-size: 0.9rem; 164 width: 200px; 165 transition: color 0.3s ease; 166} 167 168.search-input::placeholder { 169 color: rgba(255, 255, 255, 0.6); 170 transition: color 0.3s ease; 171} 172 173.header.scrolled .search-input { 174 color: #1f3667; 175} 176 177.header.scrolled .search-input::placeholder { 178 color: rgba(0, 0, 0, 0.4); 179} 180 181.search-input:focus { 182 outline: none; 183} 184 185.search-button { 186 background: none; 187 border: none; 188 padding: 0.75rem; 189 color: white; 190 cursor: pointer; 191 transition: all 0.3s ease; 192} 193 194.header.scrolled .search-button { 195 color: #1f3667; 196} 197 198.search-button:hover { 199 background: rgba(255, 255, 255, 0.1); 200} 201 202.search-icon { 203 width: 18px; 204 height: 18px; 205 fill: currentColor; 206} 207 208/* Button Styles */ 209.mobile-menu-button { 210 background: none; 211 border: none; 212 color: white; 213 font-size: 1.5rem; 214 cursor: pointer; 215 transition: color 0.3s ease; 216 padding: 0.5rem; 217} 218 219.header.scrolled .mobile-menu-button { 220 color: #1f3667; 221} 222 223/* Dropdown Menu Styles */ 224.dropdown-menu { 225 position: absolute; 226 top: 100%; 227 right: 0; 228 background: white; 229 border: 1px solid rgba(0, 0, 0, 0.1); 230 border-radius: 8px; 231 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); 232 min-width: 200px; 233 display: none; 234 z-index: 1001; 235 margin-top: 0.5rem; 236} 237 238.dropdown-menu.show { 239 display: block; 240} 241 242.dropdown-menu a { 243 display: block; 244 padding: 0.75rem 1rem; 245 color: #1f3667; 246 text-decoration: none; 247 transition: background-color 0.2s ease; 248 border-bottom: 1px solid rgba(0, 0, 0, 0.05); 249} 250 251.dropdown-menu a:last-child { 252 border-bottom: none; 253} 254 255.dropdown-menu a:hover { 256 background-color: #f8f9fa; 257} 258 259.dropdown-container { 260 position: relative; 261} 262
263/* Hero Section */ 264.hero { 265 height: 100vh; 266 background: url('assets/images/logos/Copilot-books.jpg') center/cover no-repeat; 267 display: flex; 268 align-items: center; 269 justify-content: center; 270 color: white; 271 text-align: center; 272 position: relative; 273} 274 275/* Dark overlay for better text readability */ 276.hero::before { 277 content: ''; 278 position: absolute; 279 top: 0; 280 left: 0; 281 right: 0; 282 bottom: 0; 283 background: rgba(0, 0, 0, 0.4); 284 z-index: 1; 285} 286 287.hero-content { 288 position: relative; 289 z-index: 2; 290 max-width: 1100px; 291 padding: 0 2rem; 292} 293 294.hero-content h1 { 295 font-size: 3.5rem; 296 font-weight: 700; 297 margin-bottom: 0.25rem; 298 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 299 line-height: 1.2; 300 color: #ffffff; 301 font-family: inherit; 302} 303.hero-intro-spacer { margin-top: 1rem; } 304/* Set specific fonts for hero title, subtitle, and intro paragraphs */ 305.hero-content h1, 306.hero-content p { font-family: 'Crimson Text', serif; } 307/* Different fonts for the two intro paragraphs */ 308.hero-intro-1 { font-family: 'Inter', sans-serif; } 309.hero-intro-2 { font-family: 'Crimson Text', serif; } 310 311/* Ensure subtitle uses same white color and has matching shimmer effect */ 312.hero-content p:first-of-type { 313 color: #ffffff; 314 position: relative; 315} 316.hero-content p:first-of-type::before { 317 content: ''; 318 position: absolute; 319 top: 0; 320 left: 0; 321 right: 0; 322 bottom: 0; 323 background: linear-gradient(90deg, transparent, rgba(43, 108, 176, 0.1), transparent); 324 animation: shimmer 3s ease-in-out infinite; 325} 326.hero-content p:first-of-type::after { 327 content: ''; 328 position: absolute; 329 top: 50%; 330 left: 50%; 331 width: 0; 332 height: 0; 333 background: radial-gradient(circle, rgba(43, 108, 176, 0.2) 0%, transparent 70%); 334 border-radius: 50%; 335 transform: translate(-50%, -50%); 336 animation: gentlePulse 4s ease-in-out infinite; 337} 338/* Add spacing after subtitle before first intro paragraph */ 339.hero-subtitle { margin-bottom: 1.5rem; } 340/* Force subtitle to solid white and disable shimmer overlays */ 341.hero-subtitle, .hero-subtitle strong { color: #ffffff !important; } 342.hero-content p:first-of-type::before, 343.hero-content p:first-of-type::after { display: none !important; } 344 345.hero-content p { 346 font-size: 1.2rem; 347 opacity: 0.95; 348 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); 349} 350 351/* Main Layout */ 352.main { 353 display: flex; 354 flex: 1; 355} 356 357.sidebar { 358 width: 320px; 359 background-color: #ffffff; 360 padding: 20px; 361 border-radius: 0 10px 10px 0; 362 box-shadow: 2px 0 5px rgba(0,0,0,0.05); 363} 364 365.sidebar { 366 position: sticky; 367 top: 80px; /* Adjust based on header height */ 368} 369 370.sidebar-links { 371 list-style: none; 372 padding-left: 0; 373 margin: 0; 374} 375 376.sidebar-links li { 377 margin: 17px 0; 378} 379 380.sidebar a { 381 color: #1f3366; 382 text-decoration: none; 383 font-weight: normal; 384} 385 386.sidebar a:hover { 387 color: #7ec5bb; 388} 389 390.sidebar-links li a { 391 display: flex; 392 align-items: center; 393 gap: 0.6em; 394 font-size: 1.07em; 395 transition: color 0.2s, background 0.2s; 396 padding: 0.4em 0.7em; 397 border-radius: 6px; 398} 399.sidebar-links li a:hover { 400 background: #f0f7f6; 401 color: #63bfb2; 402} 403 404.content { 405 flex: 1; 406 /* Align content column with sidebar top */ 407 padding: 0 40px 40px; 408} 409/* Add spacing between paragraphs inside main content */ 410.content p { margin-bottom: 1rem; } 411 412/* Removed old static footer logo grid styles */ 413 414.card { 415 background: #fff; 416 border-radius: 14px; 417 box-shadow: 0 2px 16px rgba(31,54,103,0.07); 418 padding: 2rem; 419 margin-bottom: 2rem; 420} 421 422/* Responsive Design */ 423@media (max-width: 768px) { 424 .header-inner { 425 flex-wrap: wrap; 426 gap: 1rem; 427 } 428 429 .logo-tagline { 430 display: none; 431 } 432 433 .search-form { 434 max-width: 200px; 435 } 436 437 .search-input { 438 width: 120px; 439 } 440 441 .hero-content h1 { 442 font-size: 2rem; 443 } 444 445 .header-container { 446 max-width: 1200px; 447 margin: 0 auto; 448 padding: 0 1rem; 449 } 450 451 .dropdown-menu { 452 right: -1rem; 453 left: auto; 454 min-width: 180px; 455 } 456 457 .main { 458 flex-direction: column; 459 } 460 461 .sidebar { 462 width: 100%; 463 border-radius: 0; 464 box-shadow: none; 465 border-bottom: 1px solid #ddd; 466 } 467 468 .content { 469 padding: 20px; 470 } 471 472 /* Removed responsive rules for old footer grid */ 473} 474 475@media (max-width: 480px) { 476 /* Removed responsive rules for old footer grid */ 477} 478 479/* Smooth scrolling */ 480html { 481 scroll-behavior: smooth; 482} 483 484/* Rolling consortium logos styles are now sourced from assets/css/ideal-style.css */ 485
486/* Project flowchart */ 487.project-flowchart { 488 margin: 2rem 0; 489} 490#project-flowchart h2 { 491 text-align: center; 492 font-size: 1.25rem; 493 margin: 0 0 1rem; 494 color: #1f3667; 495} 496.project-flowchart img { 497 cursor: zoom-in; 498} 499.project-flowchart-nav { 500 display: flex; 501 align-items: center; 502 justify-content: center; 503 gap: 0.75rem; 504 margin: 1rem 0 0; 505} 506.project-flowchart-nav button { 507 appearance: none; 508 border: 1px solid rgba(31, 54, 103, 0.2); 509 background: #fff; 510 color: #1f3667; 511 border-radius: 999px; 512 padding: 0.4rem 0.9rem; 513 font-size: 1rem; 514 cursor: pointer; 515 transition: background 0.2s ease, border-color 0.2s ease, transform 0.05s ease; 516} 517.project-flowchart-nav button:hover { 518 background: #f8f9fa; 519 border-color: rgba(31, 54, 103, 0.35); 520} 521.project-flowchart-nav button:active { 522 transform: translateY(1px); 523} 524.project-flowchart-nav .project-flowchart-label { 525 color: rgba(31, 54, 103, 0.85); 526 font-size: 0.95rem; 527} 528.project-flowchart img { 529 width: 100%; 530 max-width: 980px; 531 height: auto; 532 display: block; 533 margin: 0 auto; 534 border-radius: 14px; 535} 536.project-flowchart figcaption { 537 margin-top: 0.75rem; 538 text-align: center; 539 color: rgba(31, 54, 103, 0.8); 540 font-size: 0.95rem; 541} 542 543/* Flowchart lightbox modal */ 544.flowchart-modal { 545 position: fixed; 546 inset: 0; 547 background: rgba(0, 0, 0, 0.75); 548 display: none; 549 align-items: center; 550 justify-content: center; 551 padding: 2rem; 552 z-index: 2000; 553} 554.flowchart-modal.is-open { 555 display: flex; 556} 557.flowchart-modal__dialog { 558 position: relative; 559 width: min(1200px, 100%); 560 max-height: 90vh; 561 background: #ffffff; 562 border-radius: 14px; 563 box-shadow: 0 12px 40px rgba(0,0,0,0.35); 564 overflow: hidden; 565} 566.flowchart-modal__header { 567 display: flex; 568 align-items: center; 569 justify-content: space-between; 570 gap: 1rem; 571 padding: 0.75rem 1rem; 572 border-bottom: 1px solid rgba(0,0,0,0.08); 573} 574.flowchart-modal__title { 575 margin: 0; 576 font-size: 1rem; 577 color: #1f3667; 578 font-weight: 600; 579} 580.flowchart-modal__close { 581 appearance: none; 582 border: 1px solid rgba(31, 54, 103, 0.2); 583 background: #fff; 584 color: #1f3667; 585 border-radius: 10px; 586 padding: 0.35rem 0.6rem; 587 font-size: 1rem; 588 cursor: pointer; 589} 590.flowchart-modal__body { 591 padding: 1rem; 592 overflow: auto; 593 max-height: calc(90vh - 56px); 594} 595.flowchart-modal__img { 596 width: 100%; 597 height: auto; 598 display: block; 599} 600 601</style> 602</head> 603 604<body> 605 <header class="header" id="header"> 606 <div class="header-container"> 607 <div class="header-inner"> 608 <div class="logo-wrapper"> 609 <a href="#" class="logo"> 610 <div class="logo-icon"> 611 <img src="assets/images/logos/ideal_logo_reversed.png" alt="IDEAL Logo" class="logo-white"> 612 <img src="assets/images/logos/ideal.png" alt="IDEAL Logo" class="logo-dark"> 613 </div> 614 <span class="logo-tagline">Impact Data and Evidence Aggregation Library</span> 615 </a> 616 </div> 617 618 <div class="header-buttons"> 619 <div class="search-wrapper"> 620 <form class="search-form" action="#" method="get"> 621 <input 622 class="search-input" 623 type="text" 624 placeholder="Search..." 625 name="s" 626 > 627 <button class="search-button" type="submit"> 628 <svg class="search-icon" viewBox="0 0 24 24"> 629 <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> 630 </svg> 631 </button> 632 </form> 633 </div> 634 635 <div class="dropdown-container"> 636 <button class="mobile-menu-button" id="menuButton">â°</button> 637 <div class="dropdown-menu" id="dropdownMenu"> 638 <a href="https://survey.wb.surveycto.com/" target="_blank">Access SurveyCTO</a> 639 <a href="https://github.com/orgs/IDEAL-consortium/projects/11" target="_blank">Access GitHub Paper Tracking</a> 640 </div> 641 </div> 642 </div> 643 </div> 644 </div> 645 </header> 646 647 <!-- Hero Section --> 648 <section class="hero"> 649 <div class="hero-content"> 650 <h1>Introducing IDEAL</h1> 651 652 <p class="hero-intro-1"> 653 Welcome to IDEAL, the Impact Data and Evidence Aggregation Library, a platform designed to extract results data from international development RCTs and make them accessible to researchers and policymakers. The project is currently in a pilot phase, during which we extract information from a curated initial set of studies and develop robust protocols to grow and maintain IDEAL in the future. 654 </p> 655 <p class="hero-intro-spacer hero-intro-2">
656 Hosted by the World Bank, IDEAL will be fully open-access and free for the world to use. Users will be able to easily search, compare, and visualize the relative effect sizes of different policy interventions on a range of outcomes, across countries and contexts. 657 </p> 658 </div> 659 </section> 660 661 <div class="main"> 662 <nav class="sidebar"> <!-- â RESTORED: sidebar container --> 663 <ul class="sidebar-links"> <!-- â RESTORED: navigation list --> 664 <li><a href="Schema_Index.html">Metadata Schema</a></li> 665 <li><a href="codingprotocol.html">Coding Protocol</a></li> 666 <li><a href="principles.html">Coding Extraction Principles and Objectives</a></li> 667 <li><a href="Training_Slides">Coder Training Materials</a></li> 668 <li><a href="https://www.worldbank.org/en/programs/sief-trust-fund/brief/sief-ideal-project-description" target="_blank" rel="noopener noreferrer">Contact the IDEAL Team</a></li> 669 </ul> 670 </nav> 671 672 <div class="content"> 673 <div class="card" id="project-flowchart"> 674 <h2>IDEAL Project Flowchart</h2> 675 <figure class="project-flowchart"> 676 <img 677 id="flowchartImg" 678 src="assets/images/flowcharts/Project flowchart updated May26.png" 679 alt="Project flowchart" 680 loading="lazy" 681 /> 682 <figcaption id="flowchartCaption">IDEAL Project Flowchart (Overall)</figcaption> 683 </figure> 684 </div> 685 <p> 686 <strong>Motivation</strong> 687 </p> 688 <p> 689 The last few decades have seen explosive growth in randomized impact evaluations that seek to guide policy decision-making in low- and middle-income countries. IDEAL will contribute to translating the insights from multiple studies into <strong>actionable and credible policy insights</strong> by making the impact of different interventions easily comparable across studies. Beyond this core purpose, IDEAL will help guide the standardization of key information from randomized evaluations and unlock the potential to answer a wide range of methodological questions about RCTs. 690 </p> 691 <p> 692 <strong>Next Steps</strong> 693 </p> 694 <p> 695 Once IDEAL is established, we will invite others to join, guided by consistent protocols for adding new content and rigorous quality control. We will provide <strong>public access to IDEAL data</strong>, aided by a website that can filter studies by a wide range of criteria and display results immediately. We will also develop a set of pedagogical resources to make evidence aggregation methods widely accessible. 696 </p> 697 </div> 698 </div> 699 700 <!-- Rolling Logos Section --> 701 <section class="consortium-section"> 702 <div class="container" style="margin-top: 0.75rem; margin-bottom: 1.25rem;"> 703 <div style="display:flex; align-items:center; justify-content:center; gap: 4rem; flex-wrap: wrap; padding: 0 clamp(2.5rem, 8vw, 6rem);"> 704 <a href="https://www.worldbank.org/en/programs/sief-trust-fund" target="_blank" rel="noopener noreferrer" title="SIEF" 705 style="display:inline-flex; align-items:center;"> 706 <img src="assets/images/logos/sief.png" alt="SIEF" style="height: 78px; width: auto; max-width: 90vw; display:block;" /> 707 </a> 708 <a href="https://www.worldbank.org/en/research/brief/ideal" target="_blank" rel="noopener noreferrer" title="World Bank Group" 709 style="display:inline-flex; align-items:center;"> 710 <img src="assets/images/logos/world-bank-group.png" alt="World Bank Group" style="height: 78px; width: auto; max-width: 90vw; display:block;" /> 711 </a> 712 </div> 713 </div> 714 <div class="container" style="margin-top: -0.5rem;"> 715 <h2 class="cta-title">In collaboration with</h2> 716 </div> 717 <div class="consortium-scroll-container"> 718 <div class="consortium-scroll-track"> 719 <a href="https://www.worldbank.org/en/about/unit/u
719nit-dec/impactevaluation" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="World Bank"> 720 <div class="consortium-organization-card__image-container"> 721 <img src="assets/images/logos/world-bank.png" class="consortium-organization-card__image" alt="World Bank" /> 722 </div> 723 </a> 724 <a href="#" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="Development Research Group"> 725 <div class="consortium-organization-card__image-container"> 726 <img src="assets/images/logos/drg.png" class="consortium-organization-card__image" alt="Development Research Group" /> 727 </div> 728 </a> 729 <a href="https://cega.berkeley.edu/our-work/" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="CEGA"> 730 <div class="consortium-organization-card__image-container"> 731 <img src="assets/images/logos/cega.png" class="consortium-organization-card__image" alt="CEGA" /> 732 </div> 733 </a> 734 <a href="https://www.kellogg.northwestern.edu/academics-research/global-poverty-research-lab/" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="Global Poverty Research Lab"> 735 <div class="consortium-organization-card__image-container"> 736 <img src="assets/images/logos/gprl.png" class="consortium-organization-card__image" alt="Global Poverty Research Lab" /> 737 </div> 738 </a> 739 <a href="https://www.aidgrade.org" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="AidGrade"> 740 <div class="consortium-organization-card__image-container"> 741 <img src="assets/images/logos/aidgrade.png" class="consortium-organization-card__image" alt="AidGrade" /> 742 </div> 743 </a> 744 <!-- Duplicate for seamless scroll --> 745 <a href="https://www.worldbank.org/en/about/unit/unit-dec/impactevaluation" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="World Bank"> 746 <div class="consortium-organization-card__image-container"> 747 <img src="assets/images/logos/world-bank.png" class="consortium-organization-card__image" alt="World Bank" /> 748 </div> 749 </a> 750 <a href="#" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="Development Research Group"> 751 <div class="consortium-organization-card__image-container"> 752 <img src="assets/images/logos/drg.png" class="consortium-organization-card__image" alt="Development Research Group" /> 753 </div> 754 </a> 755 <a href="https://cega.berkeley.edu/our-work/" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="CEGA"> 756 <div class="consortium-organization-card__image-container"> 757 <img src="assets/images/logos/cega.png" class="consortium-organization-card__image" alt="CEGA" /> 758 </div> 759 </a> 760 <a href="https://www.kellogg.northwestern.edu/academics-research/global-poverty-research-lab/" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="Global Poverty Research Lab"> 761 <div class="consortium-organization-card__image-container"> 762 <img src="assets/images/logos/gprl.png" class="consortium-organization-card__image" alt="Global Poverty Research Lab" /> 763 </div> 764 </a> 765 <a href="https://www.aidgrade.org" class="consortium-organization-card" target="_blank" rel="noopener noreferrer" title="AidGrade"> 766 <div class="consortium-organization-card__image-container"> 767 <img src="assets/images/logos/aidgrade.png" class="consortium-organization-card__image" alt="AidGrade" /> 768 </div> 769 </a> 770 </div> 771 </div> 772 </section> 773 774 <!-- Professional Footer (Shared) --> 775 <footer class="footer"> 776 <div class="container"> 777 <div class="footer-content"></div> 778 <div class="footer-bottom"></div> 779 </div> 780 </footer> 781 782 <!-- Flowchart Lightbox Modal --> 783 <div class="flowchart-modal" id="flowchartModal" aria-hidden="true"> 784 <div class="flowchart-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="flowchartModalTitle"> 785 <div class="flowchart-modal__header"> 786 <p class="flowchart-modal__title" id="flowchartModalTitle">Project Flowchart</p> 787 <button type="button" class="flowchart-modal__close" id="flowchartModalClose" aria-label="Close">Ã</button> 788 </div> 789 <div class="flowchart-modal__body"> 790 <img class="flowchart-modal__img" id="flowchartModalImg" alt="Project flowchart large view" /> 791 </div> 792 </div> 793 </div> 794 795
795<script> 796 // Header scroll effect 797 window.addEventListener('scroll', function() { 798 const header = document.getElementById('header'); 799 if (window.scrollY > 50) { 800 header.classList.add('scrolled'); 801 } else { 802 header.classList.remove('scrolled'); 803 } 804 }); 805 806 // Mobile menu toggle 807 document.getElementById('menuButton').addEventListener('click', function() { 808 const dropdownMenu = document.getElementById('dropdownMenu'); 809 dropdownMenu.classList.toggle('show'); 810 }); 811 812 // Close dropdown when clicking outside 813 document.addEventListener('click', function(event) { 814 const dropdownContainer = document.querySelector('.dropdown-container'); 815 const dropdownMenu = document.getElementById('dropdownMenu'); 816 817 if (!dropdownContainer.contains(event.target)) { 818 dropdownMenu.classList.remove('show'); 819 } 820 }); 821 822 // Flowchart lightbox (single image) 823 (function() { 824 const img = document.getElementById('flowchartImg'); 825 const caption = document.getElementById('flowchartCaption'); 826 if (!img || !caption) return; 827 828 const modal = document.getElementById('flowchartModal'); 829 const modalImg = document.getElementById('flowchartModalImg'); 830 const modalTitle = document.getElementById('flowchartModalTitle'); 831 const modalClose = document.getElementById('flowchartModalClose'); 832 if (!modal || !modalImg || !modalTitle) return; 833 834 const openModal = () => { 835 modalImg.src = img.getAttribute('src') || ''; 836 modalTitle.textContent = caption.textContent || 'Project Flowchart'; 837 modal.classList.add('is-open'); 838 modal.setAttribute('aria-hidden', 'false'); 839 // focus close button for accessibility 840 if (modalClose) modalClose.focus(); 841 }; 842 const closeModal = () => { 843 modal.classList.remove('is-open'); 844 modal.setAttribute('aria-hidden', 'true'); 845 }; 846 847 // Click image to open large view 848 img.addEventListener('click', openModal); 849 850 // Close interactions 851 if (modalClose) modalClose.addEventListener('click', closeModal); 852 if (modal) { 853 modal.addEventListener('click', (e) => { 854 // close when clicking the dark backdrop (but not the dialog) 855 if (e.target === modal) closeModal(); 856 }); 857 } 858 document.addEventListener('keydown', (e) => { 859 if (e.key === 'Escape') closeModal(); 860 }); 861 862 })(); 863 </script>
863 864 <!-- Shared Footer Script --> 865
865<script src="assets/js/footer.js"></script>
865 866
866<script src="assets/js/ideal-script.js"></script>
866 867</body> 868</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.