Login Page with static file - pai-plznw4me/django-initializer GitHub Wiki
- prev: login logout ์ ์์์ผ ํฉ๋๋ค
# settings.py
...
STATICFILES_DIRS = [
str(BASE_DIR.joinpath('static'))
]
STATIC_URL = '/static/'์ ์ฝ๋ ์์ฑ์ project level์ static file ์ project level ์์ ์ฐพ์
|-manage.py
|-static # <- ์ฌ๊ธฐ๋ฅผ ๊ธฐ๋ณธ ๊ฒฝ๋ก๋ก ์ธ์งํจ
|-registration
- ์ค์ ์ ์ผ๋ก ๋ณด์์ผ ํ ์ ์
static tag์ฌ์ฉ์ ๊ฒฝ๋ก ์ง์ ๋ฐฉ๋ฒ์ ๋ํ ๋ถ๋ถ์ ๋๋ค.
|-manage.py
|-static
|-registration # <- ์ฌ๊ธฐ ์์ ์์๋ registration ํด๋๋ฅผ ํ๋๋ ๋ง๋ค์ด ์ฌ์ฉ
์ฝ๋
<!doctype html>
<html class="no-js" lang="">
<head>
{% load static %}
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>AKKHOR | Login</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="{% static 'registration/img/favicon.png' %}">
<!-- Normalize CSS -->
<link rel="stylesheet" href="{% static 'registration/css/normalize.css' %}">
<!-- Main CSS -->
<link rel="stylesheet" href="{% static 'registration/css/main.css' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'registration/css/bootstrap.min.css' %}">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="{% static 'registration/css/all.min.css' %}">
<!-- Flaticon CSS -->
<link rel="stylesheet" href="{% static 'registration/fonts/flaticon.css' %}">
<!-- Animate CSS -->
<link rel="stylesheet" href="{% static 'registration/css/animate.min.css' %}">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'registration/css/style.css' %}">
<!-- Modernize js -->
<script src="{% static 'registration/js/modernizr-3.6.0.min.js' %}"></script>
</head>
<body>
<!-- Preloader Start Here -->
<div id="preloader"></div>
<!-- Preloader End Here -->
<!-- Login Page Start Here -->
<div class="login-page-wrap">
<div class="login-page-content">
<div class="login-box">
<div class="item-logo">
<img src="{% static 'registration/img/logo2.png' %}" alt="logo">
</div>
<form action="{% url 'login' %}" class="login-form" method="post">
{% csrf_token %}
<div class="form-group">
<label>Username</label>
<input type="text" placeholder="Enter username" class="form-control" name="username">
<i class="far fa-envelope"></i>
</div>
<div class="form-group">
<label>Password</label>
<input type="text" placeholder="Enter password" class="form-control" name="password">
<i class="fas fa-lock"></i>
</div>
<div class="form-group d-flex align-items-center justify-content-between">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="remember-me">
<label for="remember-me" class="form-check-label">Remember Me</label>
</div>
<a href="#" class="forgot-btn">Forgot Password?</a>
</div>
<div class="form-group">
<button type="submit" class="login-btn">Login</button>
</div>
</form>
<div class="login-social">
<p>or sign in with</p>
<ul>
<li><a href="#" class="bg-fb"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="bg-twitter"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="bg-gplus"><i class="fab fa-google-plus-g"></i></a></li>
<li><a href="#" class="bg-git"><i class="fab fa-github"></i></a></li>
</ul>
</div>
</div>
{# <div class="sign-up">Don't have an account ? <a href="{% url 'signup' %}">Signup now!</a></div>#}
</div>
</div>
<!-- Login Page End Here -->
<!-- jquery-->
<script src="{% static 'registration/js/jquery-3.3.1.min.js' %}"></script>
<!-- Plugins js -->
<script src="{% static 'registration/js/plugins.js' %}"></script>
<!-- Popper js -->
<script src="{% static 'registration/js/popper.min.js' %}"></script>
<!-- Bootstrap js -->
<script src="{% static 'registration/js/bootstrap.min.js' %}"></script>
<!-- Scroll Up Js -->
<script src="{% static 'registration/js/scrollUp.min.js' %}"></script>
<!-- Custom Js -->
<script src="{% static 'registration/js/main.js' %}"></script>
</body>
</html>|-manage.py
|-static # <- ์ฌ๊ธฐ๋ฅผ ๊ธฐ๋ณธ ๊ฒฝ๋ก๋ก ์ธ์งํจ
|-registration
|-css
|-js
...