Add Platform Step 1 - Done
3 min
HTML
The HTML includes the following conditions
- List available review platforms to add
- No results screen/message if nothing matches the filter
- Screen/message if all review platforms have already been added to the PulseCheck
HTML code
<div class="modal-background">
<div class="modal-container">
<div class="modal-heading-container">
<h1 class="modal-h1">Add Review Platform</h1>
</div>
<form id="filter-platforms" name="filter-platforms" method="get" class="form flex">
<div class="search-box">
<div class="search-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 -960 960 960" width="24px" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"></path></svg>
</div>
<input class="text-field w-input" maxlength="256" name="filter" placeholder="Filter platforms..." type="text" id="filter">
</div>
</form>
<!-- Start Pick Review Platform - show IF there are review Platforms that are not yet added to this PulseCheck -->
<div class="review-platform-list">
<!-- START Review Platforms - Repeat for all review platforms not currently added to this PulseCheck -->
<div class="review-platform-tile">
<div class="flex">
<div class="icon _32">
<!-- Start Platform Logo -->
{platform svg}
<!-- END Platform Logo -->
</div>
<div>
<div class="review-platform-tile-name">{platform name}</div>
<div class="review-platform-tile-category">{platform category}</div>
</div>
</div>
<div class="icon _32 w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32"><polygon points="17,15 17,8 15,8 15,15 8,15 8,17 15,17 15,24 17,24 17,17 24,17 24,15 "></polygon></svg>
</div>
</div>
<!-- END Review Platforms -->
</div>
<!-- END Pick Review Platform -->
<!-- START No Results variants -->
<div class="review-platform-no-results">
<!-- START All Platforms Added - show this if all platforms are added and there are no more to add -->
<div class="message-area">
<div class="icon _32 success-text w-embed"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32">
<polygon points="14 21.414 9 16.413 10.413 15 14 18.586 21.585 11 23 12.415 14 21.414">
<path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"></path>
</polygon></svg></div>
<div class="review-platform-no-results-heading">All review platforms added</div>
<div class="text-block-32">You've added all available review platforms to your PulseCheck. You can manage your configured platforms from the main review platforms list.</div>
</div>
<!-- END All Platforms Added -->
<!-- START No matching platforms - show if filter returns no results -->
<div class="message-area">
<div class="icon _32 warning-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" height="32px" viewbox="0 -960 960 960" width="32px" fill="currentColor">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"></path>
</svg></div>
<div class="review-platform-no-results-heading">No matching platforms found</div>
<div class="text-block-32">No review platforms match your search for "{filter input value}".<br></div>
</div>
<!-- END No matching platforms -->
</div>
<div class="modal-close-button w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</div>
</div>