From 6748893354c4e935d1dff890ee0dae04cf4cd279 Mon Sep 17 00:00:00 2001
From: kitsne <bicycle.y.t@gmail.com>
Date: Sun, 15 Dec 2024 14:36:19 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=82=A4=E3=83=B3=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E8=A6=8B=E3=81=9F=E7=9B=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                          |  1 +
 src/assets/service_icons/github.svg |  5 +++
 src/assets/service_icons/google.svg | 10 +++++
 src/assets/service_icons/traq.svg   | 10 +++++
 src/views/LoginView.vue             | 60 +++++++++++++++++++++++++++--
 tailwind.config.js                  | 33 ++++++++++------
 6 files changed, 104 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/service_icons/github.svg
 create mode 100644 src/assets/service_icons/google.svg
 create mode 100644 src/assets/service_icons/traq.svg

diff --git a/index.html b/index.html
index be5747a..82d3a55 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0..1,0" />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
   </head>
diff --git a/src/assets/service_icons/github.svg b/src/assets/service_icons/github.svg
new file mode 100644
index 0000000..9583c73
--- /dev/null
+++ b/src/assets/service_icons/github.svg
@@ -0,0 +1,5 @@
+<!-- https://github.com/logos -->
+
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/service_icons/google.svg b/src/assets/service_icons/google.svg
new file mode 100644
index 0000000..7968a80
--- /dev/null
+++ b/src/assets/service_icons/google.svg
@@ -0,0 +1,10 @@
+<!-- https://developers.google.com/identity/branding-guidelines?hl=ja#render-html-button -->
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
+  <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+  <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+  <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+  <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+  <path fill="none" d="M0 0h48v48H0z"></path>
+</svg>
+      
\ No newline at end of file
diff --git a/src/assets/service_icons/traq.svg b/src/assets/service_icons/traq.svg
new file mode 100644
index 0000000..d3398c3
--- /dev/null
+++ b/src/assets/service_icons/traq.svg
@@ -0,0 +1,10 @@
+<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_2265_132)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.158 14.7036L16.3754 12.1411C16.294 12.0801 16.1924 12.0598 16.111 12.0598H9.80657C9.6032 12.0598 9.5015 12.2835 9.62352 12.4462L11.4539 14.7646C10.4167 15.1103 9.27779 15.212 8.19994 15.0087C6.67467 14.6832 5.3121 13.8088 4.39693 12.6089C3.01403 10.7786 2.74965 8.29745 3.64448 6.28412C4.64099 3.96569 6.97973 2.50144 9.39983 2.50144C9.52185 2.50144 9.68452 2.50144 9.82688 2.50144C12.3893 2.68447 14.6264 4.51479 15.3992 6.87388C15.8263 8.23645 15.7653 9.72106 15.2772 11.0633H16.4567C16.5584 11.0633 16.6601 11.0836 16.7211 11.1446L17.7176 11.8361C18.2464 10.3515 18.3684 8.74488 18.0837 7.19926C17.7379 5.40961 16.7821 3.70131 15.4602 2.42009C13.8536 0.894825 11.6369 0 9.39983 0C9.33879 0 9.23713 0 9.17612 0C6.45098 0.0610107 3.88852 1.42358 2.2819 3.55895C0.898991 5.40961 0.309221 7.80936 0.614274 10.0871C0.960001 12.5886 2.4446 14.8866 4.53929 16.2899C6.0239 17.2457 7.81355 17.7541 9.56251 17.7134H16.0907C16.1924 17.7134 16.2737 17.6931 16.355 17.6321L20.1377 15.09C20.3004 15.0087 20.3004 14.8053 20.158 14.7036Z" fill="#005BAC"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_2265_132">
+      <rect width="19.9286" height="18" fill="white" transform="translate(0.535767)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 223f1f5..a15c61f 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,9 +1,61 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import BorderedButton from '@/components/Controls/BorderedButton.vue'
+import PrimaryButton from '@/components/Controls/PrimaryButton.vue'
+</script>
 
 <template>
-  <div>
-    <h1>Login</h1>
+  <div
+    style="height: calc(100vh - 56px)"
+    class="flex items-center justify-center bg-background-secondary"
+  >
+    <div class="w-200 rounded-2xl bg-background-primary px-14 py-10">
+      <h1 class="mb-5 h-9 font-primary text-28px font-medium text-[#1E1E1E]">ログイン</h1>
+      <div class="flex h-44 items-start">
+        <div class="flex w-82 flex-col p-2.5">
+          <button class="service_button">
+            <img src="@/assets/service_icons/github.svg" class="mr-2.5 h-5" />
+            <p class="service_text">GitHub でログイン</p>
+          </button>
+          <button class="service_button">
+            <img src="@/assets/service_icons/google.svg" class="mr-2.5 h-5" />
+            <p class="service_text">Google でログイン</p>
+          </button>
+          <button class="service_button">
+            <img src="@/assets/service_icons/traq.svg" class="mr-2.5 h-5" />
+            <p class="service_text">traQ でログイン</p>
+          </button>
+        </div>
+        <div class="mx-4 h-full border-r border-border-secondary"></div>
+        <div class="flex w-82 flex-col p-2.5">
+          <input placeholder="メールアドレス" class="input" />
+          <input placeholder="パスワード" class="input" />
+          <div class="mb-3 flex h-10">
+            <PrimaryButton class="mr-3 h-full w-37 rounded-lg" text="ログイン" />
+            <BorderedButton class="h-full w-37 rounded-lg" text="新規登録" />
+          </div>
+          <router-link to="" class="h-4 text-12px font-normal text-[#3A3A3A] underline">
+            パスワードを忘れた場合</router-link
+          >
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .service_button {
+    @apply mb-3 flex h-10 w-full items-center justify-center rounded-lg border border-border-secondary;
+  }
+  .service_text {
+    @apply font-primary text-14px font-medium text-[#3A3A3A];
+  }
+  .input {
+    @apply mb-3 flex h-8 w-full items-center justify-center rounded-sm border border-border-secondary pl-3;
+  }
+}
+</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index a3226d3..d733b5f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,22 +17,33 @@ export default {
       'text-tertiary': '#9a9a9a',
       'text-inv-primary': '#f0f0f0',
       'status-error': '#e02a2a',
-      'red': '#ff0000',
-      'white': '#ffffff',
+      red: '#ff0000',
+      white: '#ffffff'
     },
     fontFamily: {
-      primary: ['Open Sans', 'Noto Sans JP', 'sans-serif']
+      primary: ['Noto Sans JP', 'Open Sans', 'sans-serif']
     },
     extend: {
       spacing: {
-        '1.625': '0.40625rem',
-        '1.75': '0.4375rem',
-        '4.5': '1.125rem',
-        '7.5': '1.875rem',
-        '11.5': '2.875rem',
-        '27': '6.75rem',
-        '50': '12.5rem',
-        '62.5': '15.625rem'
+        1.625: '0.40625rem',
+        1.75: '0.4375rem',
+        4.5: '1.125rem',
+        7.5: '1.875rem',
+        11.5: '2.875rem',
+        27: '6.75rem',
+        37: '9.25rem',
+        50: '12.5rem',
+        58: '14.5rem',
+        62.5: '15.625rem',
+        82: '20.5rem',
+        78: '19.5rem',
+        172: '43rem',
+        200: '50rem'
+      },
+      fontSize: {
+        '12px': '12px',
+        '14px': '14px',
+        '28px': '28px'
       }
     }
   },