forked from sunwoo1524/krll
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 import FastAPI, Request
|
||||||
from fastapi.responses import FileResponse
|
from fastapi.responses import HTMLResponse
|
||||||
from fastapi.staticfiles import StaticFiles
|
from fastapi.staticfiles import StaticFiles
|
||||||
from fastapi.middleware.cors import CORSMiddleware
|
from fastapi.middleware.cors import CORSMiddleware
|
||||||
|
from fastapi.templating import Jinja2Templates
|
||||||
|
|
||||||
from src.database import engine
|
from src.database import engine
|
||||||
from src import models
|
from src import models
|
||||||
|
|
@ -12,6 +13,8 @@ models.Base.metadata.create_all(bind=engine)
|
||||||
|
|
||||||
app = FastAPI()
|
app = FastAPI()
|
||||||
|
|
||||||
|
templates = Jinja2Templates(directory="templates")
|
||||||
|
|
||||||
origins = [
|
origins = [
|
||||||
"*",
|
"*",
|
||||||
]
|
]
|
||||||
|
|
@ -24,10 +27,17 @@ app.add_middleware(
|
||||||
allow_headers=["*"],
|
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("/", response_class=HTMLResponse)
|
||||||
@app.get("/")
|
def index(request: Request):
|
||||||
def frontend():
|
return templates.TemplateResponse(request=request, name="index.html")
|
||||||
return FileResponse("./frontend/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)
|
||||||
|
|
|
||||||
|
|
@ -3,3 +3,4 @@ gunicorn
|
||||||
sqlalchemy
|
sqlalchemy
|
||||||
psycopg2
|
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;
|
--border-highlight-color: darkgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: var(--background-color);
|
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 {
|
main {
|
||||||
padding-top: 100px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction:column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 500px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container {
|
.input-container {
|
||||||
|
|
@ -71,20 +67,3 @@ main {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
font-size: 15px;
|
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