Feedback - Done
2 min
Description
Feedback screen shows feedback provided by during PulseChecks. This is the central screen where users can view all feedback.
HTML
<section class="section">
<div class="w-layout-blockcontainer body-container w-container">
<div class="page-header">
<div class="w-layout-grid grid-2">
<div class="page-header-left">
<div class="breadcrumbs">
<div class="breadcrumb">Audience</div>
<div class="breadcrumb-divider">/</div>
<a href="#" class="breadcrumb">Feedback</a>
</div>
<div class="tab-heading-container-for-button">
<div>
<h1>Feedback<br></h1>
<div class="subheading">View and Manage Feedback</div>
</div>
<div class="flex">
<div class="dashboard-filter-container">
<div class="flex full">
<div class="pulsecheck-mark">
<div class="icon _20 w-embed"><svg fill="currentColor" width="512" height="512" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M432,272a48.09,48.09,0,0,0-45.25,32H347.53l-28.35-85.06a16,16,0,0,0-30.56.66L244.11,375.36l-52.33-314a16,16,0,0,0-31.3-1.25L99.51,304H48a16,16,0,0,0,0,32h64a16,16,0,0,0,15.52-12.12l45.34-181.37,51.36,308.12A16,16,0,0,0,239.1,464c.3,0,.6,0,.91,0a16,16,0,0,0,15.37-11.6l49.8-174.28,15.64,46.94A16,16,0,0,0,336,336h50.75A48,48,0,1,0,432,272Z"></path>
</svg></div>
<div class="pulse-check-picker-name">PulseCheck:</div>
</div>
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">All PulseChecks</div>
</div>
<div class="dropdown-open left w-dropdown-list">
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">All PulseChecks</div>
</a>
<!-- Start PulseChecks - repeat for each PulseCheck -->
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">{PulseCheck name}</div>
</a>
<!-- END PulseChecks -->
</div>
</div>
</div>
</div>
<div class="flex full">
<!-- START PulseCheck Period Filter - hide and only show if PulseCheck is selected, should show Periods of the selected PulseCheck -->
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">All Periods</div>
</div>
<div class="dropdown-open left w-dropdown-list">
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">All Periods</div>
</a>
<!-- START PulseCheck Periods - repeat for each Period, can only be selected if a PulseCheck is selected -->
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Current</div>
</a>
<!-- END PulseCheck Periods -->
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">February 2025</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">January 2025</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">December 2024</div>
</a>
</div>
</div>
</div>
<!-- END PulseCheck Period Filter -->
<div class="flex">
<!-- START Filter Button - opens filter modal and filters page by tag (after pulsecheck and Period filters have alread filtered) -->
<a id="filter" href="#" class="pulsecheck-filter-button w-inline-block">
<div class="icon _16 w-embed"><svg fill="currentColor" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path>
</svg></div>
</a>
<!-- EMD Filter Button -->
<!-- START Remove Filter Button - Hidden if no filter is applied, on click clears all tag filters, does not clear pulsecheck and Period filters (dropdowns) -->
<a id="remove-filter" href="#" class="pulsecheck-filter-button w-inline-block">
<div class="icon _16 danger-text w-embed"><svg fill="currentColor" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<polygon points="30 11.414 28.586 10 24 14.586 19.414 10 18 11.414 22.586 16 18 20.585 19.415 22 24 17.414 28.587 22 30 20.587 25.414 16 30 11.414">
<path d="M4,4A2,2,0,0,0,2,6V9.1709a2,2,0,0,0,.5859,1.4145L10,18v8a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V24H16v2H12V17.1709l-.5859-.5855L4,9.1709V6H24V8h2V6a2,2,0,0,0-2-2Z"></path>
</polygon></svg></div>
</a>
<!-- END Remove Filter Button -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-area">
<div class="feedback-list">
<!-- START No Feedback message shows if there is no feedback to display -->
<div class="block padding-2rem white">
<div class="flex-down center gap-1rem">
<div class="icon-circle-5rem">
<div class="icon _32 brand-color">
<svg width="128" height="128" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path class="cls-2" d="m19,3h10c1.1035,0,2,.8965,2,2v6c0,1.1035-.8965,2-2,2h-2.4229s-1.7314,3-1.7314,3l-1.7324-1,2.3096-4h3.5771s0-6,0-6h-10s0,6,0,6h3v2h-3c-1.1035,0-2-.8965-2-2v-6c0-1.1035.8965-2,2-2Z"/><path class="cls-2" d="m15,30h-2v-5c-.0018-1.6561-1.3439-2.9982-3-3h-4c-1.6561.0018-2.9982,1.3439-3,3v5H1v-5c.0033-2.7601,2.2399-4.9967,5-5h4c2.7601.0033,4.9967,2.2399,5,5v5Z"/><path class="cls-2" d="m8,10c1.6569,0,3,1.3431,3,3s-1.3431,3-3,3-3-1.3431-3-3c.0019-1.6561,1.3439-2.9981,3-3m0-2c-2.7614,0-5,2.2386-5,5s2.2386,5,5,5,5-2.2386,5-5-2.2386-5-5-5Z"/></svg>
</div>
</div>
<h3>No Feedback Available</h3>
<div>You haven't received any feedback yet, or no feedback matches your current filter selections.</div>
</div>
</div>
<!-- END No Feedback message -->
<!-- START PulseChecks with Feedback - repeat for PulseCheck Response with feedback -->
<div class="block white">
<div class="flex-down gap-1rem">
<div class="flex full space-between">
<div class="flex-down">
<div class="flex">
<a href="#" class="text-1rem w-inline-block"> <!-- link to contact details -->
<div><strong>{First name} {Last name}</strong></div>
</a>
<a href="mailto:{email address}" class="w-inline-block">
<div class="text-small">{email address}</div>
</a>
</div>
<div class="text-small">
<div class="flex">
<div data-variable-border="true" data-pulse-score="{pulse score of this PulseCheck}" class="pulse-score-small">
<div class="icon _16 brand-color w-embed">
<svg fill="currentColor" width="16" height="16" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M432,272a48.09,48.09,0,0,0-45.25,32H347.53l-28.35-85.06a16,16,0,0,0-30.56.66L244.11,375.36l-52.33-314a16,16,0,0,0-31.3-1.25L99.51,304H48a16,16,0,0,0,0,32h64a16,16,0,0,0,15.52-12.12l45.34-181.37,51.36,308.12A16,16,0,0,0,239.1,464c.3,0,.6,0,.91,0a16,16,0,0,0,15.37-11.6l49.8-174.28,15.64,46.94A16,16,0,0,0,336,336h50.75A48,48,0,1,0,432,272Z"></path></svg>
</div>
<div>{pulse score of this PulseCheck}</div>
</div>
<div class="flex small-gap">
<a href="#" class="w-inline-block"> <!-- link to PulseCheck dashboard for this PulseCheck -->
<div>{PulseCheck name}</div>
</a>
</div>
<div>•</div>
<div>{Date response submitted - e.g. March 21, 2025}</div>
</div>
</div>
</div>
<div class="flex">
<!-- START IF Feedback is Unread -->
<a href="#" class="text-small w-inline-block"> <!-- marks the feedback as read -->
<div>Mark as Read</div>
</a>
<div class="tag success">New</div>
<!-- END IF Feedback is Unread -->
<!-- START IF Feedback is Read -->
<a href="#" class="text-small w-inline-block"> <!-- marks the feedback as unread -->
<div data-tippy-content="Marked Read: {date marked read - e.g. Tuesday, January 3, 2025}">Mark as Unread</div>
</a>
<div class="icon _24 gray-300 w-embed"><svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" 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>
<!-- END IF Feedback is Read -->
</div>
</div>
<div class="feedback-item-list">
<!-- START Question Feedback - repeat for each question that had feedback in that PulseCheck response -->
<div class="feedback-item">
<div class="block white">
<div class="flex full large-gap top">
<!-- START Positive Face Icon -->
<div class="icon _24 success-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
</div>
<!-- END Positive Face Icon -->
<!-- START Neutral Face Icon -->
<div class="icon _24 warning-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
</div>
<!-- END Neutral Face Icon -->
<!-- START Negative Face Icon -->
<div class="icon _24 danger-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
</div>
<!-- END Negative Face Icon -->
<div class="flex-down full mt-3">
<div class="flex full space-between">
<div>
<strong>{PulseCheck question - e.g. How satisfied are you with our customer support?}</strong>
</div>
</div>
<div><em>{Feedback - The support team was very responsive and helped me resolve my issue quickly. I appreciate the follow-up to make sure everything was working properly afterward.}</em></div>
</div>
</div>
</div>
</div>
<!-- END Question Feedback -->
</div>
</div>
</div>
<!-- END PulseChecks with Feedback -->
</div>
</div>
<div class="page-footer">
<div id="poweredBy" class="powered-by">
<p class="paragraph">Powered by <a href="https://www.userfirstdigital.com">User First</a>
</p>
</div>
<div class="legal-links">
<a href="#">Privacy</a>
<a href="#">Terms of Use</a>
</div>
</div>
</div>
</section>