only-laughs/index.html at main · AnthonyBuffill/only-laughs · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.tailwindcss.com"></script>
        <link rel="stylesheet" type="text/css" href="./assets/css/style.css" />
        <title>Random Meme Generator</title>
    </head>
<body class="pageBackground">
    <nav class="fixed w-full">
        <h1 class="font-serif tracking-wide tracking-wider uppercase text-gray-darker">Only Laughs</h1>
    </nav>
    <div class="flex flex-col items-center justify-center h-screen content md:flex-row">
        <div class="p-4 text-center lg:w-1/4 lg:pr-20 md:w-1/3 sm:w-1/2 left-container h-50">
        <div class="font-serif text-xl lg:uppercase lg:bold lg:tracking-wider lg:text-white sm:text-gray-darker">
            <h3>Picture Generator</h3>
            <button onclick="generateImage()" class="px-4 py-2 mb-6 font-bold bg-yellow-400 border-b-4 border-yellow-700 rounded lg:text-white sm:text-gray-darker hover:bg-yellow-400 hover:border-yellow-500">Generate Image</button>
        </div>

        <div class="font-serif text-xl lg:uppercase lg:bold lg:tracking-wider lg:text-white sm:text-gray-darker">
            <h3>Joke Generator</h3>
            <button onclick="generateJoke()" class="px-4 py-2 space-x-6 font-bold bg-yellow-400 border-b-4 border-yellow-700 rounded lg:text-white sm:text-gray-darker hover:bg-yellow-400 hover:border-yellow-500">Generate Joke</button>
            </div>
    </div>

    <div class="h-64 p-4 text-center lg:h-96 lg:pl-20 lg:w-1/2 sm:2-1/2 middle-container">
        <div class="rounded-lg w-80">
            <div class="rounded h-80 bg-white-400 t-lg">
            <h2 id="jokeContainer"  class="w-64 mb-4 text-lg text-gray-darker lg:uppercase lg:bold lg:tracking-wide"></h2>
            <!-- <p>This is the content for the middle container.</p> -->
            <img id="generatedImage" class="w-64 h-64 saveMessage" alt="Generated Image"  width="250px" height="250px">
        <div class="flex pl-2 mb-4 space-x-14 buttons">
            <!-- .ramdonJokeBtn -->
            <button onclick="callBothFunctions()" class="my-4 px-4 py-2 space-x-4 font-bold bg-purple-500 border-b-4 border-purple-700 rounded lg:md:text-white hover:bg-purple-400 hover:border-purple-500">Random</button>
            <button onclick="saveMeme()" class="my-4 inline-flex items-center px-4 py-2 space-x-4 font-bold bg-purple-500 border-b-4 border-purple-700 rounded lg:text-white sm:text-gray hover:bg-purple-400 hover:border-purple-500">Save</button>

         </div>
        </div>

</div>
    <h2 id="jokeContainer"></h2>
    <br>


    <div id="saveMessage"></div>
    <footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-transparent rounded-lg dark:bg-gray-800">
        <div class="w-full max-w-screen-xl p-4 mx-auto md:flex md:justify-between sm:p-0 sm:flex">
            <span class="invisible text-sm text-white sm:visible text-white-500">© 2023 OnlyLaughs™</a>
            </span>
            <ul
                class="flex flex-wrap mt-3 text-sm font-medium text-white md:text-center text-white-500 sm:mt-0">

                <a href="./contacts.html"><button  class="text-sm text-white border-b-4 border-purple-700 rounded text-white-500 sm:text-center hover:border-purple-500 me-4">Contact</button><a>

                <a href="./memevault.html"><button class="text-sm text-white border-b-4 border-purple-700 rounded text-white-500 sm:text-center hover:border-purple-500 me-4">Meme Vault</button><a>
        </div>
    </footer>
    <script src="./assets/js/script.js"></script>
</body>
</html>