emanuel: doc/www/src default.css, 1.9, 1.10 index.html.m4, 1.143, 1.144 screenshots.html.m4, 1.9, 1.10

[cvs at kolab.org]

Author: emanuel

Update of /kolabrepository/doc/www/src
In directory doto:/tmp/cvs-serv20745

Modified Files:
	default.css index.html.m4 screenshots.html.m4 
Log Message:
Reorganize screenshot page. Removed old + added new screenshots and logos.


Index: default.css
===================================================================
RCS file: /kolabrepository/doc/www/src/default.css,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- default.css	17 May 2007 11:51:46 -0000	1.9
+++ default.css	10 Jun 2008 08:50:54 -0000	1.10
@@ -280,3 +280,38 @@
 .news .newsb {
     margin-bottom: 2em;
 }
+
+/* Logo and text column */
+.logo-left {
+    float:left;
+    clear:left;
+    width: 115px;
+    text-align: right;
+    margin-top: 5px; 
+}
+.logo-text-right {
+    margin-left: 130px;
+    margin-bottom: 25px;
+}
+
+/* Screenshots (container, image, text) */
+.screenshot {
+    clear: left;
+}
+.screenshot-image {
+    float:left;
+    text-align: right;
+    margin-bottom: 10px;
+    background: transparent url(images/frame.png) no-repeat scroll 0%;
+    width: 160px;
+    height: 120px;
+    padding: 10px;
+}
+.screenshot-image img {
+    width: 160px;
+}
+.screenshot-text {
+    margin-left: 195px;
+    padding-top: 10px;
+}
+

Index: index.html.m4
===================================================================
RCS file: /kolabrepository/doc/www/src/index.html.m4,v
retrieving revision 1.143
retrieving revision 1.144
diff -u -d -r1.143 -r1.144
--- index.html.m4	10 Jun 2008 07:33:11 -0000	1.143
+++ index.html.m4	10 Jun 2008 08:50:54 -0000	1.144
@@ -62,6 +62,7 @@
 <p>
 More information: 
 <ul style="padding-left:15px;">
+<li><a href="screenshots.html">Screenshots</a> of Kontact/Win and Kontact/Mac</li>
 <li><a href="http://www.bsi.bund.de/presse/pressinf/linuxtag210508.htm">
 BSI press release</a> (2008-05-21)</li>
 <li>German News of 

Index: screenshots.html.m4
===================================================================
RCS file: /kolabrepository/doc/www/src/screenshots.html.m4,v
retrieving revision 1.9
retrieving revision 1.10
diff -u -d -r1.9 -r1.10
--- screenshots.html.m4	14 Sep 2007 04:54:27 -0000	1.9
+++ screenshots.html.m4	10 Jun 2008 08:50:54 -0000	1.10
@@ -1,189 +1,339 @@
-m4_define(`PAGE_TITLE',`Screenshot Gallery')
+m4_define(`PAGE_TITLE',`Screenshots')
 m4_include(header.html.m4)
 <div id="date">This page was updated on:<br />$Date$</div>
 
 <h1>Screenshots</h1>
+<table>
+<tr>
+<td valign=top>
 <ul>
-  <li><a href="#kde_kolab2_client">KDE Kolab2 Client 2.1.1 proko2</a></li>
-  <li><a href="#kolab2_webadmin">Kolab Server 2.1.0 Web-Admin-Interface</a></li>
-  <li><a href="#kolab2_webclient">Kolab Webclient (beta)</a></li>
-  <li><a href="#kde_kolab1_client">KDE Kolab1 Client (old)</a></li>
-  <li><a href="#kolab1_webadmin">Kolab1 Server Web-Admin-Interface (old)</a></li>
+  <li><a href="#kolab2clients">Kolab 2 Clients</a>
+    <ul style="list-style: circle">
+        <li><a href="#enterprise35">KDE Kontact for GNU/Linux</a></li>
+        <li><a href="#kontact-windows">KDE Kontact for Windows</a></li>
+        <li><a href="#kontact-mac">KDE Kontact for Mac OS X</a></li>        
+        <li><a href="#horde">Webclient: Horde (beta)</a></li>
+    </ul></li>
 </ul>
-
-<h2><a name="kde_kolab2_client">KDE Kolab2 Client 2.1.1 proko2</a></h2>
-
-<table cellpadding="14" bgcolor="white" width="100%">
-<tr valign="bottom">
-<td align="center" width="50%">
-  <a href="images/summery1.png">
-  <img src="images/summery1_small.png" border=0>
-  <br/>
-  <br/>Kontact overview (660x568 55 kByte)</a> 
-  <br>Kontact provides a nice overview showing all upcoming events, mails,
-  todos or birthdays. Additional Knotes just poped up a small note.
 </td>
-<td align="center">
-  <a href="images/mail_overview1.png"
-  ><img src="images/mail_overview1_small.png" border=0>
-  <br/>
-  <br/>Mail overview (839x707 67,6 kByte)</a> 
-  <br>Hierarchly ordered mailsfolders customized by different folder
-  icons
+<td valign=top>
+<ul>
+  <li><a href="#kolabserver">Kolab Server 2.2</a>
+    <ul style="list-style: circle">
+        <li><a href="#webadmin">Web-Admin-Interface</a></li>
+        <li><a href="#fbview">Free-Busy-View-Interface</a></li>
+    </ul></li>
+</ul>
 </td>
 </tr>
+</table>
 
-<tr valign="bottom">
-<td align="center" width="50%">
-  <a href="images/mail_reply1.png">
-  <img src="images/mail_reply1_small.png" border=0>
-  <br/>
-  <br/>Kontact composing (839x707 82 kByte)</a> 
-  <br>Mail composing in its full beauty :)
-</td>
-<td align="center">
-  <a href="images/calendar_overview1.png"
-  ><img src="images/calendar_overview1_small.png" border=0>
-  <br/>
-  <br/>Calendar overview (874x772 69,1 kByte)</a> 
-  <br>Kontacts calendar component showin the upcoming events for a
-  week. Events can be categorized with colors.
-</td>
-</tr>
+<h2><a name="kolab2clients">Kolab 2 Clients</a></h2>
 
-<tr valign="bottom">
-<td align="center" width="50%">
-  <a href="images/calendar_edit1.png">
-  <img src="images/calendar_edit1_small.png" border=0>
-  <br/>
-  <br/>Edit calendar event (615x495 24,4 kByte)</a> 
-  <br>Create a new event.
-</td>
-<td align="center">
-  <a href="images/calendar_freebusy1.png"
-  ><img src="images/calendar_freebusy1_small.png" border=0>
-  <br/>
-  <br/>Free-Busy list (735x495 24,1 kByte)</a> 
-  <br>You can see if attendees of the event are busy or free on this time.
-</td>
-</tr>
+<!--KDE Kontact-->
+<div class="logo-left">
+    <a href="http://www.kontact.org">
+     <img alt="Kontact" src="images/logo-kontact.png">
+    </a> 
+</div>
+<div class="logo-text-right">
+<h3><a name="enterprise35">KDE Kontact for GNU/Linux (enterprise35 | beta)</a></h3>
 
-<tr valign="bottom">
-<td align="center" width="50%">
-  <a href="images/contacts_overview1.png">
-  <img src="images/contacts_overview1_small.png" border=0>
-  <br/>
-  <br/>Contacts overview (755x508 55,4 kByte)</a> 
-  <br>You can use mutilple contact folders and share them among other users
-</td>
-<td align="center">
-  <a href="images/contacts_edit1.png"
-  ><img src="images/contacts_edit1_small.png" border=0>
-  <br/>
-  <br/>Create contact (758x598 42,3 kByte)</a> 
-  <br>Create a new contact and store a lot of additional information.
-</td>
-</tr>
+    <!--Screenshot 1-->
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-enterprise35-mail.png">
+    <img src="images/shot-kontact-enterprise35-mail_small.png">
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Mail: Overview</b><br>
+    Hierarchly ordered mail folders customized by different folder icons.
+    </div>
 
-<tr valign="bottom">
-<td align="center" width="50%">
-  <a href="images/tasks_overview1.png">
-  <img src="images/tasks_overview1_small.png" border=0>
-  <br/>
-  <br/>Tasks overview(668x406 39,7 kByte)</a> 
-  <br>Tasks can be hierachly orded by assigning subtasks.
-</td>
-<td></td>
-</tr>
-</table>
+    <!--Screenshot 2-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-enterprise35-mail-composing.png">
+    <img src="images/shot-kontact-enterprise35-mail-composing_small.png" >
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Mail: Composing</b><br>
+    Mail composing in its full beauty :)
+    </div>
+    </div>
 
+    <!--Screenshot 3-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-enterprise35-calendar.png">
+    <img src="images/shot-kontact-enterprise35-calendar_small.png" >
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Calendar: Overview</b><br>
+    Kontacts calendar component showin the upcoming events for a week. 
+    Events can be categorized with colors.
+    </div>
+    </div>
+  
+    <!--Screenshot 4-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-enterprise35-calendar-side-by-side.png">
+    <img src="images/shot-kontact-enterprise35-calendar-side-by-side_small.png" >
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Calendar: View "side-by-side"</b><br>
+    </div>
+    </div>
 
-<h2><a name="kolab2_webadmin">Kolab Server 2.1.0 Web-Admin-Interface</a></h2>
+    <!--Screenshot 5-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-enterprise35-calendar-edit-event.png">
+    <img src="images/shot-kontact-enterprise35-calendar-edit-event_small.png" >
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Calendar: Edit event</b><br>
+    Create a new event.
+    </div>
+    </div>
 
-<table cellpadding="14" bgcolor="white" width="100%">
-<tr valign="bottom">
-<td align="center">
-  <a href="images/shot-web-admin-2.1.0-domain-maintainers-de.png"
-  ><img src="images/shot-web-admin-2.1.0-domain-maintainers-de-small.png" 
-   width=200 height=115 border=0 
-   ><br /><br />Email-Domain-Maintainers German Localisation (1072x615 100 kByte)</a>
-</td>
-<td align="center">
-</td>
-</table>
+    <!--Screenshot 6-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-enterprise35-freebusy.png">
+    <img src="images/shot-kontact-enterprise35-freebusy_small.png" >
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Calendar: Free busy list</b><br>
+    You can see if attendees of the event are busy or free on this time.
+    </div>
+    </div>
 
+    <!--Screenshot 7-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-enterprise35-contacts.png">
+    <img src="images/shot-kontact-enterprise35-contacts_small.png" >
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Contacts: Overview</b><br>
+    You can use mutilple contact folders and share them among other users.
+    </div>
+    </div>
 
-<h2><a name="kolab2_webclient">Kolab Webclient (beta)</a></h2>
+    <!--Screenshot 8-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-enterprise35-contacts-editing.png">
+    <img src="images/shot-kontact-enterprise35-contacts-editing_small.png" >
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Contacts: Edit contact</b><br>
+    Create a new contact and store a lot of additional information.
+    </div>
+    </div>
 
-<table cellpadding="14" bgcolor="white" width="100%">
-<tr valign="bottom">
-<td align="center">
-  <a href="images/shot-web-client-2.2-calendar-week-de.png"
-  ><img src="images/shot-web-client-2.2-calendar-week-de-small.png"
-   width=200 height=115 border=0 
-   ><br /><br />Webclient based on Horde in Beta (200709) (80 kByte)</a>
-</td>
-<td align="center">
-</td>
-</table>
+    <!--Screenshot 9-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-enterprise35-tasks.png">
+    <img src="images/shot-kontact-enterprise35-tasks_small.png" >
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Tasks: Overview</b><br>
+    Hierarchly ordered list of To-Dos with information about recurs, priority
+    and completion. There is a task due today (yellow) and a task overdue (red).
+    </div>
+    </div>
 
+    <div style="clear:left"></div>
 
-<h2><a name="kde_kolab1_client">KDE Kolab1 Client (old)</a></h2>
+</div>
 
-<table cellpadding="14" bgcolor="white" width="100%">
-<tr valign="bottom">
-<td align="center">
-  <a href="images/shot-kde-client-calendar1.png"
-  ><img src="images/shot-kde-client-calendar1.small.png" width=200 height=145
-  border=0 ><br /><br />Calender View (790x625 50 kByte)</a>
-</td>
-<td align="center">
-  <a href="images/shot-kde-client-edit-contact1.png"
-  ><img src="images/shot-kde-client-edit-contact1.small.png" width=200 height=138
-  border=0 ><br /><br />Contact edit dialog (711x498 44 kByte)</a>
-</td>
 
-<tr valign="bottom">
-<td align="center">
-  <a href="images/shot-kde-client-edit-event1.png"
-  ><img src="images/shot-kde-client-edit-event1.small.png" width=200 height=97
-  border=0 ><br /><br />Invite to an event (854x700 44 kByte)</a>
-</td>
-<td align="center">
-  <a href="images/shot-kde-client-edit-task1.png"
-  ><img src="images/shot-kde-client-edit-task1.small.png" width=200 height=124
-  border=0 ><br /><br />Edit a task (845x770 67 kByte)</a>
-</td>
 
-<tr valign="bottom">
-<td align="center">
-  <a href="images/shot-kde-client-notes1.png"
-  ><img src="images/shot-kde-client-notes1.small.png" width=200 height=123
-  border=0 ><br /><br />Kmail viewing Notes(858x618 66 kByte)</a>
-</td>
-</table>
 
-<h2><a name="kolab1_webadmin">Kolab1 Server Web-Admin-Interface (old)</a></h2>
 
-<table cellpadding="14" bgcolor="white" width="100%">
-<tr valign="bottom">
-<td align="center">
-  <a href="images/shot-web-admin-users1.png"
-  ><img src="images/shot-web-admin-users1.small.png" width=200 height=107
-  border=0 ><br /><br />Maintaining users(686x628 72 kByte)</a>
-</td>
-<td align="center">
-  <a href="images/shot-web-services1.png"
-  ><img src="images/shot-web-services1.small.png" width=200 height=85
-  border=0 ><br /><br />Administrate running services(779x698 61 kByte)</a>
-</td>
+<!--Kontact for Windows-->
+<div class="logo-left">
+    <a href="http://www.kontact.org">
+    <img alt="Kontact" src="images/logo-kontact-oxygen.png">
+    </a>
+</div>
+<div class="logo-text-right">
+<h3><a name="kontact-windows">KDE Kontact for Windows (enterprise4 | alpha, 2008-06-03)</a></h3>
 
-<tr valign="bottom">
-<td align="center">
-  <a href="images/shot-web-user-settings1.png"
-  ><img src="images/shot-web-user-settings1.small.png" width=200 height=99
-  border=0 ><br /><br />My User Settings(658x705 62 kByte)</a>
-</td>
-</table>
+    <!--Screenshot 1-->
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-windows-mail.png">
+    <img src="images/shot-kontact-windows-mail_small.png">
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Mail: Overview</b><br>
+     
+    </div>
+
+    <!--Screenshot 2-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-windows-mail-composing.png">
+    <img src="images/shot-kontact-windows-mail-composing_small.png">
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Mail: Composing</b><br>
+     
+    </div>
+    </div>
+
+    <div style="clear:left"></div>
+
+</div>
+
+
+<!--Kontact for Mac -->
+<div class="logo-left">
+    <a href="http://www.kontact.org">
+    <img alt="Kontact" src="images/logo-kontact-oxygen.png">
+    </a>
+</div>
+<div class="logo-text-right">
+<h3><a name="kontact-mac">KDE Kontact for Mac OS X (enterprise4 | alpha, 2008-05-25)</a></h3>
+
+    <!--Screenshot 1-->
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-macosx-mail.png">
+    <img src="images/shot-kontact-macosx-mail_small.png">
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Mail: Overview</b><br> 
+    </div>
+
+    <!--Screenshot 2-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-kontact-macosx-mail-composing.png">
+    <img src="images/shot-kontact-macosx-mail-composing_small.png">
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Mail: Composing</b><br>
+    
+    </div>
+    </div>
+
+    <div style="clear:left"></div>
+
+</div>
+
+
+<!--Horde-->
+<div class="logo-left">
+    <a href="http://www.horde.org">
+    <img alt="Horde" src="images/logo-horde.png">
+    </a>
+</div>
+<div class="logo-text-right">
+    <h3><a name="horde">Webclient: Horde</a></h3>
+
+    <!--Screenshot 1-->
+    <div class="screenshot-image">
+    <a href="images/shot-horde-webmail.png">
+    <img src="images/shot-horde-webmail_small.png">
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Horde Webmail</b><br>
+     
+    </div>
+
+    <!--Screenshot 2-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-horde-calendar.png">
+    <img src="images/shot-horde-calendar_small.png">
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Horde Calendar</b><br>
+    
+    </div>
+    </div>
+</div>
+
+
+
+
+<!--Kolab Server-->
+
+<h2 style="clear: left; padding-top: 55px;"><a name="kolabserver">Kolab Server 2.2</a></h2>
+
+
+<!--Webadmin-->
+<div class="logo-left"></div>
+<div class="logo-text-right">    
+    <h3><a name="webadmin">Web-Admin-Interface (Kolab Server 2.2)</a></h3>
+
+    <!--Screenshot 1-->
+    <div class="screenshot-image">
+    <a href="images/shot-webadmin-manage-email-users.png">
+    <img src="images/shot-webadmin-manage-email-users_small.png">
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Manage Email Users</b><br>
+    Overview of Kolab email users. Role: admin.
+    </div>
+
+    <!--Screenshot 2-->
+    <div class="screenshot">
+    <div class="screenshot-image">
+    <a href="images/shot-webadmin-manage-domain-maintainers.png">
+    <img src="images/shot-webadmin-manage-domain-maintainers_small.png">
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Manage Domain Maintainers</b><br>
+    Create a new domain maintainer. Role: admin.
+    </div>
+    </div>
+
+    <div style="clear:left"></div>
+</div>
+
+<!--FreeBusy View-->
+<div class="logo-left"></div>
+<div class="logo-text-right">    
+    <h3><a name="fbview">Free-Busy-View-Interface (Kolab Server 2.2)</a></h3>
+
+    <!--Screenshot 1-->
+    <div class="screenshot-image">
+    <a href="images/shot-fbview.png">
+    <img src="images/shot-fbview_small.png">
+    </a>
+    </div>
+    <div class="screenshot-text">
+    <b>Free Busy Viewer</b><br>
+    Free (green) and busy (red) times of two attendees in the fb web
+interface of Kolab Server.
+    </div>
+</div>
+
+
+<p style="clear:left;"><br>
+Old Screenshots of Kolab 1: 
+<a href="http://kroupware.kolab.org/screenshots.html">Kroupware
+Screenshot Gallery >>></a>
 
 m4_include(footer.html.m4)