├── .env.example
├── .gitignore
├── .python-version
├── Procfile
├── README.md
├── app
    ├── __init__.py
    ├── config.py
    ├── library
    │   ├── __init__.py
    │   ├── helpers.py
    │   └── search.py
    ├── main.py
    ├── pages
    │   ├── about.md
    │   ├── contact.md
    │   ├── home.md
    │   ├── info.md
    │   └── portfolio.md
    └── routers
    │   ├── __init.py
    │   ├── accordion.py
    │   ├── copy_to_clipboard.py
    │   ├── flickr_search.py
    │   ├── twoforms.py
    │   ├── unsplash.py
    │   ├── unsplash_search.py
    │   └── upload.py
├── images
    ├── drag_drop.png
    └── image-1.png
├── requirements.txt
├── runtime.txt
├── static
    ├── css
    │   ├── mystyle.css
    │   ├── search_image.css
    │   └── style3.css
    ├── images
    │   ├── copy.gif
    │   ├── favicon.ico
    │   ├── image-1.png
    │   ├── logo.svg
    │   └── unsplash1.jpeg
    ├── js
    │   ├── dragdrop.js
    │   ├── flickr_search.js
    │   ├── imagehelper.js
    │   └── unsplash_search.js
    └── upload
    │   └── db0e85e8
    │       ├── cecilieo_color_picker (5).png
    │       └── cecilieo_color_picker (5).thumbnail.png
├── templates
    ├── _unsplash_search.html
    ├── accordion.html
    ├── base.html
    ├── copy_to_clipboard.html
    ├── flickr_search.html
    ├── include
    │   ├── sidebar.html
    │   └── topnav.html
    ├── page.html
    ├── twoforms.html
    ├── unsplash.html
    ├── unsplash_search.html
    └── upload.html
└── tests
    ├── __init__.py
    └── test_main.py


/.env.example:
--------------------------------------------------------------------------------
1 | unsplash_key=your-key
2 | flickr_key=your-flickr-key
3 | flickr_secret=your-flickr-secret
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # FastAPI starter
  2 | .DS_Store
  3 | /data
  4 | /tmp
  5 | 
  6 | 
  7 | 
  8 | # Byte-compiled / optimized / DLL files
  9 | __pycache__/
 10 | *.py[cod]
 11 | *$py.class
 12 | 
 13 | # C extensions
 14 | *.so
 15 | 
 16 | # Distribution / packaging
 17 | .Python
 18 | build/
 19 | develop-eggs/
 20 | dist/
 21 | downloads/
 22 | eggs/
 23 | .eggs/
 24 | lib/
 25 | lib64/
 26 | parts/
 27 | sdist/
 28 | var/
 29 | wheels/
 30 | share/python-wheels/
 31 | *.egg-info/
 32 | .installed.cfg
 33 | *.egg
 34 | MANIFEST
 35 | 
 36 | # PyInstaller
 37 | #  Usually these files are written by a python script from a template
 38 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
 39 | *.manifest
 40 | *.spec
 41 | 
 42 | # Installer logs
 43 | pip-log.txt
 44 | pip-delete-this-directory.txt
 45 | 
 46 | # Unit test / coverage reports
 47 | htmlcov/
 48 | .tox/
 49 | .nox/
 50 | .coverage
 51 | .coverage.*
 52 | .cache
 53 | nosetests.xml
 54 | coverage.xml
 55 | *.cover
 56 | *.py,cover
 57 | .hypothesis/
 58 | .pytest_cache/
 59 | cover/
 60 | 
 61 | # Translations
 62 | *.mo
 63 | *.pot
 64 | 
 65 | # Django stuff:
 66 | *.log
 67 | local_settings.py
 68 | db.sqlite3
 69 | db.sqlite3-journal
 70 | 
 71 | # Flask stuff:
 72 | instance/
 73 | .webassets-cache
 74 | 
 75 | # Scrapy stuff:
 76 | .scrapy
 77 | 
 78 | # Sphinx documentation
 79 | docs/_build/
 80 | 
 81 | # PyBuilder
 82 | .pybuilder/
 83 | target/
 84 | 
 85 | # Jupyter Notebook
 86 | .ipynb_checkpoints
 87 | 
 88 | # IPython
 89 | profile_default/
 90 | ipython_config.py
 91 | 
 92 | # pyenv
 93 | #   For a library or package, you might want to ignore these files since the code is
 94 | #   intended to run in multiple environments; otherwise, check them in:
 95 | # .python-version
 96 | 
 97 | # pipenv
 98 | #   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
 99 | #   However, in case of collaboration, if having platform-specific dependencies or dependencies
100 | #   having no cross-platform support, pipenv may install dependencies that don't work, or not
101 | #   install all needed dependencies.
102 | #Pipfile.lock
103 | 
104 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow
105 | __pypackages__/
106 | 
107 | # Celery stuff
108 | celerybeat-schedule
109 | celerybeat.pid
110 | 
111 | # SageMath parsed files
112 | *.sage.py
113 | 
114 | # Environments
115 | .env
116 | .venv
117 | env/
118 | venv/
119 | ENV/
120 | env.bak/
121 | venv.bak/
122 | 
123 | # Spyder project settings
124 | .spyderproject
125 | .spyproject
126 | 
127 | # Rope project settings
128 | .ropeproject
129 | 
130 | # mkdocs documentation
131 | /site
132 | 
133 | # mypy
134 | .mypy_cache/
135 | .dmypy.json
136 | dmypy.json
137 | 
138 | # Pyre type checker
139 | .pyre/
140 | 
141 | # pytype static type analyzer
142 | .pytype/
143 | 
144 | # Cython debug symbols
145 | cython_debug/


--------------------------------------------------------------------------------
/.python-version:
--------------------------------------------------------------------------------
1 | 3.9.6
2 | 


--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: uvicorn app.main:app --host=0.0.0.0 --port=${PORT:-5000}


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Fastapi Web Starter
 2 | 
 3 | Please read the Medium article at [https://shinichiokada.medium.com/](https://shinichiokada.medium.com/).
 4 | 
 5 | ## Overview
 6 | 
 7 | A simple website ready to deploy.
 8 | This repo includes all the file and it is ready to deploy to Heroku.
 9 | 
10 | - .env
11 | - .gitignore
12 | - app
13 | - Procfile
14 | - README.md
15 | - requirements.txt
16 | - runtime.txt
17 | - static
18 | - templates
19 | 
20 | ## Requirement
21 | 
22 | - Python 3.9.6
23 | - See requirements.txt.
24 | 
25 | ## Installation & Usage
26 | 
27 | Get your Unsplash API and put it in the `.env` file.
28 | 
29 | ```bash
30 | $ git clone git@github.com:shinokada/fastapi-webstarter-demo.git
31 | # change the directory
32 | $ cd fastapi-webstarter-demo
33 | # install packages
34 | $ pip install -r requirements.txt
35 | # start the server
36 | $ uvicorn app.main:app --reload --port 8000
37 | ```
38 | 
39 | Visit [http://127.0.0.1:8000/](http://127.0.0.1:8000/).
40 | 
41 | ![Starting](./images/image-1.png)
42 | 
43 | ## Features
44 | 
45 | - Flickr image search
46 | - Unsplash image search
47 | - Drag & Drop Form
48 | - Menu
49 | - Unsplash
50 | - Accordion
51 | - Markdown pages
52 | - Two Forms
53 | 
54 | ## Test
55 | 
56 | All tests are under `tests` directory.
57 | 
58 | ```bash
59 | # Change the directory
60 | $ cd fastapi-webstarter-demo
61 | # Run tests
62 | $ pytest -v
63 | ```
64 | 
65 | ## Author
66 | 
67 | [twitter](https://twitter.com/shinokada)
68 | 
69 | ## Licence
70 | 
71 | 【MIT License】
72 | 
73 | Copyright 2021 Shinichi Okada
74 | 
75 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
76 | 
77 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
78 | 
79 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
80 | 


--------------------------------------------------------------------------------
/app/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/app/__init__.py


--------------------------------------------------------------------------------
/app/config.py:
--------------------------------------------------------------------------------
 1 | from pydantic import BaseSettings
 2 | 
 3 | 
 4 | class Settings(BaseSettings):
 5 |     work_dir: str = 'static/upload/'
 6 |     thumb_width: int = 340
 7 |     thumb_height: int = 800
 8 |     thumb_size: tuple = (300, 500)
 9 |     max_imgWidth: int = 600
10 |     max_imgHeight: int = 800
11 | 
12 | 
13 | settings = Settings()
14 | 


--------------------------------------------------------------------------------
/app/library/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/app/library/__init__.py


--------------------------------------------------------------------------------
/app/library/helpers.py:
--------------------------------------------------------------------------------
 1 | import os.path
 2 | import uuid
 3 | from pathlib import Path
 4 | from PIL import Image
 5 | import markdown
 6 | from ..config import settings
 7 | import functools
 8 | 
 9 | 
10 | def openfile(filename):
11 |     filepath = os.path.join("app/pages/", filename)
12 |     with open(filepath, "r", encoding="utf-8") as input_file:
13 |         text = input_file.read()
14 | 
15 |     html = markdown.markdown(text)
16 |     data = {
17 |         "text": html
18 |     }
19 |     return data
20 | 
21 | 
22 | def setdimensions(winWidth, imgWidth, imgHeight):
23 |     ratio = winWidth / imgWidth
24 |     new_imgWidth = int(imgWidth * ratio * 0.8)
25 |     max_imgWidth = settings.max_imgWidth
26 |     max_imgHeight = settings.max_imgHeight
27 |     if (new_imgWidth > max_imgWidth):
28 |         new_imgWidth = max_imgWidth
29 | 
30 |     return (new_imgWidth, max_imgHeight)
31 | 
32 | 
33 | def create_workspace():
34 |     """
35 |     Return workspace path
36 |     """
37 |     # base directory
38 |     work_dir = Path(settings.work_dir)
39 |     # UUID to prevent file overwrite
40 |     request_id = Path(str(uuid.uuid4())[:8])
41 |     # path concat instead of work_dir + '/' + request_id
42 |     workspace = work_dir / request_id
43 |     if not os.path.exists(workspace):
44 |         # recursively create workdir/unique_id
45 |         os.makedirs(workspace)
46 | 
47 |     return workspace
48 | 
49 | 
50 | def thumb(myfile, winWidth, imgWidth, imgHeight):
51 |     size = setdimensions(winWidth, imgWidth, imgHeight)
52 |     # size = settings.thumb_width, settings.thumb_height
53 |     filepath, ext = os.path.splitext(myfile)
54 |     # print(ext)
55 |     im = Image.open(myfile)
56 |     im = image_transpose_exif(im)
57 |     im.thumbnail(size)
58 |     imgtype = "PNG" if ext == ".png" else "JPEG"
59 |     # print(imgtype)
60 |     im.save(filepath + ".thumbnail"+ext, imgtype)
61 | 
62 | 
63 | def image_transpose_exif(im):
64 |     """
65 |     https://stackoverflow.com/questions/4228530/pil-thumbnail-is-rotating-my-image
66 |     Apply Image.transpose to ensure 0th row of pixels is at the visual
67 |     top of the image, and 0th column is the visual left-hand side.
68 |     Return the original image if unable to determine the orientation.
69 | 
70 |     As per CIPA DC-008-2012, the orientation field contains an integer,
71 |     1 through 8. Other values are reserved.
72 | 
73 |     Parameters
74 |     ----------
75 |     im: PIL.Image
76 |        The image to be rotated.
77 |     """
78 | 
79 |     exif_orientation_tag = 0x0112
80 |     exif_transpose_sequences = [   # Val 0th row  0th col
81 |         [],  # 0 (reserved)
82 |         [],  # 1 top left
83 |         [Image.FLIP_LEFT_RIGHT],  # 2 top right
84 |         [Image.ROTATE_180],  # 3 bottom right
85 |         [Image.FLIP_TOP_BOTTOM],  # 4 bottom left
86 |         [Image.FLIP_LEFT_RIGHT, Image.ROTATE_90],  # 5 left top
87 |         [Image.ROTATE_270],  # 6 right top
88 |         [Image.FLIP_TOP_BOTTOM, Image.ROTATE_90],  # 7 right bottom
89 |         [Image.ROTATE_90],  # 8 left bottom
90 |     ]
91 | 
92 |     try:
93 |         seq = exif_transpose_sequences[im._getexif()[exif_orientation_tag]]
94 |     except Exception:
95 |         return im
96 |     else:
97 |         return functools.reduce(type(im).transpose, seq, im)
98 | 


--------------------------------------------------------------------------------
/app/library/search.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | import requests
 3 | import flickrapi
 4 | 
 5 | 
 6 | def unsplashFetch(item, page_num):
 7 |     unsplash_key = os.getenv("unsplash_key")
 8 |     param = {
 9 |         "client_id": unsplash_key,
10 |         "query": item,
11 |         "per_page": 30,
12 |         "page": page_num
13 |     }
14 |     url = "https://api.unsplash.com/search/photos/"
15 |     response = requests.get(url, param)
16 |     data = response.json()
17 |     return data
18 | 
19 | 
20 | def flickr_photos_search(item, page_num):
21 |     api_key = os.getenv("flickr_key").encode()
22 |     api_secret = os.getenv("flickr_secret").encode()
23 |     flickr = flickrapi.FlickrAPI(api_key, api_secret, format='parsed-json')
24 |     # url_sq (75x75), url_q(150x150), url_t(w:100), url_s(w:240), url_m(w:500), url_n(w:320), url_z(w:640), url_c(w:800), url_l(w:1024), url_o(w:2400)
25 |     extras = 'url_c,url_w,url_n,url_m,url_z,license,owner_name,'
26 |     license = '1,2,3,4,5,6'
27 | 
28 |     photos = flickr.photos.search(
29 |         text=item,
30 |         sort='relevance',
31 |         safe_search=1,
32 |         per_page=30,
33 |         license=license,
34 |         page=page_num,
35 |         tag_mode='all',
36 |         extras=extras
37 |     )
38 |     photo_items = photos["photos"]["photo"]
39 |     print(len(photo_items))
40 |     # selected_photos = random.sample(list(photo_items), select)
41 |     flickr_licenses: dict = {
42 |         1: "by-nc-sa",
43 |         2: "by-nc",
44 |         3: "by-nc-nd",
45 |         4: "by",
46 |         5: "by-sa",
47 |         6: "by-nd",
48 |     }
49 |     for item in photo_items:
50 |         num = int(item["license"])
51 |         # print(type(item))
52 |         item["license_name"] = flickr_licenses[num]
53 | 
54 |     return photo_items
55 | 


--------------------------------------------------------------------------------
/app/main.py:
--------------------------------------------------------------------------------
 1 | import mimetypes
 2 | from fastapi import FastAPI, Request
 3 | from fastapi.responses import HTMLResponse
 4 | from fastapi.staticfiles import StaticFiles
 5 | from fastapi.templating import Jinja2Templates
 6 | 
 7 | from .library.helpers import *
 8 | from app.routers import upload, twoforms, unsplash, unsplash_search, flickr_search, accordion, copy_to_clipboard
 9 | from dotenv import load_dotenv
10 | load_dotenv()
11 | 
12 | mimetypes.init()
13 | 
14 | app = FastAPI()
15 | 
16 | 
17 | templates = Jinja2Templates(directory="templates")
18 | 
19 | mimetypes.add_type('application/javascript', '.js')
20 | app.mount("/static", StaticFiles(directory="static"), name="static")
21 | 
22 | app.include_router(copy_to_clipboard.router)
23 | app.include_router(upload.router)
24 | app.include_router(unsplash_search.router)
25 | app.include_router(flickr_search.router)
26 | app.include_router(unsplash.router)
27 | app.include_router(twoforms.router)
28 | app.include_router(accordion.router)
29 | 
30 | 
31 | @app.get("/", response_class=HTMLResponse)
32 | async def home(request: Request):
33 |     data = openfile("home.md")
34 |     return templates.TemplateResponse("page.html", {"request": request, "data": data})
35 | 
36 | 
37 | @app.get("/page/{page_name}", response_class=HTMLResponse)
38 | async def show_page(request: Request, page_name: str):
39 |     data = openfile(page_name+".md")
40 |     return templates.TemplateResponse("page.html", {"request": request, "data": data})
41 | 


--------------------------------------------------------------------------------
/app/pages/about.md:
--------------------------------------------------------------------------------
1 | # About
2 | 
3 | 
4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit nunc, tincidunt sed tempus eget, luctus venenatis ex. Morbi et felis pharetra, rhoncus erat et, feugiat ipsum. Nunc lorem elit, pellentesque ac magna et, luctus volutpat odio. Suspendisse potenti. Praesent interdum ligula nunc, non tempor mi congue et. Pellentesque tellus neque, lacinia vitae auctor ac, interdum ac mauris. Suspendisse et nunc in nibh iaculis semper vel ac sem. In vel eros eget ipsum semper dapibus vel in nibh. Nunc ac augue id nulla ultrices porta. Nullam consectetur sed purus eu congue.
5 | 


--------------------------------------------------------------------------------
/app/pages/contact.md:
--------------------------------------------------------------------------------
1 | # Contact
2 | 
3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit nunc, tincidunt sed tempus eget, luctus venenatis ex. Morbi et felis pharetra, rhoncus erat et, feugiat ipsum. Nunc lorem elit, pellentesque ac magna et, luctus volutpat odio. Suspendisse potenti. Praesent interdum ligula nunc, non tempor mi congue et. Pellentesque tellus neque, lacinia vitae auctor ac, interdum ac mauris. Suspendisse et nunc in nibh iaculis semper vel ac sem. In vel eros eget ipsum semper dapibus vel in nibh. Nunc ac augue id nulla ultrices porta. Nullam consectetur sed purus eu congue.
4 | 


--------------------------------------------------------------------------------
/app/pages/home.md:
--------------------------------------------------------------------------------
  1 | <h1>Welcome to FastAPI Starter Demo</h1>
  2 | 
  3 | <p>
  4 | This project uses <a href="https://fastapi.tiangolo.com/">FastAPI</a>, <a href="https://jinja.palletsprojects.com/en/2.11.x/">Jinja2</a>, and <a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/">Bootstrap4</a> and 5 in Medium Unsplash Image page.
  5 | 
  6 | A simple website ready to deploy.
  7 | This repo includes all the file and it is ready to deploy to Heroku.
  8 | </p>
  9 | 
 10 | 
 11 | Please read the Medium article at [https://shinichiokada.medium.com/](https://shinichiokada.medium.com/).
 12 | 
 13 | [Please sign up for more free resources.](https://mailchi.mp/ae9891ba897a/codewithshin)
 14 | 
 15 | ## Links
 16 | 
 17 | - [Demo](https://fastapi-webstarter-demo.herokuapp.com/)
 18 | - [Building a Website Starter with FastAPI](https://levelup.gitconnected.com/building-a-website-starter-with-fastapi-92d077092864)
 19 | - [Link: How to Deploy a FastAPI App on Heroku for Free](https://towardsdatascience.com/how-to-deploy-your-fastapi-app-on-heroku-for-free-8d4271a4ab9)
 20 | - [How to Build a Drag & Drop Form with FastAPI & JavaScript](https://towardsdatascience.com/how-to-build-a-drag-drop-form-with-python-javascript-f5e43433b005)
 21 | 
 22 | ## Updated
 23 | 
 24 | 2022-1-5
 25 | 
 26 | ## Version
 27 | 
 28 | 0.4.0
 29 | 
 30 | ## Python environment
 31 | 
 32 | 3.9.6
 33 | 
 34 | ## Overview
 35 | 
 36 | A simple website ready to deploy.
 37 | This repo includes all the file and it is ready to deploy to Heroku.
 38 | 
 39 | - .env
 40 | - .gitignore
 41 | - app
 42 | - Procfile
 43 | - README.md
 44 | - requirements.txt
 45 | - runtime.txt
 46 | - static
 47 | - templates
 48 | 
 49 | ## Requirements
 50 | 
 51 | - requests==2.26.0
 52 | - fastapi==0.70.0
 53 | - uvicorn==0.15.0
 54 | - python-dotenv==0.19.1
 55 | - aiofiles==0.7.0
 56 | - python-multipart==0.0.5
 57 | - jinja2==3.0.2
 58 | - Markdown==3.3.4
 59 | - pytest==6.2.5
 60 | - Pillow==8.4.0
 61 | 
 62 | ## Installation & Usage
 63 | 
 64 | Get your Unsplash API and put it in the `.env` file.
 65 | 
 66 | <pre><code>
 67 | $ git clone git@github.com:shinokada/fastapi-web-starter.git
 68 | # change the directory
 69 | $ cd fastapi-web-starter
 70 | # install packages
 71 | $ pip install -r requirements.txt
 72 | # start the server
 73 | $ uvicorn app.main:app --reload --port 8000
 74 | </code></pre>
 75 | 
 76 | Visit [http://127.0.0.1:8000/](http://127.0.0.1:8000/).
 77 | 
 78 | <img src="/static/images/image-1.png"/>
 79 | 
 80 | ## Features
 81 | 
 82 | - Medium-like Unsplash image insert
 83 | - Drag & Drop Form
 84 | - Menu
 85 | - Unsplash
 86 | - Accordion
 87 | - Markdown pages
 88 | - Two Forms
 89 | 
 90 | ## Test
 91 | 
 92 | All tests are under `tests` directory.
 93 | 
 94 | <pre><code>
 95 | # Change the directory
 96 | $ cd fastapi-web-starter
 97 | # Run tests
 98 | $ pytest -v
 99 | </code></pre>
100 | 
101 | ## Author
102 | 
103 | [twitter](https://twitter.com/shinokada)
104 | 
105 | ## Licence
106 | 
107 | 【MIT License】
108 | 
109 | Copyright 2021 Shinichi Okada
110 | 
111 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
112 | 
113 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
114 | 
115 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
116 | 


--------------------------------------------------------------------------------
/app/pages/info.md:
--------------------------------------------------------------------------------
1 | # Information
2 | 
3 | 
4 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit nunc, tincidunt sed tempus eget, luctus venenatis ex. Morbi et felis pharetra, rhoncus erat et, feugiat ipsum. Nunc lorem elit, pellentesque ac magna et, luctus volutpat odio. Suspendisse potenti. Praesent interdum ligula nunc, non tempor mi congue et. Pellentesque tellus neque, lacinia vitae auctor ac, interdum ac mauris. Suspendisse et nunc in nibh iaculis semper vel ac sem. In vel eros eget ipsum semper dapibus vel in nibh. Nunc ac augue id nulla ultrices porta. Nullam consectetur sed purus eu congue.
5 | 


--------------------------------------------------------------------------------
/app/pages/portfolio.md:
--------------------------------------------------------------------------------
1 | # Portfolio
2 | 
3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse velit nunc, tincidunt sed tempus eget, luctus venenatis ex. Morbi et felis pharetra, rhoncus erat et, feugiat ipsum. Nunc lorem elit, pellentesque ac magna et, luctus volutpat odio. Suspendisse potenti. Praesent interdum ligula nunc, non tempor mi congue et. Pellentesque tellus neque, lacinia vitae auctor ac, interdum ac mauris. Suspendisse et nunc in nibh iaculis semper vel ac sem. In vel eros eget ipsum semper dapibus vel in nibh. Nunc ac augue id nulla ultrices porta. Nullam consectetur sed purus eu congue.
4 | 


--------------------------------------------------------------------------------
/app/routers/__init.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/app/routers/__init.py


--------------------------------------------------------------------------------
/app/routers/accordion.py:
--------------------------------------------------------------------------------
 1 | from fastapi import FastAPI, Request, Form, APIRouter
 2 | from fastapi.responses import HTMLResponse
 3 | from fastapi.templating import Jinja2Templates
 4 | 
 5 | router = APIRouter()
 6 | templates = Jinja2Templates(directory="templates/")
 7 | 
 8 | 
 9 | @router.get("/accordion", response_class=HTMLResponse)
10 | def get_accordion(request: Request):
11 |     tag = "flower"
12 |     result = "Type a number"
13 |     return templates.TemplateResponse('accordion.html', context={'request': request, 'result': result, 'tag': tag})
14 | 
15 | 
16 | @router.post("/accordion", response_class=HTMLResponse)
17 | def post_accordion(request: Request, tag: str = Form(...)):
18 | 
19 |     return templates.TemplateResponse('accordion.html', context={'request': request, 'tag': tag})
20 | 


--------------------------------------------------------------------------------
/app/routers/copy_to_clipboard.py:
--------------------------------------------------------------------------------
 1 | from fastapi import Request, Form, APIRouter
 2 | from fastapi.responses import HTMLResponse
 3 | from fastapi.templating import Jinja2Templates
 4 | 
 5 | templates = Jinja2Templates(directory="templates")
 6 | router = APIRouter()
 7 | 
 8 | 
 9 | @router.get("/copy-to-clipboard", response_class=HTMLResponse)
10 | async def get_flickr(request: Request):
11 | 
12 |     data = {
13 |         "request": request,
14 |         "title": "Copy to clipboard"
15 |     }
16 | 
17 |     return templates.TemplateResponse("copy_to_clipboard.html", data)
18 | 


--------------------------------------------------------------------------------
/app/routers/flickr_search.py:
--------------------------------------------------------------------------------
 1 | from fastapi import Request, Form, APIRouter
 2 | from fastapi.responses import HTMLResponse
 3 | from fastapi.templating import Jinja2Templates
 4 | from .. library.search import flickr_photos_search
 5 | 
 6 | templates = Jinja2Templates(directory="templates")
 7 | router = APIRouter()
 8 | 
 9 | 
10 | @router.get("/flickr-search", response_class=HTMLResponse)
11 | async def get_flickr(request: Request):
12 | 
13 |     data = {
14 |         "request": request,
15 |         "title": "Flickr Search"
16 |     }
17 | 
18 |     return templates.TemplateResponse("flickr_search.html", data)
19 | 
20 | 
21 | @router.get("/flickr_photos/{tag}/{page_num}")
22 | async def photos(request: Request, tag: str, page_num: int):
23 | 
24 |     data = flickr_photos_search(tag, page_num)
25 |     # data = unsplashFetch(tag, page_num)
26 |     return(data)
27 | 


--------------------------------------------------------------------------------
/app/routers/twoforms.py:
--------------------------------------------------------------------------------
 1 | from fastapi import FastAPI, Request, Form, APIRouter
 2 | from fastapi.responses import HTMLResponse
 3 | from fastapi.templating import Jinja2Templates
 4 | import os
 5 | 
 6 | router = APIRouter()
 7 | templates = Jinja2Templates(directory="templates/")
 8 | 
 9 | 
10 | @router.get("/twoforms", response_class=HTMLResponse)
11 | def form_get(request: Request):
12 |     key = os.getenv("unsplash_key")
13 |     print(key)
14 |     result = "Type a number"
15 |     return templates.TemplateResponse('twoforms.html', context={'request': request, 'result': result})
16 | 
17 | 
18 | @router.post("/form1", response_class=HTMLResponse)
19 | def form_post1(request: Request, number: int = Form(...)):
20 |     result = number + 2
21 |     return templates.TemplateResponse('twoforms.html', context={'request': request, 'result': result, 'yournum': number})
22 | 
23 | 
24 | @router.post("/form2", response_class=HTMLResponse)
25 | def form_post2(request: Request, number: int = Form(...)):
26 |     result = number + 100
27 |     return templates.TemplateResponse('twoforms.html', context={'request': request, 'result': result, 'yournum': number})
28 | 


--------------------------------------------------------------------------------
/app/routers/unsplash.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | from fastapi import Request, APIRouter, Depends
 3 | from fastapi.responses import HTMLResponse
 4 | from fastapi.templating import Jinja2Templates
 5 | 
 6 | 
 7 | templates = Jinja2Templates(directory="templates")
 8 | 
 9 | router = APIRouter()
10 | 
11 | 
12 | @router.get("/unsplash", response_class=HTMLResponse)
13 | async def unsplash_home(request: Request):
14 |     key = os.getenv("unsplash_key")
15 |     print(key)
16 |     return templates.TemplateResponse("unsplash.html", {"request": request})
17 | 
18 | 
19 | @router.get("/unsplash_search", response_class=HTMLResponse)
20 | async def get_unsplash_search(request: Request):
21 |     tag = "flower"
22 |     return templates.TemplateResponse("unsplash_search.html", {"request": request, "tag": tag})
23 | 
24 | 
25 | @router.post("/unsplash_search", response_class=HTMLResponse)
26 | async def post_unsplash_search(request: Request):
27 |     tag = "flower"
28 |     return templates.TemplateResponse("unsplash_search.html", {"request": request, "tag": tag})
29 | 


--------------------------------------------------------------------------------
/app/routers/unsplash_search.py:
--------------------------------------------------------------------------------
 1 | from fastapi import Request, APIRouter
 2 | from fastapi.responses import HTMLResponse
 3 | from fastapi.templating import Jinja2Templates
 4 | from ..library.search import unsplashFetch
 5 | 
 6 | templates = Jinja2Templates(directory="templates")
 7 | router = APIRouter()
 8 | 
 9 | 
10 | @router.get("/unsplash-search", response_class=HTMLResponse)
11 | async def get_index(request: Request,):
12 |     title = "Unsplash Image Search"
13 |     data = {
14 |         "request": request,
15 |         "title": title,
16 |     }
17 | 
18 |     return templates.TemplateResponse("unsplash_search.html", data)
19 | 
20 | 
21 | @router.get("/unsplash-search/photos/{tag}/{page_num}")
22 | async def photos(request: Request, tag: str, page_num: int):
23 |     # tag = tag
24 |     data = unsplashFetch(tag, page_num)
25 |     return(data)
26 | 
27 | 
28 | @router.get("/trackdownload/{id}/{ixid}")
29 | async def unsplash_track_download(request: Request, id: str, ixid: str):
30 |     url = "https://api.unsplash.com/photos/"+id+"/download?ixid="+ixid
31 |     # print('url', url)
32 |     unsplash_key = os.getenv("unsplash_key")
33 |     param = {
34 |         "client_id": unsplash_key,
35 |     }
36 |     response = requests.get(url, param)
37 |     data = response.json()
38 |     return data
39 | 


--------------------------------------------------------------------------------
/app/routers/upload.py:
--------------------------------------------------------------------------------
 1 | from fastapi import Request, Form, APIRouter, File, UploadFile
 2 | from fastapi.responses import HTMLResponse
 3 | from fastapi.templating import Jinja2Templates
 4 | from ..library.helpers import *
 5 | 
 6 | router = APIRouter()
 7 | templates = Jinja2Templates(directory="templates/")
 8 | 
 9 | 
10 | @router.get("/upload", response_class=HTMLResponse)
11 | def get_upload(request: Request):
12 |     return templates.TemplateResponse('upload.html', context={'request': request})
13 | 
14 | 
15 | @router.post("/upload/new/")
16 | async def post_upload(imgdata: tuple, file: UploadFile = File(...)):
17 |     print(imgdata)
18 |     data_dict = eval(imgdata[0])
19 |     winWidth, imgWidth, imgHeight = data_dict["winWidth"], data_dict["imgWidth"], data_dict["imgHeight"]
20 | 
21 |     # create the directory path
22 |     workspace = create_workspace()
23 |     # filename
24 |     file_name = Path(file.filename)
25 |     print(file.filename)
26 |     print(type(file.filename))
27 |     print(file_name)
28 |     print(type(file_name))
29 |     # image full path
30 |     img_full_path = workspace / file_name
31 |     with open(str(img_full_path), 'wb') as myfile:
32 |         contents = await file.read()
33 |         myfile.write(contents)
34 |     # create a thumb image and save it
35 |     thumb(img_full_path, winWidth, imgWidth, imgHeight)
36 |     # create the thumb path
37 |     # ext is like .png or .jpg
38 |     filepath, ext = os.path.splitext(img_full_path)
39 |     thumb_path = filepath + ".thumbnail"+ext
40 | 
41 |     data = {
42 |         "img_path": img_full_path,
43 |         "thumb_path": thumb_path
44 |     }
45 |     return data
46 | 


--------------------------------------------------------------------------------
/images/drag_drop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/images/drag_drop.png


--------------------------------------------------------------------------------
/images/image-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/images/image-1.png


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
 1 | requests==2.27.1
 2 | fastapi==0.72.0
 3 | flickrapi==2.4.0
 4 | uvicorn==0.17.0
 5 | python-dotenv==0.19.2
 6 | aiofiles==0.8.0
 7 | python-multipart==0.0.5
 8 | jinja2==3.0.3
 9 | Markdown==3.3.6
10 | pytest==6.2.5
11 | Pillow==9.3.0


--------------------------------------------------------------------------------
/runtime.txt:
--------------------------------------------------------------------------------
1 | python-3.9.6


--------------------------------------------------------------------------------
/static/css/mystyle.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     min-height: 100vh;
 3 |     position: relative;
 4 |     margin: 0;
 5 |     padding-bottom: 100px; 
 6 |     box-sizing: border-box;
 7 | }
 8 | 
 9 | .wrapper{
10 |     max-width: 960px;
11 | }
12 | 
13 | footer {
14 |     position: absolute;
15 |     bottom: 0;
16 |     height: 100px;
17 |     padding-top:50px;
18 | }
19 | 
20 | .responsive{
21 |     max-width: 100%;
22 |     height: auto;
23 |     margin-left: auto;
24 |     margin-right: auto;
25 | }
26 | 
27 | /* upload home */
28 | .up-area{
29 |     margin:10px auto 30px;
30 | }
31 | 
32 | /* color finder */
33 | #file{
34 |     display: none;
35 | }
36 | 
37 | .upload{
38 |     padding: 20px 0;
39 | }
40 | 
41 | 
42 | .upload-area{
43 |     height: 250px;
44 |     border: 5px dashed lightgray;
45 |     border-radius: 3px;
46 |     margin: 0 auto;
47 |     margin-top: 20px;
48 |     text-align: center;
49 |     overflow: auto;
50 |     position: relative;
51 | }
52 | 
53 | .upload-area:hover{
54 |     cursor: pointer;
55 | }
56 | 
57 | .upload-area h2{
58 |     font-size: 22px;
59 |     padding:0;
60 |     margin:0;
61 |     text-align: center;
62 |     font-weight: normal;
63 |     font-family: sans-serif;
64 |     line-height: 40px;
65 |     color: darkslategray;
66 |     position: relative;
67 |     top: 40%;
68 |     left: 50%;
69 |     -ms-transform: translate(-50%, -50%);
70 |     transform: translate(-50%, -50%);
71 |     width:300px;
72 | }
73 | 
74 | .box_button{
75 | 	font-weight: 700;
76 |     background-color: #cacbcc;
77 |     color: #515353;
78 |     padding: 8px 16px; 
79 |     display: block;
80 |     margin: 3px auto 0;
81 |     cursor: pointer;
82 |     margin: 0;
83 |     position: absolute;
84 |     top: 80%;
85 |     left: 50%;
86 |     -ms-transform: translate(-50%, -50%);
87 |     transform: translate(-50%, -50%);
88 | }
89 | 
90 | @media(max-width: 768px) {
91 |     .upload-area h2{
92 |         font-size: 20px;
93 |     }
94 | }
95 | 


--------------------------------------------------------------------------------
/static/css/search_image.css:
--------------------------------------------------------------------------------
  1 | /* unsplash photo search */
  2 | .unsplash_search, .photo_search {
  3 |   margin:20px 0;
  4 | }
  5 | 
  6 | 
  7 | .unsplash_search .search-input, .photo_search .search-input {
  8 |   width: 400px;
  9 |   height: 38px;
 10 |   padding: 5px;
 11 |   border-radius: 4px;
 12 | }
 13 | 
 14 | .unsplash_search .search-photo, .unsplash_search .remove-photo, .photo_search .search-photo, .photo_search .remove-photo{
 15 |   margin: 20px 0;
 16 |   width: 250px;
 17 |   margin-right: 10px;
 18 | }
 19 | 
 20 | 
 21 | .unsplash_search button, .photo_search button {
 22 |   cursor: pointer;
 23 |   border-radius: 4px;
 24 |   /* font-family: 'Lato', sans-serif; */
 25 | }
 26 | 
 27 | 
 28 | .unsplash_search .hidden, .photo_search .hidden {
 29 |   display: none;
 30 | }
 31 | 
 32 | .unsplash_search .result-stats, .photo_search .result-stats {
 33 |   color: gray;
 34 |   padding-top: 15px;
 35 |   font-size: 1.5em;
 36 | }
 37 | 
 38 | .unsplash_search .search-results, .photo_search .search-results {
 39 |   padding: 10px;
 40 | }
 41 | 
 42 | .unsplash_search .result-item, .photo_search .result-item{
 43 |   width: 200px;
 44 |   height: auto;
 45 |   padding: 5px;
 46 | 
 47 |   border-radius: 4px;
 48 | }
 49 | 
 50 | .unsplash_search .photographer-name, .photo_search .photographer-name{
 51 |   padding: 7px;
 52 |   font-size: 0.7em;
 53 |   letter-spacing: 0.7px;
 54 | }
 55 | 
 56 | .unsplash_search .photographer-name:hover, .photo_search .photographer-name:hover{
 57 |   text-decoration: none;
 58 | }
 59 | 
 60 | .unsplash_search .prev-btn, .unsplash_search .next-btn, .photo_search .prev-btn, .photo_search .next-btn {
 61 |   color: white;
 62 |   text-decoration: none;
 63 | }
 64 | 
 65 | .unsplash_search button a, .photo_search button a{
 66 |   color: #fff;
 67 |   text-decoration: none;
 68 | }
 69 | 
 70 | .unsplash_search .next-btn, .photo_search .next-btn {
 71 |   margin-left: 10px;
 72 | }
 73 | 
 74 | .unsplash_search a:hover, .photo_search a:hover {
 75 |   text-decoration: none;
 76 | }
 77 | 
 78 | .unsplash_search .spinner, .photo_search .spinner {
 79 |   width: 40px;
 80 |   height: 40px;
 81 |   position: relative;
 82 |   margin: 100px auto;
 83 | }
 84 | 
 85 | .unsplash_search .double-bounce1, .unsplash_search .double-bounce2, .photo_search .double-bounce1, .photo_search .double-bounce2 {
 86 |   width: 100%;
 87 |   height: 100%;
 88 |   border-radius: 50%;
 89 |   background-color: #333;
 90 |   opacity: 0.6;
 91 |   position: absolute;
 92 |   top: 0;
 93 |   left: 0;
 94 |   -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
 95 |   animation: sk-bounce 2.0s infinite ease-in-out;
 96 | }
 97 | 
 98 | .unsplash_search .double-bounce2, .photo_search .double-bounce2 {
 99 |   -webkit-animation-delay: -1.0s;
100 |   animation-delay: -1.0s;
101 | }
102 | 
103 | @-webkit-keyframes sk-bounce {
104 |   0%, 100% { -webkit-transform: scale(0.0) }
105 |   50% { -webkit-transform: scale(1.0) }
106 | }
107 | 
108 | @keyframes sk-bounce {
109 |   0%, 100% { 
110 |     transform: scale(0.0);
111 |     -webkit-transform: scale(0.0);
112 |   } 50% { 
113 |     transform: scale(1.0);
114 |     -webkit-transform: scale(1.0);
115 |   }
116 | }
117 | 
118 | .unsplash_thumb{
119 |   text-align: center;
120 |   display: block;
121 | }
122 | 
123 | #unsplash-img, .selected-img{
124 |   display: none;
125 | }
126 | 
127 | #unsplash-img, #flickrPhoto {
128 |   text-align: center;
129 | }
130 | 
131 | .desc a{
132 |   text-decoration: underline;
133 | }


--------------------------------------------------------------------------------
/static/css/style3.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |     DEMO STYLE
  3 |     https://bootstrapious.com/p/bootstrap-sidebar
  4 | */
  5 | 
  6 | @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
  7 | body {
  8 |     font-family: 'Poppins', sans-serif;
  9 |     background: #fafafa;
 10 | }
 11 | 
 12 | p {
 13 |     font-family: 'Poppins', sans-serif;
 14 |     font-size: 1.1em;
 15 |     font-weight: 300;
 16 |     line-height: 1.7em;
 17 |     color: #000;
 18 | }
 19 | 
 20 | a,
 21 | a:hover,
 22 | a:focus {
 23 |     color: inherit;
 24 |     text-decoration: none;
 25 |     transition: all 0.3s;
 26 | }
 27 | 
 28 | .navbar {
 29 |     padding: 15px 10px;
 30 |     background: #fff;
 31 |     border: none;
 32 |     border-radius: 0;
 33 |     margin-bottom: 40px;
 34 |     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 35 | }
 36 | 
 37 | .navbar-btn {
 38 |     box-shadow: none;
 39 |     outline: none !important;
 40 |     border: none;
 41 | }
 42 | 
 43 | .line {
 44 |     width: 100%;
 45 |     height: 1px;
 46 |     border-bottom: 1px dashed #ddd;
 47 |     margin: 40px 0;
 48 | }
 49 | 
 50 | /* ---------------------------------------------------
 51 |     SIDEBAR STYLE
 52 | ----------------------------------------------------- */
 53 | 
 54 | #sidebar {
 55 |     width: 250px;
 56 |     position: fixed;
 57 |     top: 0;
 58 |     left: -250px;
 59 |     height: 100vh;
 60 |     z-index: 999;
 61 |     background: #7386D5;
 62 |     color: #fff;
 63 |     transition: all 0.3s;
 64 |     overflow-y: scroll;
 65 |     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
 66 | }
 67 | 
 68 | #sidebar.active {
 69 |     left: 0;
 70 | }
 71 | 
 72 | #dismiss {
 73 |     width: 35px;
 74 |     height: 35px;
 75 |     line-height: 35px;
 76 |     text-align: center;
 77 |     background: #7386D5;
 78 |     position: absolute;
 79 |     top: 10px;
 80 |     right: 10px;
 81 |     cursor: pointer;
 82 |     -webkit-transition: all 0.3s;
 83 |     -o-transition: all 0.3s;
 84 |     transition: all 0.3s;
 85 | }
 86 | 
 87 | #dismiss:hover {
 88 |     background: #fff;
 89 |     color: #7386D5;
 90 | }
 91 | 
 92 | .overlay {
 93 |     display: none;
 94 |     position: fixed;
 95 |     width: 100vw;
 96 |     height: 100vh;
 97 |     background: rgba(0, 0, 0, 0.7);
 98 |     z-index: 998;
 99 |     opacity: 0;
100 |     transition: all 0.5s ease-in-out;
101 | }
102 | .overlay.active {
103 |     display: block;
104 |     opacity: 1;
105 | }
106 | 
107 | #sidebar .sidebar-header {
108 |     padding: 20px;
109 |     background: #6d7fcc;
110 | }
111 | 
112 | #sidebar ul.components {
113 |     padding: 20px 0;
114 |     border-bottom: 1px solid #47748b;
115 | }
116 | 
117 | #sidebar ul p {
118 |     color: #fff;
119 |     padding: 10px;
120 | }
121 | 
122 | #sidebar ul li a {
123 |     padding: 10px;
124 |     font-size: 1.1em;
125 |     display: block;
126 |    
127 | }
128 | 
129 | #sidebar ul li a:hover {
130 |     color: #7386D5;
131 |     background: #fff;
132 | }
133 | 
134 | #sidebar .dropdown-menu{
135 |     width: 95%;
136 | }
137 | 
138 | a[data-toggle="collapse"] {
139 |     position: relative;
140 | }
141 | 
142 | ul.CTAs {
143 |     padding: 20px;
144 | }
145 | 
146 | ul.CTAs a {
147 |     text-align: center;
148 |     font-size: 0.9em !important;
149 |     display: block;
150 |     border-radius: 5px;
151 |     margin-bottom: 5px;
152 | }
153 | 
154 | a.article,
155 | a.article:hover {
156 |     background: #6d7fcc !important;
157 |     color: #fff !important;
158 | }
159 | 
160 | /* ---------------------------------------------------
161 |     CONTENT STYLE
162 | ----------------------------------------------------- */
163 | 
164 | #content {
165 |     width: 100%;
166 |     padding: 20px;
167 |     min-height: 100vh;
168 |     transition: all 0.3s;
169 |     position: absolute;
170 |     top: 0;
171 |     right: 0;
172 | }
173 | 
174 | #sidebarCollapse span{
175 |     color: #fff;
176 | }
177 | 
178 | #sidebarCollapse i{
179 |     color: #fff;
180 | }
181 | 
182 | /* Nav */
183 | .navbar-nav {
184 |     justify-content: end;
185 |     width:100%;
186 | }
187 | 
188 | /* copy to clipboard */
189 | .mycontainer{
190 |     width: 400px;
191 |     margin: 0 auto;
192 |     text-align: center;
193 | }
194 | 
195 | .mycontainer a{
196 |     text-decoration: underline;
197 |     color:rgb(11, 1, 77);
198 | }
199 | 
200 | .gif-img{
201 |     width:662px;
202 |     margin:20px auto;
203 | }
204 | 
205 | .gif-img img{
206 |     margin-top: 20px;
207 | }
208 | 


--------------------------------------------------------------------------------
/static/images/copy.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/static/images/copy.gif


--------------------------------------------------------------------------------
/static/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/static/images/favicon.ico


--------------------------------------------------------------------------------
/static/images/image-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/static/images/image-1.png


--------------------------------------------------------------------------------
/static/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="177" height="100" viewBox="0 0 177 100" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M44.5 32C42.2019 32 39.9262 32.4527 37.803 33.3321C35.6798 34.2116 33.7507 35.5006 32.1256 37.1256C30.5006 38.7507 29.2116 40.6798 28.3321 42.803C27.4527 44.9262 27 47.2019 27 49.5C27 51.7981 27.4527 54.0738 28.3321 56.197C29.2116 58.3202 30.5006 60.2493 32.1256 61.8744C33.7507 63.4994 35.6798 64.7884 37.803 65.6679C39.9262 66.5473 42.2019 67 44.5 67L44.5 58.25C43.3509 58.25 42.2131 58.0237 41.1515 57.5839C40.0899 57.1442 39.1253 56.4997 38.3128 55.6872C37.5003 54.8747 36.8558 53.9101 36.4161 52.8485C35.9763 51.7869 35.75 50.6491 35.75 49.5C35.75 48.3509 35.9763 47.2131 36.4161 46.1515C36.8558 45.0899 37.5003 44.1253 38.3128 43.3128C39.1253 42.5003 40.0899 41.8558 41.1515 41.4161C42.2131 40.9763 43.3509 40.75 44.5 40.75V32Z" fill="#0F52FF"/>
 3 | <circle cx="44.5001" cy="49.5" r="5.83333" fill="#0F52FF"/>
 4 | <path d="M27 49.5C27 51.7981 27.4527 54.0738 28.3321 56.197C29.2116 58.3202 30.5006 60.2493 32.1256 61.8744C33.7507 63.4994 35.6798 64.7884 37.803 65.6679C39.9262 66.5473 42.2019 67 44.5 67C46.7981 67 49.0738 66.5473 51.197 65.6679C53.3202 64.7884 55.2493 63.4994 56.8744 61.8744C58.4994 60.2493 59.7884 58.3202 60.6679 56.197C61.5473 54.0738 62 51.7981 62 49.5L53.25 49.5C53.25 50.6491 53.0237 51.7869 52.5839 52.8485C52.1442 53.9101 51.4997 54.8747 50.6872 55.6872C49.8747 56.4997 48.9101 57.1442 47.8485 57.5839C46.7869 58.0237 45.6491 58.25 44.5 58.25C43.3509 58.25 42.2131 58.0237 41.1515 57.5839C40.0899 57.1442 39.1253 56.4997 38.3128 55.6872C37.5003 54.8747 36.8558 53.9101 36.4161 52.8485C35.9763 51.7869 35.75 50.6491 35.75 49.5L27 49.5Z" fill="#5BD0F4"/>
 5 | <path d="M50.3334 49.5C50.3334 47.9529 49.7188 46.4692 48.6249 45.3752C47.5309 44.2812 46.0472 43.6666 44.5001 43.6666C42.953 43.6666 41.4693 44.2812 40.3753 45.3752C39.2813 46.4692 38.6667 47.9529 38.6667 49.5L44.5001 49.5L50.3334 49.5Z" fill="#5BD0F4"/>
 6 | <path d="M71.1396 42.925H68.9661V55H71.1396V42.925Z" fill="#0F52FF"/>
 7 | <path d="M72.5589 50.722C72.5589 53.5165 74.4909 55.2415 77.0439 55.2415C79.5969 55.2415 81.5289 53.5165 81.5289 50.722C81.5289 47.9275 79.5969 46.2025 77.0439 46.2025C74.4909 46.2025 72.5589 47.9275 72.5589 50.722ZM74.7324 50.722C74.7324 49.066 75.6984 48.1 77.0439 48.1C78.3894 48.1 79.3554 49.066 79.3554 50.722C79.3554 52.378 78.3894 53.344 77.0439 53.344C75.6984 53.344 74.7324 52.378 74.7324 50.722Z" fill="#0F52FF"/>
 8 | <path d="M89.296 46.444V47.5997H89.1235C88.606 46.858 87.778 46.2025 86.2945 46.2025C84.259 46.2025 82.4305 47.9275 82.4305 50.584C82.4305 53.2405 84.259 54.9655 86.2945 54.9655C87.778 54.9655 88.606 54.2927 89.089 53.62H89.2615V54.448C89.2615 56.104 88.2955 56.863 86.881 56.863C85.4665 56.863 84.742 56.104 84.4487 55.1207L82.4995 55.966C82.948 57.2597 84.259 58.6915 86.9155 58.6915C89.641 58.6915 91.435 57.2597 91.435 54.4997V46.444H89.296ZM86.95 53.1025C85.6045 53.1025 84.604 52.1365 84.604 50.584C84.604 49.0315 85.6045 48.0655 86.95 48.0655C88.2955 48.0655 89.296 49.0315 89.296 50.584C89.296 52.1365 88.2955 53.1025 86.95 53.1025Z" fill="#0F52FF"/>
 9 | <path d="M92.8411 50.722C92.8411 53.5165 94.7731 55.2415 97.3261 55.2415C99.8791 55.2415 101.811 53.5165 101.811 50.722C101.811 47.9275 99.8791 46.2025 97.3261 46.2025C94.7731 46.2025 92.8411 47.9275 92.8411 50.722ZM95.0146 50.722C95.0146 49.066 95.9806 48.1 97.3261 48.1C98.6716 48.1 99.6376 49.066 99.6376 50.722C99.6376 52.378 98.6716 53.344 97.3261 53.344C95.9806 53.344 95.0146 52.378 95.0146 50.722Z" fill="#0F52FF"/>
10 | <path d="M103.517 43.96C103.517 44.8398 104.19 45.4435 105.053 45.4435C105.915 45.4435 106.588 44.8398 106.588 43.96C106.588 43.0803 105.915 42.4765 105.053 42.4765C104.19 42.4765 103.517 43.0803 103.517 43.96ZM106.139 46.444H103.966V55H106.139V46.444Z" fill="#5BD0F4"/>
11 | <path d="M108.076 58.45H110.25V53.896H110.422C110.905 54.586 111.733 55.2415 113.217 55.2415C115.252 55.2415 117.081 53.5165 117.081 50.722C117.081 47.9275 115.252 46.2025 113.217 46.2025C111.733 46.2025 110.905 46.858 110.388 47.5998H110.215V46.444H108.076V58.45ZM112.561 53.3785C111.216 53.3785 110.215 52.4125 110.215 50.722C110.215 49.0315 111.216 48.0655 112.561 48.0655C113.907 48.0655 114.907 49.0315 114.907 50.722C114.907 52.4125 113.907 53.3785 112.561 53.3785Z" fill="#5BD0F4"/>
12 | <path d="M118.349 48.8418C118.349 50.5323 119.763 51.1533 121.557 51.4983L122.006 51.5845C123.075 51.7915 123.558 52.0503 123.558 52.6023C123.558 53.1543 123.075 53.5855 122.075 53.5855C121.074 53.5855 120.264 53.1715 120.039 51.9295L118.038 52.447C118.332 54.241 119.832 55.2415 122.075 55.2415C124.248 55.2415 125.663 54.2238 125.663 52.4298C125.663 50.6357 124.214 50.1528 122.282 49.7733L121.833 49.687C120.936 49.5145 120.453 49.273 120.453 48.7038C120.453 48.1863 120.902 47.8585 121.73 47.8585C122.558 47.8585 123.144 48.2035 123.351 49.135L125.318 48.5313C124.904 47.1513 123.645 46.2025 121.73 46.2025C119.694 46.2025 118.349 47.1513 118.349 48.8418Z" fill="#5BD0F4"/>
13 | <path d="M135.426 55V46.444H133.253V50.86C133.253 52.447 132.477 53.3785 131.148 53.3785C129.975 53.3785 129.32 52.7403 129.32 51.4465V46.444H127.146V51.55C127.146 53.6718 128.475 55.138 130.476 55.138C132.045 55.138 132.77 54.448 133.115 53.7235H133.287V55H135.426Z" fill="#5BD0F4"/>
14 | <path d="M137.354 46.444V55H139.528V49.894C139.528 48.721 140.08 48.0655 141.08 48.0655C141.943 48.0655 142.46 48.5485 142.46 49.48V55H144.634V49.894C144.634 48.721 145.186 48.0655 146.186 48.0655C147.049 48.0655 147.566 48.5485 147.566 49.48V55H149.74V49.3765C149.74 47.3065 148.463 46.306 146.876 46.306C145.479 46.306 144.841 46.927 144.427 47.6515H144.254C143.857 46.8408 143.15 46.306 141.908 46.306C140.666 46.306 139.993 46.858 139.666 47.5135H139.493V46.444H137.354Z" fill="#5BD0F4"/>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/static/images/unsplash1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/static/images/unsplash1.jpeg


--------------------------------------------------------------------------------
/static/js/dragdrop.js:
--------------------------------------------------------------------------------
 1 | import { detect, dragdrop } from './imagehelper.js'
 2 | 
 3 | $(function () {
 4 |   dragdrop();
 5 | 
 6 |   function preparedata (file) {
 7 |     console.log("Preparing ...")
 8 |     const img = document.createElement("img");
 9 |     img.src = URL.createObjectURL(file);
10 |     detect(img.src, function (result) {
11 |       let winWidth = $(window).width();
12 |       let imgWidth = result.imgWidth;
13 |       let imgHeight = result.imgHeight;
14 |       let data = { 'winWidth': winWidth, 'imgWidth': imgWidth, 'imgHeight': imgHeight };
15 |       let jdata = JSON.stringify(data);
16 |       let fd = new FormData();
17 |       fd.append('imgdata', jdata);
18 |       fd.append('file', file);
19 |       console.log("fd: ", fd);
20 |       uploadData(fd);
21 |     });
22 |   }
23 | 
24 |   // Drop
25 |   $('.upload-area').on('drop', function (e) {
26 |     e.stopPropagation();
27 |     e.preventDefault();
28 |     $("#howto").text("We are uploading your file.");
29 |     let file = e.originalEvent.dataTransfer.files;
30 |     console.log("File uploaded: ", file);
31 |     let imageType = /image.*/;
32 |     let winWidth = $("#window_width").val();
33 |     let dropped = file[0];
34 |     if (dropped.type.match(imageType)) {
35 |       preparedata(dropped);
36 |     } else {
37 |       console.log("not image");
38 |       $("#howto").text("Please use an image file. Try one more time.");
39 |     }
40 |     console.log("done drop.")
41 |   });
42 | 
43 |   // Open file selector on div click
44 |   $("#uploadfile").click(function () {
45 |     $("#file").click();
46 |   });
47 | 
48 |   // file selected
49 |   $("#file").change(function () {
50 |     let imageType = /image.*/;
51 |     let file = $('#file')[0].files[0];
52 |     console.log("file.size: ", file.size);
53 |     $("#howto").text("Uploading your file.");
54 |     if (file.type.match(imageType)) {
55 |       console.log("file: ", file);
56 |       preparedata(file);
57 |     } else {
58 |       console.log("not image");
59 |       $("#howto").text("Please use an image file. Try one more time.");
60 |     }
61 |   });
62 | });
63 | 
64 | 
65 | 
66 | // Sending AJAX request and upload file
67 | function uploadData (formdata) {
68 | 
69 |   $.ajax({
70 |     url: '/upload/new/',
71 |     type: 'post',
72 |     data: formdata,
73 |     contentType: false,
74 |     processData: false,
75 |     success: function (data) {
76 |       updatetags(data);
77 |     }
78 |   });
79 | }
80 | 
81 | function updatetags (data) {
82 |   let original = `<img src="/${data.thumb_path}" class="responsive" alt="">`;
83 |   $("#original").html(original);
84 | 
85 |   $("#howto").html("Drag and Drop file here<br />Or<br />Click to Upload")
86 | }
87 | 
88 | 


--------------------------------------------------------------------------------
/static/js/flickr_search.js:
--------------------------------------------------------------------------------
  1 | const form = $('.js-form')
  2 | const nextBtn = $('.js-next')
  3 | const prevBtn = $('.js-prev')
  4 | const spinner = $('.js-spinner')
  5 | let totalResults
  6 | let currentPage = 1
  7 | let searchQuery, img, photographer, photographerPage, regularLink, license_name, license_link
  8 | 
  9 | $(document).ready(function () {
 10 |   img = localStorage.getItem('flickr_selected_photo')
 11 |   photographer = localStorage.getItem('flickr_photographer')
 12 |   photographerPage = localStorage.getItem('flickr_photographerPage')
 13 |   regularLink = localStorage.getItem('flickr_regularLink')
 14 |   license_name = localStorage.getItem('flickr_license_name')
 15 |   $('#selectedImg').attr('src', img)
 16 |   $('#photographerLink').text(photographer)
 17 |   $('#photographerLink').attr('href', photographerPage)
 18 |   
 19 |   if (img) {
 20 |     $('.selected-img').show()
 21 |   } else {
 22 |     $('.selected-img').hide()
 23 |   }
 24 | 
 25 |   $('.search-btn').on('click', () => {
 26 |     setTimeout(function (){
 27 |       $('.search-input').focus()
 28 |     }, 1000)
 29 |   })
 30 | })
 31 | 
 32 | nextBtn.on('click', () => {
 33 |   currentPage += 1
 34 |   fetchResults(searchQuery)
 35 | })
 36 | 
 37 | prevBtn.on('click', () => {
 38 |   currentPage -= 1
 39 |   fetchResults(searchQuery)
 40 | })
 41 | 
 42 | function pagination(totalPages) {
 43 |   nextBtn.removeClass('hidden')
 44 |   if (currentPage >= totalPages) {
 45 |     nextBtn.addClass('hidden')
 46 |   }
 47 | 
 48 |   prevBtn.addClass('hidden')
 49 |   if (currentPage !== 1) {
 50 |     prevBtn.removeClass('hidden')
 51 |   }
 52 | }
 53 | 
 54 | async function fetchResults(searchQuery) {
 55 |   spinner.removeClass('hidden')
 56 |   try {
 57 |     const results = await searchImage(searchQuery)
 58 |     pagination(results.total_pages)
 59 |     displayResults(results)
 60 |   } catch(err) {
 61 |     console.log(err)
 62 |     alert('Failed to search Flickr')
 63 |   }
 64 |   spinner.addClass('hidden')
 65 | } 
 66 | 
 67 | function handleSubmit(event) {
 68 |   event.preventDefault()
 69 |   currentPage = 1
 70 |   const inputValue = $('.js-search-input').val()
 71 |   searchQuery = $.trim(inputValue)
 72 |   fetchResults(searchQuery)
 73 | }
 74 | 
 75 | function changeImageValue (photo) {
 76 |   photographer = photo.getAttribute('data-photographer')
 77 |   photographerPage = photo.getAttribute('data-photographerPage')
 78 |   const thumb = photo.getAttribute('data-thumb')
 79 |   license_name = photo.getAttribute('data-licensename').toUpperCase()
 80 |   regularLink = photo.getAttribute('data-regularLink')
 81 |   license_link = `https://creativecommons.org/licenses/${license_name}/2.0`
 82 |   license_name = `CC ${license_name} 2.0`
 83 |   $('#photographer').val(photographer)
 84 |   $('#photographerPage').val(photographerPage)
 85 |   $('#photographerLink').text(photographer)
 86 |   $('#photographerLink').attr('href', photographerPage)
 87 |   $('#license_link').attr('href', license_link)
 88 |   $('#license_link').text(license_name)
 89 |   $('input[name="license_name"]').attr("value", license_name)
 90 |   $('.selected-img').show()
 91 |   $('#selectedImg').attr('src', thumb)
 92 |   $('#flickrModal').modal('hide')
 93 |   localStorage.setItem('flickr_selected_photo', thumb)
 94 |   localStorage.setItem('flickr_photographer', photographer)
 95 |   localStorage.setItem('flickr_photographerPage', photographerPage)
 96 |   localStorage.setItem('flickr_regularLink', regularLink)
 97 |   localStorage.setItem('flickr_license_name', license_name)
 98 | }
 99 | 
100 | async function searchImage (searchQuery) {
101 |   const endpoint = `/flickr_photos/${searchQuery}/${currentPage}`
102 |   const response = await fetch(endpoint)
103 |   if (!response.ok) {
104 |     throw Error(response.statusText)
105 |   }
106 |   const json = await response.json()
107 |   return json
108 | }
109 | 
110 | function removePhoto () {
111 |   localStorage.removeItem('flickr_selected_photo')
112 |   localStorage.removeItem('flickr_photographer')
113 |   localStorage.removeItem('flickr_photographerPage')
114 |   localStorage.removeItem('flickr_regularLink')
115 |   localStorage.removeItem('flickr_license_name')
116 |   $('#flickrInput').attr('value','')
117 |   $('.selected-img').hide()
118 |   $('#flickrInput').val('')
119 |   $('#photographer').val('')
120 |   $('#photographerPage').val('')
121 |   $('#photographerLink').text('')
122 |   $('#photographerLink').attr('href', '')
123 |   $('input[name="license_name"]').attr("value", '')
124 | }
125 | 
126 | function displayResults(results) {
127 |   const searchResults = $('.search-results')
128 |   searchResults.text('')
129 |   results.forEach(result => {
130 |     const thumb = result.url_m
131 |     const medium_img = result.url_c
132 |     // https://live.staticflickr.com/4294/35185475274_6f53ae8725.jpg
133 |     // photo id 5982607204
134 |     const id = result.id
135 |     // owner 18090920@N07
136 |     const owner = result.owner
137 |     photographer = result.ownername
138 |     // flickr link https://www.flickr.com/photos/18090920@N07/5982607204
139 |     photographerPage = `https://www.flickr.com/photos/${owner}/${id}`
140 |     license_name = result.license_name
141 |     // url_c 800px
142 |     const regularImgLink = result.url_c
143 |     searchResults[0].insertAdjacentHTML(
144 |       'beforeend',
145 |       `<div class="selected_thumb" id="${id}" data-licenseName="${license_name}" data-thumb="${thumb}" data-photographer="${photographer}" data-photographerPage="${photographerPage}" onClick="changeImageValue(this)">
146 |         <div class="p-2">
147 |         <img class="result-item"  src="${thumb}";/>
148 |         <p class="photographer-name">Photo by 
149 |         <a href="${photographerPage}" target="_blank" style="color: black; ">${photographer}</a> on <a href="https://flickr.com/" target="_blank">Flickr</a>
150 |         </p>
151 |         </div>
152 |       </div>`
153 |     )	
154 |   })
155 |   
156 |   $('.modal').scrollTop(0)
157 | }


--------------------------------------------------------------------------------
/static/js/imagehelper.js:
--------------------------------------------------------------------------------
 1 | function detect (URL, callback) {
 2 |   console.log("URL: ", URL);
 3 |   let imgWidth;
 4 |   let imgHeight;
 5 |   let image = new Image();
 6 |   image.src = URL;
 7 |   console.log("image.src", image.src);
 8 |   image.onload = function () {
 9 |     imgWidth = this.width;
10 |     imgHeight = this.height;
11 |     console.log("imgWidth & imgHeight: ", imgWidth, imgHeight);
12 |     callback({ imgWidth, imgHeight });
13 |   };
14 | }
15 | 
16 | function dragdrop () {
17 |   // preventing page from redirecting
18 |   $("html").on("dragover", function (e) {
19 |     e.preventDefault();
20 |     e.stopPropagation();
21 |     $("#howto").text("Drag here");
22 |   });
23 | 
24 |   $("html").on("drop", function (e) {
25 |     e.preventDefault();
26 |     e.stopPropagation();
27 |   });
28 | 
29 |   // Drag enter
30 |   $('.upload-area').on('dragenter', function (e) {
31 |     e.stopPropagation();
32 |     e.preventDefault();
33 |     $("#howto").text("Drop");
34 |   });
35 | 
36 |   // Drag over
37 |   $('.upload-area').on('dragover', function (e) {
38 |     e.stopPropagation();
39 |     e.preventDefault();
40 |     $("#howto").text("Drop");
41 |   });
42 | }
43 | 
44 | export { detect, dragdrop }


--------------------------------------------------------------------------------
/static/js/unsplash_search.js:
--------------------------------------------------------------------------------
  1 | const form = $('.js-form');
  2 | const nextBtn = $('.js-next');
  3 | const prevBtn = $('.js-prev');
  4 | let resultStats = $('.js-result-stats');
  5 | const spinner = $('.js-spinner');
  6 | let totalResults;
  7 | let currentPage = 1;
  8 | let searchQuery;
  9 | let img, photographer, photographerPage, regularLink
 10 | 
 11 | $(document).ready(function () {
 12 |   img = localStorage.getItem('ideasUnsplashselected_photo')
 13 |   console.log('img: ', img)
 14 |   photographer = localStorage.getItem('ideasUnsplashphotographer')
 15 |   photographerPage = localStorage.getItem('ideasUnsplashphotographerPage')
 16 |   regularLink = localStorage.getItem('ideasUnsplashregularLink')
 17 |   $('#selectedImg').attr('src', 'https://source.unsplash.com/' + img);
 18 |   $('#photographerLink').text(photographer)
 19 |   $('#photographerLink').attr('href', photographerPage)
 20 |   if (img) {
 21 |     $('#unsplash-img').show()
 22 |   } else {
 23 |     $('#unsplash-img').hide()
 24 |   }
 25 | 
 26 |   $('.search-btn').on('click', () => {
 27 |     setTimeout(function (){
 28 |       $('.search-input').focus();
 29 |     }, 1000);
 30 |   })
 31 | });
 32 | 
 33 | nextBtn.on('click', () => {
 34 |   currentPage += 1;
 35 |   fetchResults(searchQuery);
 36 | });
 37 | 
 38 | prevBtn.on('click', () => {
 39 |   currentPage -= 1;
 40 |   fetchResults(searchQuery);
 41 | });
 42 | 
 43 | function pagination(totalPages) {
 44 |   nextBtn.removeClass('hidden');
 45 |   if (currentPage >= totalPages) {
 46 |     nextBtn.addClass('hidden');
 47 |   }
 48 | 
 49 |   prevBtn.addClass('hidden');
 50 |   if (currentPage !== 1) {
 51 |     prevBtn.removeClass('hidden');
 52 |   }
 53 | }
 54 | 
 55 | async function fetchResults(searchQuery) {
 56 |   spinner.removeClass('hidden');
 57 |   try {
 58 |     const results = await searchUnsplash(searchQuery);
 59 |     pagination(results.total_pages);
 60 |     displayResults(results);
 61 |   } catch(err) {
 62 |     console.log(err);
 63 |     alert('Failed to search Unsplash');
 64 |   }
 65 |   spinner.addClass('hidden');
 66 | } 
 67 | 
 68 | function handleSubmit(event) {
 69 |   event.preventDefault();
 70 |   currentPage = 1;
 71 |   const inputValue = $('.js-search-input').val();
 72 |   searchQuery = $.trim(inputValue);
 73 |   fetchResults(searchQuery);
 74 | }
 75 | 
 76 | function changeUnsplashValue (photo) {
 77 |   console.log('Changing ...')
 78 |   photographer = photo.getAttribute('data-photographer')
 79 |   photographerPage = photo.getAttribute('data-photographerPage')
 80 |   regularLink = photo.getAttribute('data-regularLink')
 81 |   $('#photographerLink').text(photographer)
 82 |   $('#photographerLink').attr('href', photographerPage)
 83 |   $('#unsplash-img').show()
 84 |   $('#selectedImg').attr('src', 'https://source.unsplash.com/' + photo.id);
 85 |   $('#unsplashModal').modal('hide');
 86 |   localStorage.setItem('ideasUnsplashselected_photo', photo.id);
 87 |   localStorage.setItem('ideasUnsplashphotographer', photographer);
 88 |   localStorage.setItem('ideasUnsplashphotographerPage', photographerPage);
 89 |   localStorage.setItem('ideasUnsplashregularLink', regularLink)
 90 | }
 91 | 
 92 | async function searchUnsplash (searchQuery) {
 93 |   const endpoint = `/unsplash-search/photos/${searchQuery}/${currentPage}`
 94 |   const response = await fetch(endpoint);
 95 |   if (!response.ok) {
 96 |     throw Error(response.statusText);
 97 |   }
 98 |   const json = await response.json();
 99 |   return json;
100 | }
101 | 
102 | function removePhoto () {
103 |   localStorage.removeItem('ideasUnsplashselected_photo');
104 |   localStorage.removeItem('ideasUnsplashphotographer')
105 |   localStorage.removeItem('ideasUnsplashphotographerPage')
106 |   localStorage.removeItem('ideasUnsplashregularLink')
107 |   $('#unsplash-img').hide()
108 |   $('#photographerLink').text('')
109 |   $('#photographerLink').attr('href', '')
110 | }
111 | 
112 | function displayResults(json) {
113 |   const searchResults = $('.search-results');
114 |   searchResults.text('');
115 |   json['results'].forEach(result => {
116 |     const url = result.urls.thumb;
117 |     const id = result.id;
118 |     const unsplashLink = result.links.html;
119 |     // unsplashLink is like https://unsplash.com/photos/esvWH-owWug
120 |     photographer = result.user.name;
121 |     photographerPage = result.user.links.html;
122 |     const regularImgLink = result.urls.regular
123 |     // photographerPage is like https://unsplash.com/@campful
124 |     searchResults[0].insertAdjacentHTML(
125 |       'beforeend',
126 |       `<div class="unsplash_thumb" id="${id}" data-photographer="${photographer}" data-photographerPage="${photographerPage}"  onClick="changeUnsplashValue(this)">
127 |         <div class="p-2">
128 |         <img class="result-item"  src="${url}";/>
129 |         <p class="photographer-name">Photo by 
130 |         <a href="${photographerPage}" target="_blank" style="color: black; ">${photographer}</a> on <a href="https://unsplash.com/" target="_blank">Unsplash</a>
131 |         </p>
132 |         </div>
133 |       </div>`
134 |     );	
135 |   });
136 |   totalResults = json.total;
137 |   resultStats.text(`About ${totalResults} results found`);
138 |   $('.modal').scrollTop(0);
139 | };
140 | 


--------------------------------------------------------------------------------
/static/upload/db0e85e8/cecilieo_color_picker (5).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/static/upload/db0e85e8/cecilieo_color_picker (5).png


--------------------------------------------------------------------------------
/static/upload/db0e85e8/cecilieo_color_picker (5).thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/static/upload/db0e85e8/cecilieo_color_picker (5).thumbnail.png


--------------------------------------------------------------------------------
/templates/_unsplash_search.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | {% set active_page = "unsplash_search" %}
 3 | 
 4 | {% block title %}Accordion{% endblock %}
 5 | 
 6 | {% block head %}
 7 | {{ super() }}
 8 | 
 9 | 
10 | {% endblock %}
11 | 
12 | {% block page_content %}
13 | <h1 class="cap">Unsplash Search</h1>
14 | 
15 | {% set flora = ['flower','tree','fruit','garden'] %}
16 | {% set fauna = [ 'cat', 'dog', 'bird', 'fish'] %}
17 | 
18 | <form method="post" id="category">
19 |     <div class="accordion" id="accordionExample">
20 |         <div class="card">
21 |             <div class="card-header" id="headingOne">
22 |                 <h2 class="mb-0">
23 |                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
24 |                         aria-controls="collapseOne">
25 |                         FLORA
26 |                     </button>
27 | 
28 |                 </h2>
29 |             </div>
30 | 
31 |             <div id="collapseOne" class="collapse 
32 |             {% for  name in flora %}
33 |             {% if name==tag %}
34 |             show 
35 |             {% endif %}
36 |             {% endfor %}
37 |             " aria-labelledby="headingOne" data-parent="#accordionExample">
38 |                 <div class="card-body">
39 |                     {% for name in flora %}
40 |                     {% if tag == name %}
41 |                     {% set checked="checked" %}
42 |                     {% endif %}
43 |                     <div class="form-check form-check-inline">
44 |                         <input class="form-check-input" type="radio" name="tag" id="radio-{{name}}" value="{{name}}" {{
45 |                             checked }}>
46 |                         <label class="form-check-label" for="radio-{{name}}">
47 |                             {{ name | capitalize}}
48 |                         </label>
49 |                     </div>
50 |                     {% endfor %}
51 |                 </div>
52 |             </div>
53 |         </div>
54 | 
55 |         <div class="card">
56 |             <div class="card-header" id="headingTwo">
57 |                 <h2 class="mb-0">
58 |                     <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
59 |                         data-target="#collapseTwo" aria-controls="collapseTwo">
60 |                         FAUNA
61 |                     </button>
62 |                 </h2>
63 |             </div>
64 |             <div id="collapseTwo" class="collapse
65 |             {% for  name in fauna %}
66 |             {% if name==tag %}
67 |             show 
68 |             {% endif %}
69 |             {% endfor %}
70 |             " aria-labelledby="headingTwo" data-parent="#accordionExample">
71 |                 <div class="card-body">
72 |                     {% for name in fauna %}
73 |                     {% if tag == name %}
74 |                     {% set checked="checked" %}
75 |                     {% endif %}
76 |                     <div class="form-check form-check-inline">
77 |                         <input class="form-check-input" type="radio" name="tag" id="radio-{{name}}" value="{{name}}" {{
78 |                             checked }}>
79 |                         <label class="form-check-label" for="radio-{{name}}">
80 |                             {{ name | capitalize}}
81 |                         </label>
82 |                     </div>
83 |                     {% endfor %}
84 |                 </div>
85 |             </div>
86 |         </div>
87 |     </div>
88 |     <button type="submit" class="submit btn btn-primary btn-xl">Submit</button>
89 | </form>
90 | 
91 | {% endblock %}
92 | 
93 | {% block scripts %}
94 | {{ super() }}
95 | 
96 | 
97 | {% endblock %}


--------------------------------------------------------------------------------
/templates/accordion.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | {% set active_page = "accordion" %}
  3 | 
  4 | {% block title %}Accordion{% endblock %}
  5 | 
  6 | {% block head %}
  7 | {{ super() }}
  8 | 
  9 | 
 10 | {% endblock %}
 11 | 
 12 | {% block page_content %}
 13 | <h1 class="cap">Accordion</h1>
 14 | 
 15 | {% if tag %}
 16 | <h2>You selected {{tag}}</h2>
 17 | {% endif %}
 18 | 
 19 | {% set flora = ['flower','tree','fruit','garden'] %}
 20 | {% set fauna = [ 'cat', 'dog', 'bird', 'fish'] %}
 21 | 
 22 | <form method="post" id="category">
 23 |     <div class="accordion" id="accordionExample">
 24 |         <div class="card">
 25 |             <div class="card-header" id="headingOne">
 26 |                 <h2 class="mb-0">
 27 |                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
 28 |                         aria-controls="collapseOne">
 29 |                         FLORA
 30 |                     </button>
 31 | 
 32 |                 </h2>
 33 |             </div>
 34 | 
 35 |             <div id="collapseOne" class="collapse 
 36 |             {% for  name in flora %}
 37 |             {% if name==tag %}
 38 |             show 
 39 |             {% endif %}
 40 |             {% endfor %}
 41 |             " aria-labelledby="headingOne" data-parent="#accordionExample">
 42 |                 <div class="card-body">
 43 |                     {% for name in flora %}
 44 |                     {% if tag == name %}
 45 |                     {% set checked="checked" %}
 46 |                     {% endif %}
 47 |                     <div class="form-check form-check-inline">
 48 |                         <input class="form-check-input" type="radio" name="tag" id="radio-{{name}}" value="{{name}}"
 49 |                             {{ checked }}>
 50 |                         <label class="form-check-label" for="radio-{{name}}">
 51 |                             {{ name | capitalize}}
 52 |                         </label>
 53 |                     </div>
 54 |                     {% endfor %}
 55 |                 </div>
 56 |             </div>
 57 |         </div>
 58 | 
 59 |         <div class="card">
 60 |             <div class="card-header" id="headingTwo">
 61 |                 <h2 class="mb-0">
 62 |                     <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
 63 |                         data-target="#collapseTwo" aria-controls="collapseTwo">
 64 |                         FAUNA
 65 |                     </button>
 66 |                 </h2>
 67 |             </div>
 68 |             <div id="collapseTwo" class="collapse
 69 |             {% for  name in fauna %}
 70 |             {% if name==tag %}
 71 |             show 
 72 |             {% endif %}
 73 |             {% endfor %}
 74 |             " aria-labelledby="headingTwo" data-parent="#accordionExample">
 75 |                 <div class="card-body">
 76 |                     {% for name in fauna %}
 77 |                     {% if tag == name %}
 78 |                     {% set checked="checked" %}
 79 |                     {% endif %}
 80 |                     <div class="form-check form-check-inline">
 81 |                         <input class="form-check-input" type="radio" name="tag" id="radio-{{name}}" value="{{name}}"
 82 |                             {{ checked }}>
 83 |                         <label class="form-check-label" for="radio-{{name}}">
 84 |                             {{ name | capitalize}}
 85 |                         </label>
 86 |                     </div>
 87 |                     {% endfor %}
 88 |                 </div>
 89 |             </div>
 90 |         </div>
 91 |     </div>
 92 |     <button type="submit" class="submit btn btn-primary btn-xl">Submit</button>
 93 | </form>
 94 | 
 95 | {% endblock %}
 96 | 
 97 | {% block scripts %}
 98 | {{ super() }}
 99 | 
100 | 
101 | {% endblock %}


--------------------------------------------------------------------------------
/templates/base.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     {% block head %}
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9 |     <meta name="description" content="Free Artist Tools by cecilieo.com">
10 |     <meta name="author" content="Shinichi Okada">
11 | 
12 |     <title>{% block title %}{% endblock %} FastAPI Starter</title>
13 |     <link rel="icon" href="{{ url_for('static', path='/images/favicon.ico') }}" sizes="32x32" />
14 | 
15 |     <!-- Bootstrap CSS CDN -->
16 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
17 |     <!-- Bootstrap icon -->
18 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
19 |     <!-- Custom CSS -->
20 |     <link href="{{ url_for('static', path='/css/style3.css') }}" rel="stylesheet">
21 |     <link href="{{ url_for('static', path='/css/mystyle.css') }}" rel="stylesheet">
22 | 
23 |     <!-- Scrollbar Custom CSS -->
24 |     <link rel="stylesheet"
25 |         href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
26 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
27 |     <!-- Font Awesome JS -->
28 |     <script src="https://kit.fontawesome.com/543c4560e5.js" crossorigin="anonymous"></script>
29 | 
30 |     {% endblock %}
31 | </head>
32 | 
33 | <body>
34 |     <div class="wrapper">
35 |         {% include 'include/sidebar.html' %}
36 |         <!-- Page Content  -->
37 |         <div id="content">
38 |             {% include 'include/topnav.html' %}
39 |             {% block page_content %}
40 |             {% endblock %}
41 |         </div>
42 |     </div>
43 |     <div class="overlay"></div>
44 | 
45 | 
46 |     {% block scripts %}
47 |     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
48 |     <!-- Bootstrap JS -->
49 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
50 |     <!-- jQuery Custom Scroller CDN -->
51 |     <script
52 |         src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
53 |     <script type="text/javascript">
54 |         $(document).ready(function () {
55 |             $("#sidebar").mCustomScrollbar({
56 |                 theme: "minimal"
57 |             });
58 | 
59 |             $('#dismiss, .overlay').on('click', function () {
60 |                 $('#sidebar').removeClass('active');
61 |                 $('.overlay').removeClass('active');
62 |             });
63 | 
64 |             $('#sidebarCollapse').on('click', function () {
65 |                 $('#sidebar').addClass('active');
66 |                 $('.overlay').addClass('active');
67 |                 $('.collapse.in').toggleClass('in');
68 |                 $('a[aria-expanded=true]').attr('aria-expanded', 'false');
69 |             });
70 |         });
71 |     </script>
72 |     {% endblock %}
73 | </body>
74 | 
75 | </html>


--------------------------------------------------------------------------------
/templates/copy_to_clipboard.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | {% set active_page = "flickr-search" %}
 3 | 
 4 | {% block title %}Copy to clipboard{% endblock %}
 5 | 
 6 | {% block head %}
 7 | {{ super() }}
 8 | {% endblock %}
 9 | 
10 | {% block page_content %}
11 | <div class="mycontainer">
12 |     <div class="card">
13 |         <img src="/static/images/unsplash1.jpeg"/>
14 |         <div class="card-body">
15 |                 <p class="textToCopy">
16 |                     Photo by <a href="https://unsplash.com/@peter_mc_greats" target="_blank">Pietro De Grandi</a> on <a href="https://unsplash.com/photos/T7K4aEPoGGk" target="_blank">Unsplash</a>
17 |                 </p>
18 |                 <button type="button" class="btn btn-primary" id="copytoclipboard" onclick="copy('.textToCopy')">Copy</button>
19 |         </div>
20 |     </div>
21 | </div>
22 | <div class="gif-img">
23 |     <h3>Demo</3>
24 |     <img src="/static/images/copy.gif"/>
25 | </div>
26 | {% endblock %}
27 | 
28 | {% block scripts %}
29 | {{ super() }}
30 | <script>
31 |     // copy function to copy credit text 
32 |     function copy(selector){
33 |         let $temp = $("<div>");
34 |         $("body").append($temp);
35 |         $temp.attr("contenteditable", true)
36 |             .html($(selector).html()).select()
37 |             .on("focus", function() { document.execCommand('selectAll',false,null); })
38 |             .focus();
39 |         document.execCommand("copy");
40 |         $temp.remove();
41 |     }
42 | </script>
43 | {% endblock %}


--------------------------------------------------------------------------------
/templates/flickr_search.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | {% set active_page = "flickr-search" %}
 3 | 
 4 | {% block title %}Flickr Search{% endblock %}
 5 | 
 6 | {% block head %}
 7 | {{ super() }}
 8 | <link href="{{ url_for('static', path='/css/search_image.css') }}" rel="stylesheet">
 9 | {% endblock %}
10 | 
11 | {% block page_content %}
12 | <h1 class="cap">Flickr Photo Search</h1>
13 | <div class="card bg-light mb-4">
14 |     <div class="card-header text-center">
15 |         <label class="form-label fs-3"><i class="bi-image" role="img" aria-label="Image"></i> Photo</label>
16 |     </div>
17 |     <div class="card-body">
18 |         <div class="photo_search row g-3 py-3 common-form">
19 |             <div class="btn-group" role="group" aria-label="Button group">
20 |                 <button type="button" class="search-btn btn btn-primary btn-lg search-photo" data-bs-toggle="modal" data-bs-target="#flickrModal">
21 |                     Search photo
22 |                 </button>
23 |                 <button type="button" class="btn btn-secondary btn-lg remove-photo" onclick="removePhoto()">
24 |                     Remove photo
25 |                 </button>
26 |             </div>
27 |             <div class="modal fade" id="flickrModal" tabindex="-1" aria-labelledby="flickrModalLabel" aria-hidden="true">
28 |                 <div class="modal-dialog modal-xl">
29 |                     <div class="modal-content">
30 |                         <div class="modal-header">
31 |                             <h5 class="modal-title" id="flickrModalLabel">Flickr Photo Search</h5>
32 |                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
33 |                         </div>
34 |                         <div class="modal-body">
35 |                             <form class="js-form" onsubmit="handleSubmit(event)">
36 |                                 <div class="input-group mb-4">
37 |                                     <input type="text" class="search-input form-control search-input js-search-input" placeholder="Type keywords to search Flickr." autofocus>
38 |                                     <button type="submit" class="btn btn-outline-secondary text-white bg-primary "><i class="bi-search"></i></button>
39 |                                 </div>
40 |                             </form>
41 |                             <div class="result-stats js-result-stats container"></div>
42 |                             <div class="search-results js-search-results  d-flex flex-wrap"></div>
43 |                             
44 |                             <div class="pagination">
45 |                                 <button class="hidden prev-btn js-prev btn-info"><a href="#top">Previous page</a></button>
46 |                                 <button class="hidden next-btn js-next btn-success"><a href="#top">Next page</a></button>
47 |                             </div>
48 |                         </div>
49 |                         <div class="modal-footer">
50 |                             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
51 |                         </div>
52 |                     </div>
53 |                 </div>
54 |             </div>            
55 |             
56 |             <div class="spinner js-spinner hidden">
57 |                 <div class="double-bounce1"></div>
58 |                 <div class="double-bounce2"></div>
59 |             </div>
60 |             
61 |             <div class="selected-img">
62 |                 <div class="photo" id="flickrPhoto">
63 |                     <img id="selectedImg" style="width:90%; margin:auto;" src=""/>
64 |                     <div class="desc">Image by <a class="credit_link" id="photographerLink" target="_blank" rel="noopener" href="#">Photographer</a> from <a
65 |                         class="credit_link" target="_blank" rel="noopener" href="https://flickr.com/">Flickr</a> is
66 |                         licensed
67 |                         under <a class="credit_link" target="_blank" id="license_link" rel="noopener"
68 |                             href="https://creativecommons.org/licenses/{{license_name}}/2.0">CC
69 |                             {{license_name|upper}} 2.0</a>
70 |                     </div>
71 |                 </div>
72 |             </div>
73 |         </div>
74 |     </div>
75 | </div>
76 | {% endblock %}
77 | 
78 | {% block scripts %}
79 | {{ super() }}
80 | <script src="{{ url_for('static', path='/js/flickr_search.js') }}"></script>
81 | {% endblock %}


--------------------------------------------------------------------------------
/templates/include/sidebar.html:
--------------------------------------------------------------------------------
 1 | <!-- Sidebar  -->
 2 | <nav id="sidebar">
 3 |     <div id="dismiss">
 4 |         <i class="fas fa-arrow-left"></i>
 5 |     </div>
 6 | 
 7 |     <div class="sidebar-header">
 8 |         <h3>FastAPI Web Starter</h3>
 9 |     </div>
10 |      
11 |     <ul class="list-unstyled components">
12 |         <li class="active">
13 |             <a href="/">Home</a>
14 |         </li>
15 |         <li class="dropdown">
16 |             <a href="#"class="dropdown-toggle" id="dropdownMenuButton1"  data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
17 |             <ul class="dropdown-menu" id="dropdownMenuButton1">
18 |                 <li>
19 |                     <a href="/page/about" class="dropdown-item">About</a>
20 |                 </li>
21 |                 <li>
22 |                     <a href="/page/info"class="dropdown-item">Information</a>
23 |                 </li>
24 |             </ul>
25 |         </li>
26 |         <li>
27 |             <a href="/page/portfolio">Portfolio</a>
28 |         </li>
29 |         <li>
30 |             <a href="/page/contact">Contact</a>
31 |         </li>
32 |     </ul>
33 | </nav>


--------------------------------------------------------------------------------
/templates/include/topnav.html:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-expand-lg navbar-light bg-light">
 2 |     <div class="container-fluid">
 3 |         <button type="button" id="sidebarCollapse" class="btn btn-info">
 4 |             <i class="fas fa-align-left"></i>
 5 |         </button>
 6 |         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 7 |             <span class="navbar-toggler-icon"></span>
 8 |         </button>
 9 |     <div class="collapse navbar-collapse" id="navbarSupportedContent">
10 |         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
11 |             <li class="nav-item dropdown">
12 |                 
13 |                 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
14 |                     Photo Search
15 |                 </a>
16 |                 <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
17 |                     <li>
18 |                         <a class="dropdown-item" href="/unsplash-search">Unspalsh Search</a>
19 |                     </li>
20 |                     <li>
21 |                         <a class="dropdown-item" href="/flickr-search">Flickr Search</a>
22 |                     </li>
23 |                     <li>
24 |                         <a class="dropdown-item" href="/unsplash">Unsplash</a>
25 |                     </li>
26 |                 </ul>
27 |             </li>
28 |             <li class="nav-item {{'active' if active_page == 'upload' }}">
29 |                 <a class="nav-link" href="/upload">Upload</a>
30 |             </li>
31 |             <li class="nav-item dropdown">
32 |                 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
33 |                     Other Items
34 |                 </a>
35 |                 <ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
36 |                     <li>
37 |                         <a class="dropdown-item" href="/accordion">Accordion</a>
38 |                     </li>
39 |                     <li>
40 |                         <a class="dropdown-item" href="/twoforms">Two forms</a>
41 |                     </li>
42 |                     <li>
43 |                         <a class="dropdown-item" href="/copy-to-clipboard">Copy to clipboard</a>
44 |                     </li>
45 |                 </ul>
46 |             </li>
47 |         </ul>
48 |       </div>
49 |     </div>
50 |   </nav>


--------------------------------------------------------------------------------
/templates/page.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block title %}FastAPI Starter{% endblock %}
 4 | {% block head %}
 5 | {{ super() }}
 6 | 
 7 | {% endblock %}
 8 | 
 9 | {% block page_content %}
10 | {% include 'include/sidebar.html' %}
11 | <main role="main" class="container-fluid">
12 |     <div class="row">
13 |         <div class="col">
14 |             {{data.text|safe}}
15 |         </div>
16 |     </div>
17 | </main><!-- /.container -->
18 | 
19 | {{data.page}}
20 | 
21 | {% endblock %}
22 | 
23 | {% block scripts %}
24 | {{ super() }}
25 | 
26 | 
27 | {% endblock %}


--------------------------------------------------------------------------------
/templates/twoforms.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | {% set active_page = "twoforms" %}
 3 | 
 4 | {% block title %}Two Forms{% endblock %}
 5 | 
 6 | {% block head %}
 7 | {{ super() }}
 8 | 
 9 | 
10 | {% endblock %}
11 | 
12 | {% block page_content %}
13 | <h1 class="cap">Two Forms</h1>
14 | {% if yournum %}
15 | <h2>Your number is {{yournum}} and the result is {{result}}.</h2>
16 | {% endif %}
17 | <h3>Form 1: Add 2</h3>
18 | <form action="/form1" method="post">
19 |     <input type="number" name="number" value="" required />
20 |     <input type="submit">
21 | </form>
22 | 
23 | <h3>Form 2: Add 100</h3>
24 | <form action="/form2" method="post">
25 |     <input type="number" name="number" value="" required />
26 |     <input type="submit">
27 | </form>
28 | 
29 | 
30 | 
31 | {% endblock %}
32 | 
33 | {% block scripts %}
34 | {{ super() }}
35 | 
36 | 
37 | {% endblock %}


--------------------------------------------------------------------------------
/templates/unsplash.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | {% set active_page = "unsplash" %}
 3 | 
 4 | {% block title %}Unsplash Finder{% endblock %}
 5 | 
 6 | {% block head %}
 7 | {{ super() }}
 8 | 
 9 | 
10 | {% endblock %}
11 | 
12 | {% block page_content %}
13 | <h1 class="cap">Unsplash Finder</h1>
14 | 
15 | <img class="responsive" src="https://source.unsplash.com/400x400/?flower" width="400" height="400">
16 | <p>Source</p>
17 | 
18 | <img class="responsive" src="https://source.unsplash.com/collection/827743/400x400" width="400" height="400">
19 | <p>Source</p>
20 | 
21 | {% endblock %}
22 | 
23 | {% block scripts %}
24 | {{ super() }}
25 | 
26 | 
27 | {% endblock %}


--------------------------------------------------------------------------------
/templates/unsplash_search.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | {% set active_page = "unsplash-search" %}
 3 | 
 4 | {% block title %}Unsplash Search{% endblock %}
 5 | 
 6 | {% block head %}
 7 | {{ super() }}
 8 | <link href="{{ url_for('static', path='/css/search_image.css') }}" rel="stylesheet">
 9 | {% endblock %}
10 | 
11 | {% block page_content %}
12 | <h1 class="cap">Unsplash Image Search</h1>
13 | <div class="card bg-light mb-4">
14 |     <div class="card-header text-center">
15 |         <label class="form-label fs-3"><i class="bi-image" role="img" aria-label="Image"></i> Photo</label>
16 |     </div>
17 |     <div class="card-body">
18 |         <div class="unsplash_search row g-3 py-3 common-form">
19 |             <div class="btn-group" role="group" aria-label="Button group">
20 |                 <button type="button" class="search-btn btn btn-primary btn-lg search-photo" data-bs-toggle="modal" data-bs-target="#unsplashModal">
21 |                     Search photo
22 |                 </button>
23 |                 <button type="button" class="btn btn-secondary btn-lg remove-photo" onclick="removePhoto()">
24 |                     Remove photo
25 |                 </button>
26 |             </div>
27 |             <div class="modal fade" id="unsplashModal" tabindex="-1" aria-labelledby="unsplashModalLabel" aria-hidden="true">
28 |                 <div class="modal-dialog modal-xl">
29 |                     <div class="modal-content">
30 |                         <div class="modal-header">
31 |                             <h5 class="modal-title" id="unsplashModalLabel">Unsplash Photo Search</h5>
32 |                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
33 |                         </div>
34 |                         <div class="modal-body">
35 |                             <form class="js-form" onsubmit="handleSubmit(event)">
36 |                                 <div class="input-group mb-4">
37 |                                 <input type="text" class="search-input form-control search-input js-search-input" placeholder="Type keywords to search Unsplash." autofocus>
38 |                                 <button type="submit" class="btn btn-outline-secondary text-white bg-primary "><i class="bi-search"></i></button>
39 |                                 </div>
40 |                             </form>
41 |                             
42 |                             <div class="result-stats js-result-stats container"></div>
43 |                             <div class="search-results js-search-results  d-flex flex-wrap"></div>
44 |                             
45 |                             <div class="pagination">
46 |                                 <button class="hidden prev-btn js-prev btn-info"><a href="#top">Previous page</a></button>
47 |                                 <button class="hidden next-btn js-next btn-success"><a href="#top">Next page</a></button>
48 |                             </div>
49 |                         </div>
50 |                         <div class="modal-footer">
51 |                             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
52 |                         </div>
53 |                     </div>
54 |                 </div>
55 |             </div>            
56 |         </div>
57 |         <div class="spinner js-spinner hidden">
58 |             <div class="double-bounce1"></div>
59 |             <div class="double-bounce2"></div>
60 |         </div>
61 |         
62 |         <div id="unsplash-img">
63 |             <div class="photo" id="unsplashPhoto">
64 |                 <img id="selectedImg" class="my-3" style="width:100%; margin:auto;" src=""/>
65 |                 <div class="desc">Image by <a class="credit_link" id="photographerLink" target="_blank" rel="noopener" href="">name here</a> from <a
66 |                     class="credit_link" target="_blank" rel="noopener" href="https://unsplash.com/">Unsplash</a>
67 |                 </div>
68 |             </div>
69 |         </div>
70 |     </div>
71 | </div>
72 | {% endblock %}
73 | 
74 | {% block scripts %}
75 | {{ super() }}
76 | <script src="{{ url_for('static', path='/js/unsplash_search.js') }}"></script>
77 | {% endblock %}


--------------------------------------------------------------------------------
/templates/upload.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | {% set active_page = "upload" %}
 3 | 
 4 | {% block title %}Upload{% endblock %}
 5 | 
 6 | {% block head %}
 7 | {{ super() }}
 8 | {% endblock %}
 9 | 
10 | {% block page_content %}
11 | <div class="col-12 up-area">
12 |     <h1>Upload</h1>
13 |     <input type="file" name="file" id="file">
14 |     <!-- Drag and Drop container-->
15 |     <div class="upload-area" id="uploadfile">
16 |         <h2 id="howto">Drag and Drop file here</h2>
17 |         <h2>Or<br />Click to Upload</h2>
18 |         <button type="submit" class="box_button">Upload</button>
19 |     </div>
20 | </div>
21 | 
22 | 
23 | <div class="col-12">
24 |     <div class="colorpalette">
25 |         <h3>Uploaded Image</h3>
26 |         <div id="result" class="row">
27 |             <div id="original" class="col-12">
28 |             </div>
29 |         </div>
30 |     </div>
31 | </div>
32 | {% endblock %}
33 | 
34 | {% block scripts %}
35 | {{ super() }}
36 | 
37 | <script type="module" src="{{ url_for('static', path='/js/dragdrop.js') }}"></script>
38 | 
39 | {% endblock %}


--------------------------------------------------------------------------------
/tests/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shinokada/fastapi-webstarter-demo/74d6363d7bbb4b257bafbb5106e229c105a06b53/tests/__init__.py


--------------------------------------------------------------------------------
/tests/test_main.py:
--------------------------------------------------------------------------------
 1 | from fastapi.testclient import TestClient
 2 | from app.main import app
 3 | 
 4 | client = TestClient(app)
 5 | 
 6 | 
 7 | def test_home():
 8 |     response = client.get(
 9 |         "/", headers={"content-type": "text/html; charset=utf-8"})
10 |     assert response.status_code == 200
11 |     assert b"Welcome to FastAPI Starter" in response.content
12 |     response = client.get("/static/css/style3.css")
13 |     assert response.status_code == 200
14 | 
15 | 
16 | def test_page_about():
17 |     response = client.get("/page/about",
18 |                           headers={"content-type": "text/html; charset=utf-8"})
19 |     assert response.status_code == 200
20 |     assert b"About" in response.content
21 | 
22 | 
23 | def test_unsplash():
24 |     response = client.get("/unsplash",
25 |                           headers={"content-type": "text/html; charset=utf-8"})
26 |     assert response.status_code == 200
27 |     assert b"Unsplash Finder" in response.content
28 | 
29 | 
30 | def test_two_forms():
31 |     response = client.get("/twoforms",
32 |                           headers={"content-type": "text/html; charset=utf-8"})
33 |     assert response.status_code == 200
34 |     assert b"Two Forms" in response.content
35 | 
36 | 
37 | def test_accordion():
38 |     response = client.post("/accordion", data={"tag": "flower"}, headers={
39 |                            "Content-Type": "application/x-www-form-urlencoded"})
40 |     assert response.status_code == 200
41 |     assert b"Accordion" in response.content
42 | 
43 | 
44 | def test_get_upload():
45 |     response = client.get(
46 |         "/upload", headers={"content-type": "text/html; charset=utf-8"})
47 |     assert response.status_code == 200
48 |     assert b"Hello from upload.py" in response.content
49 | 
50 | 
51 | # def test_post_upload():
52 | #     response = client.post("/upload", data={"file": "flower"}, headers={
53 | #                            "Content-Type": "application/x-www-form-urlencoded"})
54 | #     assert response.status_code == 200
55 | #     assert b"Hello from upload.py" in response.content
56 | 


--------------------------------------------------------------------------------