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`">← 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"&g.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0