Skip to content

Commit a3abcd9

Browse files
author
ucheckit7@gmail.com
committedMay 8, 2022
first commit
0 parents  commit a3abcd9

15 files changed

+11607
-0
lines changed
 

‎main.py

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
from ast import Dict
2+
import flask
3+
from flask import Flask, render_template, request, redirect, url_for
4+
import requests
5+
import json
6+
app = Flask(__name__)
7+
8+
ls={}
9+
10+
11+
url='https://jsonplaceholder.typicode.com/posts'
12+
13+
14+
15+
@app.route('/')
16+
def index():
17+
global ls
18+
ls = requests.request("GET", url).json()
19+
20+
return render_template('index.html',data=ls)
21+
22+
@app.route('/about')
23+
def about():
24+
return render_template('about.html')
25+
26+
27+
@app.route('/post/<int:dat>')
28+
def post(dat):
29+
data=ls[dat-1]
30+
return render_template('post.html',data=data)
31+
32+
@app.route('/contact')
33+
def contact():
34+
return render_template('contact.html')
35+
36+
@app.route('/home')
37+
def home():
38+
return render_template('index.html')
39+
40+
41+
42+
43+
44+
45+
app.run(debug=True)

‎static/css/styles.css

+11,248
Large diffs are not rendered by default.

‎static/favicon.ico

22.9 KB
Binary file not shown.

‎static/images/about-bg.jpg

2.43 MB
Loading

‎static/images/contact-bg.jpg

489 KB
Loading

‎static/images/home-bg.jpg

984 KB
Loading

‎static/images/post-bg.jpg

1.72 MB
Loading

‎static/images/post-sample-image.jpg

112 KB
Loading

‎static/js/scripts.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*!
2+
* Start Bootstrap - Clean Blog v6.0.8 (https://startbootstrap.com/theme/clean-blog)
3+
* Copyright 2013-2022 Start Bootstrap
4+
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-clean-blog/blob/master/LICENSE)
5+
*/
6+
window.addEventListener('DOMContentLoaded', () => {
7+
let scrollPos = 0;
8+
const mainNav = document.getElementById('mainNav');
9+
const headerHeight = mainNav.clientHeight;
10+
window.addEventListener('scroll', function() {
11+
const currentTop = document.body.getBoundingClientRect().top * -1;
12+
if ( currentTop < scrollPos) {
13+
// Scrolling Up
14+
if (currentTop > 0 && mainNav.classList.contains('is-fixed')) {
15+
mainNav.classList.add('is-visible');
16+
} else {
17+
console.log(123);
18+
mainNav.classList.remove('is-visible', 'is-fixed');
19+
}
20+
} else {
21+
// Scrolling Down
22+
mainNav.classList.remove(['is-visible']);
23+
if (currentTop > headerHeight && !mainNav.classList.contains('is-fixed')) {
24+
mainNav.classList.add('is-fixed');
25+
}
26+
}
27+
scrollPos = currentTop;
28+
});
29+
})

‎templates/about.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{% include "header.html" %}
2+
<header class="masthead" style="background-image: url('../static/images/about-bg.jpg')">
3+
<div class="container position-relative px-4 px-lg-5">
4+
<div class="row gx-4 gx-lg-5 justify-content-center">
5+
<div class="col-md-10 col-lg-8 col-xl-7">
6+
<div class="page-heading">
7+
<h1>About Me</h1>
8+
<span class="subheading">This is what I do.</span>
9+
</div>
10+
</div>
11+
</div>
12+
</div>
13+
</header>
14+
<!-- Main Content-->
15+
<main class="mb-4">
16+
<div class="container px-4 px-lg-5">
17+
<div class="row gx-4 gx-lg-5 justify-content-center">
18+
<div class="col-md-10 col-lg-8 col-xl-7">
19+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?</p>
20+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus!</p>
21+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur magnam, excepturi aliquid ex itaque esse est vero natus quae optio aperiam soluta voluptatibus corporis atque iste neque sit tempora!</p>
22+
</div>
23+
</div>
24+
</div>
25+
</main>
26+
{% include "footer.html" %}

‎templates/contact.html

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{% include 'header.html'%}
2+
<!-- Page Header-->
3+
<header class="masthead" style="background-image: url('../static/images/contact-bg.jpg')">
4+
<div class="container position-relative px-4 px-lg-5">
5+
<div class="row gx-4 gx-lg-5 justify-content-center">
6+
<div class="col-md-10 col-lg-8 col-xl-7">
7+
<div class="page-heading">
8+
<h1>Contact Me</h1>
9+
<span class="subheading">Have questions? I have answers.</span>
10+
</div>
11+
</div>
12+
</div>
13+
</div>
14+
</header>
15+
<!-- Main Content-->
16+
<main class="mb-4">
17+
<div class="container px-4 px-lg-5">
18+
<div class="row gx-4 gx-lg-5 justify-content-center">
19+
<div class="col-md-10 col-lg-8 col-xl-7">
20+
<p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
21+
<div class="my-5">
22+
<!-- * * * * * * * * * * * * * * *-->
23+
<!-- * * SB Forms Contact Form * *-->
24+
<!-- * * * * * * * * * * * * * * *-->
25+
<!-- This form is pre-integrated with SB Forms.-->
26+
<!-- To make this form functional, sign up at-->
27+
<!-- https://startbootstrap.com/solution/contact-forms-->
28+
<!-- to get an API token!-->
29+
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
30+
<div class="form-floating">
31+
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
32+
<label for="name">Name</label>
33+
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
34+
</div>
35+
<div class="form-floating">
36+
<input class="form-control" id="email" type="email" placeholder="Enter your email..." data-sb-validations="required,email" />
37+
<label for="email">Email address</label>
38+
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
39+
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
40+
</div>
41+
<div class="form-floating">
42+
<input class="form-control" id="phone" type="tel" placeholder="Enter your phone number..." data-sb-validations="required" />
43+
<label for="phone">Phone Number</label>
44+
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
45+
</div>
46+
<div class="form-floating">
47+
<textarea class="form-control" id="message" placeholder="Enter your message here..." style="height: 12rem" data-sb-validations="required"></textarea>
48+
<label for="message">Message</label>
49+
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
50+
</div>
51+
<br />
52+
<!-- Submit success message-->
53+
<!---->
54+
<!-- This is what your users will see when the form-->
55+
<!-- has successfully submitted-->
56+
<div class="d-none" id="submitSuccessMessage">
57+
<div class="text-center mb-3">
58+
<div class="fw-bolder">Form submission successful!</div>
59+
To activate this form, sign up at
60+
<br />
61+
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
62+
</div>
63+
</div>
64+
<!-- Submit error message-->
65+
<!---->
66+
<!-- This is what your users will see when there is-->
67+
<!-- an error submitting the form-->
68+
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
69+
<!-- Submit Button-->
70+
<button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button>
71+
</form>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</main>
77+
{% include "footer.html" %}

‎templates/footer.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<footer class="border-top">
2+
<div class="container px-4 px-lg-5">
3+
<div class="row gx-4 gx-lg-5 justify-content-center">
4+
<div class="col-md-10 col-lg-8 col-xl-7">
5+
<ul class="list-inline text-center">
6+
<li class="list-inline-item">
7+
<a href="#!">
8+
<span class="fa-stack fa-lg">
9+
<i class="fas fa-circle fa-stack-2x"></i>
10+
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
11+
</span>
12+
</a>
13+
</li>
14+
<li class="list-inline-item">
15+
<a href=facebook.com/roninreturns">
16+
<span class="fa-stack fa-lg">
17+
<i class="fas fa-circle fa-stack-2x"></i>
18+
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
19+
</span>
20+
</a>
21+
</li>
22+
<li class="list-inline-item">
23+
<a href="https://github.com/khatamirock">
24+
<span class="fa-stack fa-lg">
25+
<i class="fas fa-circle fa-stack-2x"></i>
26+
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
27+
</span>
28+
</a>
29+
</li>
30+
</ul>
31+
<div class="small text-center text-muted fst-italic">Copyright &copy; Ronin's blog 2022</div>
32+
</div>
33+
</div>
34+
</div>
35+
</footer>
36+
<!-- Bootstrap core JS-->
37+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
38+
<!-- Core theme JS-->
39+
<script src="js/scripts.js"></script>
40+
</body>
41+
</html>

‎templates/header.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6+
<meta name="description" content="" />
7+
<meta name="author" content="" />
8+
<title>Clean Blog - Start Bootstrap Theme</title>
9+
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
10+
<!-- Font Awesome icons (free version)-->
11+
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
12+
<!-- Google fonts-->
13+
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
14+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
15+
<!-- Core theme CSS (includes Bootstrap)-->
16+
<link href="../static/css/styles.css" rel="stylesheet" />
17+
<!-- url_for('static', filename='style.css') -->
18+
</head>
19+
<body>
20+
<!-- Navigation-->
21+
<nav class="navbar navbar-expand-md navbar-light" id="mainNav">
22+
<div class="container px-1">
23+
<a class="navbar-brand" href="/">Blogger</a>
24+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
25+
Menu
26+
<i class="fas fa-bars"></i>
27+
</button>
28+
<div class="collapse navbar-collapse" id="navbarResponsive">
29+
<ul class="navbar-nav ms-auto py-4 py-lg-0">
30+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="/">Home</a></li>
31+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="{{url_for('about' )}}">About</a></li>
32+
33+
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href=" {{url_for('contact' )}} ">Contact</a></li>
34+
</ul>
35+
</div>
36+
</div>
37+
</nav>

‎templates/index.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{% include 'header.html' %}
2+
3+
<header class="masthead" style="background-image: url('../static/images/home-bg.jpg')">
4+
<div class="container position-relative px-4 px-lg-5">
5+
<div class="row gx-4 gx-lg-5 justify-content-center">
6+
<div class="col-md-10 col-lg-8 col-xl-7">
7+
<div class="site-heading">
8+
<h1>Khatami's Blog</h1>
9+
<span class="subheading">My thoughts online</span>
10+
</div>
11+
</div>
12+
</div>
13+
</div>
14+
</header>
15+
<!-- Main Content-->
16+
<div class="container px-4 px-lg-5">
17+
<div class="row gx-4 gx-lg-5 justify-content-center">
18+
<div class="col-md-10 col-lg-8 col-xl-7">
19+
<!-- Post preview-->
20+
{% for dat in data: %}
21+
<div class="post-preview">
22+
23+
<a href="{{ url_for('post' , dat=dat['id'] ) }}">
24+
<h2 class="post-title"> {{dat['title']}} </h2>
25+
<h3 class="post-subtitle"> {{dat['body'][0:40]}} </h3>
26+
</a>
27+
28+
<!-- <p>"{{dat}}"</p> -->
29+
<p class="post-meta">
30+
Posted by
31+
<!-- create a jinja url for -->
32+
33+
<a href="{{url_for('about')}}">Khatami_ONK</a>
34+
on September 24, 2022
35+
</p>
36+
37+
</div>
38+
<!-- Divider-->
39+
<hr class="my-4" />
40+
{% endfor %}
41+
<!-- Post preview-->
42+
43+
<div class="post-preview">
44+
<a href="post.html"><h2 class="post-title">I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.</h2></a>
45+
<p class="post-meta">
46+
Posted by
47+
<a href="#!">Start Bootstrap</a>
48+
on September 18, 2022
49+
</p>
50+
</div>
51+
52+
<!-- Divider-->
53+
<hr class="my-4" />
54+
<!-- Post preview-->
55+
56+
<!-- Divider-->
57+
<hr class="my-4" />
58+
<!-- Pager-->
59+
<div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
60+
</div>
61+
</div>
62+
</div>
63+
<!-- Footer-->
64+
{% include "footer.html" %}

‎templates/post.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{% include 'header.html'%}
2+
<!-- Page Header-->
3+
<header class="masthead" style="background-image: url('assets/img/post-bg.jpg')">
4+
<div class="container position-relative px-4 px-lg-5">
5+
<div class="row gx-4 gx-lg-5 justify-content-center">
6+
<div class="col-md-10 col-lg-8 col-xl-7">
7+
<div class="post-heading">
8+
<!-- <h1>{{data}}</h1> -->
9+
10+
<h1>{{data['title']}}</h1>
11+
12+
<h2 class="subheading">Problems look mighty small from 150 miles up</h2>
13+
<span class="meta">
14+
Posted by
15+
<a href="#!">{{data['userId']}}</a>
16+
on August 24, 2022
17+
</span>
18+
</div>
19+
</div>
20+
</div>
21+
</div>
22+
</header>
23+
<!-- Post Content-->
24+
<article class="mb-4">
25+
<div class="container px-4 px-lg-5">
26+
<div class="row gx-4 gx-lg-5 justify-content-center">
27+
<div class="col-md-10 col-lg-8 col-xl-7">
28+
<p>{{data['body']}}</p>
29+
<p>
30+
Placeholder text by
31+
<a href="http://spaceipsum.com/">Space Ipsum</a>
32+
&middot; Images by
33+
<a href="https://www.flickr.com/photos/nasacommons/">NASA on The Commons</a>
34+
</p>
35+
</div>
36+
</div>
37+
</div>
38+
</article>
39+
<!-- Footer-->
40+
{% include 'footer.html' %}

0 commit comments

Comments
 (0)
Please sign in to comment.