|
|
| Line 141: |
Line 141: |
| #hp-resources {border-right: 0 none; } | | #hp-resources {border-right: 0 none; } |
| #hp-changes { border-top: var(--hp-border); } | | #hp-changes { border-top: var(--hp-border); } |
| } | | } |
| | | </style> |
| /* SNIPPETS */
| |
| #snippets {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, 1fr);
| |
| gap: 1em;
| |
| margin: 4em 0;
| |
| }
| |
| .snippet {
| |
| display: block;
| |
| text-decoration: none !important;
| |
| color: transparent;
| |
| background-color: transparent;
| |
| perspective: 1000px;
| |
| height: 7em;
| |
| }
| |
| .snippet .snippet-inner {
| |
| position: relative;
| |
| width: 100%;
| |
| height: 100%;
| |
| transition: transform 500ms;
| |
| transform-style: preserve-3d;
| |
| }
| |
| .snippet:hover .snippet-inner {
| |
| transform: rotateY(180deg);
| |
| }
| |
| .snippet-header, .snippet-body {
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 100%;
| |
| padding: 1em;
| |
| border: 2px solid;
| |
| border-radius: 5px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| text-align: center;
| |
| -webkit-backface-visibility: hidden; /* Safari */
| |
| backface-visibility: hidden;
| |
| }
| |
| .snippet-header {
| |
| color: #fff;
| |
| }
| |
| .snippet-body {
| |
| transform: rotateY(180deg);
| |
| }
| |
| | |
| .snippet.TL .snippet-body { color: var(--links-blue); }
| |
| | |
| .snippet.GL .snippet-body { color: var(--links-orange); }
| |
| | |
| .snippet.UCL .snippet-body { color: var(--links-cyan); }
| |
| | |
| .snippet.ICH .snippet-body { color: var(--handbook-color); }
| |
| | |
| .snippet.FS .snippet-body { color: var(--safe-color); }
| |
| | |
| .snippet.RW .snippet-body { 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);
| |
| }
| |
| | |
| @media only screen and (orientation: portrait) {
| |
| .snippet-header, .snippet-body {
| |
| font-size: .75em;
| |
| }
| |
|
| |
|
| form.hp-search button {
| | /* SNIPPETS BEGIN */ |
| display: none;
| | <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 */ |
| </style>
| |
|
| |
|
| <script> | | <script> |
| Line 433: |
Line 340: |
| </div> | | </div> |
| </div></div> | | </div></div> |
|
| |
| <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 many 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": "Take part in the course on mobilizing volunteers.",
| |
| "action": "/index.php/Including_Citizens_Handbook#mobilizing_volunteers",
| |
| "product": "ICH",
| |
| },
| |
| ];
| |
| 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>
| |
|
| |
|
| <!-- BEGIN SAFETY.WIDGET --> | | <!-- BEGIN SAFETY.WIDGET --> |