Merge pull request #48 from IRONICBo/feat/yap-home-template

feat: Add home yap page.
goplus · Jan 18, 2024 · 210dbb4 · 210dbb4
2 parents 0b12093 + 0ca78bb
commit 210dbb4
Showing 1 changed file with 201 additions and 13 deletions.
diff --git a/cmd/gopcomm/yap/home_yap.html b/cmd/gopcomm/yap/home_yap.html
@@ -1,15 +1,203 @@
+<!DOCTYPE html>
 <html>
-<head>
-<meta charset="utf-8"/>
-</head>
-<body>
-<p>Go+ Community <a href="/p/123">written in Go+</a></p>
-<p><a href="/edit">New Article</a></p>
-<p>Article List:</p>
-<ul>
-{{range .Items}}
-<li>Title: <a href="/p/{{.ID}}">{{.Title}}</a> (<a href="/edit?id={{.ID}}">edit</a>)</li>
-{{end}}
-</ul>
-</body>
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <!-- <script src="https://cdn.tailwindcss.com"></script> -->
+ <link
+ href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css"
+ rel="stylesheet"
+ />
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
+ </head>
+
+ <body class="bg-gray-100">
+ <header
+ class="bg-cover bg-center"
+ style="
+ height: 300px;
+ background-image: url('https://github.com/goplus/community/assets/47499836/46d97d22-a97b-4580-b2c8-abb9db98563a');
+ "
+ >
+ <nav class="border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
+ <div
+ class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl"
+ >
+ <a href="https://github.com/goplus/gop" class="flex items-center">
+ <img
+ src="https://github.com/goplus/community/assets/47499836/19900f7d-ddbb-495b-b45b-8fd2397394be"
+ class="mr-3 h-6 sm:h-9"
+ alt="Go+ Community Logo"
+ />
+ </a>
+ <div class="flex items-center lg:order-2">
+ <button
+ type="button"
+ class="text-white hover:text-white border border-white-700 hover:bg-white-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
+ >
+ Sign in
+ </button>
+ </div>
+ <div
+ class="hidden justify-between items-center w-1/2 lg:flex lg:w-auto lg:order-1"
+ id="mobile-menu-2"
+ >
+ <form style="width: 500px">
+ <label
+ for="default-search"
+ class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
+ >Search</label
+ >
+ <div class="relative">
+ <div
+ class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
+ >
+ <svg
+ class="w-4 h-4 text-gray-500 dark:text-gray-400"
+ aria-hidden="true"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 20 20"
+ >
+ <path
+ stroke="currentColor"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+ />
+ </svg>
+ </div>
+ <input
+ type="search"
+ id="default-search"
+ class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+ placeholder="Search Mockups, Logos..."
+ required
+ />
+ <button
+ type="submit"
+ class="text-white absolute end-2.5 bottom-2.5 bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+ >
+ Search
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+ </nav>
+ </header>
+
+ <section class="text-gray-600 body-font overflow-hidden" style="margin-top:-200px">
+ <div class="container px-5 py-6 mx-auto w-1/2">
+ <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400 bg-white" style="padding: auto !important;">
+ <li class="m-1 px-6">
+ <a href="#" class="inline-flex items-center justify-center p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg dark:text-blue-500 dark:border-blue-500 group">
+ <svg class="w-4 h-4 me-2 text-blue-600 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
+ <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"/>
+ </svg>BLOG
+ </a>
+ </li>
+ <li class="m-1 px-6">
+ <a href="#" class="inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group active" aria-current="page">
+ <svg class="w-4 h-4 me-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
+ </svg>VIDEO
+ </a>
+ </li>
+ <li class="m-1 px-6">
+ <a href="#" class="inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group">
+ <svg class="w-4 h-4 me-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+ <path d="M5 11.424V1a1 1 0 1 0-2 0v10.424a3.228 3.228 0 0 0 0 6.152V19a1 1 0 1 0 2 0v-1.424a3.228 3.228 0 0 0 0-6.152ZM19.25 14.5A3.243 3.243 0 0 0 17 11.424V1a1 1 0 0 0-2 0v10.424a3.227 3.227 0 0 0 0 6.152V19a1 1 0 1 0 2 0v-1.424a3.243 3.243 0 0 0 2.25-3.076Zm-6-9A3.243 3.243 0 0 0 11 2.424V1a1 1 0 0 0-2 0v1.424a3.228 3.228 0 0 0 0 6.152V19a1 1 0 1 0 2 0V8.576A3.243 3.243 0 0 0 13.25 5.5Z"/>
+ </svg>STEM
+ </a>
+ </li>
+ <li class="m-1 px-6">
+ <a href="#" class="inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group">
+ <svg class="w-4 h-4 me-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+ <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
+ </svg>COMMUNITY
+ </a>
+ </li>
+ </ul>
+ </div>
+ </section>
+
+ <section class="text-gray-600 body-font overflow-hidden">
+ <div class="container px-6 py-2 mx-auto bg-white rounded-lg">
+ <div class="-my-8 divide-y-2 divide-gray-100">
+ <div class="py-8 flex flex-wrap md:flex-nowrap">
+ <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+ <span class="font-semibold title-font text-gray-700"
+ >CATEGORY</span
+ >
+ <span class="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
+ </div>
+ <div class="md:flex-grow">
+ <h2 class="text-2xl font-medium text-gray-900 title-font mb-2">
+ Bitters hashtag waistcoat fashion axe chia unicorn
+ </h2>
+ <p class="leading-relaxed">
+ Glossier echo park pug, church-key sartorial biodiesel
+ vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
+ party messenger bag selfies, poke vaporware kombucha
+ lumbersexual pork belly polaroid hoodie portland craft beer.
+ </p>
+ <a class="text-blue-500 inline-flex items-center mt-4"
+ >Learn More
+ <svg
+ class="w-4 h-4 ml-2"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="M5 12h14"></path>
+ <path d="M12 5l7 7-7 7"></path>
+ </svg>
+ </a>
+ </div>
+ </div>
+ {{range .Items}}
+ <div class="py-8 flex flex-wrap md:flex-nowrap">
+ <div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+ <span class="font-semibold title-font text-gray-700"
+ >CATEGORY</span
+ >
+ <span class="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
+ </div>
+ <div class="md:flex-grow">
+ <h2 class="text-2xl font-medium text-gray-900 title-font mb-2">
+ Title: {{.Title}}
+ </h2>
+ <p class="leading-relaxed">
+ Glossier echo park pug, church-key sartorial biodiesel
+ vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
+ party messenger bag selfies, poke vaporware kombucha
+ lumbersexual pork belly polaroid hoodie portland craft beer.
+ </p>
+ <a class="text-blue-500 inline-flex items-center mt-4"
+ >Learn More
+ <svg
+ class="w-4 h-4 ml-2"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ stroke-width="2"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="M5 12h14"></path>
+ <path d="M12 5l7 7-7 7"></path>
+ </svg>
+ </a>
+ </div>
+ </div>
+ {{end}}
+ </div>
+ </div>
+ </section>
+ </body>
 </html>