diff --git a/frontend/index.html b/frontend/index.html deleted file mode 100644 index ee2c3ca..0000000 --- a/frontend/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - Krll URL Shortener - - - - - -
-
- - -
- -
-

Your URL is invalid!

-

-

Copied!

- -
-
- - - - - - \ No newline at end of file diff --git a/main.py b/main.py index 6c4c352..44feff2 100644 --- a/main.py +++ b/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) diff --git a/requirements.txt b/requirements.txt index 2e7d16f..176e1ff 100644 --- a/requirements.txt +++ b/requirements.txt @@ -2,4 +2,5 @@ fastapi[all] gunicorn sqlalchemy psycopg2 -python-dotenv \ No newline at end of file +python-dotenv +jinja2 \ No newline at end of file diff --git a/static/about/style.css b/static/about/style.css new file mode 100644 index 0000000..9f768c6 --- /dev/null +++ b/static/about/style.css @@ -0,0 +1,12 @@ +main { + align-items: center; +} + +section { + width: 90%; + max-width: 600px; +} + +a { + text-decoration: none; +} \ No newline at end of file diff --git a/frontend/static/root.css b/static/root.css similarity index 58% rename from frontend/static/root.css rename to static/root.css index 6c617a8..cf6722f 100644 --- a/frontend/static/root.css +++ b/static/root.css @@ -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; } \ No newline at end of file diff --git a/frontend/static/script.js b/static/script.js similarity index 100% rename from frontend/static/script.js rename to static/script.js diff --git a/frontend/static/style.css b/static/style.css similarity index 78% rename from frontend/static/style.css rename to static/style.css index 37edbd4..440f791 100644 --- a/frontend/static/style.css +++ b/static/style.css @@ -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; } \ No newline at end of file diff --git a/templates/about.html b/templates/about.html new file mode 100644 index 0000000..4fcf003 --- /dev/null +++ b/templates/about.html @@ -0,0 +1,34 @@ +{% extends "layout.html" %} +{% block title %}Krll - URL Shortener{% endblock %} + +{% block head %} +{{ super() }} + +{% endblock %} + +{% block content %} +
+
+

About Krll

+

Krll은 개인정보 수집 없이 URL을 단축하는 서비스입니다. 방해꾼 없이 빠르게 URL을 단축하고 공유하세요.

+ +

특징

+ + +

브라우저 확장

+

Chrome(스토어에 올라와있지 않아 직접 압축 파일로 다운로드하고 설치해야합니다.)

+

Firefox

+ +

규칙

+

이것들을 막을 방법은 없지만 안정적인 서비스 운영을 위해서 따라주세요.

+ +
+
+{% endblock %} diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..14f4e73 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,25 @@ +{% extends "layout.html" %} +{% block title %}Krll - URL Shortener{% endblock %} + +{% block head %} +{{ super() }} + +{% endblock %} + +{% block content %} +
+
+ + +
+ +
+

Your URL is invalid!

+

+

Copied!

+ +
+
+ + +{% endblock %} diff --git a/templates/layout.html b/templates/layout.html new file mode 100644 index 0000000..e64d2b1 --- /dev/null +++ b/templates/layout.html @@ -0,0 +1,20 @@ + + + + {% block head %} + + + {% block title %}{% endblock %} + + + {% endblock %} + + + {% block content %}{% endblock %} + + + + \ No newline at end of file