lstorage.github.io/index.html at main · 23hertz/lstorage.github.io · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <link href="dist/tailwind.css" type="text/css" rel="stylesheet" />
</head>
<body class=" bg-green-400">
    <header>
        <nav class=" container mx-auto">
            <!-- Menu items -->
            <div class="text-lg text-gray-1000 hidden lg:flex bg-red-500 text-center">
                <h1 class="text-2xl md:text-6xl font-bold text-teal-600 mb-2 lg:mb-6 mx-auto pt-3 text-center">Killer Blog</h1>
            </div>
        </nav>
    </header>

    <!-- <main class="bg-blue-700 container">
        <div class="w-full max-w-xs">
            <form class="bg-white shadow-md rounded px-8 pt-6 mx-auto pb-8 mb-4 ">
              <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
                  Username
                </label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
              </div>
              <div class="mb-6">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                  Password
                </label>
                <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
                <p class="text-red-500 text-xs italic">Please choose a password.</p>
              </div>
              <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
                  Sign In
                </button>
                <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
                  Forgot Password?
                </a>
              </div>
            </form>
            <p class="text-center text-gray-500 text-xs">
              &copy;2020 Acme Corp. All rights reserved.
            </p>
          </div>
    </main> -->

        <div class="flex text-gray-900">
            <div class="w-12/12 p-8 m-auto bg-white rounded-lg sm:w-96 bg-opacity-80 bg-clip-padding">
                <div class="mt-6 space-y-6">


                        <label class="block">

                            <textarea class="form-textarea mt-1 block w-full" rows="6" cols="30" id="myTextarea" placeholder="Enter some long form content."></textarea>
                          </label>

                </div>
                <div class="grid grid-cols-2 gap-4 mt-6">
                    <button class="p-2 text-sm font-medium text-red-500 bg-white border border-red-500 rounded-md focus:outline-none md:text-base font-roboto focus:ring-2 focus:ring-red-400 hover:bg-red-500 hover:text-white" onclick="mySave()">Save</button>
                    <button class="p-2 text-sm font-medium text-white bg-red-500 rounded-md md:text-base font-roboto focus:outline-none focus:ring-2 focus:ring-red-400" onclick="myLoad()">Load</button>
                    <button class="p-2 text-sm font-medium text-white bg-red-500 rounded-md md:text-base font-roboto focus:outline-none focus:ring-2 focus:ring-red-400" onclick="myDelete()">Delete</button>

                </div>
            </div>
        </div>
        <script>
            function mySave() {
              var myContent = document.getElementById("myTextarea").value;
              localStorage.setItem("myContent", myContent);
            }
            function myLoad() {
              var myContent = localStorage.getItem("myContent");
              document.getElementById("myTextarea").value = myContent;
            }
            function myDelete() {
              var myContent = localStorage.getItem("myContent");
              document.getElementById("myTextarea").value = myContent;
              myContent = localStorage.clear();
            }
          </script>
</body>
</html>