I need to implement a star rating display on amp pages based on values retrieved from the database using django template tags. How can I achieve this considering the ratings are in float format? Additionally, is it possible to apply the same code to non-amp pages?
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp-custom>
.rating {
--star-size: 3; /* using CSS variables for flexible dimensions */
padding: 0;
border: none;
unicode-bidi: bidi-override; direction: rtl;
text-align: left;
user-select: none;
font-size: 3em;
font-size: calc(var(--star-size) * 1em);
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
margin-bottom: 1em;
}
.rating > label {
display: inline-block;
position: relative;
width: 1.1em;
width: calc(var(--star-size) / 3 * 1.1em);
}
.rating > *:hover,
.rating > *:hover ~ label,
.rating:not(:hover) > input:checked ~ label {
color: transparent;
cursor: inherit;
}
.rating > *:hover:before,
.rating > *:hover ~ label:before,
.rating:not(:hover) > input:checked ~ label:before {
content: "★";
position: absolute;
left: 0;
color: gold;
}
.rating > input {
position: relative;
transform: scale(3);
transform: scale(var(--star-size));
top: -0.5em;
top: calc(var(--star-size) / 6 * -1em);
margin-left: -2.5em;
margin-left: calc(var(--star-size) / 6 * -5em);
z-index: 2;
opacity: 0;
font-size: initial;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
</style>
The page showcases multiple products, each displaying their star rating within the product card div.