Initial commit: open-source release of atakanozban.com
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,180 @@
|
||||
@model IEnumerable<atakanozbancom.Models.classes.MyProjectsVM>
|
||||
|
||||
<p class="text-center">
|
||||
@(atakanozbancom.App_GlobalResources.Resource.MyProjectsP1)
|
||||
<a href="https://git.atakanozban.com/gitea" style="text-decoration:none;color:darkgrey;" target="_blank">
|
||||
@atakanozbancom.App_GlobalResources.Resource.Gitea
|
||||
</a>
|
||||
@atakanozbancom.App_GlobalResources.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;
|
||||
}
|
||||
|
||||
.carousel-indicators {
|
||||
z-index: 6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@foreach (var p in Model)
|
||||
{
|
||||
var media = p.medias ?? new List<atakanozbancom.Models.classes.ProjectMediaVM>();
|
||||
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">
|
||||
|
||||
@if (hasMultiple)
|
||||
{
|
||||
<div class="carousel-indicators">
|
||||
@for (int i = 0; i < media.Count; i++)
|
||||
{
|
||||
<button type="button"
|
||||
data-bs-target="#@carouselId"
|
||||
data-bs-slide-to="@i"
|
||||
class="@(i == 0 ? "active" : "")"
|
||||
aria-current="@(i == 0 ? "true" : null)"
|
||||
aria-label="Slide @(i + 1)"></button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<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="false">
|
||||
|
||||
@if (m.type == "iframe")
|
||||
{
|
||||
<div class="carousel-media-iframe">
|
||||
<iframe src="@m.url"
|
||||
loading="lazy"
|
||||
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 if (m.type == "image")
|
||||
{
|
||||
<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"></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"></span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@*else if (m.type == "video")
|
||||
{
|
||||
<video class="d-block w-100" controls preload="metadata">
|
||||
<source src="@m.url" type="video/mp4" />
|
||||
</video>
|
||||
}*@
|
||||
@*else if (m.type == "document")
|
||||
{
|
||||
<div class="ratio ratio-4x3">
|
||||
<iframe src="@m.url"></iframe>
|
||||
</div>
|
||||
<div class="text-center mt-2">
|
||||
<a href="@m.url" target="_blank">Open document</a>
|
||||
</div>
|
||||
}*@
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<h3 class="mt-3 text-center">@p.title</h3>
|
||||
<p class="lead mb-5 text-center">@Html.Raw(atakanozbancom.Models.classes.DescriptionFormatter.ToSafeHtml(p.description))</p>
|
||||
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user