Gnumed.timelinelib.wxgui.dialogs.slideshow.templates

Package Gnumed :: Package timelinelib :: Package wxgui :: Package dialogs :: Package slideshow :: Module templates |
[frames] | no frames]

# Source Code for Module Gnumed.timelinelib.wxgui.dialogs.slideshow.templates

      1  # Copyright (C) 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018  Rickard Lindberg, Roger Lindberg
      2  #
      3  # This file is part of Timeline.
      4  #
      5  # Timeline is free software: you can redistribute it and/or modify
      6  # it under the terms of the GNU General Public License as published by
      7  # the Free Software Foundation, either version 3 of the License, or
      8  # (at your option) any later version.
      9  #
     10  # Timeline is distributed in the hope that it will be useful,
     11  # but WITHOUT ANY WARRANTY; without even the implied warranty of
     12  # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     13  # GNU General Public License for more details.
     14  #
     15  # You should have received a copy of the GNU General Public License
     16  # along with Timeline.  If not, see <http://www.gnu.org/licenses/>.
     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">&lt&lt</a>
    180  </div>
    181
    182  <!-- Right navigation button -->
    183  <div class="right">
    184  <a href="page_%s.html" class="button">&gt&gt</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