Prototype Sales Diary

Prototype for a simple sales diary for SAP - for implementing it into BSP pages

by Denise Nepraunig

HTML

<link href='http://fonts.googleapis.com/css?family=Raleway:200,700' rel='stylesheet' type='text/css'>

<div id="page">
    <h1>Sales Diary</h1>
    <!--<h2>07.02.2014</h2>-->
    <h2><SCRIPT LANGUAGE="Javascript">
<!-- 

// Array of day names
var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday",
				"Thursday","Friday","Saturday");

// Array of month Names
var monthNames = new Array(
"January","February","March","April","May","June","July",
"August","September","October","November","December");

var now = new Date();
document.write(dayNames[now.getDay()] + ", " + 
monthNames[now.getMonth()] + " " + 
now.getDate() + ", " + now.getFullYear());

// -->
</SCRIPT>
        
    </h2>
    <h3>Sales Organizations:</h3>
    
<div class="vkorg detail effect2">
    <span class="vkorgtxt">1010</span>
    <div class="content">
        <br>15 Orders
        <br><span class="amount">€ 36,791.97</span>
    </div>
 </div>
        
<div class="vkorg detail effect2">
    <span class="vkorgtxt">2010</span>
    <div class="content">
        <br>10 Orders
        <br><span class="amount">€ 67,456.98</span>
    </div>
</div>

<div class="vkorg detail effect2">
    <span class="vkorgtxt">3010</span>
    <div class="content">
        <br>17 Orders
        <br><span class="amount">€ 78,321.47</span>
    </div>
</div>
            
<div class="vkorg detail effect2">
    <span class="vkorgtxt">4010</span>
    <div class="content">
        <br>5 Orders
        <br><span class="amount">€ 11,345.87</span>
     </div>
</div>

<div class="vkorg sum effect2">
    <span class="vkorgtxt">Sum</span>
    <div class="content">
        <br>47 Orders
        <br><span class="amount">€ 193,916.29</span>
     </div>
</div>

</div>

CSS

body, div {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
}

.vkorgtxt {
    font-weight: 700;
}

h1, h2, h3 {
    text-align: left;
    margin-left: 20px;
}

h2 {
    margin-top: -20px;
    margin-bottom: 50px;
}
#page {
    border-top: 5px solid #3498db;
	width:900px;
	margin:0px auto;
}

.amount {
    font-weight: 700;
}

.content {
    position: absolute;
    bottom: 25px;
    right: 25px;
    text-align: right;
    font-size: 26px;
}

.sum {
     border-top: 15px solid #9b59b6;
     background-color: #ecf0f1;
}
.detail {
     border-top: 15px solid #3498db;
     background-color: #ecf0f1;  
}

.vkorg {
    text-align: right;
    font-size: 24px;
    position: relative;
    width: 200px;
    height: 150px;
    margin: 20px;
    padding: 10px;
    padding-right: 25px;
    float: left;
}

/* fancy shadow effects */

.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}