diff --git a/assets/.geeMail chimpy.png-autosave.kra b/assets/.geeMail chimpy.png-autosave.kra new file mode 100644 index 00000000..8be8cb2a Binary files /dev/null and b/assets/.geeMail chimpy.png-autosave.kra differ diff --git a/assets/geeMail chimp.png b/assets/geeMail chimp.png new file mode 100644 index 00000000..88df70aa Binary files /dev/null and b/assets/geeMail chimp.png differ diff --git a/css/style.css b/css/style.css index e69de29b..dc798bba 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,92 @@ + +body { + margin: 0; + padding: 0; +} + +#header { + background-color: cornflowerblue; + width: 100%; + padding: 1em; + margin-bottom: 4em; + display: flex; +} + +#gmHeaderImg { + height: 80px; + width: 80px; + margin-left: 10px; +} + +#gmHeaderTitle { + color: midnightblue; + font-family: 'Happy Monkey', cursive; + align-self: flex-end; + margin-left: 15px; +} + +.gmTitle { + margin: 0px; +} + +#inbox { + display: flex; + margin: 25px; +} + +#summaryPane { + flex: 1; + display: block; +} + +#expandEmail { + flex: 2; + flex-direction: column; +} + +#inboxCount { + text-align: right; + width: 85%; +} + +#mailBox { + width: 85%; + border: 2px solid black; +} + +.mailDetail { + border: 1px dashed lightgray; + padding: 10px; +} + +.subject { + font-size: 1.2em; +} + +.sender { + font-style: italic; +} + +.date { + color: rgb(120, 120, 120); +} + +#emailTitle { + border-bottom: 2px solid black; + padding-bottom: 2px; + padding-left: 5px; + margin-bottom: 10px; +} + +#emailSubject { + font-size: 1.2em; + font-weight: bold; +} + +#emailSender { + font-style: italic; +} + +#emailDate { + color: rgb(120, 120, 120); +} \ No newline at end of file diff --git a/index.html b/index.html index a8a1aad9..f35fab2d 100644 --- a/index.html +++ b/index.html @@ -2,17 +2,185 @@ + + -
- Build Me! -
+ \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 00000000..1daa6ac7 --- /dev/null +++ b/js/app.js @@ -0,0 +1,171 @@ + + +// container for header +var headerBox = document.createElement('div'); +headerBox.id = 'header'; +document.body.appendChild(headerBox); + +// header img; append to header +var geeMailImg = document.createElement('img'); +geeMailImg.className ='gmHeader'; +geeMailImg.id='gmHeaderImg'; +//original source: 'http://www.tuesdaytactics.com/wp-content/uploads/2011/12/tt127-3mailchimp.jpg'; +geeMailImg.src = 'assets/geeMail chimp.png'; +headerBox.appendChild(geeMailImg); + +// title container; append to header +var geeMailTitle = document.createElement('div'); +geeMailTitle.className='gmHeader'; +geeMailTitle.id='gmHeaderTitle'; +headerBox.appendChild(geeMailTitle); + +// header label; append to title +var geeMailLabel = document.createElement('h1'); +geeMailLabel.className='gmTitle'; +geeMailLabel.id='gmHeaderLabel'; +geeMailLabel.innerHTML='Gee-Mail'; +geeMailTitle.appendChild(geeMailLabel); + +// header tag line; append to title +var geeMailSlogan = document.createElement('h4'); +geeMailSlogan.className='gmTitle'; +geeMailSlogan.id='gmHeaderSlogan'; +geeMailSlogan.innerHTML='Gee-rillas at your e-service!'; +geeMailTitle.appendChild(geeMailSlogan); + +// make inboxBox to hold summary [count, mail] & message +var inboxBox = document.createElement('div'); +inboxBox.id = 'inbox'; +document.body.appendChild(inboxBox); + +// make summary pane +var summaryPaneBox = document.createElement('div'); +summaryPaneBox.id = 'summaryPane'; +inboxBox.appendChild(summaryPaneBox); + +// make count div +var countBox = document.createElement('div'); +countBox.id = 'inboxCount'; +summaryPaneBox.appendChild(countBox); + +// make mailBox to hold mailDetailBox +var mailBox = document.createElement('div'); +mailBox.id = 'mailBox'; +summaryPaneBox.appendChild(mailBox); + +// make expandEmail pane to drill into email +var expandEmail = document.createElement('div'); +expandEmail.id = 'expandEmail'; +inboxBox.appendChild(expandEmail); + +// emailTitle container to hold message title +var emailTitle = document.createElement('div'); +emailTitle.id = 'emailTitle'; +expandEmail.appendChild(emailTitle); + +// append subject/sender/date to emailTitle +var emailSubject = document.createElement('div'); +var emailSender = document.createElement('div'); +var emailDate = document.createElement('div'); +emailSubject.id = 'emailSubject'; +emailSender.id = 'emailSender'; +emailDate.id = 'emailDate'; +emailTitle.appendChild(emailSubject); +emailTitle.appendChild(emailSender); +emailTitle.appendChild(emailDate); + +// make bodyBox to show message content; +var emailBody = document.createElement('div'); +emailBody.id = 'emailBody'; +expandEmail.appendChild(emailBody); + + + +// makes containers for a new email and populates them with object values +function makeEmailContainer(obj) { + + // make message class to hold message details + var mailDetailBox = document.createElement('div'); + mailDetailBox.className = 'mailDetail'; + // assign ID based on distance from end of inbox + mailDetailBox.id = 'mailDetailEndMinus'+mailBox.childElementCount; + // insert new message at the top before 1st child unless no msgs [children] yet + if (mailBox.childElementCount===0) { + mailBox.appendChild(mailDetailBox); + } else { + mailBox.insertBefore(mailDetailBox,mailBox.firstChild); + } + + // append subject to message class + var subjectBox = document.createElement('div'); + subjectBox.className = 'subject'; + subjectBox.innerHTML = obj.subject; + mailDetailBox.appendChild(subjectBox); + + // append sender to message class + var senderBox = document.createElement('div'); + senderBox.className = 'sender'; + senderBox.innerHTML = obj.sender; + mailDetailBox.appendChild(senderBox); + + // append date to message class + var dateBox = document.createElement('div'); + dateBox.className = 'date'; + var timezoneOffset = obj.date.getTimezoneOffset()/60; + var localDate = new Date(obj.date.setHours(obj.date.getHours() - timezoneOffset)); + var fmtLocalDate = localDate.toISOString().slice(0, 16).replace("T", " "); + dateBox.innerHTML = fmtLocalDate; + mailDetailBox.appendChild(dateBox); + + // append body to message class + var bodyBox = document.createElement('div'); + bodyBox.className = 'body'; + bodyBox.value = obj.body; + mailDetailBox.appendChild(bodyBox); + +} + +// load inbox with original emails +for (var i=0; i