1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 CSS = u"""
20 body {
21 background-color: lightblue;
22 background: linear-gradient(lightblue, white);
23 }
24
25 #titlebox {
26 border-radius: 25px;
27 background: #e085c2;
28 padding: 5px;
29 position: relative;
30 top: 40px;
31 font-size: 32px;
32 font-family: Verdana, Arial, Sans-Serif;
33 }
34
35 #descriptionbox {
36 border-radius: 25px;
37 background: #b3d1ff;
38 padding: 15px;
39 position: fixed;
40 width: 50%;
41 top: 140px;
42 left: 40%;
43 height: 65%;
44 font-size: 24px;
45 font-family: Verdana, Arial, Sans-Serif;
46 border-style: solid;
47 border-color: #4d94ff;
48 overflow-y: auto;
49 }
50
51 #only_description {
52 border-radius: 12px;
53 background: #b3d1ff;
54 padding: 15px;
55 position: relative;
56 width: 80%;
57 top: 40px;
58 height: 65%;
59 font-size: 24px;
60 font-family: Verdana, Arial, Sans-Serif;
61 border-style: solid;
62 border-color: #4d94ff;
63 overflow-y: auto;
64 margin-left: auto;
65 margin-right: auto;
66 }
67
68 #imagebox {
69 border-radius: 25px;
70 background: lightblue;
71 padding: 0;
72 position: fixed;
73 top: 180px;
74 left: 25%;
75 }
76
77 div.timeline_icon {
78 position: fixed;
79 right: 7px;
80 bottom: 7px;
81 }
82
83 .button {
84 background-color: #66CDAA;
85 border: none;
86 color: white;
87 padding: 5px 11px;
88 text-align: center;
89 text-decoration: none;
90 display: inline-block;
91 font-size: 16px;
92 margin: 4px 2px;
93 cursor: pointer;
94 border-radius: 8px;
95 }
96
97 div.left {
98 position: fixed;
99 top: 50%;
100 left: 0;
101 }
102
103 div.right {
104 position: fixed;
105 top: 50%;
106 right: 0;
107 }
108
109 a.button:hover {
110 background-color: #6600AA;
111 }
112
113 .enlarge {
114 transform: scale(1.5, 1.5);
115 }
116
117 div.history_line {
118 position: fixed;
119 top: 14px;
120 left: 2%;
121 width: 90%;
122 border-bottom: 1px solid #000;
123 line-height: 0.1em;
124 }
125
126 """
127
128 PAGE_TEMPLATE = u"""
129 <html>
130 <head>
131 <link rel="stylesheet" type="text/css" href="slideshow.css">
132
133 <style>
134
135 /*
136 Place a filled circle on the history line at the relative position
137 of the events start date.
138 The %%s is replaced with one row for each event to display.
139 The div classname contains the event sequence number like this:
140 div.position_in_history_8 { ... }
141 For each row, there is a corresponding div tag defined in the body
142 of this page like:
143 <div class="position_in_history_8"/>
144
145 */
146 %s
147
148 /*
149 A filled circle placed at the history line at the relative
150 position of the event displayed in this page
151 */
152 div.position_in_history {
153 border-radius: 50%%;
154 width: 16px;
155 height: 16px;
156 background-color: #e085c2;
157 position: fixed;
158 top: 7px;
159 left: %s%%;
160 }
161 </style>
162 </head>
163
164 <body>
165
166 <!-- Time and title box
167 The %%s is replaced with the time period and the text for the event.
168 -->
169 <center><p id="titlebox">%s</br>%s</p></center>
170
171 <!-- Image and description boxes
172 The %%s is replaced with the event icon and the event description text.
173 If the event don't have an image, only the description text is displayed.
174 -->
175 %s
176
177 <!-- Left navigation button -->
178 <div class="left">
179 <a href="page_%s.html" class="button"><<</a>
180 </div>
181
182 <!-- Right navigation button -->
183 <div class="right">
184 <a href="page_%s.html" class="button">>></a>
185 </div>
186
187 <!-- Timeline icon -->
188 <div class="timeline_icon">
189 <img src="32.png">
190 </div>
191
192 <!-- History Line
193 Display a line that represents the time span from the start time of the
194 first event to the start time of the last event.
195 -->
196 <div class="history_line"/>
197
198 <!-- Position in history
199 Display a filled circle on the history line at the relative position
200 of the events start date.
201 The %%s is replaced with one row for each event to display.
202 The div classname contains the event sequence number like this:
203 <div class="position_in_history_8"/>
204 For each row, there is a corresponding style defined in the head
205 of this page like:
206 div.position_in_history_8 { ... }
207 -->
208 %s
209
210 <div class="position_in_history"/>
211 </body>
212 </html>
213 """
214
215 ONLY_DESCRIPTION = """
216 <div id="only_description">%s</div>
217 """
218
219 IMAGE_AND_DESCRIPTION = """
220 <div id="imagebox"><img class="enlarge" src="%s"></div>
221 <div id="descriptionbox">%s</div>
222 """
223