A prototype API for distant reading of science fiction novels.
''' 37 | 38 | @app.route('/foo', methods=['POST']) 39 | def foo(): 40 | response = flask.jsonify({'result': request.json}) 41 | response.headers.add('Access-Control-Allow-Origin', '*') 42 | return response 43 | 44 | @app.route('/api/v1/resources/books/all', methods=['GET']) 45 | def api_all(): 46 | return jsonify(books) 47 | 48 | 49 | @app.route('/api/v1/resources/books', methods=['GET']) 50 | def api_id(): 51 | # Check if an ID was provided as part of the URL. 52 | # If ID is provided, assign it to a variable. 53 | # If no ID is provided, display an error in the browser. 54 | if 'id' in request.args: 55 | id = int(request.args['id']) 56 | else: 57 | return "Error: No id field provided. Please specify an id." 58 | 59 | # Create an empty list for our results 60 | results = [] 61 | 62 | # Loop through the data and match results that fit the requested ID. 63 | # IDs are unique, but other fields might return many results 64 | for book in books: 65 | if book['id'] == id: 66 | results.append(book) 67 | 68 | # Use the jsonify function from Flask to convert our list of 69 | # Python dictionaries to the JSON format. 70 | return jsonify(results) 71 | 72 | app.run() 73 | -------------------------------------------------------------------------------- /combined/static/js/auth.js: -------------------------------------------------------------------------------- 1 | function SubmitSignup() { 2 | var username = document.getElementById("signup-email").value; 3 | var password = document.getElementById("signup-passwd2").value; 4 | 5 | // 没有验证两次密码相同; 6 | 7 | $.ajax({ 8 | type: "GET", 9 | url: "myapi.php", 10 | dataType: 'json', 11 | data:{ 12 | data: '{"name": "' + username + '", "passwd" : "' + password + '"}', 13 | } 14 | }); 15 | } 16 | 17 | 18 | function SubmitLogin() { 19 | 20 | var username = document.getElementById("email-input").value; 21 | var password = document.getElementById("password-input").value; 22 | 23 | $.ajax({ 24 | type: "GET", 25 | url: "myapi.php", 26 | dataType: 'json', 27 | data:{ 28 | data: '{"name": "' + username + '", "passwd" : "' + password + '"}', 29 | } 30 | }); 31 | } 32 | 33 | function readCookie(){ 34 | //作废 35 | var cookie = document.cookie; 36 | console.log(cookie); 37 | 38 | // https://gist.github.com/rendro/525bbbf85e84fa9042c2#gistcomment-2784930 39 | //cookie的 hash-array 40 | var cookieArray = document.cookie 41 | .split(';') 42 | .reduce((res, c) => { 43 | const [key, val] = c.trim().split('=').map(decodeURIComponent) 44 | const allNumbers = str => /^\d+$/.test(str); 45 | try { 46 | return Object.assign(res, { [key]: allNumbers(val) ? val : JSON.parse(val) }) 47 | } catch (e) { 48 | return Object.assign(res, { [key]: val }) 49 | } 50 | }, {}); 51 | //读取cookie以后把 52 | console.log(cookieArray); 53 | console.log(cookieArray["grav-tabs-state"]["User"]); 54 | 55 | document.getElementById("loginButton"); 56 | document.getElementById("signupButton"); 57 | } 58 | 59 | function changeLoginStatus(){ 60 | //code: 0, 100, 101 61 | //data: username / fail reason 62 | $.getJSON("http://localhost:3000/api/v1/username", function(data6) { 63 | let code = data6["code"]; 64 | let data = data6["data"]; 65 | console.log(code + ' ' + data); 66 | if (code == 0){ //success 67 | console.log("login success"); 68 | document.getElementById("loginButton").remove(); 69 | document.getElementById("signupButton").innerHTML = data; 70 | document.getElementById("signupButton").href = "#"; 71 | }else { 72 | console.log("login fail"); 73 | } 74 | }); 75 | } 76 | 77 | //Auto-initialization 78 | changeLoginStatus(); -------------------------------------------------------------------------------- /STHacks-wtq/js/d3/README.md: -------------------------------------------------------------------------------- 1 | # D3: Data-Driven Documents 2 | 3 |
4 |
5 | **D3** (or **D3.js**) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
6 |
7 | ## Resources
8 |
9 | * [Introduction](https://observablehq.com/@d3/learn-d3)
10 | * [API Reference](https://github.com/d3/d3/blob/master/API.md)
11 | * [Releases](https://github.com/d3/d3/releases)
12 | * [Examples](https://observablehq.com/@d3/gallery)
13 | * [Wiki](https://github.com/d3/d3/wiki)
14 |
15 | ## Installing
16 |
17 | If you use npm, `npm install d3`. Otherwise, download the [latest release](https://github.com/d3/d3/releases/latest). The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from [d3js.org](https://d3js.org), [CDNJS](https://cdnjs.com/libraries/d3), or [unpkg](https://unpkg.com/d3/). For example:
18 |
19 | ```html
20 |
21 | ```
22 |
23 | For the minified version:
24 |
25 | ```html
26 |
27 | ```
28 |
29 | You can also use the standalone D3 microlibraries. For example, [d3-selection](https://github.com/d3/d3-selection):
30 |
31 | ```html
32 |
33 | ```
34 |
35 | D3 is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). Create a [custom bundle using Rollup](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4), Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules:
36 |
37 | ```js
38 | import {scaleLinear} from "d3-scale";
39 | ```
40 |
41 | Or import everything into a namespace (here, `d3`):
42 |
43 | ```js
44 | import * as d3 from "d3";
45 | ```
46 |
47 | In Node:
48 |
49 | ```js
50 | const d3 = require("d3");
51 | ```
52 |
53 | You can also require individual modules and combine them into a `d3` object using [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign):
54 |
55 | ```js
56 | const d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));
57 | ```
58 |
--------------------------------------------------------------------------------
/combined/static/js/d3/README.md:
--------------------------------------------------------------------------------
1 | # D3: Data-Driven Documents
2 |
3 |
4 |
5 | **D3** (or **D3.js**) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
6 |
7 | ## Resources
8 |
9 | * [Introduction](https://observablehq.com/@d3/learn-d3)
10 | * [API Reference](https://github.com/d3/d3/blob/master/API.md)
11 | * [Releases](https://github.com/d3/d3/releases)
12 | * [Examples](https://observablehq.com/@d3/gallery)
13 | * [Wiki](https://github.com/d3/d3/wiki)
14 |
15 | ## Installing
16 |
17 | If you use npm, `npm install d3`. Otherwise, download the [latest release](https://github.com/d3/d3/releases/latest). The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from [d3js.org](https://d3js.org), [CDNJS](https://cdnjs.com/libraries/d3), or [unpkg](https://unpkg.com/d3/). For example:
18 |
19 | ```html
20 |
21 | ```
22 |
23 | For the minified version:
24 |
25 | ```html
26 |
27 | ```
28 |
29 | You can also use the standalone D3 microlibraries. For example, [d3-selection](https://github.com/d3/d3-selection):
30 |
31 | ```html
32 |
33 | ```
34 |
35 | D3 is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). Create a [custom bundle using Rollup](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4), Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules:
36 |
37 | ```js
38 | import {scaleLinear} from "d3-scale";
39 | ```
40 |
41 | Or import everything into a namespace (here, `d3`):
42 |
43 | ```js
44 | import * as d3 from "d3";
45 | ```
46 |
47 | In Node:
48 |
49 | ```js
50 | const d3 = require("d3");
51 | ```
52 |
53 | You can also require individual modules and combine them into a `d3` object using [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign):
54 |
55 | ```js
56 | const d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));
57 | ```
58 |
--------------------------------------------------------------------------------
/combined/static/assets/css/mainCover.css:
--------------------------------------------------------------------------------
1 | .contact-clean {
2 | background: #f1f7fc;
3 | padding: 80px 0;
4 | }
5 |
6 |
7 | .bg-map { top: 0; left: 0;
8 | width: 100vw;
9 | height: 100vh;
10 | display: block;
11 | position: absolute;
12 | z-index: 1000;
13 | background:#FFFBFE;
14 | padding: 0px;
15 | }
16 |
17 | .front-box {
18 | display: block;
19 | position: absolute;
20 | top: 22%; left: 50%;
21 | -webkit-transform:translateX(-50%);
22 | width: 80vw;
23 | height: 60vh;
24 | z-index: 1001;
25 | background:rgba(222,222,222,.9);
26 | padding: 20px;
27 |
28 | border-radius: 12px;
29 | box-shadow: .5px 4px 20px rgba(0,0,0,.5);;
30 | /* filter: blur(25px); */
31 | }
32 |
33 | h1.main-title {
34 | font-family: 'Roboto';
35 | /*width: 450px;*/
36 | /*height: 168px;*/
37 | /*left: 116px;*/
38 | top: 198px;
39 | font-family: Roboto;
40 | font-style: normal;
41 | font-weight: bold;
42 | font-size: 2rem;
43 | line-height: 2rem;
44 | color: #13262F;
45 | }
46 |
47 | h2.headings {
48 | font-family: 'Roboto';
49 | /*width: 450px;*/
50 | /*height: 168px;*/
51 | /*left: 116px;*/
52 | top: 30px;
53 | font-family: Roboto;
54 | font-style: normal;
55 | font-weight: bold;
56 | font-size: 40px;
57 | line-height: 64px;
58 | color: #13262F;
59 | margin-top: 0.4em;
60 | }
61 |
62 | h5.map-code {
63 | top: 60px;
64 | font-family: Roboto;
65 | font-style: normal;
66 | font-weight: bold;
67 | font-size: 24px;
68 | line-height: 28px;
69 | color: #969696;
70 | margin-top: 0em;
71 | }
72 |
73 | .btn:not(:disabled):not(.disabled) {
74 | /* background-color: #66d7d7; */
75 | border: none;
76 | border-radius: 20px;
77 | }
78 |
79 | .btn-success{
80 | background-color: #66d7d7!important;
81 | }
82 |
83 | div.frontMap {
84 | margin-top: 6em;
85 | }
86 |
87 | div.legends{
88 | display:inline;
89 | }
90 |
91 |
92 | .features-clean .item .icon{
93 | color: #66d7d7;
94 | }
95 |
96 |
97 | @media (max-width:767px) {
98 | .contact-clean {
99 | padding: 20px 0;
100 | }
101 | }
102 | @media (min-width: 576px){
103 | .form-inline .form-control{
104 | width:20em!important;
105 | }}
106 |
107 | @media (min-width: 1015px){
108 | h1.main-title{
109 | font-family: 'Roboto';
110 | /*width: 450px;*/
111 | /*height: 168px;*/
112 | /*left: 116px;*/
113 | top: 198px;
114 | font-family: Roboto;
115 | font-style: normal;
116 | font-weight: bold;
117 | font-size: 60px;
118 | line-height: 84px;
119 | color: #13262F;
120 | margin-top: 1em;
121 | }
122 | }
123 |
124 | @media (min-width: 475px){
125 | h1.main-title{
126 | font-size:3rem;
127 | line-height: 3rem;
128 | }
129 | }
130 |
131 |
--------------------------------------------------------------------------------
/hackathon-01162-xxl/login.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
Toronto is a crowded city with huge amounts of traffic. Everyday, over 2 million people commute to work, and possibly would expose to covid-19. We want to provide a one-shot solution to help people stay away from risks from infection, and help people make 42 | better commute decisions.
43 |47 |
Fine tuned Toronto covid data aren't readily available before we made it.
54 |We use APIs developed on our own to get up-to-date information about the covid.
58 |It aims to find the suitable route for customers with their commute preferences. Customize the trip with efficiency, convenience and safety.
62 |We provide the latest information about COVID-19, the Customized route for preventing potential risks. We are also able to recommend the nearest COVID-19 detecting point and hospital, and the analysis of drug stores. Moreover, we recommend the safe subway station given by travellers flows. From precaution to healing, we cover them all.
66 |We provide not only the efficient route for customers commuting to work, but also provide location of the nearest hospital and drug store options if customers feel uncomfortable. This would prevent infection in the first place.
70 |Customers are able to use this application through mobile devices easily. So people can receive the latest infromation by their mobile devices.
74 |abaaba
78 |Write this part after the project is almost done
83 |52 | Toronto is a crowded city with huge amounts of traffic. Everyday, over 2 million people commute 53 | to work, and possibly would expose to covid-19. We want to provide a one-shot solution to help 54 | people stay away from risks from infection, and help people make better commute decisions. 55 |
56 |66 | Fine tuned Toronto covid data aren't readily available before we made it. Our data 67 | visualization and algorithms are more informative and straightforward than simple 68 | charts. 69 |
70 |75 | We use APIs from various sources and recommendation systems develop on our own to get 76 | up-to-date information about the covid. 77 |
78 |83 | Our data visualization, map systems, and recommendation system are incorporated with 84 | well-designed query systems for Toronto. With APIs and relevant data provided, we can 85 | apply our design to every city in the world. 86 |
87 |92 | For more reliable performance and effective presentation of features, we choose to use 93 | lightweight frameworks such as Leaflet.js and jQuery in our design. 94 |
95 |Data is preprocessed and pulled only when needed.
100 |All data come from reliable and trackable sources.
105 |Write this part after the project is almost done
110 |