PK
<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="detail-page.aspx.cs" Inherits="Minda_Silca.detail_page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Events | Silca</title>
<style>
.img1 {
width: 250px;
height: 150px;
object-fit: cover;
margin: 10px
}
.img13 {
width: 970px;
height: 546px;
object-fit: fill;
margin: 10px;
}
.img12 {
width: 1200px;
height: 400px;
object-fit: fill;
margin: 10px
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 50px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<%--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>--%>
<style>
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.close:hover,
.close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
opacity: 0.5;
filter: alpha(opacity=50);
}
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
.modal-open {
overflow: hidden;
}
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
-o-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
.modal-content {
position: relative;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
background-clip: padding-box;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
filter: alpha(opacity=0);
}
.modal-backdrop.in {
opacity: 0.5;
filter: alpha(opacity=50);
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
min-height: 16.42857143px;
}
.modal-header .close {
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.42857143;
}
.modal-body {
position: relative;
padding: 15px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
.clickable {
cursor:pointer;
}
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.modal-sm {
width: 300px;
}
}
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}
.clearfix:before,
.clearfix:after,
.modal-footer:before,
.modal-footer:after {
content: " ";
display: table;
}
.clearfix:after,
.modal-footer:after {
clear: both;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.hidden {
display: none !important;
}
.affix {
position: fixed;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="page-section">
<section id="pageWrp" style="margin-top: 0px!important">
<div class="container-fluid">
<div class="row">
<div class="swiper-container pages">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="col-xs-12 col-sm-12 col-md-8 col-md-push-4">
<div class="slide-image">
<img class=" " width="1040" height="260" src="images/pic-01-1-about-us-en.jpg" alt="Events" title="Events" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-md-pull-8">
<div class="slide-text">
<span>Events</span>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="col-xs-12 col-sm-12 col-md-8 col-md-push-4">
<div class="slide-image">
<img width="1040" height="260" src="images/pic-01-1-about-us-2-en.jpg" alt="Events" title="Events" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-md-pull-8">
<div class="slide-text">
<span>Events</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-4">
<div class="swiper-button-next"><i class="fas fa-angle-right"></i></div>
<div class="swiper-button-prev"><i class="fas fa-angle-left"></i></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
<div class="content-main">
<div class="row">
<nav class="breadcrumb" role="navigation">
<ol>
<li>
<a href="index.aspx" title="Home">
<span itemprop="name">Home</span>
</a>
</li>
<li>
<a href="news-index.aspx" title="News">
<span itemprop="name">News</span>
</a>
</li>
<li>
<a href="Events.aspx" title="Events" class=""current-breadcrumb-item"">
<span itemprop="name">Events</span>
</a>
</li>
</ol>
</nav>
</div>
<div class="row">
<div class="list-view">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="article-content">
<h1 class="page-title"><%# Eval("name") %></h1>
</div>
<div class="featured-image" style="float: right">
<figure>
<img class=" " width="380" height="235" src="../../images/page-banner/<%# Eval("file_name") %>" style="object-fit: contain"/>
</figure>
</div>
<p>
Date: <%# Eval("sdate", "{0:dd/MM/yyyy}") %> (<%# Eval("stime") %>) - <%# Eval("edate", "{0:dd/MM/yyyy}") %> (<%# Eval("etime") %>)
<br />
Market sector: <%# Eval("location") %>
<br />
Location: <%# Eval("location") %>
<br />
Venue: <%# Eval("venue") %>
<br />
Booth: <%# Eval("booth") %>
<br />
<a href="<%# Eval("link") %>" target="blank" class="btn-sm btn-primary">View Event</a>
<br />
<asp:HyperLink NavigateUrl="#" runat="server" ID="addcalen" class="button-red" title="Add to calendar" Visible='<%#GetVisible(Eval("edate").ToString(), Eval("sdate").ToString())%>'>Add to calendar</asp:HyperLink>
</p>
</ItemTemplate>
</asp:Repeater>
<asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
<div class="col-md-4">
<image src="images/page-banner/<%# Eval("file_name") %>" data-target="#Modal<%# Eval("id") %>" data-toggle="modal" class="img1"/></a>
<div class="modal" id="Modal<%# Eval("id") %>" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin: auto;width: 105%;padding: 10px;top: -43px;">
<div class="modal-header">
<h5 class="modal-title"><%# Eval("title") %></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="images/page-banner/<%# Eval("file_name") %>" style="width: 100%; height: 400px; max-width: 1000%; object-fit: cover;"/>
</div>
</div>
</div>
</div>
<%--<img id="myImg" class="img1" src="images/page-banner/<%# Eval("file_name") %>" onerror='this.style.display = "none"'>--%>
</div>
</ItemTemplate>
</asp:Repeater>
<%--<div id="myModal" class="modal" style="z-index:9999;width:100%">
<p class="close" id="cls" onclick="myFunction()">×</p>
<img class="modal-content" id="img01" />
</div>--%>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-3">
<aside class="sidebar">
<div class="bg-red" style="padding: 20px">
<a class="sidebar-widget-link" title="Contact">
<div class="sidebar-widget-linkteaser">
<h4 class="widget-title">Contact</h4>
<p>
<asp:Repeater ID="rpte1" runat="server">
<ItemTemplate>
<%# Eval("addr")%><br />
<%# Eval("tel")%><br />
<%# Eval("fax")%><br />
<br />
</ItemTemplate>
</asp:Repeater>
<asp:Repeater ID="rpte2" runat="server">
<ItemTemplate>
<%# Eval("title")%>
<br />
<%# Eval("cont")%>
</ItemTemplate>
</asp:Repeater>
</p>
<a href="mailto:info@mindasilca.in" class="sidebar-widget-link" title="Mail to Minda Silca">
<div class="sidebar-widget-linkteaser">
<i class="fas fa-comment widget-icon"></i>
</div>
</a>
</div>
</a>
</div>
<div class="bg-grey">
<div class="sidebar-navigation">
<h4 class="widget-title">News</h4>
<nav>
<ul class="menu">
<li>
<a href="new-product.aspx" title="New Products">New Products</a>
</li>
<li class="current-menu-item">
<a href="events.aspx" title="Events">Events</a>
</li>
<li>
<a href="getreadytobeback.aspx" title="#getreadyforthefuture">#getreadyforthefuture</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="bg-blue">
<div style="margin: 10px">
<h4 class="widget-title">Minda Silca App</h4>
<div class="meta">
<div class="slider-text-teaser">
<div class="swiper-container swiper-container-home-teaser">
<div class="swiper-wrapper">
<asp:Repeater ID="rpte_swip" runat="server">
<ItemTemplate>
<div class="swiper-slide">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Convert.ToString(Eval("lnki")) == "Chrome" ? Eval("play_link") : Eval("app_link") %>'>
<asp:Image ID="imgsweep" runat="server" ImageUrl='<%# "ImageHandler1.ashx?db=minda_apps&Id="+ Eval("id") %>' Width="520" Height="390" />
</asp:HyperLink>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div class="swiper-button-next"><i class="fas fa-angle-right"></i></div>
<div class="swiper-button-prev"><i class="fas fa-angle-left"></i></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
}
var img = document.getElementById("myImg2");
var modalImg = document.getElementById("img01");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
}
var img = document.getElementById("myImg3");
var modalImg = document.getElementById("img01");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
}
var img = document.getElementById("myImg4");
var modalImg = document.getElementById("img01");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
}
var img = document.getElementById("myImg5");
var modalImg = document.getElementById("img01");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
}
// Get the <span> element that closes the modal
var spane = document.getElementById("img01");
// When the user clicks on <span> (x), close the modal
spane.onclick = function () {
modal.style.display = "none";
console.log("ok");
}
function myFunction() {
document.getElementById("myModal").style.display = "none";
}
</script>
</asp:Content>
PK 99