Emotions and Music 5
2022. 7. 3. 01:01ㆍProject/감정분석과 노래 추천
728x90
반응형
코드
- 로그아웃화면 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<link rel="favicon" href="{{ url_for('static', filename='image/favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/btn_style_1.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/hr_style.scss') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/fade_in_style.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,900">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<style>
.hidden {
border-style: solid;
border-color: rgb(211, 211, 211);
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}
</style>
<style>
input::placeholder {
color: rgb(180, 180, 180);
}
textarea::placeholder {
color: rgb(180, 180, 180);
font-size:20px;
}
</style>
<title>
: 오늘_홈</title>
</head>
<body>
<div class="container" style="position:relative; z-index:2;">
<div id="header">
<nav>
<div class="logo">
<a href="/index"><img src="{{ url_for('static', filename='images/dsBuffer.bmp.png') }}"></a>
</div>
<ul>
<li>
<a href="/info">INFO</a>
</li>
</ul>
</nav>
</div>
</div>
<script type=" text/javascript ">
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('#header').addClass('active');
} else {
$('#header').removeClass('active');
}
});
</script>
<h1>
<div style="text-align:center" class="fade-in-box">
<div class="content">
<button type="button" style="outline:hidden; border:hidden; background-color:white;">
<a href="/info"><img src="{{ url_for('static', filename='images/dsBuffer.bmp.png') }}" class="fade-in-box"></a>
</button>
</div>
</div>
<div style="text-align:center">
<p style="color:rgb(192, 192, 192);">
<div class="fade-in-box">
<h2>: 오늘</h2>
</div>
</p>
</div>
</h1>
<div style="text-align:center">
<h3>
<p style="color:rgb(92, 92, 92);">
<div class="fade-in-box">
<h1>당신의 하루는 어떠셨나요 ?</h1>
</div>
</p>
</h3>
</div>
{% if not session['userid'] %}
<div style="text-align:center; "><br>
<div class="fade-in-box ">
<br>
<br>
<button type="button" class="custom-btn btn-11 " onclick="location.href='/register' ">등록하기</button>
<button type="button" class="custom-btn btn-11 " onclick="location.href='/login' ">로그인</button>
</div>
</div>
{% else %}
<form name="info" method="post" action="/result ">
<div style="text-align:center; "><br>
<div style="text-align:center; ">
<div style="text-align:center; ">
<button type="button" class="custom-btn btn-11 " onclick="location.href='/logout' ">로그아웃</button>
<br>
<br>
<div class="fade-in-box " style="word-break:break-all">
<label style="color:rgb(80, 80, 80); font-size:25px; " maxlength="8 ">어떤 하루를 보내셨나요?</label><br><br>
<textarea class="hidden" name="text" maxlength="999 " type="text " placeholder="여기에 입력 " style="color:rgb(100, 100, 100); width:800px; height:600px; outline:none; text-align:center;font-size:20px"></textarea>
<br><br>
<p style="color:gray; font-size:small ">1000자 이내 작성</p>
</div>
</div>
</div>
<br>
<div class="fade-in-box ">
<a href="/result">
<button type="submit " id="send " class="custom-btn btn-15 ">보내기</button>
</a>
</div>
</div>
</form>
{% endif %}
<br>
<p style="font-size:small; color:gray; ">제작 : 주재환 강경록 정유정<br><br>본 홈페이지는 저작권이 없습니다</p>
</body>
</html>- 로그인 화면 추가
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="favicon" href="{{ url_for('static', filename='image/favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/btn_style_1.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/hr_style.scss') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/fade_in_style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/info.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,900">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<style>
.hidden {
border-style: solid;
border-color: rgb(211, 211, 211);
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}
</style>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<title>: 오늘_로그인</title>
</head>
<body>
<div id="page2" class="slide-in">
<div id="page3" class="slide-in">
<div class="container" style="position:relative; z-index:2;">
<div id="header">
<nav>
<div class="logo">
<a href="/"><img src="{{ url_for('static', filename='images/dsBuffer.bmp.png') }}"></a>
</div>
<ul>
<li>
<a href="/info">INFO</a>
</li>
</ul>
</nav>
</div>
</div>
<script type=" text/javascript ">
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('#header').addClass('active');
} else {
$('#header').removeClass('active');
}
});
</script>
<a href="/"><img src="{{ url_for('static', filename='images/dsBuffer.bmp.png') }}" class="fade-in-box" style="width:125px; height:125px;"></a>
<br>
<div style="text-align:center">
<form action="/login" method="POST">
<input class="hidden" type="userid" name="userid" placeholder="Userid">
<input class="hidden" type="password" name="password" placeholder="Password">
<br><br>
<input class="custom-btn btn-11 " type="submit" value="로그인">
</form>
</div>
<a href="/index">
<img src="{{ url_for('static', filename='images/home_circle_icon_137496.png') }}" class="fade-in-box" style="width:50px; height:50px;">
<a href="/index" class="fade-in-box" style="color:gray;">처음으로</a>
</a>
<br><br>
<p style="font-size:small; color:gray;"><br>본 홈페이지는 저작권이 없습니다</p>
</div>
</div>
</body>
</html>참고
Flask강좌6 - 등록/로그인/로그아웃
지금까지 DB 검색 기능에 대해 만들었으나, 사용자 등록, 로그인, 로그아웃 처리를 위해 대대적인 수정이 있겠습니다. 1. users 테이블 구성 우선 시작은 Database 구성부터 하도록 하겠습니다. 지난 m
streamls.tistory.com
728x90
반응형
'Project > 감정분석과 노래 추천' 카테고리의 다른 글
| Emotions and Music 7 (0) | 2022.07.04 |
|---|---|
| Emotions and Music 6 (0) | 2022.07.03 |
| Emotions and Music 4 (0) | 2022.07.03 |
| Emotions and Music 3 (0) | 2022.06.28 |
| Emotions and Music 2 (0) | 2022.06.28 |