신은섭(Shin Eun Seop) / 2018-1-d.cloud

Go to a project
Toggle navigation Toggle navigation pinning
Kangsubeen
cbacc519 1 parent 9c70e498

main/login/signup ui

Expand all
Inline Side-by-side
Showing 21 changed files with 389 additions and 42 deletions
...@@ -121,7 +121,7 @@ USE_TZ = True ...@@ -121,7 +121,7 @@ USE_TZ = True
121 # https://docs.djangoproject.com/en/2.0/howto/static-files/ 121 # https://docs.djangoproject.com/en/2.0/howto/static-files/
122 122
123 STATIC_URL = '/static/' 123 STATIC_URL = '/static/'
124 - 124 +STATIC_ROOT = os.path.join(BASE_DIR, 'static')
125 125
126 # Login redirect 126 # Login redirect
127 127
......
...@@ -52,4 +52,5 @@ h1, h2, h3, h4 { ...@@ -52,4 +52,5 @@ h1, h2, h3, h4 {
52 52
53 .post h1 a, .post h1 a:visited { 53 .post h1 a, .post h1 a:visited {
54 color: #000000; 54 color: #000000;
55 -}
...\ No newline at end of file ...\ No newline at end of file
55 +}
56 +
......
1 +@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
2 +
3 +* {
4 + font-family: 'Nanum Gothic';
5 +}
6 +a {
7 + color: #ffffff;
8 + text-decoration: none;
9 +}
10 +a:hover {
11 + color: #30488F;
12 + text-decoration: none;
13 + cursor: pointer;
14 +}
15 +
16 +h1 {
17 + color: #4886DB;
18 + font-family: 'Lobster';
19 +}
20 +
21 +body {
22 + padding-left: 15px;
23 + background-color: #EDE9F3;
24 +}
25 +
26 +.page-header {
27 + background-color: #ff9400;
28 + margin-top: 0;
29 + padding: 20px 20px 20px 40px;
30 +}
31 +
32 +.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
33 + color: #ffffff;
34 + font-size: 36pt;
35 + text-decoration: none;
36 +}
37 +
38 +.navbar-default {
39 + background-color :#142042;
40 + border-color :#000000;
41 +}
42 +.navbar-default .navbar-brand {
43 + color: #EDE9F3;
44 +
45 +}
46 +
47 +.navbar-default .navbar-brand:hover,
48 +.navbar-default .navbar-brand:focus, {
49 + color:#4886DB;
50 +}
51 +.navbar-default .navbar-nav > .active > a,
52 +.navbar-default .navbar-nav > .active > a:hover,
53 +.navbar-default .navbar-nav > .active > a:focus {
54 + color :white;
55 + background-color:#30488F;
56 +}
57 +
58 +.navbar-default .navbar-nav > li > a:hover,
59 +.navbar-default .navbar-nav > li > a:focus {
60 + color:#4886DB;
61 +}
62 +
63 +.navbar-default .navbar-nav > li > a {
64 + color:#EDE9F3;
65 +}
66 +#footer {
67 + position:fixed;
68 + left:0px;
69 + bottom:0px;
70 + height:60px;
71 + width:100%;
72 + background:#142042;
73 + color: white;
74 + padding: 10px;
75 +}
76 +#footer p {
77 + text-align: right;
78 + color: #bbbbbb;
79 +}
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
1 +var LoginModalController = {
2 + tabsElementName: ".logmod__tabs li",
3 + tabElementName: ".logmod__tab",
4 + inputElementsName: ".logmod__form .input",
5 + hidePasswordName: ".hide-password",
6 +
7 + inputElements: null,
8 + tabsElement: null,
9 + tabElement: null,
10 + hidePassword: null,
11 +
12 + activeTab: null,
13 + tabSelection: 0, // 0 - first, 1 - second
14 +
15 + findElements: function () {
16 + var base = this;
17 +
18 + base.tabsElement = $(base.tabsElementName);
19 + base.tabElement = $(base.tabElementName);
20 + base.inputElements = $(base.inputElementsName);
21 + base.hidePassword = $(base.hidePasswordName);
22 +
23 + return base;
24 + },
25 +
26 + setState: function (state) {
27 + var base = this,
28 + elem = null;
29 +
30 + if (!state) {
31 + state = 0;
32 + }
33 +
34 + if (base.tabsElement) {
35 + elem = $(base.tabsElement[state]);
36 + elem.addClass("current");
37 + $("." + elem.attr("data-tabtar")).addClass("show");
38 + }
39 +
40 + return base;
41 + },
42 +
43 + getActiveTab: function () {
44 + var base = this;
45 +
46 + base.tabsElement.each(function (i, el) {
47 + if ($(el).hasClass("current")) {
48 + base.activeTab = $(el);
49 + }
50 + });
51 +
52 + return base;
53 + },
54 +
55 + addClickEvents: function () {
56 + var base = this;
57 +
58 + base.hidePassword.on("click", function (e) {
59 + var $this = $(this),
60 + $pwInput = $this.prev("input");
61 +
62 + if ($pwInput.attr("type") == "password") {
63 + $pwInput.attr("type", "text");
64 + $this.text("Hide");
65 + } else {
66 + $pwInput.attr("type", "password");
67 + $this.text("Show");
68 + }
69 + });
70 +
71 + base.tabsElement.on("click", function (e) {
72 + var targetTab = $(this).attr("data-tabtar");
73 +
74 + e.preventDefault();
75 + base.activeTab.removeClass("current");
76 + base.activeTab = $(this);
77 + base.activeTab.addClass("current");
78 +
79 + base.tabElement.each(function (i, el) {
80 + el = $(el);
81 + el.removeClass("show");
82 + if (el.hasClass(targetTab)) {
83 + el.addClass("show");
84 + }
85 + });
86 + });
87 +
88 + base.inputElements.find("label").on("click", function (e) {
89 + var $this = $(this),
90 + $input = $this.next("input");
91 +
92 + $input.focus();
93 + });
94 +
95 + return base;
96 + },
97 +
98 + initialize: function () {
99 + var base = this;
100 +
101 + base.findElements().setState().getActiveTab().addClickEvents();
102 + }
103 +};
104 +
105 +$(document).ready(function() {
106 + LoginModalController.initialize();
107 +});
...\ No newline at end of file ...\ No newline at end of file
1 +// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
2 +require('../../js/transition.js')
3 +require('../../js/alert.js')
4 +require('../../js/button.js')
5 +require('../../js/carousel.js')
6 +require('../../js/collapse.js')
7 +require('../../js/dropdown.js')
8 +require('../../js/modal.js')
9 +require('../../js/tooltip.js')
10 +require('../../js/popover.js')
11 +require('../../js/scrollspy.js')
12 +require('../../js/tab.js')
13 +require('../../js/affix.js')
...\ No newline at end of file ...\ No newline at end of file
1 {% extends "website/baseline.html" %} 1 {% extends "website/baseline.html" %}
2 2
3 {% block content %} 3 {% block content %}
4 +<style type="text/css">
5 + .login-form {
6 + width: 340px;
7 + margin: 50px auto;
8 + }
9 + .login-form form {
10 + margin-bottom: 15px;
11 + background: #BCD8F2;
12 + box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
13 + padding: 30px;
14 + }
15 + .login-form h2 {
16 + margin: 0 0 15px;
17 + font-weight:bold;
18 + }
19 + .form-control, .btn {
20 + min-height: 38px;
21 + border-radius: 2px;
22 + }
23 + .btn {
24 + font-size: 15px;
25 + font-weight: bold;
26 + }
27 + a {
28 + color: #3A5AC1;
29 + }
30 + table {
31 + border-spacing: 10px;
32 + border-collapse: separate;
33 + }
34 +</style>
35 + <div class="login-form">
36 + <form action="{% url 'login' %}" method="post">
37 + {% csrf_token %}
38 + <h2 class="text-center">Log in</h2>
39 + <table>
40 + <tr>
41 + <td>Username </td>
42 + <td>{{ form.username }}</td>
43 + </tr>
44 + <tr>
45 + <td>Password </td>
46 + <td>{{ form.password }}</td>
47 + </tr>
48 + </table>
49 + <br>
50 + <input type="submit" class="btn btn-primary btn-block" value="Login"role="button"/>
51 + <input type="hidden" name="next" value="{{ next }}" />
52 + </div>
53 + </form>
54 + <p class="text-center"><a href="{% url 'signup' %}">Create an Account</a></p>
55 + </div>
4 {% if form.errors %} 56 {% if form.errors %}
5 - <p>이름과 비밀번호가 일치하지 않습니다. 다시 시도해주세요.</p> 57 + <p style="text-align: center">이름과 비밀번호가 일치하지 않습니다. 다시 시도해주세요.</p>
6 {% endif %} 58 {% endif %}
7 -
8 - <form method="post" action="{% url 'login' %}">
9 - {% csrf_token %}
10 - <table>
11 - <tr>
12 - <td>{{ form.username.label_tag }}</td>
13 - <td>{{ form.username }}</td>
14 - </tr>
15 - <tr>
16 - <td>{{ form.password.label_tag }}</td>
17 - <td>{{ form.password }}</td>
18 - </tr>
19 - </table>
20 -
21 - <input type="submit" value="login" />
22 - <input type="hidden" name="next" value="{{ next }}" />
23 - </form>
24 {% endblock %} 59 {% endblock %}
...\ No newline at end of file ...\ No newline at end of file
......
1 {% extends 'website/baseline.html' %} {% block content %} 1 {% extends 'website/baseline.html' %} {% block content %}
2 -<h2>Sign up</h2> 2 +
3 -<form method="post"> 3 +<style type="text/css">
4 - {% csrf_token %} {% for field in form %} 4 + .signup-form {
5 - <p> 5 + width: 600px;
6 - {{ field.label_tag }} 6 + margin: 50px auto;
7 - <br> {{ field }} {% if field.help_text %} 7 + }
8 - <small style="color: grey">{% autoescape off %}{{ field.help_text }}{% endautoescape %}</small> 8 + .signup-form form {
9 - {% endif %} {% for error in field.errors %} 9 + margin-bottom: 15px;
10 - <p style="color: red">{{ error }}</p> 10 + background: #BCD8F2;
11 - {% endfor %} 11 + box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
12 - </p> 12 + padding: 30px;
13 - {% endfor %} 13 + }
14 - <button type="submit">Sign up</button> 14 + .signup-form h2 {
15 -</form> 15 + margin: 0 0 15px;
16 + font-weight:bold;
17 +
18 + }
19 + </style>
20 + <div class="signup-form">
21 + <form method="post">
22 + <h2 class="text-center">Sign up</h2>
23 + {% csrf_token %} {% for field in form %}
24 + <p>
25 + {{ field.label_tag }}
26 + <br> {{ field }} {% if field.help_text %}
27 + <small style="color: grey">{% autoescape off %}{{ field.help_text }}{% endautoescape %}</small>
28 + {% endif %} {% for error in field.errors %}
29 + <p style="color: red">{{ error }}</p>
30 + {% endfor %}
31 + </p>
32 + {% endfor %}
33 + <button type="submit" class="btn btn-primary btn-block">Sign up</button>
34 + </form>
35 + </div>
16 {% endblock %} 36 {% endblock %}
...\ No newline at end of file ...\ No newline at end of file
......
1 +{% extends 'website/baseline.html' %}
2 +{% load staticfiles %}
3 +
4 +{% block content %}
5 + <style type="text/css">
6 + .jumbotron{
7 + background-image: url('{% static "images/cloudco.jpg"%}');
8 + background-size: cover;
9 + background : contain;
10 + text-shadow: black 0.2em 0.2em 0.2em;
11 + color : white;
12 + height: 550px;
13 + }
14 + </style>
15 + <div class="container">
16 + <div class="jumbotron">
17 + <h1 class="text-center">D.cloud를 소개합니다.</h1>
18 + <p class="text-center">D.cloud는 클라우드 사이트입니다.</p>
19 + <br>
20 + <p class="text-center"><a class= "btn btn-primary btn-lg" href="#" role ="button">내 클라우드로 가기</a></p>
21 + </div>
22 + </div>
23 +{% endblock %}
...\ No newline at end of file ...\ No newline at end of file
1 +{% load staticfiles %}
1 <html> 2 <html>
2 <header> 3 <header>
3 <title>D.cloud</title> 4 <title>D.cloud</title>
5 + <meta charset="utf-8">
6 + <meta name = "viewport" content="width=device-width", inital-scale="1">
7 + <link rel="stylesheet" href='{% static "css/bootstrap.css"%}'>
8 + <link rel="stylesheet" href='{% static "css/style.css"%}'>
4 </header> 9 </header>
5 <body> 10 <body>
6 - <div class="page-header"> 11 + <nav class="navbar navbar-default">
7 - {% if user.is_authenticated %} 12 + <div class="container-fluid">
8 - <p class="top-menu">Hello {{ user.username }} <small>(<a href="{% url 'logout' %}">Log out</a>)</small></p> 13 + <div class="navbar-header">
9 - {% else %} 14 + <button type="button" class="navbar-toggle collapsed" data-toggle= "collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded=false>
10 - <a href="{% url 'login' %}" class="top-menu">Log in<span class="glyphicon glyphicon-lock"></span></a> 15 + <span class="sr-only"></span>
11 - {% endif %} 16 + <span class="icon-bar"></span>
12 - <h1><a href="/">D.cloud</a></h1> 17 + <span class="icon-bar"></span>
18 + <span class="icon-bar"></span>
19 + </button>
20 + <a class="navbar-brand" href="/">Dcloud</a>
21 + </div>
22 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
23 + <ul class="nav navbar-nav">
24 + <li class="active"><a href="/">Home<span class="sr-only"></span></a></li>
25 + <li><a href="#">About Us</a></li>
26 + <li class="dropdown">
27 + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role= "button" aria-haspopup="true" aria-expanded="false">Technology<span class="caret"></span></a>
28 + <ul class="dropdown-menu">
29 + <li><a href="#">c언어</a></li>
30 + <li><a href="#">java</a></li>
31 + <li><a href="#">android</a></li>
32 + </ul>
33 + </li>
34 + </ul>
35 + <ul class="nav navbar-nav navbar-right">
36 + {% if user.is_authenticated %}
37 + <p class="top-menu">Hello {{ user.username }} <small>(<a href="{% url 'logout' %}">Logout</a>)</small></p>
38 + {% else %}
39 + <li class="dropdown">
40 + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role= "button" aria-haspopup="true" aria-expanded="false">접속하기 <span class="glyphicon glyphicon-lock"></span><span class="caret"></span></a>
41 + <ul class="dropdown-menu">
42 + <li><a href="{% url 'login' %}">Login</a></li>
43 + <li><a href="{% url 'signup' %}">SignUp</a></li>
44 + </ul>
45 + </li>
46 + {% endif %}
47 + </ul>
48 + </div>
13 </div> 49 </div>
50 + </nav>
14 <div class="content"> 51 <div class="content">
15 {% block content %} 52 {% block content %}
16 {% endblock %} 53 {% endblock %}
...@@ -18,5 +55,14 @@ ...@@ -18,5 +55,14 @@
18 <div class="page-footer"> 55 <div class="page-footer">
19 56
20 </div> 57 </div>
58 + <footer id="footer">
59 + <div>
60 + <p>2016104096 강수빈</p>
61 + <p>2015104184 신은섭</p>
62 + </div>
63 + </footer>
64 +
65 + <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
66 + <script src='{% static "js/bootstrap.js"%}'></script>
21 </body> 67 </body>
22 </html> 68 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 {% extends 'website/baseline.html' %} 1 {% extends 'website/baseline.html' %}
2 +{% load staticfiles %}
2 3
3 {% block content %} 4 {% block content %}
4 - <h1> Hello </h1> 5 + <style type="text/css">
6 + .jumbotron{
7 + background-image: url('{% static "images/cloudco.jpg"%}');
8 + background-size: cover;
9 + background : contain;
10 + text-shadow: black 0.2em 0.2em 0.2em;
11 + color : white;
12 + height: 550px;
13 + }
14 + </style>
15 + <div class="container">
16 + <div class="jumbotron">
17 + <h1 class="text-center">D.cloud를 소개합니다.</h1>
18 + <p class="text-center">D.cloud는 클라우드 사이트입니다.</p>
19 + <br>
20 + {% if user.is_authenticated %}
21 + <p class="text-center"><a class= "btn btn-primary btn-lg" href="{% url 'file_list' %}" role ="button">내 클라우드로 가기</a></p>
22 + {% else %}
23 + <p class="text-center"><a class= "btn btn-primary btn-lg" href="{% url 'login' %}" role ="button">내 클라우드로 가기</a></p>
24 + {% endif %}
25 +
26 + </div>
27 + </div>
5 {% endblock %} 28 {% endblock %}
...\ No newline at end of file ...\ No newline at end of file
......