Widget: HomePageOld: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Marterer (talk | contribs)
No edit summary
 
(79 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<p class="display-3">LINKS Community Center</p>
<noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude>
<p class="lead">Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</p>
<includeonly>


<div class="container-fluid my-5">
<!-- STYLES BEGIN -->
  <div class="row">
<link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/homepage/styles_v2.css">
    <div class="col p-0">
<!-- STYLES END -->
      <a class="links-tile">
 
         <svg width="59" height="59" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip0"><rect x="548" y="548" width="59" height="59"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-548 -548)"><path d="M594.708 584.875 560.292 584.875 560.292 563.979 594.708 563.979 594.708 584.875ZM598.396 562.75C598.396 561.398 597.29 560.292 595.938 560.292L559.062 560.292C557.71 560.292 556.604 561.398 556.604 562.75L556.604 588.562 598.396 588.562 598.396 562.75Z" fill="#F2F2F2"/><path d="M581.188 591.021 581.188 591.635C581.188 592.004 580.942 592.25 580.573 592.25L574.427 592.25C574.058 592.25 573.812 592.004 573.812 591.635L573.812 591.021 549.229 591.021 549.229 592.25C549.229 593.602 550.335 594.708 551.688 594.708L603.312 594.708C604.665 594.708 605.771 593.602 605.771 592.25L605.771 591.021 581.188 591.021Z" fill="#F2F2F2"/></g></svg>
    <!-- HP BEGIN -->
        <div class="links-tile-title">Disaster Community Technologies</div>
    <div id="hp-wrapper">
      </a>
 
    </div>
        <!-- HEADING BEGIN -->
    <div class="col p-0 mx-2">
        <div id="hp-heading">
      <a class="links-tile">
            <h1 translate="no">
        <div class="links-tile-title">Disaster Management Processes</div>
                <span>LINKS</span>
      </a>
                <span>Community</span>
    </div>
                <span>Center</span>
    <div class="col p-0">
            </h1>
      <a class="links-tile">
            <p class="hp-lead">
        <div class="links-tile-title">Disaster Risk Perception and&nbsp;Vulnerability</div>
                <span>Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</span>
      </a>
            </p>
    </div>
            <div class="hp-button-wrapper">
  </div>
                <a class="hp-large-button" href="/index.php/User_Guidance">
  <div class="row my-2">
                    <div style="display: flex; align-items: center;">
    <div class="col p-0">
                        <div>
      <a class="links-tile">
                           
        <div class="links-tile-title">Disaster Reports</div>
                        </div>
      </a>
                        <div style="display: flex; flex-direction: column;">
    </div>
                            <span>User Guidance</span>
    <div class="col p-0 mx-2">
                            <span style="font-size: 50%; margin-left: .2em; line-height: 1em;">Navigate through the LINKS<br>Community Center!</span>
      <a class="links-tile">
                        </div>
        <div class="links-tile-title">Research Results</div>
                    </div>
      </a>
                </a>
    </div>
            </div>
    <div class="col p-0">
         </div>
      <a class="links-tile">
        <!-- HEADING END -->
        <div class="links-tile-title">Guidelines</div>
 
      </a>
        <!-- MAIN BEGIN -->
    </div>
        <div id="hp-main">
  </div>
   
  <div class="row">
            <!-- SNIPPETS BEGIN -->
    <div class="col p-0">
            <div id="snippets"></div>
      <a class="links-tile">
            <link rel="stylesheet" href="https://api.safety-base.eu/v2/links/snippets/styles.css">
        <div class="links-tile-title">Events</div>
            <script src="https://api.safety-base.eu/v2/links/snippets/script.js"></script>
      </a>
            <!-- SNIPPETS END -->
    </div>
       
    <div class="col p-0 mx-2">
            <!-- SEARCH BEGIN -->
      <a class="links-tile">
                <script src="https://api.safety-base.eu/v2/links/search"></script>
        <div class="links-tile-title">Members</div>
                <form class="hp-search form-inline w-100" onsubmit="search(event)">
      </a>
                <input id="hp-search-input" class="form-control form-control-lg flex-grow-1" type="text" placeholder="Search the entire LCC" aria-label="Search">
    </div>
                    <button type="submit" class="btn btn-primary btn-lg" style="background-color: var(--links-blue); border-color: var(--links-blue);">
    <div class="col p-0">
                        Search
      <a class="links-tile">
                    </button>
        <div class="links-tile-title">Glossary</div>
                </form>
      </a>
            <!-- SEARCH END -->
 
            <!-- AREAS BEGIN -->
            <div class="hp-areas">
                <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">
                        <img src="https://api.safety-base.eu/v2/links/lib?q=1-dct_list.svg">
                    </div>
                    <div class="hp-area-text">
                        <h3>Technologies</h3>
                        <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 class="hp-area-arrow">&rarr;</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://api.safety-base.eu/v2/links/lib?q=2-gl_list.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>
 
                <!-- LINK -->
                <a class="hp-area cyan" href="https://links.communitycenter.eu/index.php/List_of_Use_Cases">
                    <div class="hp-area-icon">
                        <img src="https://api.safety-base.eu/v2/links/lib?q=3-uc_list.svg">
                    </div>
                    <div class="hp-area-text">
                        <h3>Use Cases</h3>
                        <p>Practical use cases for&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.</p>
                    </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://api.safety-base.eu/v2/links/lib?q=4-cc_list.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://api.safety-base.eu/v2/links/lib?q=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://api.safety-base.eu/v2/links/lib?q=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://api.safety-base.eu/v2/links/lib?q=prod-2.svg">
                        </div>
                        <div class="hp-area-text">
                            <h3>Resilience Wheel</h3>
                            <!-- <p>Resilience Wheel.</p> -->
                        </div>
                    </a>
                </div>
 
            </div>
        </div>
        <!-- PRODUCTS END -->
       
        <!-- COLLECTIONS BEGIN -->
        <div id="hp-collections" class="container-fluid">
            <div class="row">
 
                <!-- LINK -->
                <div id="hp-resources" class="col-12 col-lg-6">
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Helpful_resources">
                        <div class="hp-area-icon">
                            <img src="https://api.safety-base.eu/v2/links/lib?q=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>
                       
                <!-- LINK -->
                <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">
                        <div class="hp-area-icon">
                            <img src="https://api.safety-base.eu/v2/links/lib?q=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>
        <!-- COLLECTIONS END -->
 
        <!-- FORUM SECTION BEGIN -->
        <div id="hp-recent" class="container-fluid">
            <div class="row">
                <div id="forum-topics" class="col-12 col-lg-6">
                    <h3 class="text-center">Latest Discussions</h3>
                    <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>
                </div>
                <div id="hp-changes" class="col-12 col-lg-6">
                    <h3 class="text-center">News and Activities</h3>
                    <div class="h-100">
                        <div id="recent-changes">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- FORUM SECTION END -->
           
     </div>
     </div>
  </div>
    <!-- HP END -->
</div>


<!-- kie: Moved forum embedding from HTMLlets extension to this Widget -->
    <!-- BEGIN SAFETY.WIDGET -->
<p>Current LINKS Forum topics</p>
    <link rel="stylesheet" href="https://widget.safety-base.eu/v2/widget/styles.css">
<script src="https://forum.links.communitycenter.eu/javascripts/embed-topics.js"></script>
    <div id="safety-widget"></div>
    <script src="https://widget.safety-base.eu/v2/widget/script.js"></script>
    <!-- END SAFETY.WIDGET -->


<div width="100%">
</includeonly>
  <d-topics-list discourse-url="https://forum.links.communitycenter.eu" per-page="5" order="latest"
                sort-ascending="false" template="basic"></d-topics-list>
</div>

Latest revision as of 08:36, 2 October 2024

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