├── README.md
├── config
    ├── config.json
    ├── index
    ├── source.json
    └── tcl.css
├── example
    ├── config
    │   ├── config.json
    │   ├── index
    │   ├── source.json
    │   └── tcl.css
    ├── md
    │   ├── 0.md
    │   └── 1.md
    └── public
    │   ├── articles
    │       └── my_blog1
    │       │   └── index.html
    │   ├── index.html
    │   └── pages
    │       └── 1
    │           └── index.html
└── py
    ├── deploy.py
    ├── gindex.py
    └── noteshare.py


/README.md:
--------------------------------------------------------------------------------
 1 | # noteblog
 2 | 
 3 | ## Introduction
 4 | This is a concise framework for [github blog](http://jmcglone.com/guides/github-pages/) writing. There exists many framworks, i.e. [Hexo](hexo.io), [Jekyll](https://jekyllrb.com/), etc.. But in my workflow, though [makrdown](https://en.wikipedia.org/wiki/Markdown) is simple enough, I usually use note software, like [Evernote](https://evernote.com/), [Wiz](http://www.wiz.cn), [Youdao Note](https://note.youdao.com/) which record my thoughts and good articles, alternatively, they are suitable for a editor. Therefore, I think that maybe I can make a software to generate static pages like Hexo, but the content is generated by note software. 
 5 | 
 6 | ## Usage
 7 | ### 1. Make your own github blog page. 
 8 | You can Google it easily.
 9 | ### 2. Deploy.
10 | Clone the repo and put it in a floder. Then run
11 | 
12 | 	python deploy.py
13 | ### 3. Use note software to generate sharing links.
14 | Just Google the software U used. Maybe you are requested to be a paid user.
15 | ### 4. Copy the links to **source.json** file.
16 | The json file have 3 keys: url, file and delay.
17 | 
18 | 1. url. url is a string or an array of strings. You put the sharing links here.
19 | 2. file. file is a string or an array of strings. You put the file names here.
20 | 3. delay. delay is an integer which shows the delay time.
21 | ### 5. Run noteshare.py.
22 | 	python noteshare.py
23 | The html files store in ./public/articles/.
24 | 
25 | *-Note-*:
26 | 
27 | The noteshare also supports arguments for single html generation. If the arguments aren't empty, the arguments first.
28 | 
29 | * --mode default is 1 item generation. If --mode is not 0, it means many items generation.
30 | * --file 
31 | * --url
32 | * --delay
33 | 
34 | You can put your favicon in public folder. 
35 | 	python noteshare.py --mode=2 --delay=3
36 | ### 6. Configure config.json.
37 | The json file have 3 keys: items_of_every_page, css and title.
38 | 
39 | 1. items_of_every_page. The number of items shown in each main page.
40 | 2. css. The markdown css render file. [link](https://markdowncss.github.io/)  
41 | 3. title. The blog title.
42 | 
43 | ### 7. Copy the article links to **index** file.
44 | index file is the file written titles, descriptions and links. The format is:
45 | 
46 | 	title1
47 | 	desp1
48 | 	/articles/my_blog1
49 | 	---
50 | 	title2
51 | 	desp2
52 | 	/articles/my_blog2
53 | 
54 | "---" is the separator or comment symbol.
55 | 
56 | ### 8. Run gindex.py
57 | 	python gindex.py
58 | 
59 | Then open browser, input localhost:8888.
60 | 
61 | ### 9. git push
62 | 


--------------------------------------------------------------------------------
/config/config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "items_of_every_page": 3,
3 |   "css": "../config/tcl.css",
4 |   "title": "My Blog"
5 |   
6 | }


--------------------------------------------------------------------------------
/config/index:
--------------------------------------------------------------------------------
 1 | title1
 2 | desp1
 3 | link1
 4 | ---
 5 | title2
 6 | desp2
 7 | /articles/my_blog1
 8 | ---
 9 | title3
10 | desp3
11 | link3
12 | ---
13 | title4
14 | desp4
15 | link4


--------------------------------------------------------------------------------
/config/source.json:
--------------------------------------------------------------------------------
1 | {
2 |   "url": "http://e142cfe2.wiz01.com/share/s/3xgI_y2l2kVe2da2Kc0Od9sv2VvoU23QCQ5a2uQ5Uq19wKJb",
3 |   "file": "my_blog1",
4 |   "delay": 1
5 | }


--------------------------------------------------------------------------------
/config/tcl.css:
--------------------------------------------------------------------------------
  1 | /* http://markdowncss.github.io/ */ 
  2 | @media print {
  3 |   *,
  4 |   *:before,
  5 |   *:after {
  6 |     background: transparent !important;
  7 |     color: #000 !important;
  8 |     box-shadow: none !important;
  9 |     text-shadow: none !important;
 10 |   }
 11 | 
 12 |   a,
 13 |   a:visited {
 14 |     text-decoration: underline;
 15 |   }
 16 | 
 17 |   a[href]:after {
 18 |     content: " (" attr(href) ")";
 19 |   }
 20 | 
 21 |   abbr[title]:after {
 22 |     content: " (" attr(title) ")";
 23 |   }
 24 | 
 25 |   a[href^="#"]:after,
 26 |   a[href^="javascript:"]:after {
 27 |     content: "";
 28 |   }
 29 | 
 30 |   pre,
 31 |   blockquote {
 32 |     border: 1px solid #999;
 33 |     page-break-inside: avoid;
 34 |   }
 35 | 
 36 |   thead {
 37 |     display: table-header-group;
 38 |   }
 39 | 
 40 |   tr,
 41 |   img {
 42 |     page-break-inside: avoid;
 43 |   }
 44 | 
 45 |   img {
 46 |     max-width: 100% !important;
 47 |   }
 48 | 
 49 |   p,
 50 |   h2,
 51 |   h3 {
 52 |     orphans: 3;
 53 |     widows: 3;
 54 |   }
 55 | 
 56 |   h2,
 57 |   h3 {
 58 |     page-break-after: avoid;
 59 |   }
 60 | }
 61 | 
 62 | html {
 63 |   font-size: 12px;
 64 | }
 65 | 
 66 | @media screen and (min-width: 32rem) and (max-width: 48rem) {
 67 |   html {
 68 |     font-size: 15px;
 69 |   }
 70 | }
 71 | 
 72 | @media screen and (min-width: 48rem) {
 73 |   html {
 74 |     font-size: 16px;
 75 |   }
 76 | }
 77 | 
 78 | body {
 79 |   line-height: 1.85;
 80 | }
 81 | 
 82 | p,
 83 | .splendor-p {
 84 |   font-size: 1rem;
 85 |   margin-bottom: 1.3rem;
 86 | }
 87 | 
 88 | h1,
 89 | .splendor-h1,
 90 | h2,
 91 | .splendor-h2,
 92 | h3,
 93 | .splendor-h3,
 94 | h4,
 95 | .splendor-h4 {
 96 |   margin: 1.414rem 0 .5rem;
 97 |   font-weight: inherit;
 98 |   line-height: 1.42;
 99 | }
100 | 
101 | h1,
102 | .splendor-h1 {
103 |   margin-top: 0;
104 |   font-size: 3.998rem;
105 | }
106 | 
107 | h2,
108 | .splendor-h2 {
109 |   font-size: 2.827rem;
110 | }
111 | 
112 | h3,
113 | .splendor-h3 {
114 |   font-size: 1.999rem;
115 | }
116 | 
117 | h4,
118 | .splendor-h4 {
119 |   font-size: 1.414rem;
120 | }
121 | 
122 | h5,
123 | .splendor-h5 {
124 |   font-size: 1.121rem;
125 | }
126 | 
127 | h6,
128 | .splendor-h6 {
129 |   font-size: .88rem;
130 | }
131 | 
132 | small,
133 | .splendor-small {
134 |   font-size: .707em;
135 | }
136 | 
137 | /* https://github.com/mrmrs/fluidity */
138 | 
139 | img,
140 | canvas,
141 | iframe,
142 | video,
143 | svg,
144 | select,
145 | textarea {
146 |   max-width: 100%;
147 | }
148 | 
149 | @import url(http://fonts.googleapis.com/css?family=Merriweather:300italic,300);
150 | 
151 | html {
152 |   font-size: 18px;
153 |   max-width: 100%;
154 | }
155 | 
156 | body {
157 |   color: #444;
158 |   font-family: 'Merriweather', Georgia, serif;
159 |   margin: 0;
160 |   max-width: 100%;
161 | }
162 | 
163 | /* === A bit of a gross hack so we can have bleeding divs/blockquotes. */
164 | 
165 | p,
166 | *:not(div):not(img):not(body):not(html):not(li):not(blockquote):not(p) {
167 |   margin: 1rem auto 1rem;
168 |   max-width: 36rem;
169 |   padding: .25rem;
170 | }
171 | 
172 | div {
173 |   width: 100%;
174 | }
175 | 
176 | div img {
177 |   width: 100%;
178 | }
179 | 
180 | blockquote p {
181 |   font-size: 1.5rem;
182 |   font-style: italic;
183 |   margin: 1rem auto 1rem;
184 |   max-width: 48rem;
185 | }
186 | 
187 | li {
188 |   margin-left: 2rem;
189 | }
190 | 
191 | /* Counteract the specificity of the gross *:not() chain. */
192 | 
193 | h1 {
194 |   padding: 4rem 0 !important;
195 | }
196 | 
197 | /*  === End gross hack */
198 | 
199 | p {
200 |   color: #555;
201 |   height: auto;
202 |   line-height: 1.45;
203 | }
204 | 
205 | pre,
206 | code {
207 |   font-family: Menlo, Monaco, "Courier New", monospace;
208 | }
209 | 
210 | pre {
211 |   background-color: #fafafa;
212 |   font-size: .8rem;
213 |   overflow-x: scroll;
214 |   padding: 1.125em;
215 | }
216 | 
217 | a,
218 | a:visited {
219 |   color: #3498db;
220 | }
221 | 
222 | a:hover,
223 | a:focus,
224 | a:active {
225 |   color: #2980b9;
226 | }


--------------------------------------------------------------------------------
/example/config/config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "items_of_every_page": 3,
3 |   "css": "../config/tcl.css",
4 |   "title": "My Blog"
5 |   
6 | }


--------------------------------------------------------------------------------
/example/config/index:
--------------------------------------------------------------------------------
 1 | title1
 2 | desp1
 3 | link1
 4 | ---
 5 | title2
 6 | desp2
 7 | /articles/my_blog1
 8 | ---
 9 | title3
10 | desp3
11 | link3
12 | ---
13 | title4
14 | desp4
15 | link4


--------------------------------------------------------------------------------
/example/config/source.json:
--------------------------------------------------------------------------------
1 | {
2 |   "url": "http://e142cfe2.wiz01.com/share/s/3xgI_y2l2kVe2da2Kc0Od9sv2VvoU23QCQ5a2uQ5Uq19wKJb",
3 |   "file": "my_blog1",
4 |   "delay": 1
5 | }


--------------------------------------------------------------------------------
/example/config/tcl.css:
--------------------------------------------------------------------------------
  1 | /* http://markdowncss.github.io/ */ 
  2 | @media print {
  3 |   *,
  4 |   *:before,
  5 |   *:after {
  6 |     background: transparent !important;
  7 |     color: #000 !important;
  8 |     box-shadow: none !important;
  9 |     text-shadow: none !important;
 10 |   }
 11 | 
 12 |   a,
 13 |   a:visited {
 14 |     text-decoration: underline;
 15 |   }
 16 | 
 17 |   a[href]:after {
 18 |     content: " (" attr(href) ")";
 19 |   }
 20 | 
 21 |   abbr[title]:after {
 22 |     content: " (" attr(title) ")";
 23 |   }
 24 | 
 25 |   a[href^="#"]:after,
 26 |   a[href^="javascript:"]:after {
 27 |     content: "";
 28 |   }
 29 | 
 30 |   pre,
 31 |   blockquote {
 32 |     border: 1px solid #999;
 33 |     page-break-inside: avoid;
 34 |   }
 35 | 
 36 |   thead {
 37 |     display: table-header-group;
 38 |   }
 39 | 
 40 |   tr,
 41 |   img {
 42 |     page-break-inside: avoid;
 43 |   }
 44 | 
 45 |   img {
 46 |     max-width: 100% !important;
 47 |   }
 48 | 
 49 |   p,
 50 |   h2,
 51 |   h3 {
 52 |     orphans: 3;
 53 |     widows: 3;
 54 |   }
 55 | 
 56 |   h2,
 57 |   h3 {
 58 |     page-break-after: avoid;
 59 |   }
 60 | }
 61 | 
 62 | html {
 63 |   font-size: 12px;
 64 | }
 65 | 
 66 | @media screen and (min-width: 32rem) and (max-width: 48rem) {
 67 |   html {
 68 |     font-size: 15px;
 69 |   }
 70 | }
 71 | 
 72 | @media screen and (min-width: 48rem) {
 73 |   html {
 74 |     font-size: 16px;
 75 |   }
 76 | }
 77 | 
 78 | body {
 79 |   line-height: 1.85;
 80 | }
 81 | 
 82 | p,
 83 | .splendor-p {
 84 |   font-size: 1rem;
 85 |   margin-bottom: 1.3rem;
 86 | }
 87 | 
 88 | h1,
 89 | .splendor-h1,
 90 | h2,
 91 | .splendor-h2,
 92 | h3,
 93 | .splendor-h3,
 94 | h4,
 95 | .splendor-h4 {
 96 |   margin: 1.414rem 0 .5rem;
 97 |   font-weight: inherit;
 98 |   line-height: 1.42;
 99 | }
100 | 
101 | h1,
102 | .splendor-h1 {
103 |   margin-top: 0;
104 |   font-size: 3.998rem;
105 | }
106 | 
107 | h2,
108 | .splendor-h2 {
109 |   font-size: 2.827rem;
110 | }
111 | 
112 | h3,
113 | .splendor-h3 {
114 |   font-size: 1.999rem;
115 | }
116 | 
117 | h4,
118 | .splendor-h4 {
119 |   font-size: 1.414rem;
120 | }
121 | 
122 | h5,
123 | .splendor-h5 {
124 |   font-size: 1.121rem;
125 | }
126 | 
127 | h6,
128 | .splendor-h6 {
129 |   font-size: .88rem;
130 | }
131 | 
132 | small,
133 | .splendor-small {
134 |   font-size: .707em;
135 | }
136 | 
137 | /* https://github.com/mrmrs/fluidity */
138 | 
139 | img,
140 | canvas,
141 | iframe,
142 | video,
143 | svg,
144 | select,
145 | textarea {
146 |   max-width: 100%;
147 | }
148 | 
149 | @import url(http://fonts.googleapis.com/css?family=Merriweather:300italic,300);
150 | 
151 | html {
152 |   font-size: 18px;
153 |   max-width: 100%;
154 | }
155 | 
156 | body {
157 |   color: #444;
158 |   font-family: 'Merriweather', Georgia, serif;
159 |   margin: 0;
160 |   max-width: 100%;
161 | }
162 | 
163 | /* === A bit of a gross hack so we can have bleeding divs/blockquotes. */
164 | 
165 | p,
166 | *:not(div):not(img):not(body):not(html):not(li):not(blockquote):not(p) {
167 |   margin: 1rem auto 1rem;
168 |   max-width: 36rem;
169 |   padding: .25rem;
170 | }
171 | 
172 | div {
173 |   width: 100%;
174 | }
175 | 
176 | div img {
177 |   width: 100%;
178 | }
179 | 
180 | blockquote p {
181 |   font-size: 1.5rem;
182 |   font-style: italic;
183 |   margin: 1rem auto 1rem;
184 |   max-width: 48rem;
185 | }
186 | 
187 | li {
188 |   margin-left: 2rem;
189 | }
190 | 
191 | /* Counteract the specificity of the gross *:not() chain. */
192 | 
193 | h1 {
194 |   padding: 4rem 0 !important;
195 | }
196 | 
197 | /*  === End gross hack */
198 | 
199 | p {
200 |   color: #555;
201 |   height: auto;
202 |   line-height: 1.45;
203 | }
204 | 
205 | pre,
206 | code {
207 |   font-family: Menlo, Monaco, "Courier New", monospace;
208 | }
209 | 
210 | pre {
211 |   background-color: #fafafa;
212 |   font-size: .8rem;
213 |   overflow-x: scroll;
214 |   padding: 1.125em;
215 | }
216 | 
217 | a,
218 | a:visited {
219 |   color: #3498db;
220 | }
221 | 
222 | a:hover,
223 | a:focus,
224 | a:active {
225 |   color: #2980b9;
226 | }


--------------------------------------------------------------------------------
/example/md/0.md:
--------------------------------------------------------------------------------
 1 | <title>My Blog</title>
 2 | ## My Blog
 3 | ### [title4](link4)
 4 | desp4
 5 | ### [title3](link3)
 6 | desp3
 7 | ### [title2](/articles/my_blog1)
 8 | desp2
 9 | 
10 | * [Next](/pages/1)


--------------------------------------------------------------------------------
/example/md/1.md:
--------------------------------------------------------------------------------
1 | <title>My Blog</title>
2 | ## My Blog
3 | ### [title1](link1)
4 | desp1
5 | 
6 | * [Prev](/)


--------------------------------------------------------------------------------
/example/public/articles/my_blog1/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><meta charset='UTF-8'><meta HTTP-EQUIV='refresh' content='1;url=http://e142cfe2.wiz01.com/share/s/3xgI_y2l2kVe2da2Kc0Od9sv2VvoU23QCQ5a2uQ5Uq19wKJb'></head><body><br><br><br><div class='loader'><div class='loader_overlay'></div><div class='loader_cogs'><div class='loader_cogs__top'><div class='top_part'></div><div class='top_part'></div><div class='top_part'></div><div class='top_hole'></div></div><div class='loader_cogs__left'><div class='left_part'></div><div class='left_part'></div><div class='left_part'></div><div class='left_hole'></div></div><div class='loader_cogs__bottom'><div class='bottom_part'></div><div class='bottom_part'></div><div class='bottom_part'></div><div class='bottom_hole'></div></div><p>loading</p></div></div><div style='text-align:center;clear:both;'></div></body></html><style>@charset 'utf-8';body{height:100vh;text-align:center;overflow:hidden}body h1{text-transform:uppercase;font-size:30px;color:#576e81;margin:30px 0 0 0}body h2{font-weight:normal;font-size:18px;color:#f98db9;margin:10px 0 0 0}body p{margin:0 auto}body .loader{height:250px;position:relative;margin:auto;width:400px;z-index:10}body .loader_overlay{width:150px;height:150px;background:transparent;box-shadow:0 0 0 1000px rgba(255,255,255,0.67),0px 0 19px 0 rgba(0,0,0,0.16) inset;border-radius:100%;z-index:-1;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs{z-index:-2;width:100px;height:100px;top:-120px!important;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs__top{position:relative;width:100px;height:100px;-webkit-transform-origin:50px 50px;transform-origin:50px 50px;-webkit-animation:rotate 10s infinite linear;animation:rotate 10s infinite linear}body .loader_cogs__top div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}body .loader_cogs__top div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}body .loader_cogs__top div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}body .loader_cogs__top div.top_part{width:100px;border-radius:10px;position:absolute;height:100px;background:#f98db9}body .loader_cogs__top div.top_hole{width:50px;height:50px;border-radius:100%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs__left{position:relative;width:80px;-webkit-transform:rotate(16deg);transform:rotate(16deg);top:28px;-webkit-transform-origin:40px 40px;transform-origin:40px 40px;-webkit-animation:rotate_left 10s .1s infinite reverse linear;animation:rotate_left 10s .1s infinite reverse linear;left:-24px;height:80px}body .loader_cogs__left div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}body .loader_cogs__left div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}body .loader_cogs__left div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}body .loader_cogs__left div.left_part{width:80px;border-radius:6px;position:absolute;height:80px;background:#97ddff}body .loader_cogs__left div.left_hole{width:40px;height:40px;border-radius:100%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs__bottom{position:relative;width:60px;top:-65px;-webkit-transform-origin:30px 30px;transform-origin:30px 30px;-webkit-animation:rotate_left 10.2s .4s infinite linear;animation:rotate_left 10.2s .4s infinite linear;-webkit-transform:rotate(4deg);transform:rotate(4deg);left:79px;height:60px}body .loader_cogs__bottom div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}body .loader_cogs__bottom div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}body .loader_cogs__bottom div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}body .loader_cogs__bottom div.bottom_part{width:60px;border-radius:5px;position:absolute;height:60px;background:#ffcd66}body .loader_cogs__bottom div.bottom_hole{width:30px;height:30px;border-radius:100%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate_left{from{-webkit-transform:rotate(16deg);transform:rotate(16deg)}to{-webkit-transform:rotate(376deg);transform:rotate(376deg)}}@keyframes rotate_left{from{-webkit-transform:rotate(16deg);transform:rotate(16deg)}to{-webkit-transform:rotate(376deg);transform:rotate(376deg)}}@-webkit-keyframes rotate_right{from{-webkit-transform:rotate(4deg);transform:rotate(4deg)}to{-webkit-transform:rotate(364deg);transform:rotate(364deg)}}@keyframes rotate_right{from{-webkit-transform:rotate(4deg);transform:rotate(4deg)}to{-webkit-transform:rotate(364deg);transform:rotate(364deg)}}</style>


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
  1 | <p><title>My Blog</title></p>
  2 | <h2>My Blog</h2>
  3 | <h3><a href="link4">title4</a></h3>
  4 | <p>desp4</p>
  5 | <h3><a href="link3">title3</a></h3>
  6 | <p>desp3</p>
  7 | <h3><a href="/articles/my_blog1">title2</a></h3>
  8 | <p>desp2</p>
  9 | <ul>
 10 | <li><a href="/pages/1">Next</a></li>
 11 | </ul>
 12 | <style>/* http://markdowncss.github.io/ */ 
 13 | @media print {
 14 |   *,
 15 |   *:before,
 16 |   *:after {
 17 |     background: transparent !important;
 18 |     color: #000 !important;
 19 |     box-shadow: none !important;
 20 |     text-shadow: none !important;
 21 |   }
 22 | 
 23 |   a,
 24 |   a:visited {
 25 |     text-decoration: underline;
 26 |   }
 27 | 
 28 |   a[href]:after {
 29 |     content: " (" attr(href) ")";
 30 |   }
 31 | 
 32 |   abbr[title]:after {
 33 |     content: " (" attr(title) ")";
 34 |   }
 35 | 
 36 |   a[href^="#"]:after,
 37 |   a[href^="javascript:"]:after {
 38 |     content: "";
 39 |   }
 40 | 
 41 |   pre,
 42 |   blockquote {
 43 |     border: 1px solid #999;
 44 |     page-break-inside: avoid;
 45 |   }
 46 | 
 47 |   thead {
 48 |     display: table-header-group;
 49 |   }
 50 | 
 51 |   tr,
 52 |   img {
 53 |     page-break-inside: avoid;
 54 |   }
 55 | 
 56 |   img {
 57 |     max-width: 100% !important;
 58 |   }
 59 | 
 60 |   p,
 61 |   h2,
 62 |   h3 {
 63 |     orphans: 3;
 64 |     widows: 3;
 65 |   }
 66 | 
 67 |   h2,
 68 |   h3 {
 69 |     page-break-after: avoid;
 70 |   }
 71 | }
 72 | 
 73 | html {
 74 |   font-size: 12px;
 75 | }
 76 | 
 77 | @media screen and (min-width: 32rem) and (max-width: 48rem) {
 78 |   html {
 79 |     font-size: 15px;
 80 |   }
 81 | }
 82 | 
 83 | @media screen and (min-width: 48rem) {
 84 |   html {
 85 |     font-size: 16px;
 86 |   }
 87 | }
 88 | 
 89 | body {
 90 |   line-height: 1.85;
 91 | }
 92 | 
 93 | p,
 94 | .splendor-p {
 95 |   font-size: 1rem;
 96 |   margin-bottom: 1.3rem;
 97 | }
 98 | 
 99 | h1,
100 | .splendor-h1,
101 | h2,
102 | .splendor-h2,
103 | h3,
104 | .splendor-h3,
105 | h4,
106 | .splendor-h4 {
107 |   margin: 1.414rem 0 .5rem;
108 |   font-weight: inherit;
109 |   line-height: 1.42;
110 | }
111 | 
112 | h1,
113 | .splendor-h1 {
114 |   margin-top: 0;
115 |   font-size: 3.998rem;
116 | }
117 | 
118 | h2,
119 | .splendor-h2 {
120 |   font-size: 2.827rem;
121 | }
122 | 
123 | h3,
124 | .splendor-h3 {
125 |   font-size: 1.999rem;
126 | }
127 | 
128 | h4,
129 | .splendor-h4 {
130 |   font-size: 1.414rem;
131 | }
132 | 
133 | h5,
134 | .splendor-h5 {
135 |   font-size: 1.121rem;
136 | }
137 | 
138 | h6,
139 | .splendor-h6 {
140 |   font-size: .88rem;
141 | }
142 | 
143 | small,
144 | .splendor-small {
145 |   font-size: .707em;
146 | }
147 | 
148 | /* https://github.com/mrmrs/fluidity */
149 | 
150 | img,
151 | canvas,
152 | iframe,
153 | video,
154 | svg,
155 | select,
156 | textarea {
157 |   max-width: 100%;
158 | }
159 | 
160 | @import url(http://fonts.googleapis.com/css?family=Merriweather:300italic,300);
161 | 
162 | html {
163 |   font-size: 18px;
164 |   max-width: 100%;
165 | }
166 | 
167 | body {
168 |   color: #444;
169 |   font-family: 'Merriweather', Georgia, serif;
170 |   margin: 0;
171 |   max-width: 100%;
172 | }
173 | 
174 | /* === A bit of a gross hack so we can have bleeding divs/blockquotes. */
175 | 
176 | p,
177 | *:not(div):not(img):not(body):not(html):not(li):not(blockquote):not(p) {
178 |   margin: 1rem auto 1rem;
179 |   max-width: 36rem;
180 |   padding: .25rem;
181 | }
182 | 
183 | div {
184 |   width: 100%;
185 | }
186 | 
187 | div img {
188 |   width: 100%;
189 | }
190 | 
191 | blockquote p {
192 |   font-size: 1.5rem;
193 |   font-style: italic;
194 |   margin: 1rem auto 1rem;
195 |   max-width: 48rem;
196 | }
197 | 
198 | li {
199 |   margin-left: 2rem;
200 | }
201 | 
202 | /* Counteract the specificity of the gross *:not() chain. */
203 | 
204 | h1 {
205 |   padding: 4rem 0 !important;
206 | }
207 | 
208 | /*  === End gross hack */
209 | 
210 | p {
211 |   color: #555;
212 |   height: auto;
213 |   line-height: 1.45;
214 | }
215 | 
216 | pre,
217 | code {
218 |   font-family: Menlo, Monaco, "Courier New", monospace;
219 | }
220 | 
221 | pre {
222 |   background-color: #fafafa;
223 |   font-size: .8rem;
224 |   overflow-x: scroll;
225 |   padding: 1.125em;
226 | }
227 | 
228 | a,
229 | a:visited {
230 |   color: #3498db;
231 | }
232 | 
233 | a:hover,
234 | a:focus,
235 | a:active {
236 |   color: #2980b9;
237 | }</style>


--------------------------------------------------------------------------------
/example/public/pages/1/index.html:
--------------------------------------------------------------------------------
  1 | <p><title>My Blog</title></p>
  2 | <h2>My Blog</h2>
  3 | <h3><a href="link1">title1</a></h3>
  4 | <p>desp1</p>
  5 | <ul>
  6 | <li><a href="/">Prev</a></li>
  7 | </ul>
  8 | <style>/* http://markdowncss.github.io/ */ 
  9 | @media print {
 10 |   *,
 11 |   *:before,
 12 |   *:after {
 13 |     background: transparent !important;
 14 |     color: #000 !important;
 15 |     box-shadow: none !important;
 16 |     text-shadow: none !important;
 17 |   }
 18 | 
 19 |   a,
 20 |   a:visited {
 21 |     text-decoration: underline;
 22 |   }
 23 | 
 24 |   a[href]:after {
 25 |     content: " (" attr(href) ")";
 26 |   }
 27 | 
 28 |   abbr[title]:after {
 29 |     content: " (" attr(title) ")";
 30 |   }
 31 | 
 32 |   a[href^="#"]:after,
 33 |   a[href^="javascript:"]:after {
 34 |     content: "";
 35 |   }
 36 | 
 37 |   pre,
 38 |   blockquote {
 39 |     border: 1px solid #999;
 40 |     page-break-inside: avoid;
 41 |   }
 42 | 
 43 |   thead {
 44 |     display: table-header-group;
 45 |   }
 46 | 
 47 |   tr,
 48 |   img {
 49 |     page-break-inside: avoid;
 50 |   }
 51 | 
 52 |   img {
 53 |     max-width: 100% !important;
 54 |   }
 55 | 
 56 |   p,
 57 |   h2,
 58 |   h3 {
 59 |     orphans: 3;
 60 |     widows: 3;
 61 |   }
 62 | 
 63 |   h2,
 64 |   h3 {
 65 |     page-break-after: avoid;
 66 |   }
 67 | }
 68 | 
 69 | html {
 70 |   font-size: 12px;
 71 | }
 72 | 
 73 | @media screen and (min-width: 32rem) and (max-width: 48rem) {
 74 |   html {
 75 |     font-size: 15px;
 76 |   }
 77 | }
 78 | 
 79 | @media screen and (min-width: 48rem) {
 80 |   html {
 81 |     font-size: 16px;
 82 |   }
 83 | }
 84 | 
 85 | body {
 86 |   line-height: 1.85;
 87 | }
 88 | 
 89 | p,
 90 | .splendor-p {
 91 |   font-size: 1rem;
 92 |   margin-bottom: 1.3rem;
 93 | }
 94 | 
 95 | h1,
 96 | .splendor-h1,
 97 | h2,
 98 | .splendor-h2,
 99 | h3,
100 | .splendor-h3,
101 | h4,
102 | .splendor-h4 {
103 |   margin: 1.414rem 0 .5rem;
104 |   font-weight: inherit;
105 |   line-height: 1.42;
106 | }
107 | 
108 | h1,
109 | .splendor-h1 {
110 |   margin-top: 0;
111 |   font-size: 3.998rem;
112 | }
113 | 
114 | h2,
115 | .splendor-h2 {
116 |   font-size: 2.827rem;
117 | }
118 | 
119 | h3,
120 | .splendor-h3 {
121 |   font-size: 1.999rem;
122 | }
123 | 
124 | h4,
125 | .splendor-h4 {
126 |   font-size: 1.414rem;
127 | }
128 | 
129 | h5,
130 | .splendor-h5 {
131 |   font-size: 1.121rem;
132 | }
133 | 
134 | h6,
135 | .splendor-h6 {
136 |   font-size: .88rem;
137 | }
138 | 
139 | small,
140 | .splendor-small {
141 |   font-size: .707em;
142 | }
143 | 
144 | /* https://github.com/mrmrs/fluidity */
145 | 
146 | img,
147 | canvas,
148 | iframe,
149 | video,
150 | svg,
151 | select,
152 | textarea {
153 |   max-width: 100%;
154 | }
155 | 
156 | @import url(http://fonts.googleapis.com/css?family=Merriweather:300italic,300);
157 | 
158 | html {
159 |   font-size: 18px;
160 |   max-width: 100%;
161 | }
162 | 
163 | body {
164 |   color: #444;
165 |   font-family: 'Merriweather', Georgia, serif;
166 |   margin: 0;
167 |   max-width: 100%;
168 | }
169 | 
170 | /* === A bit of a gross hack so we can have bleeding divs/blockquotes. */
171 | 
172 | p,
173 | *:not(div):not(img):not(body):not(html):not(li):not(blockquote):not(p) {
174 |   margin: 1rem auto 1rem;
175 |   max-width: 36rem;
176 |   padding: .25rem;
177 | }
178 | 
179 | div {
180 |   width: 100%;
181 | }
182 | 
183 | div img {
184 |   width: 100%;
185 | }
186 | 
187 | blockquote p {
188 |   font-size: 1.5rem;
189 |   font-style: italic;
190 |   margin: 1rem auto 1rem;
191 |   max-width: 48rem;
192 | }
193 | 
194 | li {
195 |   margin-left: 2rem;
196 | }
197 | 
198 | /* Counteract the specificity of the gross *:not() chain. */
199 | 
200 | h1 {
201 |   padding: 4rem 0 !important;
202 | }
203 | 
204 | /*  === End gross hack */
205 | 
206 | p {
207 |   color: #555;
208 |   height: auto;
209 |   line-height: 1.45;
210 | }
211 | 
212 | pre,
213 | code {
214 |   font-family: Menlo, Monaco, "Courier New", monospace;
215 | }
216 | 
217 | pre {
218 |   background-color: #fafafa;
219 |   font-size: .8rem;
220 |   overflow-x: scroll;
221 |   padding: 1.125em;
222 | }
223 | 
224 | a,
225 | a:visited {
226 |   color: #3498db;
227 | }
228 | 
229 | a:hover,
230 | a:focus,
231 | a:active {
232 |   color: #2980b9;
233 | }</style>


--------------------------------------------------------------------------------
/py/deploy.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | 
 3 | markdown_dir = r"../md"
 4 | base_dir = r"../public"
 5 | http_dir = r"../public/articles"
 6 | index_dir = r"../public/pages"
 7 | 
 8 | isExist_markdown = os.path.exists(markdown_dir)
 9 | isExist_base = os.path.exists(base_dir)
10 | isExist_http = os.path.exists(http_dir)
11 | isExist_index = os.path.exists(index_dir)
12 | 
13 | 
14 | if not isExist_markdown:
15 | 	os.makedirs(markdown_dir)
16 | if not isExist_base:
17 | 	os.makedirs(base_dir)
18 | if not isExist_http:
19 | 	os.makedirs(http_dir)
20 | if not isExist_index:
21 | 	os.makedirs(index_dir)
22 | 		
23 | 		
24 | 
25 | 


--------------------------------------------------------------------------------
/py/gindex.py:
--------------------------------------------------------------------------------
  1 | #python3 code
  2 | #md2html.py
  3 | import mistune
  4 | import codecs
  5 | from http.server import SimpleHTTPRequestHandler
  6 | import socketserver
  7 | import json
  8 | import math
  9 | import os
 10 | import shutil
 11 | 
 12 | with open('../config/config.json','r') as config_file:
 13 |     config = json.load(config_file)
 14 |     items_of_every_page = config['items_of_every_page']
 15 |     css = config['css']
 16 |     blog_title = config['title']
 17 | 
 18 | titles = []
 19 | descriptions = []
 20 | links = []
 21 | with open('../config/index','r', encoding = 'utf8') as f:
 22 | 	n = 0
 23 | 	while True:
 24 | 		line  = f.readline().strip('\n')
 25 | 		if not line:
 26 | 			break
 27 | 		if line != '---':
 28 | 			n += 1
 29 | 			if (n%3) == 1:
 30 | 				titles.append(line)
 31 | 			elif (n%3) == 2:
 32 | 				descriptions.append(line)
 33 | 			else:
 34 | 				links.append(line)
 35 | 		else:
 36 | 			pass
 37 | 
 38 | 	if n == 0:
 39 | 		raise Exception('No enough items in index!')
 40 | 	if (n%3) != 0:
 41 | 		raise Exception("The number of titles, descriptions and links mismatches!")
 42 | 
 43 | number_of_md = math.ceil(n/(3.0*items_of_every_page))
 44 | pages, remainder = divmod(n/3, items_of_every_page)
 45 | 
 46 | 
 47 | for i in range(number_of_md):
 48 | 	with open(os.path.join('../md/',str(i)+'.md'), 'w', encoding = 'utf8') as f:
 49 | 		f.write("<title>%s</title>\n"%blog_title)
 50 | 		f.write("## %s\n"%blog_title)
 51 | 		if i<pages:
 52 | 			items_of_the_page = items_of_every_page
 53 | 		else:
 54 | 			items_of_the_page = int(remainder)
 55 | 		for j in range(items_of_the_page):
 56 | 			f.write("### [%s](%s)\n"%(titles.pop(), links.pop()))
 57 | 			f.write("%s\n"%descriptions.pop())
 58 | 		if number_of_md != 1:
 59 | 			if i == 0:
 60 | 				f.write("\n")
 61 | 				f.write("* [Next](/pages/1)")
 62 | 			elif i != number_of_md-1:
 63 | 				f.write("\n")
 64 | 				f.write("* [Next](/pages/%d\n"%(i+1))
 65 | 				f.write("\n")
 66 | 				f.write("* [Prev](/pages/%d\n"%(i-1))
 67 | 			else:
 68 | 					if number_of_md == 2:
 69 | 						f.write("\n")
 70 | 						f.write("* [Prev](/)")
 71 | 					else:
 72 | 						f.write("\n")
 73 | 						f.write("* [Prev](/pages/%d)"%(i-1))
 74 | 
 75 | 
 76 | mk = mistune.Markdown()
 77 | if os.path.exists('../public/pages'):
 78 | 	shutil.rmtree('../public/pages/')
 79 | 	os.makedirs('../public/pages')
 80 | else:
 81 | 	os.makedirs('../public/pages')
 82 | for i in range(number_of_md):
 83 | 	with open(os.path.join('../md/',str(i)+'.md'),'r', encoding='utf8') as f1:
 84 | 		s = f1.read()
 85 | 		html = mk(s)
 86 | 		os.makedirs(os.path.join(r'../public/pages', str(i)))
 87 | 		with open(os.path.join('../public/pages/',str(i), 'index.html'), 'w', encoding = 'utf8') as f2:
 88 | 			f2.write(html)
 89 | 			with open(css, 'r') as css_file:
 90 | 				css_content = css_file.read()
 91 | 				f2.write('<style>'+css_content+'</style>')
 92 | shutil.move("../public/pages/0/index.html", "../public/index.html")
 93 | 
 94 | os.chdir('../public')
 95 | PORT = 8888
 96 | Handler = SimpleHTTPRequestHandler
 97 | httpd = socketserver.TCPServer(("",PORT), Handler)
 98 | print("Successful!")
 99 | httpd.serve_forever()
100 | 
101 | 


--------------------------------------------------------------------------------
/py/noteshare.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | import argparse
 3 | import os
 4 | 
 5 | parser = argparse.ArgumentParser()
 6 | parser.add_argument("--mode", "-m", default = 0, type = int, help = "The mode of reading sourceure file.")
 7 | parser.add_argument("--file", "-f", default = None, help = "The name of the file.")
 8 | parser.add_argument("--url", "-u", default = None, help = "The sharing link.")
 9 | parser.add_argument("--delay", "-d", default = None, type = int, help = "The dealy time.")
10 | 
11 | args = parser.parse_args()
12 | 
13 | with open("../config/source.json",'r') as source_file:
14 | 	source = json.load(source_file)
15 | 	folder = "../public/articles/"
16 | 	if args.delay is None:
17 | 		delay = source['delay']
18 | 	else:
19 | 		delay = args.delay
20 | 
21 | 	if args.mode==0:
22 | 		if args.file is None:
23 | 			if not os.path.exists(os.path.join(r"../public/articles/",source['file'])):
24 | 				os.makedirs(os.path.join(r"../public/articles/",source['file']))
25 | 			file = os.path.join(folder, source['file'], 'index.html')
26 | 		else:
27 | 			if not os.path.exists(os.path.join(r"../public/articles/",args.file)):
28 | 				os.makedirs(os.path.join(r"../public/articles/",args.file))
29 | 			file = os.path.join(folder, args.file, 'index.html')
30 | 		if args.url is None:
31 | 			url = source['url']
32 | 		else: 
33 | 			url = args.url
34 | 
35 | 	else:
36 |          if (args.file is not None) or (args.url is not None):
37 |              raise Exception("Invaild argument!")
38 |          elif len(source['file'])!=len(source['url']):
39 |              raise Exception("number of files and urls is not equal!")
40 |          else:
41 |              file = []
42 |              for x in source['file']:
43 |                  if not os.path.exists(os.path.join(r"../public/articles/",x)):
44 |                      os.makedirs(os.path.join(r"../public/articles/",x))
45 |                  file.append(os.path.join(folder, x, 'index.html'))
46 |                  url = [y for y in source['url']]
47 | 
48 | '''
49 | http://www.html5tricks.com/tag/html5%E5%8A%A8%E7%94%BB
50 | '''
51 | if args.mode==0:
52 | 	with open(file, 'w') as f:
53 | 		f.write("<!DOCTYPE html><html><head><meta charset='UTF-8'><meta HTTP-EQUIV='refresh' content='%d;url=%s'></head><body><br><br><br><div class='loader'><div class='loader_overlay'></div><div class='loader_cogs'><div class='loader_cogs__top'><div class='top_part'></div><div class='top_part'></div><div class='top_part'></div><div class='top_hole'></div></div><div class='loader_cogs__left'><div class='left_part'></div><div class='left_part'></div><div class='left_part'></div><div class='left_hole'></div></div><div class='loader_cogs__bottom'><div class='bottom_part'></div><div class='bottom_part'></div><div class='bottom_part'></div><div class='bottom_hole'></div></div><p>loading</p></div></div><div style='text-align:center;clear:both;'></div></body></html><style>@charset 'utf-8';body{height:100vh;text-align:center;overflow:hidden}body h1{text-transform:uppercase;font-size:30px;color:#576e81;margin:30px 0 0 0}body h2{font-weight:normal;font-size:18px;color:#f98db9;margin:10px 0 0 0}body p{margin:0 auto}body .loader{height:250px;position:relative;margin:auto;width:400px;z-index:10}body .loader_overlay{width:150px;height:150px;background:transparent;box-shadow:0 0 0 1000px rgba(255,255,255,0.67),0px 0 19px 0 rgba(0,0,0,0.16) inset;border-radius:100%%;z-index:-1;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs{z-index:-2;width:100px;height:100px;top:-120px!important;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs__top{position:relative;width:100px;height:100px;-webkit-transform-origin:50px 50px;transform-origin:50px 50px;-webkit-animation:rotate 10s infinite linear;animation:rotate 10s infinite linear}body .loader_cogs__top div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}body .loader_cogs__top div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}body .loader_cogs__top div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}body .loader_cogs__top div.top_part{width:100px;border-radius:10px;position:absolute;height:100px;background:#f98db9}body .loader_cogs__top div.top_hole{width:50px;height:50px;border-radius:100%%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs__left{position:relative;width:80px;-webkit-transform:rotate(16deg);transform:rotate(16deg);top:28px;-webkit-transform-origin:40px 40px;transform-origin:40px 40px;-webkit-animation:rotate_left 10s .1s infinite reverse linear;animation:rotate_left 10s .1s infinite reverse linear;left:-24px;height:80px}body .loader_cogs__left div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}body .loader_cogs__left div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}body .loader_cogs__left div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}body .loader_cogs__left div.left_part{width:80px;border-radius:6px;position:absolute;height:80px;background:#97ddff}body .loader_cogs__left div.left_hole{width:40px;height:40px;border-radius:100%%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs__bottom{position:relative;width:60px;top:-65px;-webkit-transform-origin:30px 30px;transform-origin:30px 30px;-webkit-animation:rotate_left 10.2s .4s infinite linear;animation:rotate_left 10.2s .4s infinite linear;-webkit-transform:rotate(4deg);transform:rotate(4deg);left:79px;height:60px}body .loader_cogs__bottom div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}body .loader_cogs__bottom div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}body .loader_cogs__bottom div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}body .loader_cogs__bottom div.bottom_part{width:60px;border-radius:5px;position:absolute;height:60px;background:#ffcd66}body .loader_cogs__bottom div.bottom_hole{width:30px;height:30px;border-radius:100%%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate_left{from{-webkit-transform:rotate(16deg);transform:rotate(16deg)}to{-webkit-transform:rotate(376deg);transform:rotate(376deg)}}@keyframes rotate_left{from{-webkit-transform:rotate(16deg);transform:rotate(16deg)}to{-webkit-transform:rotate(376deg);transform:rotate(376deg)}}@-webkit-keyframes rotate_right{from{-webkit-transform:rotate(4deg);transform:rotate(4deg)}to{-webkit-transform:rotate(364deg);transform:rotate(364deg)}}@keyframes rotate_right{from{-webkit-transform:rotate(4deg);transform:rotate(4deg)}to{-webkit-transform:rotate(364deg);transform:rotate(364deg)}}</style>"%(delay, url))
54 | else:
55 | 	length = len(file)
56 | 	for i in range(length):
57 | 		with open(file[i], 'w') as f:
58 | 			f.write("<!DOCTYPE html><html><head><meta charset='UTF-8'><meta HTTP-EQUIV='refresh' content='%d;url=%s'></head><body><br><br><br><div class='loader'><div class='loader_overlay'></div><div class='loader_cogs'><div class='loader_cogs__top'><div class='top_part'></div><div class='top_part'></div><div class='top_part'></div><div class='top_hole'></div></div><div class='loader_cogs__left'><div class='left_part'></div><div class='left_part'></div><div class='left_part'></div><div class='left_hole'></div></div><div class='loader_cogs__bottom'><div class='bottom_part'></div><div class='bottom_part'></div><div class='bottom_part'></div><div class='bottom_hole'></div></div><p>loading</p></div></div><div style='text-align:center;clear:both;'></div></body></html><style>@charset 'utf-8';body{height:100vh;text-align:center;overflow:hidden}body h1{text-transform:uppercase;font-size:30px;color:#576e81;margin:30px 0 0 0}body h2{font-weight:normal;font-size:18px;color:#f98db9;margin:10px 0 0 0}body p{margin:0 auto}body .loader{height:250px;position:relative;margin:auto;width:400px;z-index:10}body .loader_overlay{width:150px;height:150px;background:transparent;box-shadow:0 0 0 1000px rgba(255,255,255,0.67),0px 0 19px 0 rgba(0,0,0,0.16) inset;border-radius:100%%;z-index:-1;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs{z-index:-2;width:100px;height:100px;top:-120px!important;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs__top{position:relative;width:100px;height:100px;-webkit-transform-origin:50px 50px;transform-origin:50px 50px;-webkit-animation:rotate 10s infinite linear;animation:rotate 10s infinite linear}body .loader_cogs__top div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}body .loader_cogs__top div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}body .loader_cogs__top div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}body .loader_cogs__top div.top_part{width:100px;border-radius:10px;position:absolute;height:100px;background:#f98db9}body .loader_cogs__top div.top_hole{width:50px;height:50px;border-radius:100%%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs__left{position:relative;width:80px;-webkit-transform:rotate(16deg);transform:rotate(16deg);top:28px;-webkit-transform-origin:40px 40px;transform-origin:40px 40px;-webkit-animation:rotate_left 10s .1s infinite reverse linear;animation:rotate_left 10s .1s infinite reverse linear;left:-24px;height:80px}body .loader_cogs__left div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}body .loader_cogs__left div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}body .loader_cogs__left div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}body .loader_cogs__left div.left_part{width:80px;border-radius:6px;position:absolute;height:80px;background:#97ddff}body .loader_cogs__left div.left_hole{width:40px;height:40px;border-radius:100%%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}body .loader_cogs__bottom{position:relative;width:60px;top:-65px;-webkit-transform-origin:30px 30px;transform-origin:30px 30px;-webkit-animation:rotate_left 10.2s .4s infinite linear;animation:rotate_left 10.2s .4s infinite linear;-webkit-transform:rotate(4deg);transform:rotate(4deg);left:79px;height:60px}body .loader_cogs__bottom div:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg)}body .loader_cogs__bottom div:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}body .loader_cogs__bottom div:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg)}body .loader_cogs__bottom div.bottom_part{width:60px;border-radius:5px;position:absolute;height:60px;background:#ffcd66}body .loader_cogs__bottom div.bottom_hole{width:30px;height:30px;border-radius:100%%;background:white;position:absolute;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate_left{from{-webkit-transform:rotate(16deg);transform:rotate(16deg)}to{-webkit-transform:rotate(376deg);transform:rotate(376deg)}}@keyframes rotate_left{from{-webkit-transform:rotate(16deg);transform:rotate(16deg)}to{-webkit-transform:rotate(376deg);transform:rotate(376deg)}}@-webkit-keyframes rotate_right{from{-webkit-transform:rotate(4deg);transform:rotate(4deg)}to{-webkit-transform:rotate(364deg);transform:rotate(364deg)}}@keyframes rotate_right{from{-webkit-transform:rotate(4deg);transform:rotate(4deg)}to{-webkit-transform:rotate(364deg);transform:rotate(364deg)}}</style>"%(delay, url[i]))


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