Widget: Homepage: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Marterer (talk | contribs)
No edit summary
 
(93 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude>
<noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude>
<includeonly><style>
<includeonly>
        :root {
            --compass-color: #C31980;
            --handbook-color: #C2902D;
            --safe-color: #80C319;
        }
        #hp-wrapper {
            --hp-border: 1px solid rgba(0, 0, 0, .5);
            font-family: 'Open Sans';
        }
        #hp-wrapper h1,  #hp-wrapper h2,  #hp-wrapper h3 {
            font-family: 'Raleway';
            font-weight: 300;
            letter-spacing: .06em;
        }
        #hp-heading {
            padding: 1em;
            margin-bottom: 4em;
            background:
                url(/index.php?title=Special:Redirect/file/Links-logo-network.png) top -10vh right -5vw / 50% no-repeat,
                linear-gradient(125deg, #FFFFFF 0%, #222222 100%),
                linear-gradient(200deg, #d5dde3 0%, #d5dde3 50%, #acbac8 calc(50% + 1px), #acbac8 60%, #5d758c calc(60% + 1px), #5d758c 75%, #415262 calc(75% + 1px), #415262 100%),
                linear-gradient(113deg, #d5dde3 0%, #d5dde3 40%, #acbac8 calc(40% + 1px), #acbac8 50%, #5d758c calc(50% + 1px), #5d758c 70%, #415262 calc(70% + 1px), #415262 100%);
            background-blend-mode: multiply, overlay, overlay, normal;
            clip-path: inset(0 100% 100% 0);
            transition: all 500ms ease-in-out;
        }
        .loaded #hp-heading { clip-path: inset(0); }
        #hp-heading h1 { font-size: 3.4em; margin-bottom: .5em; color: var(--links-grey); }
        #hp-heading h1 span {
            display: block;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(-1em);
            transition: all 500ms ease-in-out;
        }
        .loaded #hp-heading h1 span { opacity: .95; transform: translateX(0); }
        #hp-heading h1 span:nth-child(1) { font-weight: 800; letter-spacing: .06em; transition-delay: 300ms; }
        #hp-heading h1 span:nth-child(2) { font-weight: 500; transition-delay: 400ms; }
        #hp-heading h1 span:nth-child(3) { font-weight: 100; transition-delay: 500ms; }
        #hp-heading .hp-lead { font-size: 1.4em; font-weight: 300; margin-bottom: 2em; opacity: 0; transition: all 500ms ease-in-out 1000ms; }
        .loaded #hp-heading .hp-lead { opacity: .95; }
        .hp-button-wrapper { text-align: left; }
        .hp-large-button {
            display: inline-block;
            background-color: var(--links-grey);
            color: #C31980;
            border: 2px solid currentColor;
            font-size: 1.3em;
            padding: 0 .5em;
            opacity: 0;
            transition: opacity 500ms ease-in-out 1300ms, color 500ms;
            text-decoration: none;
            cursor: pointer;
            background-color: rgba(255, 255, 255, .4);
            border-radius: 5px;
        }
        .hp-large-button svg { fill: #C31980; height: 4em; transition: fill 500ms; }
        .hp-large-button:hover { text-decoration: none; color: var(--links-blue); }
        .hp-large-button:hover svg { fill: var(--links-blue); }
        .loaded .hp-large-button { opacity: 1; }
        .hp-search { margin-bottom: 4em; }
        .hp-areas { margin-bottom: 8em; }
        .hp-areas *, #hp-collections *, #hp-products * { transition: all 400ms ease-in-out; }
        #hp-collections, #hp-products { border-top: var(--hp-border); }
        .hp-areas h2 { text-align: center; margin-bottom: 1.5em; }
        .hp-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 2em; text-decoration: none; cursor: pointer; }
        .hp-area h3 { text-align: center; }
        .hp-area:hover { text-decoration: none; }
        .hp-area:hover h3 { font-weight: 700 !important; }
        .hp-area-icon { flex: 1 0; margin-right: 1em; user-select: none; }
        .hp-area-icon svg { width: 100px; height: 100px; }
        .hp-area-text { flex: 1 1 75%; }
        .hp-area-text p { font-size: 1.2em; margin: 0 0 0 .1em; }
        .hp-area-arrow { display: none; }
        .hp-compass {
            border-top: var(--hp-border);
            border-bottom: var(--hp-border);
            padding: 2em 1em;
            display: flex;
            justify-content: center;
        }
        #hp-resources, #hp-networks, #hp-feel-safe, #hp-handbook, #hp-wheel { padding: 2em 1em; }
        #hp-resources .hp-area, #hp-networks .hp-area,
        #hp-feel-safe .hp-area, #hp-handbook .hp-area, #hp-wheel .hp-area { margin-bottom: 0 !important; }
        #hp-recent h3 { margin-bottom: 1em; }
        #forum-topics { padding: 2em 1em; }
        #hp-changes { border-top: var(--hp-border); padding: 2em 1em; }
        .blue * {
            color: var(--links-blue);
            border-color: var(--links-blue);
            fill: var(--links-blue);
        }
        .orange * {
            color: var(--links-orange);
            border-color: var(--links-orange);
            fill: var(--links-orange);
        }
        .grey * {
            color: var(--links-grey);
            border-color: var(--links-grey);
            fill: var(--links-grey);
        }
        .cyan * {
            color: var(--links-cyan);
            border-color: var(--links-cyan);
            fill: var(--links-cyan);
        }
        .yellow * {
            color: var(--ccl-color);
            border-color: var(--ccl-color);
            fill: var(--ccl-color);
        }


        /* Quick fix for removed Compass. Delete when Compass is restored. */
<!-- STYLES BEGIN -->
        #forum-topics { border-top: var(--hp-border); }
<link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/homepage/styles.css">
<!-- STYLES END -->


        @media screen and (min-width: 992px) {
    <!-- HP BEGIN -->
            #hp-heading { padding: 3em; margin-bottom: 4em; }
    <div id="hp-wrapper">
            #hp-heading h1 { font-size: 5em; }
            #hp-heading .hp-lead { max-width: 50%; font-size: 2em; }
            .hp-button-wrapper { text-align: left; }
            .hp-large-button { font-size: 2em; }
            #hp-main { width: 75%; margin: auto; }
            .hp-search { margin-bottom: 8em; }
            .hp-area { flex-direction: row; }
            .hp-area h3 { text-align: left; }
            .hp-areas h2 { margin-bottom: 2em; }
            .hp-area-icon svg { width: 130px; height: 130px; }
            .hp-area-arrow { display: block; flex: 1 0; font-size: 3em; margin-left: 1em; user-select: none; }
            .hp-area:hover .hp-area-arrow { transform: translateX(1em); }
            .hp-compass { padding: 5em; }
            #forum-topics, #hp-resources { padding: 4em 1em 4em 0; border-right: var(--hp-border); }
            #hp-changes, #hp-networks { padding: 4em 0 4em 1em; border-top: 0 none; }
            .hp-compass .hp-area-text h2 { font-size: 3em; }
            .hp-compass .hp-area-text p { font-size: 1.8em; font-weight: 300 !important; }
            .hp-compass svg { width: 200px; height: 200px; }
 
            /* Quick fix for removed Compass. Delete when Compass is restored. */
            #hp-resources {border-right: 0 none; }
            #hp-changes { border-top: var(--hp-border); }
        }
 
        /* SNIPPETS */
        #snippets {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1em;
            margin: 4em 0;
        }
        .snippet {
            display: block;
            text-decoration: none !important;
            background-color: transparent;
            perspective: 1000px;
        }
        .snippet .snippet-inner {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            border: 2px solid;
            border-radius: 5px;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        .snippet:hover .snippet-inner {
            transform: rotateY(180deg);
        }
        .snippet-header, .snippet-body {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden; /* Safari */
            backface-visibility: hidden;
        }
        .snippet-body {
            transform: rotateY(180deg);
        }
        /* .snippet-header {
            width: 100%;
            height: 100%;
            border-bottom: 2px solid;
            padding: .75em;
            text-align: center;
            transition: all 250ms;
            color: #fff;
        }
        .snippet-body {
            width: 100%;
            height: 100%;
            padding: 1em;
            transition: all 250ms;
        } */
 
        .snippet.TL { color: var(--links-blue); }


         .snippet.GL { color: var(--links-orange); }
         <!-- HEADING BEGIN -->
 
        .snippet.UCL { color: var(--links-cyan); }
 
        .snippet.ICH { color: var(--handbook-color); }
 
        .snippet.FS { color: var(--safe-color); }
 
        .snippet.RW { color: var(--links-grey); }
 
        .snippet.TL .snippet-header {
            background-color: var(--links-blue);
            border-color: var(--links-blue);
        }
 
        .snippet.GL .snippet-header {
            background-color: var(--links-orange);
            border-color: var(--links-orange);
        }
 
        .snippet.UCL .snippet-header {
            background-color: var(--links-cyan);
            border-color: var(--links-cyan);
        }
 
        .snippet.RW .snippet-header {
            background-color: var(--links-grey);
            border-color: var(--links-grey);
        }
 
        .snippet.ICH .snippet-header {
            background-color: var(--handbook-color);
            border-color: var(--handbook-color);
        }
 
        .snippet.FS .snippet-header {
            background-color: var(--safe-color);
            border-color: var(--safe-color);
        }
 
        .snippet:hover .snippet-header { background-color: #fff; }
        .snippet.TL:hover .snippet-header { color: var(--links-blue); }
        .snippet.RW:hover .snippet-header { color: var(--links-grey); }
        .snippet.GL:hover .snippet-header { color: var(--links-orange); }
        .snippet.UCL:hover .snippet-header { color: var(--links-cyan); }
        .snippet.ICH:hover .snippet-header { color: var(--handbook-color); }
        .snippet.FS:hover .snippet-header { color: var(--safe-color); }
    </style>
 
    <script>
        function search(event) {
            event.preventDefault();
            const searchString = document.getElementById('hp-search-input').value;
            window.location.assign('/index.php?search=' + encodeURIComponent(searchString) + '&title=Special%3ASearch&profile=default&fulltext=1');
        }
    </script>
 
    <div id="hp-wrapper">
         <div id="hp-heading">
         <div id="hp-heading">
             <h1>
             <h1 translate="no">
                 <span>LINKS</span>
                 <span>LINKS</span>
                 <span>Community</span>
                 <span>Community</span>
                 <span>Center</span>
                 <span>Center</span>
             </h1>
             </h1>
             <p class="hp-lead"><span>Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</span></p>
             <p class="hp-lead">
                <span>Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</span>
            </p>
             <div class="hp-button-wrapper">
             <div class="hp-button-wrapper">
                 <a class="hp-large-button" href="/index.php/User_Guidance">
                 <a class="hp-large-button" href="/index.php/User_Guidance">
                     <div style="display: flex; align-items: center;">
                     <div style="display: flex; align-items: center;">
                         <div>
                         <div>
                             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="prefix__prefix__Livello_1" x="0" y="0" version="1.1" viewBox="0 0 128 128"><defs id="prefix__prefix__defs43"><path id="prefix__prefix__rect345" d="M977.382 473.479h642.714v494.395H977.382z"/></defs><style id="style2" type="text/css">.prefix__prefix__st0{fill:#fff}.prefix__prefix__st1,.prefix__prefix__st2{fill:currentColor}</style><g id="prefix__prefix__g38" transform="translate(-585.75 -578.105)"><ellipse id="prefix__prefix__circle4" cx="649.905" cy="642.245" stroke-width=".116" class="prefix__prefix__st0" rx="49.012" ry="48.98"/><path id="prefix__prefix__path6" stroke-width=".116" d="M649.905 587.962c-30 0-54.32 24.303-54.32 54.283s24.32 54.284 54.32 54.284 54.32-24.303 54.32-54.284c-.002-29.98-24.321-54.283-54.32-54.283zm0 101.565c-26.13 0-47.313-21.169-47.313-47.282 0-26.113 21.183-47.281 47.313-47.281 26.13 0 47.313 21.168 47.313 47.281s-21.183 47.282-47.313 47.282z" class="prefix__prefix__st1"/><g id="prefix__prefix__g16" transform="matrix(.11647 0 0 .11639 574.077 567.372)"><path id="prefix__prefix__polygon8" d="M649.51 640.66l38.15 143.56 291.19 185.79-185.78-291.2z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon10" d="M650.21 641.36l-38.15-143.55-291.19-185.79 185.79 291.2z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon12" d="M650.24 640.25L506.68 678.4 320.9 969.6l291.19-185.79z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon14" d="M649.97 640.52l143.56-38.15 185.79-291.19-291.2 185.78z" class="prefix__prefix__st2"/></g><path id="prefix__prefix__path18" stroke-width=".116" d="M649.905 603.864c-21.21 0-38.406 17.184-38.406 38.38 0 21.197 17.195 38.38 38.406 38.38 21.21 0 38.405-17.183 38.405-38.38 0-21.196-17.194-38.38-38.405-38.38zm0 74.706c-20.075 0-36.35-16.263-36.35-36.326s16.274-36.325 36.35-36.325 36.35 16.263 36.35 36.326-16.275 36.325-36.35 36.325z" class="prefix__prefix__st1"/><g id="prefix__prefix__g28" transform="matrix(.11647 0 0 .11639 574.077 567.372)"><path id="prefix__prefix__polygon20" d="M649.16 642.83l151.75 88.04 398.36-88.04-398.36-88.03z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon22" d="M650.33 642.83L498.58 554.8l-398.35 88.03 398.35 88.04z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon24" d="M649.43 641.88L561.4 793.64l88.03 398.35 88.03-398.35z" class="prefix__prefix__st2"/><path id="prefix__prefix__polygon26" d="M649.43 642.33l88.03-151.75-88.03-398.36-88.03 398.36z" class="prefix__prefix__st2"/></g><ellipse id="prefix__prefix__circle30" cx="649.769" cy="642.189" stroke-width=".116" class="prefix__prefix__st0" rx="13.741" ry="13.731"/></g></svg>
                             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="prefix__prefix__Livello_1" x="0" y="0" version="1.1" viewBox="0 0 128 128">
                                <defs id="prefix__prefix__defs43">
                                    <path id="prefix__prefix__rect345" d="M977.382 473.479h642.714v494.395H977.382z"/>
                                </defs>
                                <style id="style2" type="text/css">.prefix__prefix__st0{fill:#fff}.prefix__prefix__st1,.prefix__prefix__st2{fill:currentColor}</style>
                                <g id="prefix__prefix__g38" transform="translate(-585.75 -578.105)">
                                    <ellipse id="prefix__prefix__circle4" cx="649.905" cy="642.245" stroke-width=".116" class="prefix__prefix__st0" rx="49.012" ry="48.98"/>
                                    <path id="prefix__prefix__path6" stroke-width=".116" d="M649.905 587.962c-30 0-54.32 24.303-54.32 54.283s24.32 54.284 54.32 54.284 54.32-24.303 54.32-54.284c-.002-29.98-24.321-54.283-54.32-54.283zm0 101.565c-26.13 0-47.313-21.169-47.313-47.282 0-26.113 21.183-47.281 47.313-47.281 26.13 0 47.313 21.168 47.313 47.281s-21.183 47.282-47.313 47.282z" class="prefix__prefix__st1"/>
                                    <g id="prefix__prefix__g16" transform="matrix(.11647 0 0 .11639 574.077 567.372)">
                                        <path id="prefix__prefix__polygon8" d="M649.51 640.66l38.15 143.56 291.19 185.79-185.78-291.2z" class="prefix__prefix__st2"/>
                                        <path id="prefix__prefix__polygon10" d="M650.21 641.36l-38.15-143.55-291.19-185.79 185.79 291.2z" class="prefix__prefix__st2"/>
                                        <path id="prefix__prefix__polygon12" d="M650.24 640.25L506.68 678.4 320.9 969.6l291.19-185.79z" class="prefix__prefix__st2"/>
                                        <path id="prefix__prefix__polygon14" d="M649.97 640.52l143.56-38.15 185.79-291.19-291.2 185.78z" class="prefix__prefix__st2"/>
                                    </g>
                                    <path id="prefix__prefix__path18" stroke-width=".116" d="M649.905 603.864c-21.21 0-38.406 17.184-38.406 38.38 0 21.197 17.195 38.38 38.406 38.38 21.21 0 38.405-17.183 38.405-38.38 0-21.196-17.194-38.38-38.405-38.38zm0 74.706c-20.075 0-36.35-16.263-36.35-36.326s16.274-36.325 36.35-36.325 36.35 16.263 36.35 36.326-16.275 36.325-36.35 36.325z" class="prefix__prefix__st1"/>
                                    <g id="prefix__prefix__g28" transform="matrix(.11647 0 0 .11639 574.077 567.372)">
                                        <path id="prefix__prefix__polygon20" d="M649.16 642.83l151.75 88.04 398.36-88.04-398.36-88.03z" class="prefix__prefix__st2"/>
                                        <path id="prefix__prefix__polygon22" d="M650.33 642.83L498.58 554.8l-398.35 88.03 398.35 88.04z" class="prefix__prefix__st2"/>
                                        <path id="prefix__prefix__polygon24" d="M649.43 641.88L561.4 793.64l88.03 398.35 88.03-398.35z" class="prefix__prefix__st2"/>
                                        <path id="prefix__prefix__polygon26" d="M649.43 642.33l88.03-151.75-88.03-398.36-88.03 398.36z" class="prefix__prefix__st2"/>
                                    </g>
                                    <ellipse id="prefix__prefix__circle30" cx="649.769" cy="642.189" stroke-width=".116" class="prefix__prefix__st0" rx="13.741" ry="13.731"/>
                                </g>
                            </svg>
                         </div>
                         </div>
                         <div style="display: flex; flex-direction: column;">
                         <div style="display: flex; flex-direction: column;">
                             <span>User Guidance</span>
                             <span>User Guidance</span>
                             <span style="font-size: 50%; margin-left: .2em; line-height: 1em;">
                             <span style="font-size: 50%; margin-left: .2em; line-height: 1em;">Navigate through the LINKS<br>Community Center!</span>
                                Navigate through the LINKS<br>Community Center!
                            </span>
                         </div>
                         </div>
                     </div>
                     </div>
Line 280: Line 56:
             </div>
             </div>
         </div>
         </div>
        <!-- HEADING END -->


        <!-- MAIN BEGIN -->
         <div id="hp-main">
         <div id="hp-main">
             <div id="snippets" style="display:none"></div>
   
            <!-- SNIPPETS BEGIN -->
             <div id="snippets"></div>
            <link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/snippets/styles.css">
            <script src="https://assets.links.communitycenter.eu/v2/links/snippets/script.js"></script>
            <!-- SNIPPETS END -->
       
            <!-- SEARCH BEGIN -->
                <script src="https://assets.links.communitycenter.eu/v2/links/search"></script>
                <form class="hp-search form-inline w-100" onsubmit="search(event)">
                <input id="hp-search-input" class="form-control form-control-lg flex-grow-1" type="text" placeholder="Search the entire LCC" aria-label="Search">
                    <button type="submit" class="btn btn-primary btn-lg" style="background-color: var(--links-blue); border-color: var(--links-blue);">
                        Search
                    </button>
                </form>
            <!-- SEARCH END -->


             <form class="hp-search form-inline w-100" onsubmit="search(event)">
             <!-- AREAS BEGIN -->
                <input id="hp-search-input" class="form-control form-control-lg flex-grow-1" type="text"
            <div class="hp-areas">
                    placeholder="Search the entire LCC" aria-label="Search">
                 <h2>Social Media and Crowdsourcing Libraries</h2>
                 <button type="submit" class="btn btn-primary btn-lg"
                    style="background-color: var(--links-blue); border-color: var(--links-blue);">Search</button>
            </form>


            <div class="hp-areas">
                <!-- LINK -->
                <h2>
                    Social Media and Crowdsourcing Libraries
                </h2>
                 <a class="hp-area blue" href="https://links.communitycenter.eu/index.php/List_of_Disaster_Community_Technologies">
                 <a class="hp-area blue" href="https://links.communitycenter.eu/index.php/List_of_Disaster_Community_Technologies">
                     <div class="hp-area-icon">
                     <div class="hp-area-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="a"><path d="M65 334h96v96H65z"/></clipPath></defs><g clip-path="url(#a)" transform="translate(-65 -334)"><path d="m142 395.981.004-35.993H84.001v36.01Zm-55.999-33.993h54.003L140 393.981l-53.999.017Z"/><path d="M81.001 358.987a2.002 2.002 0 0 1 2-2h60.003a2.002 2.002 0 0 1 2 2V400h2v-41.013a4.003 4.003 0 0 0-4-4H83.001a4.003 4.003 0 0 0-4 4V400h2ZM118.003 402.981v2h-10.001v-2H67v1.999a5.006 5.006 0 0 0 5 5.001h82.004a5.006 5.006 0 0 0 5.001-5.001v-1.999Zm36.001 5H72a3.004 3.004 0 0 1-3-3h37.002a1.934 1.934 0 0 0 2 2h10.001a1.934 1.934 0 0 0 2-2h37.002a3.005 3.005 0 0 1-3.001 3Z"/><path d="M113 365c-7.18 0-13 5.82-13 13s5.82 13 13 13 13-5.82 13-13c-.008-7.176-5.824-12.992-13-13Zm10.949 12h-3.518a14.167 14.167 0 0 0-4.176-9.508 11.023 11.023 0 0 1 7.694 9.508ZM112 368.226V377h-4.426c.254-3.771 1.929-7.06 4.426-8.774ZM112 379v8.775c-2.494-1.717-4.17-5.017-4.425-8.775Zm2 8.774V379h4.425c-.255 3.754-1.932 7.056-4.425 8.774ZM114 377v-8.773c2.492 1.718 4.17 5.019 4.425 8.773Zm-4.273-9.502a14.124 14.124 0 0 0-4.158 9.502h-3.518a11.02 11.02 0 0 1 7.676-9.502ZM102.051 379h3.518a14.157 14.157 0 0 0 4.173 9.507 11.022 11.022 0 0 1-7.691-9.507Zm14.205 9.508a14.168 14.168 0 0 0 4.175-9.508h3.518a11.023 11.023 0 0 1-7.693 9.508Z"/></g></svg>
                         <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=1-dct_list.svg">
                     </div>
                     </div>
                     <div class="hp-area-text">
                     <div class="hp-area-text">
                         <h3>Technologies</h3>
                         <h3>Technologies</h3>
                         <p>
                         <p>Software for&nbsp;interaction with, within or&nbsp;among communities in&nbsp;case of a&nbsp;disaster and for&nbsp;analysis of&nbsp;these interactions.</p>
                            Software for&nbsp;interaction with, within or&nbsp;among communities in&nbsp;case of a&nbsp;disaster and for&nbsp;analysis of&nbsp;these interactions.​
                        </p>
                     </div>
                     </div>
                     <div class="hp-area-arrow">&rarr;</div>
                     <div class="hp-area-arrow">&rarr;</div>
                 </a>
                 </a>


                <!-- LINK -->
                 <a class="hp-area orange" href="https://links.communitycenter.eu/index.php/List_of_Guidelines">
                 <a class="hp-area orange" href="https://links.communitycenter.eu/index.php/List_of_Guidelines">
                     <div class="hp-area-icon">
                     <div class="hp-area-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="b"><path d="M65 455h96v96H65z"/></clipPath></defs><g clip-path="url(#b)" transform="translate(-65 -455)"><path d="M138 463H84v79.961h54a5.014 5.014 0 0 0 5.019-5V468a5.014 5.014 0 0 0-5.019-5Zm-52 2h6.261v75.961H86Zm55.019 72.963a3.012 3.012 0 0 1-3.019 3H94.261V465H138a3.013 3.013 0 0 1 3.019 3Z"/><path d="M104 489h28v2h-28ZM110 500h16v2h-16Z"/></g></svg>
                         <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=2-gl_list.svg">
                     </div>
                     </div>
                     <div class="hp-area-text">
                     <div class="hp-area-text">
                         <h3>Guidelines</h3>
                         <h3>Guidelines</h3>
                         <p>
                         <p>Expert guidelines for&nbsp;usage of&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.</p>
                            Expert guidelines for&nbsp;usage of&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.​
                        </p>
                     </div>
                     </div>
                     <div class="hp-area-arrow">&rarr;</div>
                     <div class="hp-area-arrow">&rarr;</div>
                 </a>
                 </a>


                <!-- LINK -->
                 <a class="hp-area cyan" href="https://links.communitycenter.eu/index.php/List_of_Use_Cases">
                 <a class="hp-area cyan" href="https://links.communitycenter.eu/index.php/List_of_Use_Cases">
                     <div class="hp-area-icon">
                     <div class="hp-area-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="uc"><path d="M592 312h96v96h-96z"/></clipPath></defs><g clip-path="url(#uc)" transform="translate(-592 -312)"><path d="m648.783 351.102 1.99-.204 2.359 23.001-1.989.204Z"/><path d="M674 387h-6v-5h-8.093l-3.531-36.291A2.99 2.99 0 0 0 653.39 343h-26.658a2.991 2.991 0 0 0-2.985 2.7L620.1 382H612v5h-6v7h68Zm-48.263-41.1a1 1 0 0 1 .995-.9h26.658a.999.999 0 0 1 1 .9l3.51 36.1h-35.795ZM672 392h-64v-3h6v-5h52v5h6ZM639 326h2v12h-2ZM606 355h10v2h-10ZM664 355h10v2h-10ZM611.293 332.707l1.414-1.414 8 8-1.414 1.414ZM659.293 339.293l8-8 1.414 1.414-8 8Z"/></g></svg>
                         <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=3-uc_list.svg">
                     </div>
                     </div>
                     <div class="hp-area-text">
                     <div class="hp-area-text">
                         <h3>Use Cases</h3>
                         <h3>Use Cases</h3>
                         <p>
                         <p>Practical use cases for&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.</p>
                            Practical use cases for&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.​
                        </p>
                     </div>
                     </div>
                     <div class="hp-area-arrow">&rarr;</div>
                     <div class="hp-area-arrow">&rarr;</div>
                 </a>
                 </a>
 
               
                <!-- LINK -->
                 <a class="hp-area yellow" href="https://links.communitycenter.eu/index.php/List_of_Crisis_Communication">
                 <a class="hp-area yellow" href="https://links.communitycenter.eu/index.php/List_of_Crisis_Communication">
                     <div class="hp-area-icon">
                     <div class="hp-area-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"> <path d="M78.6 17.005H17.4a3.436 3.436 0 0 0-3.4 3.4v41.312a3.367 3.367 0 0 0 3.34 3.4H54.8l13.6 13.9v-13.8h10.2a3.436 3.436 0 0 0 3.4-3.4V20.506a3.463 3.463 0 0 0-3.4-3.501ZM80 61.817c-.02.765-.64 1.38-1.4 1.4H66.4v10.9L56.23 63.72l-.59-.6H17.4a1.37 1.37 0 0 1-1.4-1.339V20.406c.02-.765.64-1.38 1.4-1.4h61.2c.8.03 1.43.7 1.4 1.5Z" /> <path d="M46.88 27h2.25v21h-2.25ZM50 53.25c0 1.105-.9 2-2 2s-2-.895-2-2 .9-2 2-2 2 .895 2 2Z" /> </svg>
                         <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=4-cc_list.svg">
                     </div>
                     </div>
                     <div class="hp-area-text">
                     <div class="hp-area-text">
                         <h3>Crisis Communication</h3>
                         <h3>Crisis Communication</h3>
                         <p>
                         <p>Recommendations for&nbsp;efficient risk communication in&nbsp;disasters.</p>
                            Recommendations for&nbsp;efficient risk communication in&nbsp;disasters.
                        </p>
                     </div>
                     </div>
                     <div class="hp-area-arrow">&rarr;</div>
                     <div class="hp-area-arrow">&rarr;</div>
                 </a>
                 </a>
               
             </div>
             </div>
            <!-- AREAS END -->
         </div>
         </div>
 
        <!-- MAIN END -->
               
        <!-- PRODUCTS BEGIN -->
         <div id="hp-products" class="container-fluid">
         <div id="hp-products" class="container-fluid">
             <div class="row">
             <div class="row">
                <!-- LINK -->
                 <div id="hp-feel-safe" class="col-12 col-lg-4">
                 <div id="hp-feel-safe" class="col-12 col-lg-4">
                     <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Feel_Safe">
                     <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Feel_Safe">
                         <div class="hp-area-icon">
                         <div class="hp-area-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="safe"><path d="M106 118h96v96h-96z"/></clipPath></defs><g clip-path="url(#safe)" transform="translate(-106 -118)"><path d="M166.879 171.134c5.633 2.094 9.626 4.211 12.477 6.632a7.826 7.826 0 0 1 1.829 2.234h2.192a9.655 9.655 0 0 0-2.726-3.759c-3.056-2.595-7.281-4.838-13.211-7.032l-3.192-1.311a1.976 1.976 0 0 1-1.165-1.348c2.115-.677 7.628-2.87 9.945-7.892 1.888-4.09 1.326-15.762-3.824-24.035-3.543-5.692-8.691-8.782-14.913-8.936h-.556c-6.197.154-11.345 3.245-14.888 8.937-5.15 8.274-5.711 19.945-3.824 24.034 2.317 5.02 7.798 7.213 9.904 7.891a1.981 1.981 0 0 1-1.166 1.35l-3.114 1.283c-5.97 2.203-10.215 4.454-13.284 7.059a9.202 9.202 0 0 0-3.352 6.763l.003 8.167a6.517 6.517 0 0 0-.965-.306l-.241-.053a6.989 6.989 0 0 0-2.343-.104l-8.504-27.877a1 1 0 1 0-1.912.584l8.466 27.753c-3.026.904-4.629 2.225-3.256 7.534.744 2.88 1.65 4.372 3.03 4.991a3.67 3.67 0 0 0 1.532.307 12.09 12.09 0 0 0 2.909-.52 6.645 6.645 0 0 0 3.611-2.159c4.113 1.79 11.408 3.044 20.621 3.501l1.113.055-1.836-31.832a31.956 31.956 0 0 0 15.539-.001l-.397 6.956h2.003l.574-10.058Zm-12.87.869a27.927 27.927 0 0 1-7.892-1.071l-.128-2.223a3.99 3.99 0 0 0 1.013-2.66v-1.793a14.926 14.926 0 0 0 14.006.005v1.787a3.99 3.99 0 0 0 1.018 2.669l-.127 2.214a27.878 27.878 0 0 1-7.89 1.072Zm0-8c-7.177-.008-12.992-5.823-13-13v-1.821c.954-2.387 4.827-3.347 8.574-4.277 3.39-.841 6.869-1.703 8.396-3.794a19.88 19.88 0 0 0 4.155 3.245c2.156 1.407 4.386 2.86 4.876 4.766v1.881c-.009 7.177-5.825 12.993-13.001 13Zm-17.169-6.183c-1.474-3.191-1.177-14.295 3.705-22.139 3.215-5.166 7.67-7.856 13.216-7.994l.505-.001c5.57.139 10.025 2.828 13.24 7.994 4.882 7.843 5.179 18.949 3.706 22.14-1.8 3.901-6.083 5.871-8.204 6.636v-1.479a14.97 14.97 0 0 0 6.002-11.974v-2c0-.073-.008-.146-.024-.218-.615-2.748-3.23-4.454-5.76-6.104-2.03-1.324-3.948-2.574-4.517-4.14a1 1 0 0 0-1.937.263c-.182 2.304-3.82 3.206-7.669 4.16-4.344 1.076-8.835 2.19-10.041 5.716a1.012 1.012 0 0 0-.053.323v2a14.969 14.969 0 0 0 5.993 11.967v1.484c-2.113-.768-6.364-2.738-8.162-6.634Zm-14.575 43.715c-1.382.358-2.474.639-3.158.333-.734-.33-1.36-1.529-1.913-3.667-1.121-4.339-.295-4.569 2.786-5.366l.14-.037a4.93 4.93 0 0 1 2.26-.032l.235.051a4.399 4.399 0 0 1 3.281 3.095 4.734 4.734 0 0 1-3.631 5.623Zm21.792-31.596 1.893 32.826c-8.19-.473-14.814-1.613-18.53-3.152a6.76 6.76 0 0 0 .416-4.178 6.403 6.403 0 0 0-1.821-3.003l-.005-9.408a7.1 7.1 0 0 1 2.648-5.258c2.993-2.542 7.216-4.77 13.308-6.969Z"/><path d="M190.004 182h-37.998v27h14.511a2.488 2.488 0 0 0 1.987 1h5a2.488 2.488 0 0 0 1.987-1h14.513Zm-35.998 2h15.998v23h-15.998Zm33.998 23h-16v-23h16Z"/><path d="M176.004 190h8v2h-8ZM176.004 194h8v2h-8ZM176.004 198h6v2h-6Z"/></g></svg>
                             <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=prod-0.svg">
                         </div>
                         </div>
                         <div class="hp-area-text">
                         <div class="hp-area-text">
                             <h3>Feel Safe</h3>
                             <h3>Feel Safe</h3>
                             <!-- <p>
                             <!-- <p>Feel Safe.</p> -->
                                Feel Safe.
                            </p> -->
                         </div>
                         </div>
                     </a>
                     </a>
                 </div>
                 </div>
                       
                <!-- LINK -->
                 <div id="hp-handbook" class="col-12 col-lg-4">
                 <div id="hp-handbook" class="col-12 col-lg-4">
                     <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Including_Citizens_Handbook_-_Accessibility">
                     <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Including_Citizens_Handbook_-_Accessibility">
                         <div class="hp-area-icon">
                         <div class="hp-area-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="handbook"><path d="M876 118h96v96h-96z"/></clipPath></defs><g clip-path="url(#handbook)" transform="translate(-876 -118)"><path d="M932 150h15v2h-15ZM932 156h15v2h-15ZM932 162h10v2h-10Z"/><path d="M963 142h-6v-4.4a1 1 0 0 0-.675-.946 51.567 51.567 0 0 0-32.325-.11 51.567 51.567 0 0 0-32.325.109 1 1 0 0 0-.675.947v4.4h-6a1 1 0 0 0-1 1v48a1 1 0 0 0 1 1h32.1c.42 1.759 1.992 3 3.8 3h6.2a3.907 3.907 0 0 0 3.8-3H963a1 1 0 0 0 1-1v-48a1 1 0 0 0-1-1Zm-8-3.68v45.9a51.719 51.719 0 0 0-30 0v-45.9a49.656 49.656 0 0 1 30 0Zm-62 0a49.656 49.656 0 0 1 30 0v45.9a51.719 51.719 0 0 0-30 0ZM962 190h-32a1 1 0 0 0-1 1v.1a1.9 1.9 0 0 1-1.9 1.9h-6.2a1.9 1.9 0 0 1-1.9-1.9v-.1a1 1 0 0 0-1-1h-32v-46h5v41.6a1 1 0 0 0 1.325.946 49.55 49.55 0 0 1 31.35 0 .433.433 0 0 0 .05.008c.074.022.15.035.227.038.016 0 .032.008.048.008s.025-.005.037-.006a.95.95 0 0 0 .225-.034c.016 0 .033-.006.05-.011h.013a49.55 49.55 0 0 1 31.35 0 1 1 0 0 0 .325.051 1 1 0 0 0 1-1V144h5Z"/></g></svg>
                             <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=prod-1.svg">
                         </div>
                         </div>
                         <div class="hp-area-text">
                         <div class="hp-area-text">
                             <h3>Including Citizens Handbook</h3>
                             <h3>Including Citizens Handbook</h3>
                             <!-- <p>
                             <!-- <p>Including Citizens Handbook.</p> -->
                                Including Citizens Handbook.
                            </p> -->
                         </div>
                         </div>
                     </a>
                     </a>
                 </div>
                 </div>
                <!-- LINK -->
                 <div id="hp-wheel" class="col-12 col-lg-4">
                 <div id="hp-wheel" class="col-12 col-lg-4">
                     <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Resilience_Wheel">
                     <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Resilience_Wheel">
                         <div class="hp-area-icon">
                         <div class="hp-area-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="wheel"><path d="M502 118h96v96h-96z"/></clipPath></defs><g clip-path="url(#wheel)" transform="translate(-502 -118)"><path d="M528 177.64a6 6 0 1 1-6 6 6.007 6.007 0 0 1 6-6m0-2a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM576.5 170.8a6 6 0 1 1-6 6 6.007 6.007 0 0 1 6-6m0-2a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM546.75 132.61a6 6 0 1 1-6 6 6.007 6.007 0 0 1 6-6m0-2a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM583.983 153.036a1 1 0 0 0-1.37.351l-3.85 6.5c-.007.011-.015.01-.018 0a29.189 29.189 0 0 0-19.671-21.358 27.661 27.661 0 0 0-.82-.241 1 1 0 0 0-.582 1.914l.045.012c.256.071.51.146.762.225a27.16 27.16 0 0 1 18.4 20.315c0 .012 0 .017-.015.011l-6.977-4.132a1 1 0 0 0-1.02 1.72l8.86 5.247a1.003 1.003 0 0 0 1.37-.35l5.236-8.844a1 1 0 0 0-.35-1.37ZM570.792 185.564a1 1 0 0 0-1.414-.016l-.001.001c-.19.185-.381.368-.576.548a27.164 27.164 0 0 1-26.793 5.776c-.012 0-.013-.012 0-.018l7.068-3.977a1 1 0 0 0-.981-1.743l-8.974 5.05a1 1 0 0 0-.382 1.362l5.04 8.956a1 1 0 1 0 1.744-.981l-3.7-6.582c-.006-.012 0-.018.011-.014a28.77 28.77 0 0 0 8.581 1.309 29.173 29.173 0 0 0 19.75-7.669c.209-.192.414-.389.618-.588a1 1 0 0 0 .009-1.414ZM534.288 143.18a1.003 1.003 0 0 0-.7-.3l-10.277-.114h-.011a1 1 0 1 0-.011 2l7.556.084c.013 0 .016.008.006.017a29.185 29.185 0 0 0-8.66 27.713c.062.278.129.555.2.832a1.001 1.001 0 0 0 1.218.718 1 1 0 0 0 .718-1.218 20.579 20.579 0 0 1-.186-.771 27.164 27.164 0 0 1 8.393-26.092c.01-.008.018 0 .017.008l-.089 8.109a1 1 0 0 0 .989 1.011h.011a1 1 0 0 0 1-.989l.114-10.3a.998.998 0 0 0-.288-.708Z"/></g></svg>
                             <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=prod-2.svg">
                         </div>
                         </div>
                         <div class="hp-area-text">
                         <div class="hp-area-text">
                             <h3>Resilience Wheel</h3>
                             <h3>Resilience Wheel</h3>
                             <!-- <p>
                             <!-- <p>Resilience Wheel.</p> -->
                                Resilience Wheel.
                            </p> -->
                         </div>
                         </div>
                     </a>
                     </a>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
 
        <!-- PRODUCTS END -->
       
        <!-- COLLECTIONS BEGIN -->
         <div id="hp-collections" class="container-fluid">
         <div id="hp-collections" class="container-fluid">
             <div class="row">
             <div class="row">
                <!-- LINK -->
                 <div id="hp-resources" class="col-12 col-lg-6">
                 <div id="hp-resources" class="col-12 col-lg-6">
                     <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Helpful_resources">
                     <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Helpful_resources">
                         <div class="hp-area-icon">
                         <div class="hp-area-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="res"><path d="M592 312h96v96h-96z"/></clipPath></defs><g clip-path="url(#res)" transform="translate(-592 -312)"><path d="m675 366-10-10h-24v-35a1 1 0 0 0-2 0v11h-24l-10 10 10 10h24v48h2v-24h24Zm-59.172-16-8-8 8-8H639v16ZM641 374v-16h23.172l8 8-8 8Z"/></g></svg>
                             <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=prod-3.svg">
                         </div>
                         </div>
                         <div class="hp-area-text">
                         <div class="hp-area-text">
                             <h3>Collection of Helpful Resources</h3>
                             <h3>Collection of Helpful Resources</h3>
                             <p>
                             <p>Browse some interesting or&nbsp;relevant websites and&nbsp;apps.</p>
                                Browse some interesting or&nbsp;relevant websites and&nbsp;apps.
                            </p>
                         </div>
                         </div>
                     </a>
                     </a>
                 </div>
                 </div>
                       
                <!-- LINK -->
                 <div id="hp-networks" class="col-12 col-lg-6">
                 <div id="hp-networks" class="col-12 col-lg-6">
                     <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Overview_of_Networks">
                     <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Overview_of_Networks">
                         <div class="hp-area-icon">
                         <div class="hp-area-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="net"><path d="M244 176h96v96h-96z"/></clipPath></defs><g clip-path="url(#net)" transform="translate(-244 -176)"><path d="M326.8 215c-.8 0-1.5.1-2.3.3l-2.2-6.7c6.1-3.2 8.5-10.7 5.3-16.8-3.2-6.1-10.7-8.5-16.8-5.3-3.3 1.7-5.7 4.9-6.5 8.5l-8.8-.8c-.1-4.6-3.8-8.2-8.4-8.1-4.6.1-8.2 3.8-8.1 8.4 0 1.7.6 3.3 1.5 4.7l-11 10.9c-5.2-4.5-13.1-4-17.6 1.2-4.5 5.2-4.1 13.1 1.1 17.6 2.3 2 5.2 3.1 8.2 3.1h.9l2.7 14.4c-4.4 1.3-6.8 5.9-5.5 10.3 1.3 4.4 5.9 6.8 10.3 5.5 4.4-1.3 6.8-5.9 5.5-10.3l-.6-1.5 8.9-4.5c4.9 6.7 14.3 8.1 20.9 3.2 5.1-3.8 7.3-10.3 5.5-16.4l9.7-5.3c2.3 3.9 7.3 5.3 11.3 3 3.9-2.3 5.3-7.3 3-11.3-1.4-2.5-4.1-4.1-7-4.1Zm-16.4-8.9c.3-3.3 3.3-5.8 6.6-5.5 2.9.3 5.2 2.6 5.5 5.5-3.6 2.5-8.4 2.5-12.1 0Zm3.3-10.3c0-1.5 1.2-2.8 2.8-2.8 1.6 0 2.8 1.2 2.8 2.8 0 1.5-1.2 2.8-2.8 2.8-1.5 0-2.8-1.3-2.8-2.8Zm2.8-8.8c5.8 0 10.5 4.7 10.5 10.5 0 2.6-1 5.1-2.7 7.1-.6-2.3-2.3-4.3-4.5-5.3 1.9-1.8 2-4.8.2-6.8-1.8-1.9-4.8-2-6.8-.2s-2 4.8-.2 6.8l.2.2c-2.2 1-3.9 2.9-4.5 5.3-3.9-4.3-3.6-10.9.7-14.8 2-1.8 4.5-2.8 7.1-2.8Zm-6.7 21.1-8.1 15.3c-7.1-3.3-15.4-.6-19.2 6.2l-9.7-5.3c1.8-4.3 1-9.2-1.9-12.8l11-11c3.4 3 8.6 2.6 11.6-.9.9-1 1.5-2.2 1.8-3.5l8.8.8v.6c-.1 4.3 2.1 8.3 5.7 10.6Zm-23.9-14.9c0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4-.8-.1-1.4-.7-1.4-1.4Zm1.4 3.3c1.7 0 3.1 1.2 3.4 2.9-2.1 1.4-4.7 1.4-6.8 0 .2-1.6 1.6-2.8 3.4-2.9Zm0-8.5c3.4 0 6.2 2.8 6.3 6.2 0 1.3-.4 2.6-1.2 3.7-.5-1.1-1.3-2.1-2.4-2.7.5-.6.7-1.3.7-2.1 0-1.9-1.5-3.4-3.4-3.4s-3.4 1.5-3.4 3.4c0 .8.3 1.5.7 2.1-1.1.6-1.9 1.5-2.4 2.7-2-2.8-1.4-6.7 1.3-8.7 1.1-.8 2.4-1.2 3.8-1.2Zm-36.5 31.5c0-5.8 4.7-10.5 10.5-10.5s10.5 4.7 10.5 10.5c0 2.6-1 5.1-2.7 7.1-.6-2.3-2.3-4.3-4.5-5.3 1.9-1.8 2-4.8.2-6.8s-4.8-2-6.8-.2c-1.9 1.8-2 4.8-.2 6.8l.2.2c-2.2 1-3.9 2.9-4.5 5.3-1.8-2-2.7-4.5-2.7-7.1Zm7.7-1.7c0-1.5 1.2-2.8 2.8-2.8 1.6 0 2.8 1.2 2.8 2.8 0 1.5-1.2 2.8-2.8 2.8-1.6 0-2.8-1.3-2.8-2.8Zm-3.3 10.3c.3-3.3 3.3-5.8 6.6-5.5 2.9.3 5.2 2.6 5.5 5.5-3.6 2.5-8.5 2.5-12.1 0Zm8.6 31.4c.3-1.9 2-3.2 3.9-2.9 1.5.2 2.7 1.4 2.9 2.9-2 1.3-4.7 1.3-6.8 0Zm2.1-6.3c0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4-.8-.1-1.4-.7-1.4-1.4Zm6.4 4.7c-.5-1.1-1.3-2.1-2.4-2.7.5-.6.7-1.3.7-2.1 0-1.9-1.5-3.4-3.4-3.4s-3.4 1.5-3.4 3.4c0 .8.3 1.5.7 2.1-1.1.6-1.9 1.5-2.4 2.7-2-2.8-1.4-6.7 1.4-8.7 2.8-2 6.7-1.4 8.7 1.4 1.7 2.1 1.7 5.1.1 7.3Zm1-9.2c-1.5-1.7-3.7-2.7-6-2.7h-.4l-2.7-14.4c3.2-.8 6-2.8 7.7-5.6l9.7 5.3c-1.7 4.2-1.4 8.9.7 12.8l-9 4.6Zm14.6-1.2c.3-4.2 4-7.3 8.2-7 3.7.3 6.7 3.3 7 7-4.5 3.3-10.7 3.3-15.2 0Zm4-12.6c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6-1.6 3.6-3.6 3.6-3.6-1.6-3.6-3.6Zm13 11.1c-.7-3.1-2.9-5.6-5.8-6.8 2.4-2 2.7-5.5.7-7.9-2-2.4-5.5-2.7-7.9-.7-2.4 2-2.7 5.5-.7 7.9.2.3.5.5.7.7-2.9 1.2-5.1 3.7-5.8 6.8-5-5.2-4.8-13.4.4-18.4 5.2-5 13.4-4.8 18.4.4 4.8 5 4.8 13 0 18Zm4.2-15.2c-1.2-2.7-3.2-4.9-5.6-6.5l8.1-15.3c2.8 1.2 5.9 1.3 8.8.4l2.2 6.7c-3.3 1.9-4.9 5.8-3.8 9.4l-9.7 5.3Zm14.2-2.3c.3-1.9 2-3.2 3.9-2.9 1.5.2 2.7 1.4 2.9 2.9-2 1.3-4.7 1.3-6.8 0Zm2.1-6.3c0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4-.8-.1-1.4-.7-1.4-1.4Zm6.4 4.7c-.5-1.1-1.3-2.1-2.4-2.7.5-.6.7-1.3.7-2.1 0-1.9-1.5-3.4-3.4-3.4s-3.4 1.5-3.4 3.4c0 .8.3 1.5.7 2.1-1.1.6-1.9 1.5-2.4 2.7-2-2.8-1.4-6.7 1.4-8.7 2.8-2 6.7-1.4 8.7 1.4 1.7 2.1 1.7 5.1.1 7.3Z"/></g></svg>
                             <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=prod-4.svg">
                         </div>
                         </div>
                         <div class="hp-area-text">
                         <div class="hp-area-text">
                             <h3>Collection of Networks</h3>
                             <h3>Collection of Networks</h3>
                             <p>
                             <p>Communities and&nbsp;interest groups relevant for&nbsp;the context of&nbsp;social media in&nbsp;disaster management. 0b</p>
                                Communities and&nbsp;interest groups relevant for&nbsp;the context of&nbsp;social media in&nbsp;disaster management.​
                            </p>
                         </div>
                         </div>
                     </a>
                     </a>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
        <!-- COLLECTIONS END -->


         <!--kie: comment out until it is available.-->
         <!-- FORUM SECTION BEGIN -->
         <!-- <div class="hp-compass cyan">
         <!--
            <div class="d-flex align-items-center">
                <div class="hp-area-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="c"><path d="M199 603h96v96h-96z"/></clipPath></defs><g clip-path="url(#c)" transform="translate(-199 -603)"><path d="m277.516 645.583 2.136.654c-2.126-14.416-13.438-25.741-27.852-27.884l.691 2.143a31.072 31.072 0 0 1 25.025 25.087ZM214.36 646.146l2.14-.646a31.07 31.07 0 0 1 25.02-25l.655-2.139c-14.368 2.147-25.652 13.42-27.815 27.785ZM241.386 681.481a31.073 31.073 0 0 1-24.87-24.881l-2.151-.7a33.075 33.075 0 0 0 27.679 27.727ZM279.654 655.746l-2.141.691a31.072 31.072 0 0 1-25.032 25.068l-.691 2.143c14.424-2.14 25.744-13.475 27.864-27.902Z"/><path d="m274.8 647.888-15.134-4.924 4.837-9.38-9.431 4.806-4.872-15.208-2-6.2-1.2-3.9-1.3 4-1.9 6.2-4.784 15.134-9.416-4.832 4.82 9.429-15.12 4.776-6.3 1.9-4 1.3 4 1.3 6.1 2 15.248 4.8-4.848 9.405 9.386-4.947L243.7 678.8l1.9 6.2 1.3 4 1.3-4 2-6.2 4.9-15.3 9.4 4.9-4.828-9.351 15.028-4.859 6.2-2 4-1.3-3.9-1.1Zm-.714 4.4-15.341 4.954-2.01-3.893a9.925 9.925 0 0 1-.951 2.519l4.045 7.832-7.723-4.027a9.93 9.93 0 0 1-2.361 1.027l3.555 1.854-5 15.629-1.382 4.283-1.308-4.271-4.925-15.595 3.594-1.894a9.95 9.95 0 0 1-2.36-1.017l-7.73 4.074 4.051-7.863a9.91 9.91 0 0 1-.959-2.505l-2 3.885-15.557-4.89-4.194-1.375 4.37-1.315 15.441-4.877 1.967 3.847a9.938 9.938 0 0 1 .981-2.475l-4.088-8 8.016 4.113a9.958 9.958 0 0 1 2.523-.953l-3.92-2.013 4.894-15.474 1.27-4.148 1.316 4.072 4.966 15.518-4.011 2.044a9.922 9.922 0 0 1 2.53.955l8.1-4.125-4.147 8.043c.433.78.76 1.614.971 2.481l2.033-3.943 15.475 5.035 3.883 1.192Z"/><path d="M247 644.088a7 7 0 1 0 7 7 7.009 7.009 0 0 0-7-7Zm0 12a5 5 0 1 1 5-5 5.007 5.007 0 0 1-5 5.003Z"/></g></svg>
                </div>
                <div class="hp-area-text">
                    <h2>Want to be guided?</h2>
                    <p>
                        Try the compass!
                    </p>
                </div>
            </div>
        </div> -->
 
         <div id="hp-recent" class="container-fluid">
         <div id="hp-recent" class="container-fluid">
             <div class="row">
             <div class="row">
Line 449: Line 228:
                     <h3 class="text-center">News and Activities</h3>
                     <h3 class="text-center">News and Activities</h3>
                     <div class="h-100">
                     <div class="h-100">
                         <div id="recent-changes"></div>
                         <div id="recent-changes">
                        </div>
                     </div>
                     </div>
                 </div>
                 </div>
             </div>
             </div>
         </div></div>
         </div>
        -->
        <!-- FORUM SECTION END -->
           
    </div>
    <!-- HP END -->
 
    <!-- BEGIN SAFETY.WIDGET -->
    <link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/widget/styles.css">
    <div id="safety-widget"></div>
    <script src="https://assets.links.communitycenter.eu/v2/widget/script.js"></script>
    <!-- END SAFETY.WIDGET -->


        <script>
            const maxAmount = 6;    // maximum number of snippets
            const snippets = [
                {
                    "title": "Are you overwhelmed by too many social media technologies?",
                    "body": "Visit our Technologies Library to find the technology you need.",
                    "action": "/index.php/List_of_Disaster_Community_Technologies",
                    "product": "TL",
                },
                // {
                //    "title": "Do you want to be prepared when disaster strikes?",
                //    "body": "Learn from over 30 use cases about social media and crowdsourcing.",
                //    "action": "/index.php/List_of_Use_Cases",
                //    "product": "UCL",
                // },
                {
                    "title": "How to protect children during disaster?",
                    "body": "Child friendly disaster risk reduction.",
                    "action": "/index.php/Feel_Safe",
                    "product": "FS",
                },
                {
                    "title": "Be successful with your social media engagement!",
                    "body": "Find a plan in our library and develop your own strategy!",
                    "action": "/index.php/List_of_Guidelines?do=JTdCJTIyZmlsdGVyJTIyJTNBJTdCJTIyQ292ZXJzJTIwVGhlbWF0aWMlMjIlM0ElN0IlMjJDcmlzaXMlMjBjb21tdW5pY2F0aW9uJTIyJTNBdHJ1ZSUyQyUyMlNvY2lhbCUyME1lZGlhJTIwU3RyYXRlZ3klMjIlM0F0cnVlJTdEJTdEJTdE",
                    "product": "GL",
                },
                {
                    "title": "Do you know how to engage with vulnerable groups?",
                    "body": "In this helpful guide we walk you through a few actions that can be taken.",
                    "action": "/index.php/Including_Citizens_Handbook#making_information_accessible",
                    "product": "ICH",
                },
                {
                    "title": "Want to advance your organization’s use of social media?",
                    "body": "Try the Resilience Wheel.",
                    "action": "/index.php/Resilience_Wheel",
                    "product": "RW",
                },
                {
                    "title": "Do you struggle with managing volunteers in disasters?",
                    "body": "Look at our use cases on how to engage them.",
                    "action": "/index.php/List_of_Use_Cases?do=JTdCJTIyZmlsdGVyJTIyJTNBJTdCJTIyVXNlJTIwY2FzZXMlMjB0aGVtYXRpYyUyMiUzQSU3QiUyMk1vYmlsaXNpbmclMjBWb2x1bnRlZXJzJTIyJTNBdHJ1ZSU3RCU3RCU3RA==",
                    "product": "UCL",
                },
            ];
            const container = document.getElementById('snippets');
   
            // Fisher-Yates shuffling algorithm
            const shuffleArray = (array) => {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]];
                }
                return array;
            };
   
            const indices = Array.from({ length: snippets.length }, (_, index) => index);
   
            // Array of randomly selected snippets (by index)
            // TODO: Make sure there is at least one snippet per product.
            let selection = shuffleArray(indices);
            if (selection.length > maxAmount) selection = selection.slice(0, maxAmount);
   
            for (const index of selection) {
                const snippet = snippets[index];
                let el = '<a class="snippet ' + snippet.product + '" href="' + snippet.action + '">';
                    el += '<div class="snippet-inner">';
                    el += '<div class="snippet-header">' + snippet.title + '</div>';
                    el += '<div class="snippet-body">' + snippet.body + '</div>';
                    el += '</div></a>';
                container.innerHTML += el;
            }
        </script>
</includeonly>
</includeonly>

Latest revision as of 08:41, 2 October 2024

Second version of the LINKS Community Center homepage.
Do not modify!

Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:Homepage&oldid=12798"