use jinja2 template engine and add about page
This commit is contained in:
parent
df363e2297
commit
6d6297c3d7
|
|
@ -1,33 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Krll URL Shortener</title>
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="static/root.css">
|
||||
<link rel="stylesheet" href="static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="input-container">
|
||||
<input id="url" placeholder="Loooooooooooong URL" />
|
||||
<button id="to-shorten-btn">Shorten</button>
|
||||
</div>
|
||||
|
||||
<div class="result-container" id="result-container">
|
||||
<p id="error">Your URL is invalid!</p>
|
||||
<p id="short-url"></p>
|
||||
<p id="copied">Copied!</p>
|
||||
<img id="qr-code" />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>스팸이나 불법적인 용도로 사용하지 말아주세요.</p>
|
||||
<p>남용 신고 이메일 <a href="mailto:maengkkong1524@naver.com">maengkkong1524@naver.com</a></p>
|
||||
</footer>
|
||||
|
||||
<script src="static/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
26
main.py
26
main.py
|
|
@ -1,7 +1,8 @@
|
|||
from fastapi import FastAPI
|
||||
from fastapi.responses import FileResponse
|
||||
from fastapi import FastAPI, Request
|
||||
from fastapi.responses import HTMLResponse
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
from fastapi.middleware.cors import CORSMiddleware
|
||||
from fastapi.templating import Jinja2Templates
|
||||
|
||||
from src.database import engine
|
||||
from src import models
|
||||
|
|
@ -12,6 +13,8 @@ models.Base.metadata.create_all(bind=engine)
|
|||
|
||||
app = FastAPI()
|
||||
|
||||
templates = Jinja2Templates(directory="templates")
|
||||
|
||||
origins = [
|
||||
"*",
|
||||
]
|
||||
|
|
@ -24,10 +27,17 @@ app.add_middleware(
|
|||
allow_headers=["*"],
|
||||
)
|
||||
|
||||
app.include_router(url_route.routes)
|
||||
app.mount("/static", StaticFiles(directory="./static"), name="static")
|
||||
|
||||
# frontend v2
|
||||
app.mount("/static", StaticFiles(directory="./frontend/static"))
|
||||
@app.get("/")
|
||||
def frontend():
|
||||
return FileResponse("./frontend/index.html")
|
||||
|
||||
@app.get("/", response_class=HTMLResponse)
|
||||
def index(request: Request):
|
||||
return templates.TemplateResponse(request=request, name="index.html")
|
||||
|
||||
|
||||
@app.get("/about", response_class=HTMLResponse)
|
||||
def about(request: Request):
|
||||
return templates.TemplateResponse(request=request, name="about.html")
|
||||
|
||||
|
||||
app.include_router(url_route.routes)
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@ fastapi[all]
|
|||
gunicorn
|
||||
sqlalchemy
|
||||
psycopg2
|
||||
python-dotenv
|
||||
python-dotenv
|
||||
jinja2
|
||||
12
static/about/style.css
Normal file
12
static/about/style.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
main {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -19,7 +19,39 @@
|
|||
--border-highlight-color: darkgray;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
background-color: var(--background-color);
|
||||
padding-top: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 3px 0;
|
||||
font-size: 14px;
|
||||
color: var(--footer-text-color);
|
||||
}
|
||||
|
||||
footer p a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1,9 +1,5 @@
|
|||
main {
|
||||
padding-top: 100px;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
align-items: center;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
|
|
@ -70,21 +66,4 @@ main {
|
|||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 3px 0;
|
||||
font-size: 14px;
|
||||
color: var(--footer-text-color);
|
||||
}
|
||||
|
||||
footer p a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
34
templates/about.html
Normal file
34
templates/about.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
{% extends "layout.html" %}
|
||||
{% block title %}Krll - URL Shortener{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='/about/style.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<section>
|
||||
<h2>About Krll</h2>
|
||||
<p>Krll은 개인정보 수집 없이 URL을 단축하는 서비스입니다. 방해꾼 없이 빠르게 URL을 단축하고 공유하세요.</p>
|
||||
|
||||
<h2>특징</h2>
|
||||
<ul>
|
||||
<li>개인정보 수집과 광고가 없습니다.</li>
|
||||
<li>단축 시 QR 코드가 함께 생성되어 다른 디바이스로 빠르게 공유할 수 있습니다.</li>
|
||||
<li>크롬, 파이어폭스 확장을 설치하여 웹사이트 내의 하이퍼링크를 우클릭 후 메뉴 선택 만으로 빠르게 단축할 수 있습니다.</li>
|
||||
</ul>
|
||||
|
||||
<h2>브라우저 확장</h2>
|
||||
<p><a href="https://github.com/sunwoo1524/krll-chrome-extension">Chrome(스토어에 올라와있지 않아 직접 압축 파일로 다운로드하고 설치해야합니다.)</a></p>
|
||||
<p><a href="https://addons.mozilla.org/ko/firefox/addon/krll-url-shortener/">Firefox</a></p>
|
||||
|
||||
<h2>규칙</h2>
|
||||
<p>이것들을 막을 방법은 없지만 안정적인 서비스 운영을 위해서 따라주세요.</p>
|
||||
<ul>
|
||||
<li>대한민국 법에 저촉되는 링크를 단축하지 마세요.</li>
|
||||
<li>스팸을 위해서 사용하지 마세요.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock %}
|
||||
25
templates/index.html
Normal file
25
templates/index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{% extends "layout.html" %}
|
||||
{% block title %}Krll - URL Shortener{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='/style.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<div class="input-container">
|
||||
<input id="url" placeholder="Loooooooooooong URL" />
|
||||
<button id="to-shorten-btn">Shorten</button>
|
||||
</div>
|
||||
|
||||
<div class="result-container" id="result-container">
|
||||
<p id="error">Your URL is invalid!</p>
|
||||
<p id="short-url"></p>
|
||||
<p id="copied">Copied!</p>
|
||||
<img id="qr-code" />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="{{ url_for('static', path='/script.js') }}"></script>
|
||||
{% endblock %}
|
||||
20
templates/layout.html
Normal file
20
templates/layout.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
{% block head %}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='/root.css') }}">
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<footer>
|
||||
<p>스팸이나 불법적인 용도로 사용하지 말아주세요.</p>
|
||||
<p><a href="/about">About Krll</a> · <a href="mailto:maengkkong1524@naver.com">Contact</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue