use jinja2 template engine and add about page

This commit is contained in:
sunwoo1524 2024-02-19 20:43:39 +09:00
parent df363e2297
commit 6d6297c3d7
10 changed files with 143 additions and 63 deletions

View file

@ -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
View file

@ -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)

View file

@ -3,3 +3,4 @@ gunicorn
sqlalchemy sqlalchemy
psycopg2 psycopg2
python-dotenv python-dotenv
jinja2

12
static/about/style.css Normal file
View file

@ -0,0 +1,12 @@
main {
align-items: center;
}
section {
width: 90%;
max-width: 600px;
}
a {
text-decoration: none;
}

View file

@ -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;
} }

View file

@ -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
View 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
View 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
View 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>