grovs
Version:
Grovs generates dynamic links, tracks attributions, and analyzes referrals, seamlessly directing users to your app or the app store for downloads.
174 lines (171 loc) • 6.21 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Messages</title>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
rel="stylesheet"
/>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden; /* Prevent scrolling when modal is open */
font-family: "Open Sans", sans-serif; /* Use Open Sans font */
background-color: #f0f0f0; /* Background color for contrast */
margin: 0; /* Remove default margin */
}
.modal {
display: flex;
flex-direction: column; /* Column layout for modal content */
left: 0;
height: 100%; /* Full viewport height */
backdrop-filter: blur(10px); /* Blurring effect for the background */
color: white; /* Text color */
z-index: 1000;
padding: 30px; /* Padding for modal */
padding-bottom: 0px;
box-sizing: border-box; /* Include padding in width/height calculations */
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Shadow effect */
}
.modal-content {
flex-grow: 1; /* Allow content to grow */
border-radius: 10px; /* Rounded corners for the content box */
position: relative; /* Relative positioning for the close button */
overflow: hidden; /* Hide overflow */
}
#closeModalBtn {
width: 40px;
height: 40px;
border: none; /* Remove border */
background: transparent; /* Make background transparent */
cursor: pointer; /* Change cursor on hover */
display: flex; /* Use flexbox for centering */
justify-content: center; /* Center the SVG horizontally */
align-items: center; /* Center the SVG vertically */
z-index: 1; /* Ensure button is above other content */
padding: 0; /* Remove any padding */
margin: 0; /* Remove any margin */
}
.header {
position: sticky; /* Stick the header to the top */
top: 0; /* Position it at the top */
z-index: 1; /* Ensure it is above the scrolling content */
display: flex; /* Use flexbox layout */
justify-content: space-between; /* Space between the title and the close button */
align-items: center; /* Center items vertically */
height: 40px;
margin-bottom: 20px;
}
.item-list {
max-height: calc(
100vh - 30vh - 150px
); /* Adjust this value to leave space for header and button */
overflow-y: auto; /* Enable vertical scrolling */
}
.item {
display: flex; /* Flex layout for each item */
justify-content: space-between; /* Space between title/subtitle and right arrow */
align-items: center; /* Center vertically */
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Separator line */
cursor: pointer; /* Pointer cursor on hover */
}
.indicator {
width: 10px; /* Width of the blue indicator */
height: 10px; /* Height of the blue indicator */
border-radius: 50%; /* Make it circular */
background-color: blue; /* Blue color */
margin-right: 10px; /* Space between indicator and title */
}
.right-arrow {
margin-left: 10px; /* Space between item text and arrow */
color: white; /* Color of the right arrow */
}
.title {
font-size: 24px;
font-weight: 600;
padding-left: 10px;
}
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.indicator {
background-color: #298dfa;
}
.item-title {
font-size: 17px;
font-weight: 600;
color: white;
}
.item-subtitle {
color: rgba(255, 255, 255, 0.5);
}
.list-title {
padding-left: 10px;
}
.spinner-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2000; /* Higher than modal */
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="spinner" class="spinner-overlay">
<div class="spinner"></div>
</div>
<div class="modal">
<div class="modal-content">
<div class="header">
<h1 class="title">Messages</h1>
<button id="closeModalBtn">
<svg
width="24"
height="24"
viewBox="0 0 95 95"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M47.5 0C21.266 0 0 21.266 0 47.5C0 73.734 21.266 95 47.5 95C73.734 95 95 73.734 95 47.5C94.9727 21.277 73.723 0.027 47.5 0ZM66.133 60.535C67.7072 62.0545 67.7502 64.5584 66.2307 66.1327C64.7112 67.7069 62.2073 67.7499 60.633 66.2304C60.6017 66.1991 60.5666 66.1679 60.5353 66.1327L47.5003 53.0977L34.4653 66.1327C32.8911 67.6522 30.3872 67.6093 28.8676 66.035C27.3871 64.4998 27.3871 62.0702 28.8676 60.535L41.9026 47.5L28.8676 34.465C27.3481 32.8908 27.391 30.3869 28.9653 28.8673C30.5005 27.3868 32.9301 27.3868 34.4653 28.8673L47.5003 41.9023L60.5353 28.8673C62.1095 27.3478 64.6134 27.3907 66.133 28.965C67.6135 30.5002 67.6135 32.9298 66.133 34.465L53.098 47.5L66.133 60.535Z"
fill="white"
/>
</svg>
</button>
</div>
<div class="item-list" id="itemList">
<!-- Item list will be populated here -->
</div>
</div>
</div>
</body>
</html>