su-its · arkwnet · Apr 8, 2025 · Feb 22, 2025 · Feb 22, 2025 · Mar 1, 2025
@@ -47,6 +47,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "openapi-typescript": "6.7.6",
     "postcss": "^8.4.49",
+    "sass": "^1.85.0",
     "tailwindcss": "^3.4.16",
     "typescript": "^5.7.2"
   },

@@ -5,11 +5,25 @@
 }
 
 * {
+  margin: 0;
+  padding: 0;
   font-family: "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
+  box-sizing: border-box;
 }
 
 body {
   color: rgb(var(--foreground-rgb));
   background: rgb(var(--background-start-rgb));
   overflow-y: hidden;
 }
+
+.children {
+  width: 100%;
+  height: calc(100% - 130px);
+  position: fixed;
+  left: 0;
+  top: 70px;
+  background-image: url("/img/background.png");
+  background-size: cover;
+  background-position: center bottom;
+}
@@ -2,8 +2,6 @@ import type { Metadata } from "next";
 import Header from "../components/organism/Header";
 import Footer from "../components/organism/Footer";
 import "./globals.css";
-import { Box, ChakraProvider } from "@chakra-ui/react";
-import background from "@/assets/images/background.png";
 
 export const metadata: Metadata = {
   title: "TYPE MASTER",
@@ -15,17 +13,11 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="ja">
       <body>
-        <ChakraProvider>
-          <Box minH="100vh" display="flex" flexDirection="column" backgroundImage={background.src}>
-            <Header />
-            <Box flex="1" py={2}>
-              {children}
-            </Box>
-            <Footer />
-          </Box>
-        </ChakraProvider>
+        <Header />
+        <div className="children">{children}</div>
+        <Footer />
       </body>
     </html>
   );

@@ -0,0 +1,8 @@
+.banner {
+  padding-left: 5px;
+  padding-top: 8px;
+
+  img {
+    height: 54px;
+  }
+}
@@ -0,0 +1,28 @@
+@use "../color.scss";
+
+.button {
+  margin: 0 10px;
+  padding: 10px 20px;
+  color: color.$white;
+  background-color: color.$blue-800;
+  font-size: 18px;
+  border: 0;
+  border-radius: 4px;
+  float: left;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.2s 0s ease;
+
+  &:hover {
+    background-color: color.$blue-500;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: color.$blue-800;
+    }
+  }
+}
@@ -0,0 +1,28 @@
+@use "../color.scss";
+
+.button {
+  width: 60px;
+  height: 50px;
+  padding: 13px 18px;
+  color: color.$white;
+  background-color: color.$blue-800;
+  border-radius: 4px;
+  float: left;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.2s 0s ease;
+
+  &:hover {
+    background-color: color.$blue-500;
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: default;
+
+    &:hover {
+      background-color: color.$blue-800;
+    }
+  }
+}
@@ -0,0 +1,7 @@
+@use "../color.scss";
+
+.separator {
+  width: 100%;
+  height: 2px;
+  background-color: color.$white;
+}
@@ -0,0 +1,12 @@
+$black: #000;
+$white: #fff;
+$red-800: #c62828;
+$yellow-500: #ffeb3b;
+$blue-500: #2196f3;
+$blue-800: #1565c0;
+$gray-300: #e0e0e0;
+$gray-500: #9e9e9e;
+$gray-800: #424242;
+$gray-900: #212121;
+$bluegray-800: #37474f;
+$bluegray-900: #263238;
@@ -0,0 +1,91 @@
+@use "color.scss";
+
+.modal {
+  .overlay {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: color.$black;
+    opacity: 0.5;
+    z-index: 99;
+  }
+
+  .content {
+    width: 600px;
+    height: 300px;
+    position: fixed;
+    left: calc(50% - 300px);
+    top: calc(50% - 150px);
+    background-color: color.$white;
+    border-radius: 4px;
+    z-index: 100;
+
+    .header {
+      width: calc(100% - 40px);
+      position: absolute;
+      left: 20px;
+      top: 18px;
+      font-size: 20px;
+      font-weight: bold;
+      border-radius: 4px;
+    }
+
+    .body {
+      width: calc(100% - 40px);
+      position: absolute;
+      left: 20px;
+      top: 64px;
+      font-size: 18px;
+
+      input[type="text"] {
+        padding: 10px;
+        font-size: 18px;
+        border: solid 1px color.$gray-500;
+        border-radius: 4px;
+      }
+    }
+
+    .footer {
+      overflow: hidden;
+      position: absolute;
+      right: 20px;
+      bottom: 20px;
+
+      .button {
+        height: 40px;
+        margin-left: 10px;
+        padding: 7px 40px;
+        font-size: 18px;
+        border-radius: 4px;
+        text-align: center;
+        user-select: none;
+        cursor: pointer;
+        float: left;
+        border: none;
+        outline: none;
+        appearance: none;
+        transition: all 0.2s 0s ease;
+      }
+
+      .blue {
+        color: color.$white;
+        background-color: color.$blue-800;
+
+        &:hover {
+          background-color: color.$blue-500;
+        }
+      }
+
+      .gray {
+        color: color.$black;
+        background-color: color.$white;
+
+        &:hover {
+          background-color: color.$gray-300;
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,3 @@
+.brand-text {
+  padding-left: 5px;
+}
@@ -0,0 +1,4 @@
+.button {
+  margin-bottom: 10px;
+  cursor: pointer;
+}
@@ -0,0 +1 @@
+@use "../modal.scss";
@@ -0,0 +1,3 @@
+.button {
+  cursor: pointer;
+}
@@ -0,0 +1 @@
+@use "../modal.scss";
@@ -0,0 +1,4 @@
+.button {
+  margin-bottom: 10px;
+  cursor: pointer;
+}
@@ -0,0 +1,9 @@
+@use "../color.scss";
+
+.head th {
+  padding: 6px 0;
+  color: color.$white;
+  background-color: color.$blue-800;
+  font-size: 18px;
+  font-weight: bold;
+}
@@ -0,0 +1,28 @@
+@use "../color.scss";
+
+.row {
+  background-color: color.$gray-900;
+  color: color.$white;
+
+  td {
+    padding: 12px 0;
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .rank {
+    color: color.$white;
+    background-color: color.$blue-800;
+    font-weight: bold;
+    outline: 10px solid color.$gray-900;
+    outline-offset: -10px;
+  }
+
+  &:nth-child(odd) {
+    background-color: color.$gray-800;
+
+    .rank {
+      outline: 10px solid color.$gray-800;
+    }
+  }
+}
@@ -0,0 +1,38 @@
+@use "../color.scss";
+
+.user-card {
+  width: 360px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: color.$blue-800;
+  overflow: hidden;
+
+  .left {
+    width: 70px;
+    float: left;
+
+    img {
+      width: 70px;
+    }
+  }
+
+  .right {
+    width: calc(100% - 70px);
+    padding-left: 15px;
+    float: right;
+
+    .name {
+      padding-top: 10px;
+      color: color.$white;
+      font-size: 18px;
+      font-weight: bold;
+      text-overflow: ellipsis;
+    }
+
+    .number {
+      color: color.$white;
+      font-size: 14px;
+    }
+  }
+}
@@ -0,0 +1,13 @@
+@use "../color.scss";
+
+.footer {
+  width: 100%;
+  height: 60px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+
+  .brand-text {
+    background-color: color.$blue-800;
+  }
+}
@@ -0,0 +1,10 @@
+@use "../color.scss";
+
+.header {
+  width: 100%;
+  height: 70px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background-color: color.$bluegray-800;
+}
@@ -0,0 +1,11 @@
+.menu {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .container {
+    display: block;
+  }
+}
@@ -0,0 +1,4 @@
+.ranking {
+  width: 80%;
+  margin: 0 10%;
+}