161 lines
5.7 KiB
Plaintext
161 lines
5.7 KiB
Plaintext
@using Resources
|
|
@model IEnumerable<atakanozbancom.Models.classes.MyProjectVM>
|
|
|
|
<p class="text-center">
|
|
@(Resource.MyProjectsP1)
|
|
<a href="https://link.atakanozban.com/github" style="text-decoration:none;color:darkgrey;" target="_blank">
|
|
@Resource.GitHub
|
|
</a>
|
|
@Resource.MyProjectsP1_1
|
|
</p>
|
|
|
|
<style>
|
|
.carousel-media-iframe {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
|
|
.carousel-media-iframe iframe {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
.carousel-media-image {
|
|
width: 100%;
|
|
position: relative;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.carousel-media-image img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.media-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 4rem;
|
|
height: 4rem;
|
|
opacity: 0.9;
|
|
bottom: auto;
|
|
z-index: 5;
|
|
}
|
|
|
|
.carousel-control-prev {
|
|
left: 1rem;
|
|
}
|
|
|
|
.carousel-control-next {
|
|
right: 1rem;
|
|
}
|
|
</style>
|
|
|
|
@foreach (var p in Model)
|
|
{
|
|
var media = new List<(string Type, string Url)>();
|
|
|
|
if (!string.IsNullOrWhiteSpace(p.iframe))
|
|
{
|
|
media.Add(("iframe", p.iframe));
|
|
}
|
|
|
|
if (!string.IsNullOrWhiteSpace(p.image))
|
|
{
|
|
media.Add(("image", p.image));
|
|
}
|
|
|
|
var carouselId = $"projCarousel_{p.id}";
|
|
var hasMultiple = media.Count > 1;
|
|
|
|
<div class="container py-4">
|
|
|
|
@if (media.Count > 0)
|
|
{
|
|
<div id="@carouselId" class="carousel slide" data-bs-ride="carousel">
|
|
<div class="carousel-inner">
|
|
|
|
@for (int i = 0; i < media.Count; i++)
|
|
{
|
|
var m = media[i];
|
|
|
|
<div class="carousel-item @(i == 0 ? "active" : "")"
|
|
data-bs-interval="@(m.Type == "iframe" ? "false" : "5000")">
|
|
|
|
@if (m.Type == "iframe")
|
|
{
|
|
<div class="carousel-media-iframe">
|
|
<iframe src="@m.Url"
|
|
loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
|
|
@if (hasMultiple)
|
|
{
|
|
<button class="carousel-control-prev media-arrow"
|
|
type="button"
|
|
data-bs-target="#@carouselId"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
|
|
<button class="carousel-control-next media-arrow"
|
|
type="button"
|
|
data-bs-target="#@carouselId"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="carousel-media-image">
|
|
<img src="@m.Url" alt="@p.title" />
|
|
|
|
@if (hasMultiple)
|
|
{
|
|
<button class="carousel-control-prev media-arrow"
|
|
type="button"
|
|
data-bs-target="#@carouselId"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
|
|
<button class="carousel-control-next media-arrow"
|
|
type="button"
|
|
data-bs-target="#@carouselId"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
</div>
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<h3 class="mt-3 text-center">@p.title</h3>
|
|
<p class="lead mb-5 text-center">@Html.Raw(p.description)</p>
|
|
|
|
</div>
|
|
}
|