신은섭(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
# https://docs.djangoproject.com/en/2.0/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# Login redirect
......
......@@ -52,4 +52,5 @@ h1, h2, h3, h4 {
.post h1 a, .post h1 a:visited {
color: #000000;
}
\ No newline at end of file
}
......
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
* {
font-family: 'Nanum Gothic';
}
a {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #30488F;
text-decoration: none;
cursor: pointer;
}
h1 {
color: #4886DB;
font-family: 'Lobster';
}
body {
padding-left: 15px;
background-color: #EDE9F3;
}
.page-header {
background-color: #ff9400;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
color: #ffffff;
font-size: 36pt;
text-decoration: none;
}
.navbar-default {
background-color :#142042;
border-color :#000000;
}
.navbar-default .navbar-brand {
color: #EDE9F3;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus, {
color:#4886DB;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color :white;
background-color:#30488F;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color:#4886DB;
}
.navbar-default .navbar-nav > li > a {
color:#EDE9F3;
}
#footer {
position:fixed;
left:0px;
bottom:0px;
height:60px;
width:100%;
background:#142042;
color: white;
padding: 10px;
}
#footer p {
text-align: right;
color: #bbbbbb;
}
\ 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.
var LoginModalController = {
tabsElementName: ".logmod__tabs li",
tabElementName: ".logmod__tab",
inputElementsName: ".logmod__form .input",
hidePasswordName: ".hide-password",
inputElements: null,
tabsElement: null,
tabElement: null,
hidePassword: null,
activeTab: null,
tabSelection: 0, // 0 - first, 1 - second
findElements: function () {
var base = this;
base.tabsElement = $(base.tabsElementName);
base.tabElement = $(base.tabElementName);
base.inputElements = $(base.inputElementsName);
base.hidePassword = $(base.hidePasswordName);
return base;
},
setState: function (state) {
var base = this,
elem = null;
if (!state) {
state = 0;
}
if (base.tabsElement) {
elem = $(base.tabsElement[state]);
elem.addClass("current");
$("." + elem.attr("data-tabtar")).addClass("show");
}
return base;
},
getActiveTab: function () {
var base = this;
base.tabsElement.each(function (i, el) {
if ($(el).hasClass("current")) {
base.activeTab = $(el);
}
});
return base;
},
addClickEvents: function () {
var base = this;
base.hidePassword.on("click", function (e) {
var $this = $(this),
$pwInput = $this.prev("input");
if ($pwInput.attr("type") == "password") {
$pwInput.attr("type", "text");
$this.text("Hide");
} else {
$pwInput.attr("type", "password");
$this.text("Show");
}
});
base.tabsElement.on("click", function (e) {
var targetTab = $(this).attr("data-tabtar");
e.preventDefault();
base.activeTab.removeClass("current");
base.activeTab = $(this);
base.activeTab.addClass("current");
base.tabElement.each(function (i, el) {
el = $(el);
el.removeClass("show");
if (el.hasClass(targetTab)) {
el.addClass("show");
}
});
});
base.inputElements.find("label").on("click", function (e) {
var $this = $(this),
$input = $this.next("input");
$input.focus();
});
return base;
},
initialize: function () {
var base = this;
base.findElements().setState().getActiveTab().addClickEvents();
}
};
$(document).ready(function() {
LoginModalController.initialize();
});
\ No newline at end of file
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
\ No newline at end of file
{% extends "website/baseline.html" %}
{% block content %}
<style type="text/css">
.login-form {
width: 340px;
margin: 50px auto;
}
.login-form form {
margin-bottom: 15px;
background: #BCD8F2;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.login-form h2 {
margin: 0 0 15px;
font-weight:bold;
}
.form-control, .btn {
min-height: 38px;
border-radius: 2px;
}
.btn {
font-size: 15px;
font-weight: bold;
}
a {
color: #3A5AC1;
}
table {
border-spacing: 10px;
border-collapse: separate;
}
</style>
<div class="login-form">
<form action="{% url 'login' %}" method="post">
{% csrf_token %}
<h2 class="text-center">Log in</h2>
<table>
<tr>
<td>Username </td>
<td>{{ form.username }}</td>
</tr>
<tr>
<td>Password </td>
<td>{{ form.password }}</td>
</tr>
</table>
<br>
<input type="submit" class="btn btn-primary btn-block" value="Login"role="button"/>
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
<p class="text-center"><a href="{% url 'signup' %}">Create an Account</a></p>
</div>
{% if form.errors %}
<p>이름과 비밀번호가 일치하지 않습니다. 다시 시도해주세요.</p>
<p style="text-align: center">이름과 비밀번호가 일치하지 않습니다. 다시 시도해주세요.</p>
{% endif %}
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<table>
<tr>
<td>{{ form.username.label_tag }}</td>
<td>{{ form.username }}</td>
</tr>
<tr>
<td>{{ form.password.label_tag }}</td>
<td>{{ form.password }}</td>
</tr>
</table>
<input type="submit" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</form>
{% endblock %}
\ No newline at end of file
......
{% extends 'website/baseline.html' %} {% block content %}
<h2>Sign up</h2>
<form method="post">
{% csrf_token %} {% for field in form %}
<p>
{{ field.label_tag }}
<br> {{ field }} {% if field.help_text %}
<small style="color: grey">{% autoescape off %}{{ field.help_text }}{% endautoescape %}</small>
{% endif %} {% for error in field.errors %}
<p style="color: red">{{ error }}</p>
{% endfor %}
</p>
{% endfor %}
<button type="submit">Sign up</button>
</form>
<style type="text/css">
.signup-form {
width: 600px;
margin: 50px auto;
}
.signup-form form {
margin-bottom: 15px;
background: #BCD8F2;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
margin: 0 0 15px;
font-weight:bold;
}
</style>
<div class="signup-form">
<form method="post">
<h2 class="text-center">Sign up</h2>
{% csrf_token %} {% for field in form %}
<p>
{{ field.label_tag }}
<br> {{ field }} {% if field.help_text %}
<small style="color: grey">{% autoescape off %}{{ field.help_text }}{% endautoescape %}</small>
{% endif %} {% for error in field.errors %}
<p style="color: red">{{ error }}</p>
{% endfor %}
</p>
{% endfor %}
<button type="submit" class="btn btn-primary btn-block">Sign up</button>
</form>
</div>
{% endblock %}
\ No newline at end of file
......
{% extends 'website/baseline.html' %}
{% load staticfiles %}
{% block content %}
<style type="text/css">
.jumbotron{
background-image: url('{% static "images/cloudco.jpg"%}');
background-size: cover;
background : contain;
text-shadow: black 0.2em 0.2em 0.2em;
color : white;
height: 550px;
}
</style>
<div class="container">
<div class="jumbotron">
<h1 class="text-center">D.cloud를 소개합니다.</h1>
<p class="text-center">D.cloud는 클라우드 사이트입니다.</p>
<br>
<p class="text-center"><a class= "btn btn-primary btn-lg" href="#" role ="button">내 클라우드로 가기</a></p>
</div>
</div>
{% endblock %}
\ No newline at end of file
{% load staticfiles %}
<html>
<header>
<title>D.cloud</title>
<meta charset="utf-8">
<meta name = "viewport" content="width=device-width", inital-scale="1">
<link rel="stylesheet" href='{% static "css/bootstrap.css"%}'>
<link rel="stylesheet" href='{% static "css/style.css"%}'>
</header>
<body>
<div class="page-header">
{% if user.is_authenticated %}
<p class="top-menu">Hello {{ user.username }} <small>(<a href="{% url 'logout' %}">Log out</a>)</small></p>
{% else %}
<a href="{% url 'login' %}" class="top-menu">Log in<span class="glyphicon glyphicon-lock"></span></a>
{% endif %}
<h1><a href="/">D.cloud</a></h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle= "collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded=false>
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Dcloud</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home<span class="sr-only"></span></a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role= "button" aria-haspopup="true" aria-expanded="false">Technology<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">c언어</a></li>
<li><a href="#">java</a></li>
<li><a href="#">android</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<p class="top-menu">Hello {{ user.username }} <small>(<a href="{% url 'logout' %}">Logout</a>)</small></p>
{% else %}
<li class="dropdown">
<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>
<ul class="dropdown-menu">
<li><a href="{% url 'login' %}">Login</a></li>
<li><a href="{% url 'signup' %}">SignUp</a></li>
</ul>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="content">
{% block content %}
{% endblock %}
......@@ -18,5 +55,14 @@
<div class="page-footer">
</div>
<footer id="footer">
<div>
<p>2016104096 강수빈</p>
<p>2015104184 신은섭</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src='{% static "js/bootstrap.js"%}'></script>
</body>
</html>
\ No newline at end of file
......
{% extends 'website/baseline.html' %}
{% load staticfiles %}
{% block content %}
<h1> Hello </h1>
<style type="text/css">
.jumbotron{
background-image: url('{% static "images/cloudco.jpg"%}');
background-size: cover;
background : contain;
text-shadow: black 0.2em 0.2em 0.2em;
color : white;
height: 550px;
}
</style>
<div class="container">
<div class="jumbotron">
<h1 class="text-center">D.cloud를 소개합니다.</h1>
<p class="text-center">D.cloud는 클라우드 사이트입니다.</p>
<br>
{% if user.is_authenticated %}
<p class="text-center"><a class= "btn btn-primary btn-lg" href="{% url 'file_list' %}" role ="button">내 클라우드로 가기</a></p>
{% else %}
<p class="text-center"><a class= "btn btn-primary btn-lg" href="{% url 'login' %}" role ="button">내 클라우드로 가기</a></p>
{% endif %}
</div>
</div>
{% endblock %}
\ No newline at end of file
......