個頁面css JS route

donate web route

// Donate Front Controller
Route::prefix('/donate')->group(function (){

    // 顯示首頁
    Route::get('/','DonateFrontController@index');
    // 顯示捐款頁
    Route::get('/cash','DonateFrontController@cash');
    // 傳送捐款資料   
    Route::post('/cash_save', 'DonateFrontController@cashSave');
    
});

donate controller

 
    public function index()
    {

        return view('front.donate.donate_index');

    }
    
    public function cash()
    {

        return view('front.donate.donate_info_01');

    }
    
    public function cashSave(Request $request)
    {
        $user = Auth::user();
        $order_no= 'DP' . time() . rand(1, 9999);
        $user_id = $user->id;

        dd($order_no,$user_id,$request->all());

    }

    

donate_index

@extends('layouts.front_template')
@section('title')
捐款
@endsection

@section('css')
    <link rel="stylesheet" href="{{ asset('https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css')}}"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/reset.css')}}">
    <link rel="stylesheet" href="{{ asset('css/pet-vogue.min.css')}}">
@endsection



@section('main')
<main>

    <section class="donate-placard">
        <div class="container">
            <div class="donate-placard-content">
                <h2 class="section-title">愛心捐款</h2>
                <p>「毛孩日記」為幫助到無法為自己權益發聲的貓狗動物，我們以感恩的心珍惜您的每一分捐款，並將妥善運用在:
                    <span>1.傷病及受虐貓狗的救援、醫療、節育、安置、社會化、認領養等。</span>
                    <span>2.傷病及受虐貓狗的營救器材購買及維護。</span>
                    <span>3.資助全台超過130處弱勢私人流浪貓狗收容中心，支援其飼料費與協助環境修繕優化。</span>
                    <span>4.推廣生命教育，透過各類媒體管道提倡尊重流浪犬貓相關尊重生命觀念。</span>
                </p>
            </div>
        </div>
    </section>


    <section class="section-sm section-lg donate-support">
        <div class="container">
            <div class="donate-support-content">
                <div class="donate-support-pic">
                    <img src="https://picsum.photos/700/500/?random=1">
                    <img src="https://picsum.photos/700/400/?random=1">
                </div>
                <div class="donnate-text text">
                    <h2 class="section-title">您的捐款，有無窮的希望!</h2>
                    <p>
                        「毛孩日記」負責把關，確保您的每一份愛心都不會浪費，我們會盡力用最合理的價格，使浪浪獲得最好的醫療服務、飼料。有您的捐款，才可以讓流浪動物無後顧之憂，即時幫助到無法為自己權益發聲的浪浪！
                    </p>
                    <a class="pet-btn" href="{{ asset('donate/cash') }}">我要捐款</a>
                </div>
            </div>
        </div>
    </section>

    <section class="section-sm section-lg donate-support donate-item">
        <div class="container">
            <div class="donate-support-content">
                <div class="donate-support-pic">
                    <img src="https://picsum.photos/700/500/?random=1">
                    <img src="https://picsum.photos/700/400/?random=1">
                </div>
                <div class="supplies-text text">
                    <h2 class="section-title">幫助浪浪物資</h2>
                    <ul>
                        <li>1. 飼料及罐頭</li>
                        <li>2. 貓狗保健食品</li>
                        <li>3. 狗貓零食</li>
                        <li>4. 狗貓滴劑、心絲從預防藥</li>
                        <li>5. 牽繩、長鏈繩、項圈、胸背袋</li>
                        <li>6. 尿布墊、尿布</li>
                        <li>以上為較大宗的需求，捐贈什麼都可以唷~~</li>
                    </ul>
                    <a class="pet-btn" href="###" data-toggle="modal" data-target="#suppliesModal">物資捐贈</a>
                </div>
            </div>
        </div>
    </section>

    <section class="section-sm section-lg donate-support">
        <div class="container">
            <div class="donate-support-content">
                <div class="donate-support-pic">
                    <img src="https://picsum.photos/700/500/?random=1">
                    <img src="https://picsum.photos/700/400/?random=1">
                </div>
                <div class="donate-list-text text">
                    <h2 class="section-title">捐贈查詢</h2>
                    <p>
                        您的捐款，可以幫助更多浪浪們有更好的生活環境！
                        <span>捐款可以抵稅，毛孩日記皆會開立捐款收據，並以紙本方式寄送。</span>
                        <span>捐款名冊、物資用途、金額公布，</span>
                        <span>邀您一同捐款幫助浪浪找個家。</span>
                    </p>
                    <a class="pet-btn" href="###">愛心芳名錄</a>
                </div>
            </div>
        </div>
    </section>

    <!-- madal -->
    <div class="modal" tabindex="-1" id="suppliesModal">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable text-center">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mr-auto">物資捐贈</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="name" class="col-sm-2 col-form-label">聯絡人</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="" name="" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-sm-2 col-form-label">電話</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="" name="" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-sm-2 col-form-label">物資種類</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="" name="" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-sm-2 col-form-label">數量/單位</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="" name="" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary sweetalert2" data-swal-toast-template='#my-template'>送出</button>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection


@section('js')
    {{-- <script src="{{ asset('js/jquery-3.6.0.min.js')}}"></script> --}}
    {{-- <script src="{{ asset('https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous')}}"></script> --}}
    {{-- <script src="{{ asset('https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous')}}"></script> --}}
    {{-- <script src="{{ asset('//cdn.jsdelivr.net/npm/sweetalert2@11')}}"></script> --}}
    {{-- <script src="{{ asset('js/sweetalert2.js')}}"></script> --}}
    <script src="{{ asset('https://kit.fontawesome.com/ee6524aae5.js')}}" crossorigin="anonymous"></script>
    <script src="{{ asset('js/pet-vogue-jquery.js')}}"></script>
    <script src="{{ asset('js/all.js')}}"></script>
@endsection

donate_info_01

   @extends('layouts.front_template')
@section('title')
    捐款-資訊
@endsection

@section('css')
    <link rel="stylesheet" href="{{ asset('https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css') }}"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/reset.css') }}">
    <link rel="stylesheet" href="{{ asset('css/pet-vogue.min.css') }}">
@endsection



@section('main')
<main>
    <section class="section section-sm section-lg donate-detail">
        <div class="container">
            <div class="donate-detail-content">
                <div class="donate-detail-area">
                    <h2>愛心捐款 | 讓幫助動物成為充滿愛的日常</h2>
                    <p>
                        <span>
                            「毛孩日記」與全台多個動物醫療機構及各大飼料廠商都有合作關係，可以用最合理的價格，獲得最好的醫療服務，並購得最多的飼料，確保您的愛心發揮最大效益。
                        </span>
                        <span>
                            有您的捐款，才可以讓流浪動物無後顧之憂，幫助到無法為自己權益發聲的流浪動物！
                        </span>
                    </p>
                    <div class="donate-area-pic">
                        <img src="https://picsum.photos/630/300/?random=1" alt="捐款示意圖" title="捐款示意圖">
                    </div>
                </div>
                <div class="donate-detail-input">
                    <form action="/donate/cash_save" method="POST">
                        @csrf
                        <div class="input-top">
                            <h2>
                                <span>1/2 捐款金額</span>
                                讓幫助動物成為充滿愛的日常
                            </h2>
                        </div>
                        <div class="input-price">
                            <div class="donate-money">
                                <h3>捐款金額</h3>
                                <select name="" id="price">
                                    <option value="100">$100 - 小小支持，大大改變</option>
                                    <option value="500">$500 - 動保路上，有您真好</option>
                                    <option value="1000">$1000 - 因為有您，浪愛不斷</option>
                                    <option value="80000">$80000 - 感激涕零，恩重如山</option>
                                </select>
                            </div>
                            <div class="donor-name">
                                <label for="donor">捐贈者姓名</label>
                                <input type="text" id="donor" name="name" placeholder="王小明">
                            </div>
                        </div>
                        <!-- 後端帶入前端 -->
                        <div class="city-selector-set">
                            <h3>縣市<span>(收據以紙本收據寄送，請務必填寫完整地址)</span></h3>
                            <div class="allselect">
                                <div class="sel-county">
                                    <!-- 縣市選單 -->
                                    <select class="county" name="county"></select>
                                </div>
                                <div class="sel-district">
                                    <!-- 區域選單 -->
                                    <select class="district" name="district"></select>
                                </div>
                            </div>
                            <div class="zipcode">
                                <!-- 郵遞區號欄位 (建議加入 readonly 屬性，防止修改) -->
                                <input class="zipcode" name="zipcode" type="text" size="3" readonly
                                    placeholder="郵遞區號">
                            </div>
                            <div class="addres">
                                <label for="ads">街道地址</label>
                                <input type="text" name="address" id="ads" placeholder="例:興大路426號3樓">
                            </div>
                        </div>
                        <button class="pet-btn" type="submit">下一步</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
</main>




@endsection


@section('js')
    {{-- 引用地址JS --}}
    <script src="{{ asset('js/tw-city-selector.js') }}"></script>

    <script>
        new TwCitySelector({
            el: '.city-selector-set',
            elCounty: '.county', // 在 el 裡查找 element
            elDistrict: '.district', // 在 el 裡查找 element
            elZipcode: '.zipcode' // 在 el 裡查找 element
        });
    </script>

    <script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ asset('https://kit.fontawesome.com/ee6524aae5.js') }}" crossorigin="anonymous"></script>
    <script src="{{ asset('js/pet-vogue-jquery.js') }}"></script>
    <script src="{{ asset('js/pet-vogue-swiper.js') }}"></script>
    <script src="{{ asset('js/all.js') }}"></script>

@endsection

front home

CSS

    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="./css/aos.css">
    <link rel="stylesheet" href="./css/main.min.css">
    <link rel="stylesheet" href="./css/pet-vogue.min.css">

JS

    <script src="./js/moment.js"></script>
    <!-- <script src="./js/jquery-3.6.0.min.js"></script> -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="./js/aos.js"></script>
    <script src="./js/main.min.js"></script>
    <script src="https://kit.fontawesome.com/ee6524aae5.js" crossorigin="anonymous"></script>
    <script src="./js/pet-vogue-swiper.js"></script>
    <script src="./js/pet-vogue-calendar.js"></script>
    <script src="./js/pet-vogue-jquery.js"></script>
    <script src="./js/all.js"></script>

donate-index

css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/pet-vogue.min.css">

js

    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
        crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="./js/sweetalert2.js"></script>
    <script src="https://kit.fontawesome.com/ee6524aae5.js" crossorigin="anonymous"></script>
    <script src="./js/pet-vogue-jquery.js"></script>
    <script src="./js/all.js"></script>

main

<main>

        <section class="donate-placard">
            <div class="container">
                <div class="donate-placard-content">
                    <h2 class="section-title">愛心捐款</h2>
                    <p>「毛孩日記」為幫助到無法為自己權益發聲的貓狗動物，我們以感恩的心珍惜您的每一分捐款，並將妥善運用在: 
                        <span>1.傷病及受虐貓狗的救援、醫療、節育、安置、社會化、認領養等。</span>
                        <span>2.傷病及受虐貓狗的營救器材購買及維護。</span>
                        <span>3.資助全台超過130處弱勢私人流浪貓狗收容中心，支援其飼料費與協助環境修繕優化。</span> 
                        <span>4.推廣生命教育，透過各類媒體管道提倡尊重流浪犬貓相關尊重生命觀念。</span>
                    </p>
                </div>
            </div>
        </section>


        <section class="section-sm section-lg donate-support">
            <div class="container">
                <div class="donate-support-content">
                    <div class="donate-support-pic">
                        <img src="https://picsum.photos/700/500/?random=1">
                        <img src="https://picsum.photos/700/400/?random=1">
                    </div>
                    <div class="donnate-text text">
                        <h2 class="section-title">您的捐款，有無窮的希望!</h2>
                        <p>
                            「毛孩日記」負責把關，確保您的每一份愛心都不會浪費，我們會盡力用最合理的價格，使浪浪獲得最好的醫療服務、飼料。有您的捐款，才可以讓流浪動物無後顧之憂，即時幫助到無法為自己權益發聲的浪浪！
                        </p>
                        <a class="pet-btn" href="###">我要捐款</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-sm section-lg donate-support donate-item">
            <div class="container">
                <div class="donate-support-content">
                    <div class="donate-support-pic">
                        <img src="https://picsum.photos/700/500/?random=1">
                        <img src="https://picsum.photos/700/400/?random=1">
                    </div>
                    <div class="supplies-text text">
                        <h2 class="section-title">幫助浪浪物資</h2>
                        <ul>
                            <li>1. 飼料及罐頭</li>
                            <li>2. 貓狗保健食品</li>
                            <li>3. 狗貓零食</li>
                            <li>4. 狗貓滴劑、心絲從預防藥</li>
                            <li>5. 牽繩、長鏈繩、項圈、胸背袋</li>
                            <li>6. 尿布墊、尿布</li>
                            <li>以上為較大宗的需求，捐贈什麼都可以唷~~</li>
                        </ul>
                        <a class="pet-btn" href="###" data-toggle="modal" data-target="#suppliesModal">物資捐贈</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-sm section-lg donate-support">
            <div class="container">
                <div class="donate-support-content">
                    <div class="donate-support-pic">
                        <img src="https://picsum.photos/700/500/?random=1">
                        <img src="https://picsum.photos/700/400/?random=1">
                    </div>
                    <div class="donate-list-text text">
                        <h2 class="section-title">捐贈查詢</h2>
                        <p>
                            您的捐款，可以幫助更多浪浪們有更好的生活環境！
                            <span>捐款可以抵稅，毛孩日記皆會開立捐款收據，並以紙本方式寄送。</span>
                            <span>捐款名冊、物資用途、金額公布，</span>
                            <span>邀您一同捐款幫助浪浪找個家。</span>
                        </p>
                        <a class="pet-btn" href="###">愛心芳名錄</a>
                    </div>
                </div>
            </div>
        </section>
            
        <!-- madal -->
        <div class="modal" tabindex="-1" id="suppliesModal">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable text-center">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title mr-auto">物資捐贈</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">聯絡人</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="" name="" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">電話</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="" name="" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">物資種類</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="" name="" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">數量/單位</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="" name="" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary sweetalert2"
                            data-swal-toast-template='#my-template'>送出</button>
                    </div>
                </div>
            </div>
        </div>
    </main>