관리-도구
편집 파일: network.blade.php
@extends('layouts.apps') @section('content') <!-- breadcrumb area start --> <section class="rs-breadcrumb-area rs-breadcrumb-one p-relative"> <div class="rs-breadcrumb-bg" style="background: linear-gradient(135deg, #ffe8ec, #e6e9ff);"></div> <div class="rs-breadcrumb-bg bg-black" data-background="assets/images/bg/breadcrumb-bg-dark-01.png"></div> <div class="container"> <div class="row justify-content-center"> <div class="col-xxl-6 col-xl-8 col-lg-8"> <div class="rs-breadcrumb-content-wrapper"> <div class="rs-breadcrumb-title-wrapper text-center"> <h1 class="rs-breadcrumb-title">My Network</h1> </div> <div class="rs-breadcrumb-menu text-center"> <nav> <ul> <li><span><a href="index.html">Home</a></span></li> <li><span>Network</span></li> </ul> </nav> </div> </div> </div> </div> </div> </section> <section class="rs-portfolio-area rs-portfolio-one primary-bg section-space"> <div class="container"> <div class="row g-4"> @foreach ($network as $networks) <!-- Team Card --> <div class="col-lg-4 col-md-6"> <a href="{{ route('network-details', ['id' => $networks->id]) }}" class="text-decoration-none"> <div class="bg-white p-4 rounded shadow-sm h-100 text-center"> <h5 class="text-dark mb-0"><b>{{ $networks->title }}</b></h5> </div> </a> </div> @endforeach </div> </div> </section> <style> .bg-white:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); transform: translateY(-5px); transition: all 0.3s ease-in-out; } </style> <!-- Modal for Enlarged Image --> <div id="imgModal" class="modal" onclick="closeModal()"> <span class="close">×</span> <img class="modal-content" id="modalImg"> </div> <style> .portfolio-img { width: 100%; height: 250px; object-fit: cover; cursor: pointer; border-radius: 8px; transition: transform 0.3s; } .portfolio-img:hover { transform: scale(1.02); } .portfolio-card h5 { font-weight: 600; color: #333; } .modal { display: none; position: fixed; z-index: 1050; padding-top: 60px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.9); } .modal-content { margin: auto; display: block; max-width: 80%; max-height: 80vh; border-radius: 10px; } .close { position: absolute; top: 40px; right: 60px; color: white; font-size: 35px; font-weight: bold; cursor: pointer; } </style> <script> function openModal(img) { const modal = document.getElementById("imgModal"); const modalImg = document.getElementById("modalImg"); modal.style.display = "block"; modalImg.src = img.src; } function closeModal() { document.getElementById("imgModal").style.display = "none"; } </script> <!-- portfolio area end --> </main> <!-- Body main wrapper end --> @endsection