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
 
(81 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">
 
        <div class="links-tile-title">Disaster Community Technologies</div>
    <!-- HP BEGIN -->
      </a>
    <div id="hp-wrapper">
    </div>
 
    <div class="col p-0 mx-2">
        <!-- HEADING BEGIN -->
      <a class="links-tile">
        <div id="hp-heading">
        <div class="links-tile-title">Disaster Management Processes</div>
            <h1 translate="no">
      </a>
                <span>LINKS</span>
    </div>
                <span>Community</span>
    <div class="col p-0">
                <span>Center</span>
      <a class="links-tile">
            </h1>
        <div class="links-tile-title">Disaster Risk Perception and&nbsp;Vulnerability</div>
            <p class="hp-lead">
      </a>
                <span>Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</span>
    </div>
            </p>
  </div>
            <div class="hp-button-wrapper">
  <div class="row my-2">
                <a class="hp-large-button" href="/index.php/User_Guidance">
    <div class="col p-0">
                    <div style="display: flex; align-items: center;">
      <a class="links-tile">
                        <div>
        <div class="links-tile-title">Disaster Reports</div>
                           
      </a>
                        </div>
    </div>
                        <div style="display: flex; flex-direction: column;">
    <div class="col p-0 mx-2">
                            <span>User Guidance</span>
      <a class="links-tile">
                            <span style="font-size: 50%; margin-left: .2em; line-height: 1em;">Navigate through the LINKS<br>Community Center!</span>
        <div class="links-tile-title">Research Results</div>
                        </div>
      </a>
                    </div>
    </div>
                </a>
    <div class="col p-0">
            </div>
      <a class="links-tile">
        </div>
        <div class="links-tile-title">Guidelines</div>
        <!-- HEADING END -->
      </a>
 
    </div>
        <!-- MAIN BEGIN -->
  </div>
        <div id="hp-main">
  <div class="row">
      
    <div class="col p-0">
            <!-- SNIPPETS BEGIN -->
      <a class="links-tile">
            <div id="snippets"></div>
        <div class="links-tile-title">Events</div>
            <link rel="stylesheet" href="https://api.safety-base.eu/v2/links/snippets/styles.css">
      </a>
            <script src="https://api.safety-base.eu/v2/links/snippets/script.js"></script>
    </div>
            <!-- SNIPPETS END -->
    <div class="col p-0 mx-2">
       
      <a class="links-tile">
            <!-- SEARCH BEGIN -->
        <div class="links-tile-title">Members</div>
                <script src="https://api.safety-base.eu/v2/links/search"></script>
      </a>
                <form class="hp-search form-inline w-100" onsubmit="search(event)">
    </div>
                <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 class="col p-0">
                    <button type="submit" class="btn btn-primary btn-lg" style="background-color: var(--links-blue); border-color: var(--links-blue);">
      <a class="links-tile">
                        Search
        <div class="links-tile-title">Glossary</div>
                    </button>
      </a>
                </form>
            <!-- 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!