feat:topページ追加

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "python.pythonPath": "/Users/k20109kk/.pyenv/versions/3.7.9/bin/python"
+}

src/app/static/app_script/index.js

@@ -0,0 +1,11 @@
+$(function() {
+    $('.hamburger').click(function() {
+        $(this).toggleClass('active');
+
+        if ($(this).hasClass('active')) {
+            $('.globalMenuSp').addClass('active');
+        } else {
+            $('.globalMenuSp').removeClass('active');
+        }
+    });
+});

src/app/static/appcss/index.css

@@ -0,0 +1,132 @@
+/*　ハンバーガーボタン */
+.hamburger {
+  display : block;
+  position: fixed;
+  z-index : 3;
+  right : 32px;
+  top   : 32px;
+  width : 42px;
+  height: 42px;
+  cursor: pointer;
+  text-align: center;
+
+}
+.hamburger span {
+  display : block;
+  position: absolute;
+  width   : 30px;
+  height  : 2px ;
+  left    : 6px;
+  background : #555;
+  -webkit-transition: 0.5s all;
+  -moz-transition   : 0.5s all;
+  transition        : 0.5s all;
+}
+.hamburger span:nth-child(1) {
+  top: 10px;
+}
+.hamburger span:nth-child(2) {
+  top: 20px;
+}
+.hamburger span:nth-child(3) {
+  top: 30px;
+}
+
+/* ナビ開いてる時のボタン */
+
+.hamburger.active span:nth-child(1) {
+  top : 16px;
+  left: 6px;
+  width: 24px;
+    background : #fff;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform   : rotate(-45deg);
+  transform        : rotate(-45deg);
+}
+.hamburger.active span:nth-child(2) {
+  left: 60%;
+  opacity: 0;
+  -webkit-animation: active-btn17-bar02 .8s forwards;
+  animation: active-hamburger-bar02 .8s forwards;
+}
+@-webkit-keyframes active-hamburger-bar02 {
+  100% {
+    height: 0;
+  }
+}
+@keyframes active-hamburger-bar02 {
+  100% {
+    height: 0;
+  }
+}
+.hamburger.active span:nth-child(3) {
+  top: 16px;
+  width: 24px;
+  background : #fff;
+  -webkit-transform: rotate(45deg);
+  -moz-transform   : rotate(45deg);
+  transform        : rotate(45deg);
+}
+
+
+.hamburger::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  content: '';
+  width: 52px;
+  height: 52px;
+  margin: -32px 0 0 -32px;
+  border-radius: 50%;
+  border: 2px solid rgba(0, 0, 0, 0);
+  transition: all .75s;
+}
+.hamburger.active::after {
+  border: 2px solid #fff;
+}
+
+nav.globalMenuSp {
+  position: fixed;
+  z-index : 2;
+  top  : 0;
+  left : 0;
+  color: #fff;
+  background: rgba(0,0,0,0.7);
+  text-align: center;
+  width: 100%;
+  opacity: 0;
+  transition: opacity .6s ease, visibility .6s ease;
+}
+
+nav.globalMenuSp ul {
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+}
+
+nav.globalMenuSp ul li {
+  list-style-type: none;
+  padding: 0;
+  width: 100%;
+  transition: .4s all;
+}
+nav.globalMenuSp ul li:last-child {
+  padding-bottom: 0;
+}
+nav.globalMenuSp ul li:hover{
+  background :#ddd;
+}
+
+nav.globalMenuSp ul li a {
+  display: block;
+  color: #fff;
+  padding: 1em 0;
+  text-decoration :none;
+}
+
+/* このクラスを、jQueryで付与・削除する */
+nav.globalMenuSp.active {
+  opacity: 100;
+
+}

src/app/urls.py

@@ -3,6 +3,6 @@
 from . import views
 app_name = 'app'
 urlpatterns = [
-    path('index',views.index,name='index'),
+    path('chat',views.index,name='chat'),
     path('customer',views.send_customer,name='customer')
 ]

src/mainproject/settings.py

@@ -41,6 +41,8 @@
     'django.contrib.staticfiles',
     # accountsアプリを追加する
     'accounts.apps.AccountsConfig',
+    # topアプリを追加する
+    'top.apps.TopConfig'
 ]
 
 MIDDLEWARE = [
@@ -151,7 +153,7 @@
 # Gmailのアドレス、Gmailのアプリ用パスワードは
 # お使いのものを入力してください
 DEFAULT_FROM_EMAIL = '[email protected]'  # メールの送信元のアドレスを入力
-EMAIL_HOST = 'smtp.gmail.com'            # GmailのSMPTサーバー　　　
+EMAIL_HOST = 'smtp.gmail.com'            # GmailのSMPTサーバー
 EMAIL_PORT = 587                         # SMPTサーバーのポート番号
 EMAIL_HOST_USER = '[email protected]'     # Gmailのアドレスを入力
 EMAIL_HOST_PASSWORD = 'xxxxxxxxxxxxxxxx' # Gmailのアプリ用パスワードを入力

src/mainproject/urls.py

@@ -25,6 +25,8 @@
     # accounts.urlsへのURLパターンを追加
     path('', include('accounts.urls')),
 
+    path('', include('top.urls')),
+
     # パスワードリセットのためのURLパターン
     # PasswordResetConfirmViewがプロジェクトのurls.pyを参照するのでここに記載
     # パスワードリセット申し込みページ

src/static/app_script/index.js

@@ -0,0 +1,11 @@
+$(function() {
+    $('.hamburger').click(function() {
+        $(this).toggleClass('active');
+
+        if ($(this).hasClass('active')) {
+            $('.globalMenuSp').addClass('active');
+        } else {
+            $('.globalMenuSp').removeClass('active');
+        }
+    });
+});

src/static/appcss/index.css

@@ -0,0 +1,132 @@
+/*　ハンバーガーボタン */
+.hamburger {
+  display : block;
+  position: fixed;
+  z-index : 3;
+  right : 32px;
+  top   : 32px;
+  width : 42px;
+  height: 42px;
+  cursor: pointer;
+  text-align: center;
+
+}
+.hamburger span {
+  display : block;
+  position: absolute;
+  width   : 30px;
+  height  : 2px ;
+  left    : 6px;
+  background : #555;
+  -webkit-transition: 0.5s all;
+  -moz-transition   : 0.5s all;
+  transition        : 0.5s all;
+}
+.hamburger span:nth-child(1) {
+  top: 10px;
+}
+.hamburger span:nth-child(2) {
+  top: 20px;
+}
+.hamburger span:nth-child(3) {
+  top: 30px;
+}
+
+/* ナビ開いてる時のボタン */
+
+.hamburger.active span:nth-child(1) {
+  top : 16px;
+  left: 6px;
+  width: 24px;
+    background : #fff;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform   : rotate(-45deg);
+  transform        : rotate(-45deg);
+}
+.hamburger.active span:nth-child(2) {
+  left: 60%;
+  opacity: 0;
+  -webkit-animation: active-btn17-bar02 .8s forwards;
+  animation: active-hamburger-bar02 .8s forwards;
+}
+@-webkit-keyframes active-hamburger-bar02 {
+  100% {
+    height: 0;
+  }
+}
+@keyframes active-hamburger-bar02 {
+  100% {
+    height: 0;
+  }
+}
+.hamburger.active span:nth-child(3) {
+  top: 16px;
+  width: 24px;
+  background : #fff;
+  -webkit-transform: rotate(45deg);
+  -moz-transform   : rotate(45deg);
+  transform        : rotate(45deg);
+}
+
+
+.hamburger::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  content: '';
+  width: 52px;
+  height: 52px;
+  margin: -32px 0 0 -32px;
+  border-radius: 50%;
+  border: 2px solid rgba(0, 0, 0, 0);
+  transition: all .75s;
+}
+.hamburger.active::after {
+  border: 2px solid #fff;
+}
+
+nav.globalMenuSp {
+  position: fixed;
+  z-index : 2;
+  top  : 0;
+  left : 0;
+  color: #fff;
+  background: rgba(0,0,0,0.7);
+  text-align: center;
+  width: 100%;
+  opacity: 0;
+  transition: opacity .6s ease, visibility .6s ease;
+}
+
+nav.globalMenuSp ul {
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+}
+
+nav.globalMenuSp ul li {
+  list-style-type: none;
+  padding: 0;
+  width: 100%;
+  transition: .4s all;
+}
+nav.globalMenuSp ul li:last-child {
+  padding-bottom: 0;
+}
+nav.globalMenuSp ul li:hover{
+  background :#ddd;
+}
+
+nav.globalMenuSp ul li a {
+  display: block;
+  color: #fff;
+  padding: 1em 0;
+  text-decoration :none;
+}
+
+/* このクラスを、jQueryで付与・削除する */
+nav.globalMenuSp.active {
+  opacity: 100;
+
+}

src/top/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

src/top/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class TopConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'top'

src/top/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

src/top/templates/base.html

@@ -0,0 +1,46 @@
+    <!DOCTYPE html>
+    {% load static %}
+    <!-- settings.pyのstaticfileの設定を読み込む -->
+    <html>
+
+    <head>
+        <meta charset="utf-8">
+        <title>Online try on Service</title>
+        <link rel="stylesheet" href="{% static  appcss/index.css" %}" type="text/css">
+        <!-- STATIC_DIR/css/style.cssを読み込む -->
+        <title>{% block title %}{% endblock %}</title>
+    </header>
+    <body>
+        <header>
+            <div class="hamburger">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+
+            <nav class="globalMenuSp">
+                <ul>
+                    <li><a href="#">一覧</a></li>
+                    <li><a href="#">お気に入り</a></li>
+                    <li><a href="#">履歴</a></li>
+                    <li><a href="#">F&Q</a></li>
+                    <li><a href="#">お問い合わせ</a></li>
+                </ul>
+            </nav>
+        </header>
+
+        <!-- メインコンテンツ -->
+        <main>
+            <!-- メインコンテンツの本体部分は各ページのテンプレートで埋め込む -->
+            {% block contents %}{% endblock %}
+        </main>/header>
+
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+        <script>
+            send_customer_url = '{% url "app:customer" %}';//これはjsファイルの読み込みでdjangoのurlタグが解釈されないためあらかじめ変数として作っておく
+        </script>
+        <script src="{% static " app_script/index.js" %}"></script>
+    </body>
+
+    </html>