Skip to content
Snippets Groups Projects
Commit add10543 authored by F CZ's avatar F CZ
Browse files

m

parent 017009f7
No related branches found
No related tags found
No related merge requests found
File added
import os
from flask import Flask
def create_app(test_config=None):
# create and configure the app
app = Flask(__name__, instance_relative_config=True)
app.config.from_mapping(
SECRET_KEY='dev',
DATABASE=os.path.join(app.instance_path, 'flaskr.sqlite'),
)
if test_config is None:
# load the instance config, if it exists, when not testing
app.config.from_pyfile('config.py', silent=True)
else:
# load the test config if passed in
app.config.from_mapping(test_config)
# ensure the instance folder exists
try:
os.makedirs(app.instance_path)
except OSError:
pass
# a simple page that says hello
@app.route('/hello')
def hello():
return 'Hello, World!'
from . import calc
app.register_blueprint(calc.bp)
return app
\ No newline at end of file
File added
File added
File added
import functools
from flask import (
Blueprint, flash, g, redirect, render_template, request, session, url_for
)
from werkzeug.security import check_password_hash, generate_password_hash
bp = Blueprint('calc', __name__, url_prefix='')
@bp.route('/calc', methods=('GET', 'POST'))
def calc():
if request.method == 'POST':
input = request.form['input']
flash(input)
return render_template('calc.html')
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Navbar with Search Box | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="https://kit.fontawesome.com/a076d05399.js"></script> -->
</head>
{% block content %}
<body>
<nav>
<div class="menu-icon">
<span class="fas fa-bars"></span></div>
<div class="logo">
Caculator</div>
<div class="nav-items">
<li><a href="#">Caculate</a></li>
<li><a href="#">Traceback</a></li>
<li><a href="#">About</a></li>
</div>
<div class="search-icon">
<span class="fas fa-search"></span></div>
<div class="cancel-icon">
<span class="fas fa-times"></span></div>
<form action="#">
<input type="search" class="search-data" placeholder="Search" required>
<button type="submit" class="fas fa-search"></button>
</form>
</nav>
<div class="content">
<header class="space">Responsive Navbar with Search Box</header>
<div class="space text">
using HTML CSS & JavaScript</div>
</div>
<script>
const menuBtn = document.querySelector(".menu-icon span");
const searchBtn = document.querySelector(".search-icon");
const cancelBtn = document.querySelector(".cancel-icon");
const items = document.querySelector(".nav-items");
const form = document.querySelector("form");
menuBtn.onclick = ()=>{
items.classList.add("active");
menuBtn.classList.add("hide");
searchBtn.classList.add("hide");
cancelBtn.classList.add("show");
}
cancelBtn.onclick = ()=>{
items.classList.remove("active");
menuBtn.classList.remove("hide");
searchBtn.classList.remove("hide");
cancelBtn.classList.remove("show");
form.classList.remove("active");
cancelBtn.style.color = "#ff3d00";
}
searchBtn.onclick = ()=>{
form.classList.add("active");
searchBtn.classList.add("hide");
cancelBtn.classList.add("show");
}
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
background: #f2f2f2;
}
nav{
background: #171c24;
/* display: flex; */
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
height: 70px;
padding: 0 100px;
}
nav .logo{
color: #fff;
font-size: 30px;
font-weight: 600;
letter-spacing: -1px;
}
nav .nav-items{
display: flex;
flex: 1;
padding: 0 0 0 40px;
}
nav .nav-items li{
list-style: none;
padding: 0 15px;
}
nav .nav-items li a{
color: #fff;
font-size: 18px;
font-weight: 500;
text-decoration: none;
}
nav .nav-items li a:hover{
color: #ff3d00;
}
nav form{
display: flex;
height: 40px;
padding: 2px;
background: #1e232b;
min-width: 18%!important;
border-radius: 2px;
border: 1px solid rgba(155,155,155,0.2);
}
nav form .search-data{
width: 100%;
height: 100%;
padding: 0 10px;
color: #fff;
font-size: 17px;
border: none;
font-weight: 500;
background: none;
}
nav form button{
padding: 0 15px;
color: #fff;
font-size: 17px;
background: #ff3d00;
border: none;
border-radius: 2px;
cursor: pointer;
}
nav form button:hover{
background: #e63600;
}
nav .menu-icon,
nav .cancel-icon,
nav .search-icon{
width: 40px;
text-align: center;
margin: 0 50px;
font-size: 18px;
color: #fff;
cursor: pointer;
display: none;
}
nav .menu-icon span,
nav .cancel-icon,
nav .search-icon{
display: none;
}
@media (max-width: 1245px) {
nav{
padding: 0 50px;
}
}
@media (max-width: 1140px){
nav{
padding: 0px;
}
nav .logo{
flex: 2;
text-align: center;
}
nav .nav-items{
position: fixed;
z-index: 99;
top: 70px;
width: 100%;
left: -100%;
height: 100%;
padding: 10px 50px 0 50px;
text-align: center;
background: #14181f;
display: inline-block;
transition: left 0.3s ease;
}
nav .nav-items.active{
left: 0px;
}
nav .nav-items li{
line-height: 40px;
margin: 30px 0;
}
nav .nav-items li a{
font-size: 20px;
}
nav form{
position: absolute;
top: 80px;
right: 50px;
opacity: 0;
pointer-events: none;
transition: top 0.3s ease, opacity 0.1s ease;
}
nav form.active{
top: 95px;
opacity: 1;
pointer-events: auto;
}
nav form:before{
position: absolute;
content: "";
top: -13px;
right: 0px;
width: 0;
height: 0;
z-index: -1;
border: 10px solid transparent;
border-bottom-color: #1e232b;
margin: -20px 0 0;
}
nav form:after{
position: absolute;
content: '';
height: 60px;
padding: 2px;
background: #1e232b;
border-radius: 2px;
min-width: calc(100% + 20px);
z-index: -2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
nav .menu-icon{
display: block;
}
nav .search-icon,
nav .menu-icon span{
display: block;
}
nav .menu-icon span.hide,
nav .search-icon.hide{
display: none;
}
nav .cancel-icon.show{
display: block;
}
}
.content{
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
.content header{
font-size: 30px;
font-weight: 700;
}
.content .text{
font-size: 30px;
font-weight: 700;
}
.space{
margin: 10px 0;
}
nav .logo.space{
color: red;
padding: 0 5px 0 0;
}
@media (max-width: 980px){
nav .menu-icon,
nav .cancel-icon,
nav .search-icon{
margin: 0 20px;
}
nav form{
right: 30px;
}
}
@media (max-width: 350px){
nav .menu-icon,
nav .cancel-icon,
nav .search-icon{
margin: 0 10px;
font-size: 16px;
}
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content header{
font-size: 30px;
font-weight: 700;
}
.content .text{
font-size: 30px;
font-weight: 700;
}
.content .space{
margin: 10px 0;
}
/* .button:hover{
background-color: #d15a39;
}
.button li:hover{
background-color: #ffb29d;
} */
.button ul li{
height: 0;
transition: .2s;
opacity: 0;
transform: translateY(-65px);
background-color: #202c3f;
}
.button:hover li{
height: 40px;
opacity: 1;
transform: translateY(5px);
}
<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<nav>
<nav>
<div class="menu-icon">
<span class="fas fa-bars"></span></div>
<div class="logo">Caculator</div>
<div class="nav-items">
<li class="button"><a href="#">Caculate</a>
<!-- 二级菜单 -->
<ul>
<li><a href="{{url_for('calc.calc')}}">数值计算</a></li>
<li><a href="#">解方程</a></li>
<li><a href="#">多项式</a></li>
</ul>
</li>
<li ><a href="#">Traceback</a></li>
<li ><a href="#">About</a></li>
</div>
</form>
</nav>
</nav>
<section class="content">
<header>
<!-- {% block header %}{% endblock %} -->
</header>
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %}
{% block content %}{% endblock %}
</section>
\ No newline at end of file
{% extends 'base.html' %}
{% block header%}
<h1>{% block title %}Calc{% endblock %}</h1>
{% endblock %}
{% block content %}
<form method="post">
<label for="input">input</label>
<input name="input" id="input" required>
<nva>
<form>
<button>
<input type="submit" value="calc">
</button>
</form>
</nva>
</form>
{% endblock %}
\ No newline at end of file
{% extends 'base.html' %}
{% block header%}
<h1>{% block title %}Calc{% endblock %}</h1>
{% endblock %}
{% block content %}
<form method="post">
<label for="input">input</label>
<input name="input" id="input" required>
<nva>
<form>
<button>
<input type="submit" value="calc">
</button>
</form>
</nva>
</form>
{% endblock %}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment