Difference between revisions of "Widget:Homepage"

From LINKS Community Center
Jump to: navigation, search
 
(332 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
<noinclude>
+
<noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude>
−
    Development verstion of the DCT Homepage.<br>
 
−
    <span style="color: red; font-weight: bold;">Not ready for production!</span>
 
−
</noinclude>
 
 
<includeonly>
 
<includeonly>
−
    <style>
+
 
−
        #hp-wrapper { font-family: 'Open Sans'; }
+
<!-- STYLES BEGIN -->
−
        #hp-heading {
+
<link rel="stylesheet" href="https://www.safetyinnovation.center/lcc/homepage/styles.css">
−
            padding: 3em;
+
<!-- STYLES END -->
−
            margin-bottom: 8em;
+
 
−
            background:
+
    <!-- HP BEGIN -->
−
                linear-gradient(125deg, #FFFFFF 0%, #000000 100%),
 
−
                linear-gradient(200deg, #D0F2F2 0%, #D0F2F2 50%, #34B8B8 calc(50% + 1px), #34B8B8 60%, #166EA9 calc(60% + 1px), #166EA9 75%, #125887 calc(75% + 1px), #125887 100%),
 
−
                linear-gradient(113deg, #D0F2F2 0%, #D0F2F2 40%, #34B8B8 calc(40% + 1px), #34B8B8 50%, #166EA9 calc(50% + 1px), #166EA9 70%, #125887 calc(70% + 1px), #125887 100%);
 
−
            background-blend-mode: overlay, overlay, normal;
 
−
        }
 
−
        #hp-heading h1 { font-family: 'Raleway'; font-size: 5em; margin-bottom: .5em; }
 
−
        #hp-heading h1 span { display: block; white-space: nowrap; }
 
−
        #hp-heading h1 span:nth-child(1) { font-weight: 800; letter-spacing: .06em; }
 
−
        #hp-heading h1 span:nth-child(2) { font-weight: 500; }
 
−
        #hp-heading h1 span:nth-child(3) { font-weight: 100; }
 
−
        #hp-heading .hp-lead { font-size: 2em; font-weight: 300; margin-bottom: 2em; }
 
−
        .hp-large-button { display: inline-block; font-weight: 600; font-size: 1.6em; padding: .5em; border: 1px solid black; user-select: none; }
 
−
        #hp-main { width: 75%; margin: auto; }
 
−
        .hp-search { margin-bottom: 8em; }
 
−
        .hp-areas { margin-bottom: 8em; }
 
−
        .hp-area { display: flex; margin-bottom: 2em; }
 
−
        .hp-area-icon { flex: 1 0; margin-right: 1em; user-select: none; }
 
−
        .hp-area-text { flex: 1 1 75%; }
 
−
        .hp-area-text h2, #hp-recent h3 { font-family: 'Raleway'; font-weight: 300; letter-spacing: .06em; }
 
−
        .hp-area-text p { font-size: 1.2em; margin: 0; }
 
−
        .hp-area-arrow { flex: 1 0; font-size: 3em; margin-left: 1em; user-select: none; }
 
−
        .hp-compass { border: 1px solid black; padding: 5em; display: flex; justify-content: center; }
 
−
        #forum-topics { padding: 4em 1em 4em 0; border-right: 1px solid black; }
 
−
        #hp-recent h3 { margin-bottom: 1em; }
 
−
        #hp-changes { padding: 4em 0 4em 1em; }
 
−
        .placeholder-box {
 
−
            position: relative;
 
−
            width: 100px;
 
−
            height: 100px;
 
−
            border: 1px solid black;
 
−
        }
 
−
        .placeholder-box::before {
 
−
            content: "";
 
−
            display: block;
 
−
            position: absolute;
 
−
            top: 0;
 
−
            left: 0;
 
−
            width: 141.42%;
 
−
            height: 1px;
 
−
            background-color: black;
 
−
            transform-origin: top left;
 
−
            transform: rotate(45deg);
 
−
        }
 
−
        .placeholder-box::after {
 
−
            content: "";
 
−
            display: block;
 
−
            position: absolute;
 
−
            bottom: 0;
 
−
            left: 0;
 
−
            width: 141.42%;
 
−
            height: 1px;
 
−
            background-color: black;
 
−
            transform-origin: bottom left;
 
−
            transform: rotate(-45deg);
 
−
        }
 
−
        .blue * {
 
−
            color: var(--links-blue);
 
−
            border-color: var(--links-blue);
 
−
        }
 
−
        .blue .placeholder-box::before, .blue .placeholder-box::after { background-color: var(--links-blue); }
 
−
        .orange * {
 
−
            color: var(--links-orange);
 
−
            border-color: var(--links-orange);
 
−
        }
 
−
        .orange .placeholder-box::before, .orange .placeholder-box::after { background-color: var(--links-orange); }
 
−
        @media screen and (min-width: 992px) {
 
−
            #hp-heading .hp-lead { max-width: 50%; }
 
−
        }
 
−
    </style>
 
 
     <div id="hp-wrapper">
 
     <div id="hp-wrapper">
 +
 +
        <!-- HEADING BEGIN -->
 
         <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">Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</p>
+
             <p class="hp-lead">
−
             <div class="hp-large-button">Get Started</div>
+
                <span>Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</span>
 +
            </p>
 +
             <div class="hp-button-wrapper">
 +
                <a class="hp-large-button" href="/index.php/User_Guidance">
 +
                    <div style="display: flex; align-items: center;">
 +
                        <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>
 +
                        </div>
 +
                        <div style="display: flex; flex-direction: column;">
 +
                            <span>User Guidance</span>
 +
                            <span style="font-size: 50%; margin-left: .2em; line-height: 1em;">Navigate through the LINKS<br>Community Center!</span>
 +
                        </div>
 +
                    </div>
 +
                </a>
 +
            </div>
 
         </div>
 
         </div>
 +
        <!-- HEADING END -->
  
 +
        <!-- MAIN BEGIN -->
 
         <div id="hp-main">
 
         <div id="hp-main">
−
             <div class="hp-search">
+
   
−
                 <input class="form-control form-control-lg" type="text" placeholder="Search">
+
            <!-- SNIPPETS BEGIN -->
−
             </div>
+
             <div id="snippets"></div>
 +
            <link rel="stylesheet" href="https://www.safetyinnovation.center/lcc/snippets/styles.css">
 +
            <script src="https://www.safetyinnovation.center/lcc/snippets/script.js"></script>
 +
            <!-- SNIPPETS END -->
 +
       
 +
            <!-- SEARCH BEGIN -->
 +
            <script src="https://www.safetyinnovation.center/lcc/search/script.js"></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 -->
  
 +
            <!-- AREAS BEGIN -->
 
             <div class="hp-areas">
 
             <div class="hp-areas">
−
                 <div class="hp-area blue">
+
                 <h2>Social Media and Crowdsourcing Libraries</h2>
 +
 
 +
                <!-- LINK -->
 +
                <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">
−
                         <div class="placeholder-box"></div>
+
                         <img src="https://www.safetyinnovation.center/lcc/homepage/img/1-dct.svg">
 
                     </div>
 
                     </div>
 
                     <div class="hp-area-text">
 
                     <div class="hp-area-text">
−
                         <h2>SMCS Technologies Library</h2>
+
                         <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>
−
                 </div>
+
                 </a>
 +
 
 +
                <!-- LINK -->
 +
                <a class="hp-area orange" href="https://links.communitycenter.eu/index.php/List_of_Guidelines">
 +
                    <div class="hp-area-icon">
 +
                        <img src="https://www.safetyinnovation.center/lcc/homepage/img/2-gl.svg">
 +
                    </div>
 +
                    <div class="hp-area-text">
 +
                        <h3>Guidelines</h3>
 +
                        <p>Expert guidelines for&nbsp;usage of&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.</p>
 +
                    </div>
 +
                    <div class="hp-area-arrow">&rarr;</div>
 +
                </a>
  
−
                 <div class="hp-area orange">
+
                 <!-- LINK -->
 +
                <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">
−
                         <div class="placeholder-box"></div>
+
                         <img src="https://www.safetyinnovation.center/lcc/homepage/img/3-uc.svg">
 
                     </div>
 
                     </div>
 
                     <div class="hp-area-text">
 
                     <div class="hp-area-text">
−
                         <h2>Guidelines</h2>
+
                         <h3>Use Cases</h3>
−
                         <p>
+
                         <p>Practical use cases for&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.</p>
−
                            Expert guidelines for&nbsp;usage of&nbsp;social media in&nbsp;disasters.​
 
−
                        </p>
 
 
                     </div>
 
                     </div>
 
                     <div class="hp-area-arrow">&rarr;</div>
 
                     <div class="hp-area-arrow">&rarr;</div>
 +
                </a>
 +
               
 +
                <!-- LINK -->
 +
                <a class="hp-area yellow" href="https://links.communitycenter.eu/index.php/List_of_Crisis_Communication">
 +
                    <div class="hp-area-icon">
 +
                        <img src="https://www.safetyinnovation.center/lcc/homepage/img/4-cc.svg">
 +
                    </div>
 +
                    <div class="hp-area-text">
 +
                        <h3>Crisis Communication</h3>
 +
                        <p>Recommendations for&nbsp;efficient risk communication in&nbsp;disasters.</p>
 +
                    </div>
 +
                    <div class="hp-area-arrow">&rarr;</div>
 +
                </a>
 +
               
 +
            </div>
 +
            <!-- AREAS END -->
 +
 +
        </div>
 +
        <!-- MAIN END -->
 +
               
 +
        <!-- PRODUCTS BEGIN -->
 +
        <div id="hp-products" class="container-fluid">
 +
            <div class="row">
 +
 +
                <!-- LINK -->
 +
                <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">
 +
                        <div class="hp-area-icon">
 +
                            <img src="https://www.safetyinnovation.center/lcc/homepage/img/prod-0.svg">
 +
                        </div>
 +
                        <div class="hp-area-text">
 +
                            <h3>Feel Safe</h3>
 +
                            <!-- <p>Feel Safe.</p> -->
 +
                        </div>
 +
                    </a>
 +
                </div>
 +
                       
 +
                <!-- LINK -->
 +
                <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">
 +
                        <div class="hp-area-icon">
 +
                            <img src="https://www.safetyinnovation.center/lcc/homepage/img/prod-1.svg">
 +
                        </div>
 +
                        <div class="hp-area-text">
 +
                            <h3>Including Citizens Handbook</h3>
 +
                            <!-- <p>Including Citizens Handbook.</p> -->
 +
                        </div>
 +
                    </a>
 +
                </div>
 +
 +
                <!-- LINK -->
 +
                <div id="hp-wheel" class="col-12 col-lg-4">
 +
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Resilience_Wheel">
 +
                        <div class="hp-area-icon">
 +
                            <img src="https://www.safetyinnovation.center/lcc/homepage/img/prod-2.svg">
 +
                        </div>
 +
                        <div class="hp-area-text">
 +
                            <h3>Resilience Wheel</h3>
 +
                            <!-- <p>Resilience Wheel.</p> -->
 +
                        </div>
 +
                    </a>
 
                 </div>
 
                 </div>
 +
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
        <!-- PRODUCTS END -->
 +
       
 +
        <!-- COLLECTIONS BEGIN -->
 +
        <div id="hp-collections" class="container-fluid">
 +
            <div class="row">
  
−
        <div class="hp-compass">
+
                <!-- LINK -->
−
            <div class="d-flex">
+
                <div id="hp-resources" class="col-12 col-lg-6">
−
                <div class="hp-area-icon">
+
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Helpful_resources">
−
                    <div class="placeholder-box"></div>
+
                        <div class="hp-area-icon">
 +
                            <img src="https://www.safetyinnovation.center/lcc/homepage/img/prod-3.svg">
 +
                        </div>
 +
                        <div class="hp-area-text">
 +
                            <h3>Collection of Helpful Resources</h3>
 +
                            <p>Browse some interesting or&nbsp;relevant websites and&nbsp;apps.</p>
 +
                        </div>
 +
                    </a>
 
                 </div>
 
                 </div>
−
                 <div class="hp-area-text">
+
                       
−
                    <h2>Want to explore?</h2>
+
                <!-- LINK -->
−
                    <p>
+
                 <div id="hp-networks" class="col-12 col-lg-6">
−
                         Try the compass!
+
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Overview_of_Networks">
−
                     </p>
+
                        <div class="hp-area-icon">
 +
                            <img src="https://www.safetyinnovation.center/lcc/homepage/img/prod-4.svg">
 +
                        </div>
 +
                        <div class="hp-area-text">
 +
                            <h3>Collection of Networks</h3>
 +
                            <p>Communities and&nbsp;interest groups relevant for&nbsp;the context of&nbsp;social media in&nbsp;disaster management. 0b</p>
 +
                         </div>
 +
                     </a>
 
                 </div>
 
                 </div>
 +
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
        <!-- COLLECTIONS END -->
  
 +
        <!-- FORUM SECTION BEGIN -->
 
         <div id="hp-recent" class="container-fluid">
 
         <div id="hp-recent" class="container-fluid">
 
             <div class="row">
 
             <div class="row">
−
                 <div id="forum-topics" class="col-6">
+
                 <div id="forum-topics" class="col-12 col-lg-6">
−
                     <h3 class="text-center">Current Forum Topics</h3>
+
                     <h3 class="text-center">Latest Discussions</h3>
 
                     <script src="https://forum.links.communitycenter.eu/javascripts/embed-topics.js"></script>
 
                     <script src="https://forum.links.communitycenter.eu/javascripts/embed-topics.js"></script>
 
                     <d-topics-list discourse-url="https://forum.links.communitycenter.eu" per-page="5" order="latest" sort-ascending="false" template="complete"></d-topics-list>
 
                     <d-topics-list discourse-url="https://forum.links.communitycenter.eu" per-page="5" order="latest" sort-ascending="false" template="complete"></d-topics-list>
 
                 </div>
 
                 </div>
−
                 <div id="hp-changes" class="col-6">
+
                 <div id="hp-changes" class="col-12 col-lg-6">
 
                     <h3 class="text-center">News and Activities</h3>
 
                     <h3 class="text-center">News and Activities</h3>
−
                     <div class="h-100 d-flex">
+
                     <div class="h-100">
−
                         <div id="recent-changes"></div>
+
                         <div id="recent-changes">
 +
                        </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
         </div></div></includeonly>
+
         </div>
 +
        <!-- FORUM SECTION END -->
 +
           
 +
    </div>
 +
    <!-- HP END -->
 +
 
 +
    <!-- BEGIN SAFETY.WIDGET -->
 +
    <link rel="stylesheet" href="https://www.safetyinnovation.center/widget/styles.css">
 +
    <div id="safety-widget"></div>
 +
    <script src="https://www.safetyinnovation.center/widget/script.js"></script>
 +
    <!-- END SAFETY.WIDGET -->
 +
 
 +
</includeonly>

Latest revision as of 23:03, 10 May 2024

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

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