<%{
item_id = input.Item_ID;
input.main_sc_id = input.main_sc_id;
item_fetch = Scenario[ID == input.main_sc_id];
dealid = input.Deal_ID;
itmrfq = Scenario_Logistic_Quotation[Deal_ID1.Deal_ID1 == dealid];
itmrfq1 = Scenario_Item_Quotations[Deal_ID1.Deal_ID1 == dealid];
dealname = input.Deal_name;
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reports and Form Page</title>
<style>
/* Header Styles */
header {
background-color: #004b87;
color: white;
padding: 15px;
text-align: center;
position: relative; /* Allows positioning of button inside the header */
}
header h1 {
margin: 0;
font-size: 28px;
}
header p {
margin: 5px 0 0;
font-size: 16px;
}
/* Update Margin Button */
.update {
position: absolute;
top: 10px; /* Distance from top */
right: 20px; /* Distance from the right */
z-index: 10; /* Ensure it appears above other content */
}
.update .create-btn {
display: inline-block;
background-color: #28a745; /* Green background */
color: white;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 5px;
text-decoration: none; /* Remove underline */
transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
cursor: pointer;
}
.update .create-btn:hover {
background-color: #218838; /* Darker green on hover */
transform: scale(1.05); /* Slightly enlarge on hover */
}
.update .create-btn.clicked {
background-color: #1e7e34; /* Dark green when clicked */
transform: scale(0.98); /* Slightly decrease size when clicked */
}
/* Full height for body and html to avoid scrolling */
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #f4f7fc;
}
/* Main container fills entire viewport */
.report-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 100%;
height: 50%;
box-sizing: border-box;
}
/* Row for Reports */
.report-row {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
height: 20%;
overflow: hidden;
}
/* Report Box styling */
.report-box {
flex: 1;
padding: 8px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 10%;
box-sizing: border-box;
}
.report-box h3 {
text-align: center;
font-size: 16px;
color: #333;
margin-bottom: 8px;
}
.report-box .loading-text {
text-align: center;
font-size: 14px;
color: #888;
}
/* Form Box Styling */
.form-box {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
height: 20%;
margin-top: 10px;
box-sizing: border-box;
}
.form-box h3 {
text-align: center;
font-size: 16px;
color: #333;
margin-bottom: 8px;
}
.form-box .loading-text {
text-align: center;
font-size: 14px;
color: #888;
}
.view-outer-wrapper {
overflow-x: visible;
g: 0;
background-color: #fff;
}
.zc-pb-embedlive-container iframe {
display: inline-block;
vertical-align: top;
height: 480px;
}
/* Responsive Styles for Smaller Screens */
@media (max-width: 768px) {
.report-container {
padding: 5px;
}
.report-row {
flex-direction: column;
height: auto;
}
.report-box {
margin-bottom: 10px;
min-height: 20px;
}
.form-box {
width: 90%;
height: auto;
margin-top: 15px;
}
.popup {
width: 300px;
height: 150px;
background-color: lightblue;
position: relative;
animation: fadeOut 5s forwards; /* Animation lasts 5 seconds */
}
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Scenario Selection</h1>
<p>Deal ID: <span id="dealId"><%=dealid%></span></p>
<!-- Button to Open Popup -->
<a href="#Form:Margin_Details?zc_LoadIn=dialog"
style="display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
text-align: center;
position: absolute;
top: 10px;
right: 20px;
font-size: 14px;
transition: background-color 0.3s, transform 0.2s;"
class="update-btn">
Update Quality Price
</a>
<div class="report-container">
<!-- Row for Reports -->
<div class="report-row">
<div class="report-box">
<div elName="zc-component" viewLinkName="Scenario_Item_Quotations1" params="zc_Header=true&zc_Footer=false&zc_SecHeader=false&Scenario_ID=<%=item_fetch.Scenario_ID%>&Deal_ID1=<%=dealid%>&zc_DuplRec=false&zc_EditRec=false&zc_DelRec=false&zc_ColMenu=false" style="height:300px;overflow:hidden;">
<p class="loading-text">Loading View...</p>
</div>
</div>
<div class="report-box">
<%
if(item_fetch.Scenario_ID != null && itmrfq1.Scenario_Status = "Scenario Selected")
{
%>
<div elName="zc-component" viewLinkName="Scenario_Logistic_Quotations" params="zc_Header=true&zc_Footer=false&zc_SecHeader=false&Scenario_ID=<%=item_fetch.Scenario_ID%>&ITEM_RFQ_ID=<%=itmrfq.ITEM_RFQ_ID%>&zc_DuplRec=false&zc_EditRec=false&zc_DelRec=false&zc_ColMenu=false" style="height:300px;>
<p class="loading-text">Loading View...</p>
<%
}
%>
</div>
</div>
<div class="report-box">
<div elName="zc-component" viewLinkName="Scenario_Lab_Quotations" params="zc_Header=true&zc_Footer=false&zc_SecHeader=false&Scenario_ID=<%=item_fetch.Scenario_ID%>&Deal_ID1=<%=dealid%>&zc_DuplRec=false&zc_EditRec=false&zc_DelRec=false&zc_ColMenu=false&zc_EditBulkRec=false" style="height:300px;>
<p class="loading-text">Loading View...</p>
</div>
</div>
</div>
<div class="form-box">
<!-- <h3>Scenario Form</h3>-->
<iframe src="https://creatorapp.zoho.in/dev07uat21/organic/Scenario/record-edit/Scenario_S/<%=input.main_sc_id%>?zc_Header=false&zc_Footer=false&zc_BtnBgClr=%23ADD8E6&zc_BtnMovrBgClr=%23008000" width="100%" ></iframe>
</div>
</div>
</body>
</html>
<%
}%>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter