<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Pin Board')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Apps', 'title' => 'Pin Board')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Apps', 'title' => 'Pin Board')) ?>

                    <div class="container-fluid">
<div class="card bg-transparent! shadow-none">
<div class="card-body">
<div class="p-7.5">
<div class="flex flex-wrap justify-center gap-5">
<div class="hs-removing:hidden bg-primary/10 relative size-52.5 p-3.5 shadow-[4px_3px_7px_rgba(49,58,70,0.1)] transition-transform duration-300 hover:scale-110" id="pin-1">
<p class="mb-4 text-end text-2xs">14:22:07 08-04-2025</p>
<h4 class="text-md mb-2">Client feedback summary</h4>
<p class="mb-4">Positive response on UI, requested dark mode toggle and faster load times.</p>
<a class="absolute end-3 bottom-3" data-hs-remove-element="#pin-1" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
<div class="hs-removing:hidden bg-danger/10 relative size-52.5 p-3.5 shadow-[4px_3px_7px_rgba(49,58,70,0.1)] transition-transform duration-300 hover:scale-110" id="pin-2">
<p class="mb-4 text-end text-2xs">17:09:33 05-04-2025</p>
<h4 class="text-md mb-2">Blog content ideas</h4>
<p class="mb-4">Write about upcoming trends in web design and practical CSS tips.</p>
<a class="absolute end-3 bottom-3" data-hs-remove-element="#pin-2" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
<div class="hs-removing:hidden bg-warning/10 relative size-52.5 p-3.5 shadow-[4px_3px_7px_rgba(49,58,70,0.1)] transition-transform duration-300 hover:scale-110" id="pin-3">
<p class="mb-4 text-end text-2xs">10:55:10 02-04-2025</p>
<h4 class="text-md mb-2">Code optimization checklist</h4>
<p class="mb-4">Refactor JS functions, minimize DOM manipulation, and lazy load assets.</p>
<a class="absolute end-3 bottom-3" data-hs-remove-element="#pin-3" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
<div class="hs-removing:hidden bg-info/10 relative size-52.5 p-3.5 shadow-[4px_3px_7px_rgba(49,58,70,0.1)] transition-transform duration-300 hover:scale-110" id="pin-4">
<p class="mb-4 text-end text-2xs">09:30:44 30-03-2025</p>
<h4 class="text-md mb-2">Newsletter draft</h4>
<p class="mb-4">Focus on April's product update, new feature highlights, and tutorials.</p>
<a class="absolute end-3 bottom-3" data-hs-remove-element="#pin-4" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
<div class="hs-removing:hidden bg-dark/10 relative size-52.5 p-3.5 shadow-[4px_3px_7px_rgba(49,58,70,0.1)] transition-transform duration-300 hover:scale-110" id="pin-5">
<p class="mb-4 text-end text-2xs">16:47:25 28-03-2025</p>
<h4 class="text-md mb-2">Bug report log</h4>
<p class="mb-4">Users reporting login timeout issues on mobile—investigate session handling.</p>
<a class="absolute end-3 bottom-3" data-hs-remove-element="#pin-5" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
<div class="hs-removing:hidden bg-light/10 relative size-52.5 p-3.5 shadow-[4px_3px_7px_rgba(49,58,70,0.1)] transition-transform duration-300 hover:scale-110" id="pin-6">
<p class="mb-4 text-end text-2xs">11:18:03 26-03-2025</p>
<h4 class="text-md mb-2">Design review notes</h4>
<p class="mb-4">Refine hero section spacing and use softer gradients for cards background.</p>
<a class="absolute end-3 bottom-3" data-hs-remove-element="#pin-6" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
<div class="hs-removing:hidden bg-secondary/10 relative size-52.5 p-3.5 shadow-[4px_3px_7px_rgba(49,58,70,0.1)] transition-transform duration-300 hover:scale-110" id="pin-7">
<p class="mb-4 text-end text-2xs">11:18:03 26-03-2025</p>
<h4 class="text-md mb-2">Design review notes</h4>
<p class="mb-4">Refine hero section spacing and use softer gradients for cards background.</p>
<a class="absolute end-3 bottom-3" data-hs-remove-element="#pin-7" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
<div class="hs-removing:hidden bg-success/10 relative size-52.5 p-3.5 shadow-[4px_3px_7px_rgba(49,58,70,0.1)] transition-transform duration-300 hover:scale-110" id="pin-8">
<p class="mb-4 text-end text-2xs">08:45:12 10-04-2025</p>
<h4 class="text-md mb-2">Team meeting recap</h4>
<p class="mb-4">Discussed key milestones, delegated tasks, and set deadlines for the next sprint.</p>
<a class="absolute end-3 bottom-3" data-hs-remove-element="#pin-8" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
<div class="flex size-52.5 items-center justify-center p-3.5 transition-transform duration-300" id="pin-9">
<a aria-controls="addNoteModal" aria-expanded="false" aria-haspopup="dialog" class="btn btn-icon bg-primary btn-sm relative size-9.25 text-white transition-transform duration-300 hover:scale-110" data-hs-overlay="#addNoteModal" href="#">
<i class="iconify tabler--plus text-base"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>

                <div aria-labelledby="addNoteModalLabel" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="addNoteModal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 m-3 flex min-h-[calc(100%-56px)] scale-95 items-center opacity-0 transition-all duration-200 ease-in-out md:mx-auto md:w-full md:max-w-lg">
<div class="card pointer-events-auto flex w-full flex-col">
<div class="card-header">
<h3 class="text-sm font-bold" id="addNoteModalLabel">Add New Note</h3>
<button aria-label="Close" data-hs-overlay="#addNoteModal" type="button">
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="card-body overflow-y-auto">
<div class="mb-5">
<label class="form-label">Title</label>
<input class="form-input" placeholder="Enter note title" type="text"/>
</div>
<div class="mb-5">
<label class="form-label">Note Content</label>
<textarea class="form-textarea" placeholder="Write your note..." rows="3" type="text"></textarea>
</div>
<div class="mb-5">
<label class="form-label">Color Theme</label>
<select class="form-select">
<option selected="" value="bg-success-subtle">Green (Success)</option>
<option value="bg-primary-subtle">Blue (Primary)</option>
<option value="bg-warning-subtle">Yellow (Warning)</option>
<option value="bg-danger-subtle">Red (Danger)</option>
<option value="bg-light">Light</option>
</select>
</div>
</div>
<div class="border-default-300 flex items-center justify-end gap-x-2 border-t p-5">
<button class="btn bg-secondary text-white hover:bg-secondary-hover" data-hs-overlay="#addNoteModal" type="button">Cancel</button>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="button">Add Note</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>
    </body>
</html>