Merge branch 'development' into feature/classes-index

Author: NEKOYASAN

src/assets/svgs/prj_logo.svg

@@ -0,0 +1,60 @@
+<template>
+  <button :class="`ActionButton ActionButton-${theme}`" @click="onClick">
+    <span>{{ text }}</span>
+  </button>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+type Theme = 'primary' | 'secondary' | 'border' | 'transparent'
+
+@Component
+export default class ActionButton extends Vue {
+  @Prop({ default: 'primary' })
+  theme!: Theme
+
+  @Prop({ default: '' })
+  text!: string | undefined
+
+  onClick(): void {
+    this.$router.push('/')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ActionButton {
+  width: 100%;
+  border-radius: 3em;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 12px 16px;
+
+  &-primary {
+    background-color: $color-yellow;
+    color: $color-gray;
+  }
+
+  &-secondary {
+    background-color: $color-white;
+    color: $color-gray;
+  }
+
+  &-border {
+    background-color: $color-white;
+    border: 1px solid $color-base-color-01;
+    color: $color-base-color-01;
+    box-shadow: none;
+  }
+
+  &-transparent {
+    border: 1px solid $color-white;
+    color: $color-white;
+    box-shadow: none;
+  }
+}
+</style>

src/components/ActionButton.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-app>
+    <v-overlay :value="loading" color="#0071C2" opacity="1" z-index="9999">
+      <div class="loader">
+        Loading
+      </div>
+    </v-overlay>
+    <v-app-bar fixed app class="bar" elevation="0">
+      <HeaderLogo />
+      <v-spacer />
+      <v-btn outlined rounded color="#0071C2">
+        <v-icon left>mdi-arrow-left</v-icon>
+        もどる
+      </v-btn>
+    </v-app-bar>
+    <v-content class="content">
+      <v-container class="px-4 py-8">
+        <nuxt />
+      </v-container>
+    </v-content>
+  </v-app>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import HeaderLogo from '@/assets/svgs/header_logo.svg'
+
+type LocalData = {
+  loading: boolean
+}
+
+export default Vue.extend({
+  components: { HeaderLogo },
+  data(): LocalData {
+    return {
+      loading: true
+    }
+  },
+  mounted(): void {
+    this.loading = false
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.date-icon {
+  margin-right: 15px;
+}
+.bar {
+  background-color: rgba(0, 0, 0, 0);
+  color: #fff;
+  text-align: center;
+}
+.content {
+  background-color: $color-base-color-01;
+}
+.loader {
+  color: $color-white;
+}
+</style>

src/layouts/simple.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="MainPage">
+    <div class="Logo-outer">
+      <prj-logo class="Logo" />
+    </div>
+    <div class="PolicyText-outer">
+      <p>
+        一般社団法人コード・フォー・ジャパン（以下、「弊団体」といいます）は、個人情報に関する法令を遵守し、個人情報の適切な取り扱いを実現致します。
+      </p>
+      <p>
+        なお、弊団体が、参加者等（弊団体が運営するイベントやWebページ等への参加者や訪問者をいいます。以下同じ。）から取得した個人情報は、本プライバシーポリシーに従って管理され、参加者等は、弊団体が提供する各種イベントやWebページ（以下、総称して「弊社イベント等」という）を利用する際には、本プライバシーポリシーに定める内容を理解し、これに同意した上で利用するものとします。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import PrjLogo from '@/assets/svgs/prj_logo.svg'
+
+export default Vue.extend({
+  components: { PrjLogo },
+  layout: 'simple'
+})
+</script>
+
+<style lang="scss" scoped>
+.MainPage {
+  background-color: $color-white;
+  border-radius: 14px;
+  padding: 16px;
+}
+.Logo-outer {
+  display: flex;
+  justify-content: center;
+}
+.Logo {
+  width: 115px;
+}
+.PolicyText-outer {
+  background-color: $color-back-gray;
+  border-radius: 14px;
+  padding: 16px;
+}
+</style>