CounterApp/index.html at master · sinhaaritro/CounterApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Tailwind CSS Base -->
    <link rel="stylesheet" href="./styles/tailwindcss.css">
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="./styles/style.css">
    <title>Counter App</title>
</head>

<body>
    <nav class="flex items-center justify-between flex-wrap bg-purple-600 p-3">
        <div class="flex items-center flex-shrink-0 text-white mr-4">
            <i class="material-icons md-36">timer</i>
            <span class="font-semibold text-xl tracking-tight ml-2">Counter App</span>
        </div>
        <!-- <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto flex justify-center">
            <div class="mx-3 w-full sm:w-2/3 lg:w-1/3">
            <input class="shadow appearance-none border border-gray-200 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:border-purple-500 searchCounter" type="text" placeholder="Search Counter">
            </div>
        </div> -->
        <div>
            <button href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-purple-500 hover:bg-white mt-4 lg:mt-0">Sign in</button>
            <button href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-purple-500 hover:bg-white mt-4 lg:mt-0">Upload</button>
            <button href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-purple-500 hover:bg-white mt-4 lg:mt-0">Download</button>
        </div>
    </nav>
    <div class="container mx-auto flex flex-col justify-center items-center base">
        <div class="w-5/6 sm:w-2/3 lg:w-1/3 py-3">
            <input class="shadow appearance-none border border-gray-200 rounded w-full my-1 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:border-purple-500 searchCounter" type="text" placeholder="Search Counter">
        </div>
        <ul class="flex flex-col w-5/6 sm:w-2/3 lg:w-1/3 counterList">

        </ul>
        <br>
        <button type="button" class="bg-purple-700 shadow rounded mx-1 py-2 px-4 text-gray-100 focus:outline-none addCounter">
            Add Counter
        </button>
        <br>
    </div>

    <script src="./script/ui.js"></script>
    <script src="./script/app.js"></script>
    <script src="./script/counter.js"></script>
    <script src="./script/db.js"></script>
</body>

</html>