Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 4.18.0-553.34.1.lve.el8.x86_64

PHP Version:

8.1.34

User:

u823300664

Directory:

/home/u823300664/domains/allspikes.in/public_html/app.allspikes.in/resources/views/livewire

Free Space:

1.89 TB

🔧 Quick Actions

✏️ Editing: badge.blade.php

@extends('layouts.app')

@section('styles')

@endsection

@section('content')

<div class="page-header">
                                <h1 class="page-title">Badges</h1>
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0)">Componets</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Badges</li>
                                    </ol>
                                </div>
                            </div>

<div class="row">
                                <div class="col-md-12 col-lg-6">
                                    <div class="card ">
                                        <div class="card-header">
                                            <h3 class="card-title">Badges</h3>
                                        </div>
                                        <div class="card-body">
                                            <p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
                                            <div class="example">
                                                <span class="badge bg-default badge-sm me-1 mb-1 mt-1">Default</span>
                                                <span class="badge bg-primary badge-sm  me-1 mb-1 mt-1">Primary</span>
                                                <span class="badge bg-success badge-sm  me-1 mb-1 mt-1">Success</span>
                                                <span class="badge bg-danger badge-sm  me-1 mb-1 mt-1">Danger</span>
                                                <span class="badge bg-info badge-sm  me-1 mb-1 mt-1">Info</span>
                                                <span class="badge bg-warning badge-sm  me-1 mb-1 mt-1">Warning</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-12 col-lg-6">
                                    <div class="card ">
                                        <div class="card-header">
                                            <h3 class="card-title">Pill Badges</h3>
                                        </div>
                                        <div class="card-body">
                                            <p class="text-muted card-sub-title">Use the <code class="highlighter-rouge">.rounded-pill</code> modifier class to make badges more rounded.</p>
                                            <div class="example">
                                                <span class="badge rounded-pill bg-default badge-sm me-1 mb-1 mt-1">Default</span>
                                                <span class="badge rounded-pill bg-primary badge-sm me-1 mb-1 mt-1">Primary</span>
                                                <span class="badge rounded-pill bg-success badge-sm me-1 mb-1 mt-1">Success</span>
                                                <span class="badge rounded-pill bg-danger badge-sm me-1 mb-1 mt-1">Danger</span>
                                                <span class="badge rounded-pill bg-info badge-sm me-1 mb-1 mt-1">Info</span>
                                                <span class="badge rounded-pill bg-warning badge-sm me-1 mb-1 mt-1">Warning</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-12 col-lg-6">
                                    <div class="card ">
                                        <div class="card-header">
                                            <h3 class="card-title">Gradient Badges</h3>
                                        </div>
                                        <div class="card-body">
                                            <p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
                                            <div class="example">
                                                <span class="badge bg-default badge-sm me-1 mb-1 mt-1">Default</span>
                                                <span class="badge bg-primary-gradient badge-sm  me-1 mb-1 mt-1">Primary</span>
                                                <span class="badge bg-success-gradient badge-sm  me-1 mb-1 mt-1">Success</span>
                                                <span class="badge bg-danger-gradient badge-sm  me-1 mb-1 mt-1">Danger</span>
                                                <span class="badge bg-info-gradient badge-sm  me-1 mb-1 mt-1">Info</span>
                                                <span class="badge bg-warning-gradient badge-sm  me-1 mb-1 mt-1">Warning</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-12 col-lg-6">
                                    <div class="card ">
                                        <div class="card-header">
                                            <h3 class="card-title">Gradient Pill Badges</h3>
                                        </div>
                                        <div class="card-body">
                                            <p class="text-muted card-sub-title">Use the <code class="highlighter-rouge">.rounded-pill</code> modifier class to make badges more rounded.</p>
                                            <div class="example">
                                                <span class="badge rounded-pill bg-default badge-sm me-1 mb-1 mt-1">Default</span>
                                                <span class="badge rounded-pill bg-primary-gradient badge-sm me-1 mb-1 mt-1">Primary</span>
                                                <span class="badge rounded-pill bg-success-gradient badge-sm me-1 mb-1 mt-1">Success</span>
                                                <span class="badge rounded-pill bg-danger-gradient badge-sm me-1 mb-1 mt-1">Danger</span>
                                                <span class="badge rounded-pill bg-info-gradient badge-sm me-1 mb-1 mt-1">Info</span>
                                                <span class="badge rounded-pill bg-warning-gradient badge-sm me-1 mb-1 mt-1">Warning</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>

<div class="row">
                                <div class="col-xl-12">
                                    <div class="card ">
                                        <div class="card-header">
                                            <h3 class="card-title">Buttons with Badges</h3>
                                        </div>
                                        <div class="card-body ">
                                            <p>Badges can be used as part of links or buttons to provide a counter.</p>
                                            <div class="example">
                                                <button type="button" class="btn btn-primary mt-1 mb-1 me-3">
                                                        <span>Notifications</span>
                                                        <span class="badge bg-white text-primary ms-2">2</span>
                                                    </button>
                                                <button type="button" class="btn btn-secondary mt-1 mb-1 me-3">
                                                        <span>Notifications</span>
                                                        <span class="badge bg-white text-secondary ms-2">2</span>
                                                    </button>
                                                <button type="button" class="btn btn-success  mt-1 mb-1 me-3">
                                                        <span>Notifications</span>
                                                        <span class="badge bg-white text-success ms-2">2</span>
                                                    </button>
                                                <button type="button" class="btn btn-info  mt-1 mb-1 me-3">
                                                        <span>Notifications</span>
                                                        <span class="badge bg-white text-info ms-2">2</span>
                                                    </button>
                                                <button type="button" class="btn btn-warning mt-1 mb-1 me-3">
                                                        <span>Notifications</span>
                                                        <span class="badge bg-white text-warning ms-2">2</span>
                                                    </button>
                                                <button type="button" class="btn btn-danger  mt-1 mb-1 me-3">
                                                        <span>Notifications</span>
                                                        <span class="badge bg-white text-danger ms-2">2</span>
                                                    </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-xl-12">
                                    <div class="card ">
                                        <div class="card-header">
                                            <h3 class="card-title">Buttons with Rounded Badges</h3>
                                        </div>
                                        <div class="card-body ">
                                            <p>Badges can be used as part of links or buttons to provide a counter.</p>
                                            <div class="example">
                                                <button type="button" class="btn btn-primary position-relative me-5 mb-2"> Projects
                                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">20+
                                                        <span class="visually-hidden">unread messages</span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-secondary position-relative me-5 mb-2"> Projects
                                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">20+
                                                        <span class="visually-hidden">unread messages</span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success position-relative me-5 mb-2"> Projects
                                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">20+
                                                        <span class="visually-hidden">unread messages</span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-info position-relative me-5 mb-2"> Projects
                                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">20+
                                                        <span class="visually-hidden">unread messages</span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-warning position-relative me-5 mb-2"> Projects
                                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">20+
                                                        <span class="visually-hidden">unread messages</span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-green position-relative me-5 mb-2"> Projects
                                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">20+
                                                        <span class="visually-hidden">unread messages</span>
                                                    </span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

</div>

<div class="row">
                                <div class="col-md-12 col-xl-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Heading Badges</h3>
                                        </div>
                                        <div class="card-body">
                                            <p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code class="highlighter-rouge">em</code> units. As of v5, badges no longer have focus or hover styles for links.</p>
                                            <div class="example">
                                                <h1>Heading 01 <span class="badge bg-default">New</span></h1>
                                                <h2>Heading 02 <span class="badge bg-default">New</span></h2>
                                                <h3>Heading 03 <span class="badge bg-default">New</span></h3>
                                                <h4>Heading 04 <span class="badge bg-default">New</span></h4>
                                                <h5>Heading 05 <span class="badge bg-default">New</span></h5>
                                                <h6>Heading 06 <span class="badge bg-default">New</span></h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-12 col-xl-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Color Heading Badges</h3>
                                        </div>
                                        <div class="card-body">
                                            <p>Badges scale to match the size of the immediate parent element by using relative font sizing and <code class="highlighter-rouge">em</code> units. As of v5, badges no longer have focus or hover styles for links.</p>
                                            <div class="example">
                                                <h1 class="text-primary">Heading 01 <span class="badge bg-primary">New</span></h1>
                                                <h2 class="text-red">Heading 02 <span class="badge bg-danger">New</span></h2>
                                                <h3 class="text-yellow">Heading 03 <span class="badge bg-warning">New</span></h3>
                                                <h4 class="text-green">Heading 04 <span class="badge bg-success">New</span></h4>
                                                <h5 class="text-info">Heading 05 <span class="badge bg-info">New</span></h5>
                                                <h6 class="text-secondary">Heading 06 <span class="badge bg-secondary">New</span></h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

@endsection

@section('scripts')

@endsection

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: badge.blade.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation