<!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>Document</title>
    <link rel="stylesheet" href="./css/main.css"/>
    <link rel="stylesheet" href="./css/style.css"/>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
</head>
<body>
    <div class="container lg:px-32 md:px-10 px-2 mx-auto">
        <nav class="navbar bg-base-100">
            <div class="flex-1">
                <a href="/" class="lg:text-2xl text-xl font-semibold ms-0">QuotesAPI <small class="text-sm lg:inline-block hidden">indonesia</small></a>
            </div>
            <div class="md:block hidden">
                <ul class="menu menu-horizontal">
                    <li class="md:px-3 inline-block text-base font-medium"><a href="/">About</a></li>
                    <li class="md:px-3 inline-block text-base font-medium"><a href="/guide">Guide</a></li>
                    <li class="md:px-3 inline-block text-base font-medium"><a href="/get-api">API</a></li>
                    <!-- <li class="md:px-3 inline-block text-base font-medium"><a href="#">FAQ</a></li> -->
                </ul>
            </div>
            <div class="md:hidden block">
                <ul class="menu menu-horizontal rounded-box">
                    <li>
                        <a class="tooltip tooltip-bottom" data-tip="About">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 28" stroke-width="1.5" stroke="currentColor" class="size-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                            </svg>                      
                        </a>
                    </li>
                    <li>
                        <a class="tooltip tooltip-bottom" data-tip="Guide">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 28" stroke-width="1.5" stroke="currentColor" class="size-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
                            </svg>                      
                        </a>
                    </li>
                    <li>
                        <a class="tooltip tooltip-bottom" data-tip="API">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 28" stroke-width="1.5" stroke="currentColor" class="size-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <div id="about" class="ps-2 font-medium mb-8">
            <h1 class="mt-8 mb-3 text-4xl font-semibold">About this project</h1>
            <p class="leading-6 mb-3">I built my ERP project for Restaurant from July - August 2024. At that time, I want to display a daily quote on the main dashboard, but I'm having trouble finding a good Indonesian Quotes API. I want to make it right then and there but I wasn't have much time. I thought, why not make it by myself so that another people can use it too? Therefore, this was born :D</p>
            <!-- <p class="leading-6">I thought, why not make it by myself so that another people can use it too? Therefore, this was born.</p> -->
        </div>
        <div id="guide" class="ps-2 font-medium mb-8">
            <h1 class="mb-3 text-4xl font-semibold">Guide</h1>
            <p class="leading-6 mb-3">To access the API, there are a few ways to do it. It depends on what you are trying to accomplish with it.</p>
            <h1 class="mb-3 text-xl font-semibold">Using JavaScript fetch API</h1>
            <div class="mockup-code mb-5">
                <pre><code>const response = await fetch("https://jokesbapak2.reinaldyrafli.com/api/");</code></pre>
                <pre><code></code></pre>
                <pre><code>if (!response.ok) {</code></pre>
                <pre><code>   // Do some error handling if the request fails</code></pre>
                <pre><code>}</code></pre>
                <pre><code></code></pre>
                <pre><code>const blob = await response.blob();</code></pre>
                <pre><code></code></pre>
                <pre><code>const objectURL = URL.createObjectURL(blob);</code></pre>
                <pre><code></code></pre>
                <pre><code>&lt;img src="{ objectURL }" /&gt;</code></pre>
            </div>
            <h1 class="mb-3 text-xl font-semibold">Using cURL</h1>
            <div class="mockup-code">
                <pre><code>const response = await fetch("https://jokesbapak2.reinaldyrafli.com/api/");</code></pre>
                <pre><code></code></pre>
                <pre><code>if (!response.ok) {</code></pre>
                <pre><code>   // Do some error handling if the request fails</code></pre>
                <pre><code>}</code></pre>
                <pre><code></code></pre>
                <pre><code>const blob = await response.blob();</code></pre>
                <pre><code></code></pre>
                <pre><code>const objectURL = URL.createObjectURL(blob);</code></pre>
                <pre><code></code></pre>
                <pre><code>&lt;img src="{ objectURL }" /&gt;</code></pre>
            </div>
        </div>
        <div id="api" class="ps-2 font-medium mb-8">
            <h1 class="mb-3 text-4xl font-semibold">Get Quotes</h1>
            <div id="all-quotes" class="mb-5">
                <h1 class="mb-3 text-xl font-semibold">Get all quotes</h1>
                <p class="leading-6 mb-3">Since this project is open-sourced, the data might be large. I don't recommend you to get all the data, anyway.. will you take the risk? üòè</p>
                <div class="mockup-code">
                    <pre><code>GET &nbsp;https://indonesian-quotes-api.vercel.app/api/quotes</code></pre>
                </div>
            </div>
            <div id="all-quotes-with-spesific-cateogry" class="mb-5">
                <h1 class="mb-3 text-xl font-semibold">Get all quotes with spesific category</h1>
                <p class="leading-6 mb-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, quibusdam.</p>
                <div class="mockup-code">
                    <pre><code>GET &nbsp;https://indonesian-quotes-api.vercel.app/api/quotes?category=[input_category_here]</code></pre>
                </div>
            </div>
            <div id="random-quotes" class="mb-5">
                <h1 class="mb-3 text-xl font-semibold">Get random quotes</h1>
                <p class="leading-6 mb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                <div class="mockup-code">
                    <pre><code>GET &nbsp;https://indonesian-quotes-api.vercel.app/api/quotes/random</code></pre>
                </div>
            </div>
            <div id="random-quotes-with-spesific-cateogry" class="mb-5">
                <h1 class="mb-3 text-xl font-semibold">Get random quotes with spesific category</h1>
                <p class="leading-6 mb-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, quibusdam.</p>
                <div class="mockup-code">
                    <pre><code>GET &nbsp;https://indonesian-quotes-api.vercel.app/api/quotes/random?category=[input_category_here]</code></pre>
                </div>
            </div>
        </div>
        <div id="faq" class="ps-2 font-medium mb-8">
            <h1 class="mt-8 mb-3 text-3xl font-semibold">Frequently Asked Question</h1>
            <p class="leading-6 mb-3">I built my ERP project for Restaurant from July - August 2024. At that time, I want to display a daily quote on the main dashboard, but I'm having trouble finding a good Indonesian Quotes API. I want to make it right then and there but I wasn't have much time. I thought, why not make it by myself so that another people can use it too? Therefore, this was born :D</p>
            <div id="all-quotes" class="mb-5">
                <h1 class="mb-3 text-lg font-semibold">Can I submit my quotes?</h1>
                <p class="leading-6 mb-3">You sure can! Hit this endpoint with your Postman or any API Platform. Bear in mind, your quotes must not insult anyone and be racists. Let's keep the quotes healthy.</p>
                <div class="mockup-code">
                    <pre><code>POST &nbsp;https://indonesian-quotes-api.vercel.app/api/quotes</code></pre>
                </div>
            </div>
            <div id="all-quotes" class="mb-5">
                <h1 class="mb-3 text-lg font-semibold">I don't have any quotes, can I contribute?</h1>
                <p class="leading-6 mb-3">Of course! This project is open sourced on <a href="/" class="text-blue-600">Github</a>. Feel free to crunch a bug, add a feature, or fix a small typo.</p>
            </div>
            <div id="all-quotes" class="mb-5">
                <h1 class="mb-3 text-lg font-semibold">I have other inquiries</h1>
                <p class="leading-6 mb-3">You can contact me through <a href="/" class="text-blue-600">my email</a>, and I'll be in touch as soon as possible.</p>
            </div>
        </div>
    </div>
    <!-- <div class="navbar bg-base-100">
        <a class="btn btn-ghost text-xl">daisyUI</a>
    </div> -->
    <!-- <div class="container justify-center">
        <div class="mockup-code">
            <pre data-prefix="$"><code>npm i daisyui</code></pre>
        </div>
    </div> -->
</body>
</html>