Spaces:
Sleeping
Sleeping
| logo = """ | |
| <style> | |
| div[data-testid="stSidebarHeader"] > img, div[data-testid="collapsedControl"] > img { | |
| height: 8rem; /* Increased height */ | |
| width: 16rem; /* Adjust width proportionally */ | |
| } | |
| div[data-testid="stSidebarHeader"], div[data-testid="stSidebarHeader"] > *, | |
| div[data-testid="collapsedControl"], div[data-testid="collapsedControl"] > * { | |
| display: flex; | |
| align-items: center; | |
| } | |
| </style> | |
| """ | |
| BigQuery_upload_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 40px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">BigQuery upload</h1> | |
| """ | |
| payment_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 40px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">Payment working</h1> | |
| """ | |
| fynder_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 50px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">Fynder</h1> | |
| """ | |
| sq_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 50px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">Scheduled Query</h1> | |
| """ | |
| Appended_data_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 40px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">Appended data</h1> | |
| """ | |
| Merger_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 40px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">Merger</h1> | |
| """ | |
| TDS_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 40px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">TDS validation</h1> | |
| """ | |
| table_id_placeholder = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Enter table id</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| payment_working_date_placeholder = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Select the date</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| sq_placeholder = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Select the Scheduled Query</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| uploader = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Upload the CSV file</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| button_styles = """ | |
| <style> | |
| div.stButton > button { | |
| color: #ffffff; /* Text color */ | |
| font-size: 30px; | |
| background-image: linear-gradient(to right, #800000, #ff0000); /* Maroon to light red gradient */ | |
| border: none; | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| border-radius: 15px; | |
| display: inline-block; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 8px 15px rgba(0, 0, 0, 0.1); /* Box shadow */ | |
| transition: all 0.3s ease; /* Smooth transition on hover */ | |
| } | |
| div.stButton > button:hover { | |
| background-color: #00ff00; /* Hover background color */ | |
| color: #ff0000; /* Hover text color */ | |
| box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2), 0 12px 20px rgba(0, 0, 0, 0.2); /* Box shadow on hover */ | |
| } | |
| </style> | |
| """ | |
| button_styles_fynder = """ | |
| <style> | |
| div.stButton > button { | |
| color: #ffffff; /* Text color */ | |
| font-size: 30px; /* Font size */ | |
| background-image: linear-gradient(to right, #800000, #ff0000); /* Maroon to light red gradient */ | |
| border: none; | |
| padding: 20px 20px; /* Increased vertical padding, horizontal padding stays the same */ | |
| cursor: pointer; | |
| border-radius: 15px; | |
| display: inline-block; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 8px 15px rgba(0, 0, 0, 0.1); /* Box shadow */ | |
| transition: all 0.3s ease; /* Smooth transition on hover */ | |
| } | |
| div.stButton > button:hover { | |
| background-color: #00ff00; /* Hover background color */ | |
| color: #ff0000; /* Hover text color */ | |
| box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2), 0 12px 20px rgba(0, 0, 0, 0.2); /* Box shadow on hover */ | |
| } | |
| </style> | |
| """ | |
| tooltip_message_bq = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This UI allows you to upload CSV or Excel files and export their contents to a specified BigQuery table. | |
| </div> | |
| """ | |
| tooltip_message_sq = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This UI allows you to append/overwrite data from a one table to another table in BigQuery. | |
| </div> | |
| """ | |
| tooltip_message_pw = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This UI allows you to generate the payment working file. | |
| </div> | |
| """ | |
| tooltip_message_fynd = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This UI allows you to download month-wise Invoices. | |
| </div> | |
| """ | |
| tooltip_message_slack = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This UI allows you to send Slack messages/emails to the selected channel members. | |
| </div> | |
| """ | |
| tooltip_message_tds = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This page will help you to submit the TDS workings for TDS deductions made by your company for Shopsense Retail Technologies Limited (Fynd). Further this tool will reconcile your data with 26AS and will share you the report for the same. | |
| </div> | |
| """ | |
| tooltip_message_recon = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This UI allows you to check duplicates in Recon pipeline. | |
| </div> | |
| """ | |
| invoice_splitter_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 40px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">Invoice splitter</h1> | |
| """ | |
| tooltip_message_splitter = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This UI allows you to split CSV/Excel files as per the Invoice number written in the data. | |
| </div> | |
| """ | |
| tooltip_message_merger = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This UI allows you to merge multiple CSV/Excel files. | |
| </div> | |
| """ | |
| tooltip_message_payment = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This UI allows you to generate payment file as per the expected payout date. | |
| </div> | |
| """ | |
| download_button_styles = """ | |
| <style> | |
| div.stDownloadButton > button { | |
| color: #ffffff; /* Text color */ | |
| font-size: 30px; | |
| background-image: linear-gradient(to right, #800000, #ff0000); /* Maroon to light red gradient */ | |
| border: none; | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| border-radius: 15px; | |
| display: inline-block; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 8px 15px rgba(0, 0, 0, 0.1); /* Box shadow */ | |
| transition: all 0.3s ease; /* Smooth transition on hover */ | |
| } | |
| div.stDownloadButton > button:hover { | |
| background-color: #00ff00; /* Hover background color */ | |
| color: #ff0000; /* Hover text color */ | |
| box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2), 0 12px 20px rgba(0, 0, 0, 0.2); /* Box shadow on hover */ | |
| } | |
| </style> | |
| """ | |
| Slack_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 40px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">Slack Integration</h1> | |
| """ | |
| slack_message_title = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Write a Slack message</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| upload_doc_title = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Upload documents</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| channel_member_title = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Select channels/members</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| process_date_title = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| "> Select the payment date</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| process_file_title = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Processing the Payment File</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| email_subject = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Enter the subject(optional)</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| email_body = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Enter the body (optional)</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| email_title = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Enter the email address(es)</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| tooltip_message_gmail = """ | |
| <div style=" | |
| font-size: 16px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| In case of multiple email addresses, please write them comma-separated. | |
| E.g. abc@gmail.com, def@gmail.com | |
| </div> | |
| """ | |
| spinner_css = """ | |
| <style> | |
| /* Apply gradient to the spinner's text */ | |
| .stSpinner .stSpin div { | |
| color: transparent !important; /* Make text transparent */ | |
| -webkit-background-clip: text !important; /* Clip background to the text */ | |
| background: linear-gradient(to right, #800000, #ff0000) !important; /* Gradient for text */ | |
| font-weight: bold !important; /* Bold text */ | |
| } | |
| /* Apply gradient to the spinner circle */ | |
| .stSpinner .stSpin::before { | |
| border: 6px solid transparent !important; | |
| border-top: 6px solid transparent !important; | |
| border-left: 6px solid transparent !important; | |
| border-bottom: 6px solid transparent !important; | |
| border-radius: 50% !important; | |
| border-top: 6px solid linear-gradient(to right, #800000, #ff0000) !important; /* Gradient for spinner circle */ | |
| animation: spin 1s linear infinite !important; | |
| } | |
| /* Keyframe animation for spinner rotation */ | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| """ | |
| recon_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 40px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">Recon validation</h1> | |
| """ | |
| duplicate_count = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| .spacing { | |
| margin: 20px 0; /* Adjust the value as needed */ | |
| } | |
| .result-box { | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| background: #f9f9f9; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| font-size: 16px; | |
| } | |
| .result-title { | |
| font-weight: bold; | |
| color: #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Duplicate Counts for Queries:</h3> | |
| </div> | |
| <div class="spacing"></div> <!-- Adds spacing between the heading and the content --> | |
| </body> | |
| </html> | |
| """ | |
| template_file_title = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Download the template file</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| upload_tds_file = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Upload the TDS file</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| progress_bar_style = """ | |
| <html> | |
| <style> | |
| /* Gradient progress bar */ | |
| div[data-testid="stProgress"] div[role="progressbar"] { | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9) !important; | |
| } | |
| /* Gradient text for logs */ | |
| .gradient-text { | |
| background: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-weight: bold; | |
| font-size: 16px; | |
| } | |
| /* Blinking cursor effect */ | |
| @keyframes blink { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| 100% { opacity: 1; } | |
| } | |
| .blinking-cursor { | |
| animation: blink 1s infinite; | |
| font-weight: bold; | |
| font-size: 18px; | |
| color: #ff0000; | |
| } | |
| </style> | |
| <html> | |
| """ | |
| update_sett_placeholder = """ | |
| <style> | |
| div[role="radiogroup"] { | |
| background-color: #f5f5f5; | |
| padding: 15px; | |
| border-radius: 12px; | |
| box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| div[role="radiogroup"] label { | |
| font-size: 16px; | |
| font-weight: bold; | |
| color: #333; | |
| padding: 5px; | |
| border-radius: 8px; | |
| transition: all 0.3s ease-in-out; | |
| } | |
| div[role="radiogroup"] label:hover { | |
| background-color: #ff4b4b; | |
| color: white; | |
| padding: 6px; | |
| } | |
| /* Targeting the label that contains "Update 09" */ | |
| div[role="radiogroup"] label:nth-of-type(1) { | |
| color: maroon !important; | |
| } | |
| </style> | |
| """ | |
| update_sett_title = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Select the destination table</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| conso_date_title = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Select the date for conso file</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| Extracter_title = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 40px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h1 class="fixed-title">PDF Extractor</h1> | |
| """ | |
| tooltip_message_extracter = """ | |
| <div style=" | |
| font-size: 20px; | |
| color: #716d6d; | |
| margin-top: -10px; | |
| margin-bottom: 20px;"> | |
| This UI is an OCR tool that allows you to extract data from a PDF File. | |
| </div> | |
| """ | |
| upload_extracter_file = """ | |
| <html> | |
| <head> | |
| <style> | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border-radius: 12px; | |
| background: linear-gradient(to bottom, #f8f9fa, #e0e0e0); | |
| box-shadow: | |
| 0 6px 12px rgba(0, 0, 0, 0.3), | |
| 0 8px 16px rgba(0, 0, 0, 0.2), | |
| inset 0 -2px 4px rgba(255, 255, 255, 0.6); | |
| text-align: center; | |
| position: relative; | |
| transform: translateY(4px); | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .button:hover { | |
| box-shadow: | |
| 0 8px 16px rgba(0, 0, 0, 0.3), | |
| 0 12px 24px rgba(0, 0, 0, 0.2); | |
| transform: translateY(2px); | |
| } | |
| .button:active { | |
| box-shadow: | |
| 0 4px 8px rgba(0, 0, 0, 0.3), | |
| 0 6px 12px rgba(0, 0, 0, 0.2); | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="button"> | |
| <h3 style=" | |
| font-size: 20px; | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #800000, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| margin: 0; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); | |
| ">Upload the PDF file</h3> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| extractor_placeholder = """ | |
| <style> | |
| .fixed-title { | |
| font-size: 14px; /* Further reduced */ | |
| color: #ffffff; | |
| background-image: linear-gradient(to right, #ff0000, #ffdab9); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| text-fill-color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| <h3 class="fixed-title">Extracted data:</h3> | |
| """ |