tailwind制作简单的任务管理器

代码语言:html

所属分类:布局界面

代码描述:tailwind制作简单的任务管理器

代码标签: 任务 管理器

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css">
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/alpine.min.js"></script>
</head>
<body class="antialiased sans-serif bg-gray-300">
    <!-- Alert Box -->
    <div class="fixed w-full z-50 flex inset-0 items-start justify-center pointer-events-none md:mt-5" x-data="{
        message: '',
        showFlashMessage(event) {
        this.message = event.detail.message;
        setTimeout(() => this.message = '', 3000)
        }
        }">
        <template x-on:flash.window="showFlashMessage(event)"></template>
        <template x-if="message">
            <div role="alert" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="-translate-y-5 opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-100 transform" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0 -translate-y-5" class="w-full px-4 py-4 w-full md:max-w-sm bg-gray-900 md:rounded-lg shadow-lg">
                <div class="flex items-center">
                    <div class="flex-shrink-0 mr-3">
                        <svg class="h-6 w-6 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" /></svg>
                    </div>
                    <div class="text-gray-200 text-base" x-text="message"></div>
                </div>
            </div>
        </template>
    </div>
    <!-- /Alert Box -->

    <div x-data="app()" x-init="getTasks()" x-cloak class="flex flex-col min-h-screen border-t-8" :class="`border-${colorSelected.value}-700`">
        <div class="flex-1">

            <!-- Header -->
            <div class="bg-cover bg-center bg-no-repeat" :class="`bg-${colorSelected.value}-900`" :style="`background-image: url(${bannerImage})`">
                <div class="container mx-auto px-4 pt-4 md:pt-10 pb-40"></div>
            </div>
            <!-- /Header -->

            <div class="container mx-auto px-4 py-4 -mt-40">

                <!-- Welcome Page -->
                <div x-show="!localStorage.getItem('TG-username')">
                    <h2 class="font-bold text-blue-400 text-center text-3xl">Welcome to Tasksgram</h2>
                    <h2 class="text-gray-400 text-center mb-8 text-lg">Simple Kanban Board</h2>
                    <div class="bg-white rounded-lg p-6 md:p-10 md:max-w-md mx-auto shadow-md">
                        <label class="text-gray-800 block mb-1 font-bold text-sm tracking-wide">Name</label>
                        <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-lg w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" type="text" x-model="username" placeholder="Enter your name and hit enter..." @keydown.enter="if (username == '') { return; } localStorage.setItem('TG-username', username); username = ''">
                    </div>
                </div>

                <!-- Settings Page -->
                <div x-show.immediate="showSettingsPage == true">
                    <div x-show.transition="showSettingsPage == true">

                        <div class="mb-8">
                            <a href="#" @click.prevent="showSettingsPage = false" class="rounded-lg text-sm px-3 py-2 inline-flex" :class="`text-${colorSelected.value}-500 bg-${colorSelected.value}-800 hover:bg-${colorSelected.value}-700`">&larr; Go Back</a>
                        </div>

                        <div class="p-6 bg-white rounded-lg shadow-md md:max-w-4xl" style="min-height: 150px">
                            <h2 class="font-bold text-gray-800 mb-3 text-2xl">Settings</h2>

                            <div class="mb-5">
                                <label class="text-gray-800 block mb-1 font-bold text-sm">Name</label>
                                <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-lg w-full md:w-64 py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" type="text" x-model="username" placeholder="Enter your name">
                            </div>

                            <div class="mb-5">
                                <div class="flex items-center">
                                    <div>
                                        <label for="colorSelected" class="text-gray-800 block font-bold mb-1 text-sm">Select a theme</label>

                                        <div class="px-1">
                                            <div class="flex flex-wrap -mx-2">
                                                <template x-for="(color, index) in colors" :key="index">
                                                    <div class="px-2">
                                                        <template x-if="colorSelected.value === color.value">
                                                            <div class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white" :style="`background: ${color.label}; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);`"></div>
                                                        </template>

                                                        <template x-if="colorSelected.value != color.value">
                                                            <div @click="colorSelected = color" @keydown.enter="colorSelected = color" role="checkbox" tabindex="0" :aria-checked="colorSelected" class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white focus:outline-none focus:shadow-outline" :style="`background: ${color.label};`"></div>
                                                        </template>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-5">
                                <label class="text-gray-800 block mb-1 font-bold text-sm">Banner image <small class="text-gray-500 text-xs">(optional)</small></label>
                                <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-lg w-full md:w-1/2 py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" type="url" x-model="bannerImage" placeholder="eg. https://picsum.photos/1200/400?random=2">
                            </div>

                            <div class="mb-5">
                                <label class="text-gray-800 block mb-1 font-bold text-sm">Date format display</label>

                                <div class="flex">
                                    <label class="flex justify-start items-center text-truncate rounded-lg bg-gray-200 pl-4 pr-6 py-2 shadow-xs mr-4">
                                        <div class="mr-3" :class="`text-${colorSelected.value}-600`">
                                            <input type="radio" x-model="dateDisplay" value="toDateString" class="form-radio focus:outline-none focus:shadow-outline" />
                                        </div>
                                        <div class="select-none text-gray-700">
                                            Thu May 28 2020
                                        </div>
                                    </label>

                                    <label class="flex justify-start items-center text-truncate rounded-lg bg-gray-200 pl-4 pr-6 py-2 shadow-xs mr-4">
                                        <div class="mr-3" :class="`text-${colorSelected.value}-600`">
                                            <input type="radio" x-model="dateDisplay" value="toLocaleDateString" class="form-radio focus:outline-none focus:shadow-outline" />
                                        </div>
                                        <div class="select-none text-gray-700">
                                            28/05/2020
                                        </div>
                                    </label>
                                </div>
                            </div>

                            <div class="mt-8">
                                <button type="button" class="bg-white hover:bg-gray-100 text-gray-700 font-semibold py-2 px-4 border border-gray-300 rounded-lg shadow-xs mr-2" @click="showSettingsPage = false">
                                    Cancel
                                </button>
                                <button type="button" @click="saveSettings" class="text-white font-semibold py-2 px-4 border border-transparent rounded-lg shadow-xs" :class="`bg-${colorSelected.value}-700 hover:bg-${colorSelected.value}-800`">
                                    Save Settings
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Main Page -->
                <div x-show.immediate="localStorage.getItem('TG-username') && showSettingsPage == false">
                    <div x-show.transition="localStorage.getItem('TG-username') && showSettingsPage == false">
                        <!-- Greetings -->
                        <div class="flex justify-between items-center mb-2">
                            <div>
                                <h1 class="text-xl md:text-2xl text-gray-300 font-semibold" x-text="greetText()"></h1>
                                <div x-text="formatDateDisplay(new Date())" class="text-sm" :class="`text-${colorSelected.value}-400`"></div>
                            </div>
                            <div>
                                <a @click.prevent="showSettingsPage = !showSettingsPage" href="#" class="rounded-lg px-3 py-2 font-medium inline-flex items-center" :class="`text-${colorSelected.value}-500 bg-${colorSelected.value}-800 hover:bg-${colorSelected.value}-700`">
                                    <svg class="w-5 h-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                    Settings</a>
                            </div>
                        </div>
                        <!-- /Greetings -->

                        <!-- Kanban Board -->
                        <div class="py-4 md:py-8">
                            <div class="flex -mx-4 block overflow-x-auto pb-2">
                                <template x-for="board in boards" :key="board">
                                    <div class="w-1/2 md:w-1/4 px-4 flex-shrink-0">
                                        <div class="bg-gray-100 pb-4 rounded-lg shadow overflow-y-auto overflow-x-hidden border-t-8" style="min-height: 100px" :class="{
                                            'border-orange-600': board === boards[0],
                                            'border-yellow-600': board === boards[1],
                                            'border-blue-600': board === boards[2],
                                            'border-green-600': board === boards[3],
                                            }">
                                            <div class="flex justify-between items-center px-4 py-2 bg-gray-100 sticky top-0">
                                                <h2 x-text="board" class="font-medium text-gray-800"></h2>
                                                <a @click.prevent="showModal(board)" href="#" class="inline-flex items-center text-sm font-medium" :class="`text-${colorSelected.value}-500 hover:text-${colorSelected.value}-600`">
                                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                                    </svg>
                                                    Add Task
                                                </a>
                                            </div>

                                            <div class="px-4">
                                                <div @dragover="onDragOver(event)" @drop="onDrop(event, board)" @dragenter="onDragEnter(event)" @dragleave="onDragLeave(event)" class="pt-2 pb-20 rounded-lg">
                                                    <template x-for="(t, taskIndex) in tasks.filter(t => t.boardName === board)" :key="taskIndex">
                                                        <div :id="t.uuid">

                                                            <div x-show="t.edit == false">
                                                                <div x-show="t.edit == false" class="bg-white rounded-lg shadow mb-3 p-2" draggable="true" @dragstart="onDragStart(event, t.uuid)" @dblclick="t.edit = true; setTimeout(() => $refs[t.uuid].focus())">
                                                                    <div x-text="t.name" class="text-gray-800"></div>
                                                                    <div x-text="formatDateDisplay(t.date)" class="text-gray-500 text-xs"></div>
                                                                </div>
                                                            </div>

                                                            <div x-show="t.edit == true" class="bg-white rounded-lg p-4 shadow mb-4">
                 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0