diff --git a/daily_reports_with_image.php b/daily_reports_with_image.php index 4ac5570..853683e 100644 --- a/daily_reports_with_image.php +++ b/daily_reports_with_image.php @@ -48,649 +48,254 @@ $array_orders = getSubItem($dateToday); Order Details - + - - - - - - - + +
+ + + + +
+ Copyright © 2019 crewsportswear.com. All rights + reserved. +
+
+ + + +   + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..36005fc --- /dev/null +++ b/styles.css @@ -0,0 +1,356 @@ +img { + border: none; + -ms-interpolation-mode: bicubic; + max-width: 100%; +} + +body { + background-color: #f6f6f6; + font-family: sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 12px; + line-height: 1.4; + margin: 0; + padding: 0; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + width: 100%; +} + +table { + border-collapse: separate; + mso-table-lspace: 0pt; + mso-table-rspace: 0pt; + width: 100%; +} + +table td { + font-family: sans-serif; + font-size: 10px; + vertical-align: top; +} + +/* ------------------------------------- + BODY & CONTAINER + ------------------------------------- */ + +/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ +.container { + display: block; + margin: 0 auto !important; + /* makes it centered */ + max-width: 880px; + padding: 10px; + width: 880px; +} + +/* This should also be a block element, so that it will fill 100% of the .container */ +.content { + box-sizing: border-box; + display: block; + margin: 0 auto; + max-width: 880px; + padding: 10px; +} + +/* ------------------------------------- + HEADER, FOOTER, MAIN + ------------------------------------- */ +.main { + background: #ffffff; + border-radius: 3px; + width: 100%; +} + +.wrapper { + box-sizing: border-box; + padding: 20px; +} + +.content-block { + padding-bottom: 10px; + padding-top: 10px; +} + +.footer { + clear: both; + margin-top: 10px; + text-align: center; + width: 100%; +} + +.footer td, +.footer p, +.footer span, +.footer a { + color: #999999; + font-size: 12px; + text-align: center; +} + +/* ------------------------------------- + TYPOGRAPHY + ------------------------------------- */ +h1, +h2, +h3, +h4 { + color: #000000; + font-family: sans-serif; + font-weight: 400; + line-height: 1.4; + margin: 0; + margin-bottom: 20px; +} + +h1 { + font-size: 35px; + font-weight: 300; + text-align: center; + text-transform: capitalize; +} + +p, +ul, +ol { + font-family: sans-serif; + font-size: 14px; + font-weight: normal; + margin: 0; + margin-bottom: 15px; +} + +p li, +ul li, +ol li { + list-style-position: inside; + margin-left: 5px; +} + +a { + color: #3498db; + text-decoration: underline; +} + +/* ------------------------------------- + BUTTONS + ------------------------------------- */ +.btn { + box-sizing: border-box; + width: 100%; +} + +.btn > tbody > tr > td { + padding-bottom: 15px; +} + +.btn table { + width: auto; +} + +.btn table td { + background-color: #ffffff; + border-radius: 5px; + text-align: center; +} + +.btn a { + background-color: #ffffff; + border: solid 1px #3498db; + border-radius: 5px; + box-sizing: border-box; + color: #3498db; + cursor: pointer; + display: inline-block; + font-size: 14px; + font-weight: bold; + margin: 0; + padding: 12px 25px; + text-decoration: none; + text-transform: capitalize; +} + +.btn-primary table td { + background-color: #3498db; +} + +.btn-primary a { + background-color: #3498db; + border-color: #3498db; + color: #ffffff; +} + +/* ------------------------------------- + OTHER STYLES THAT MIGHT BE USEFUL + ------------------------------------- */ +.last { + margin-bottom: 0; +} + +.first { + margin-top: 0; +} + +.align-center { + text-align: center; +} + +.align-right { + text-align: right; +} + +.align-left { + text-align: left; +} + +.clear { + clear: both; +} + +.mt0 { + margin-top: 0; +} + +.mb0 { + margin-bottom: 0; +} + +.preheader { + color: transparent; + display: none; + height: 0; + max-height: 0; + max-width: 0; + opacity: 0; + overflow: hidden; + mso-hide: all; + visibility: hidden; + width: 0; +} + +.powered-by a { + text-decoration: none; +} + +hr { + border: 0; + border-bottom: 1px solid #f6f6f6; + margin: 20px 0; +} + +/* ------------------------------------- + RESPONSIVE AND MOBILE FRIENDLY STYLES + ------------------------------------- */ +@media only screen and (max-width: 620px) { + table[class="body"] h1 { + font-size: 28px !important; + margin-bottom: 10px !important; + } + + table[class="body"] p, + table[class="body"] ul, + table[class="body"] ol, + table[class="body"] td, + table[class="body"] span, + table[class="body"] a { + font-size: 12px !important; + } + + table[class="body"] .wrapper, + table[class="body"] .article { + padding: 10px !important; + } + + table[class="body"] .content { + padding: 0 !important; + } + + table[class="body"] .container { + padding: 0 !important; + width: 100% !important; + } + + table[class="body"] .main { + border-left-width: 0 !important; + border-radius: 0 !important; + border-right-width: 0 !important; + } + + table[class="body"] .btn table { + width: 100% !important; + } + + table[class="body"] .btn a { + width: 100% !important; + } + + table[class="body"] .img-responsive { + height: auto !important; + max-width: 100% !important; + width: auto !important; + } +} + +/* ------------------------------------- + PRESERVE THESE STYLES IN THE HEAD + ------------------------------------- */ +@media all { + .ExternalClass { + width: 100%; + } + + .ExternalClass, + .ExternalClass p, + .ExternalClass span, + .ExternalClass font, + .ExternalClass td, + .ExternalClass div { + line-height: 100%; + } + + .apple-link a { + color: inherit !important; + font-family: inherit !important; + font-size: inherit !important; + font-weight: inherit !important; + line-height: inherit !important; + text-decoration: none !important; + } + + .btn-primary table td:hover { + background-color: #34495e !important; + } + + .btn-primary a:hover { + background-color: #34495e !important; + border-color: #34495e !important; + } +} + +.table-bordered td, +th { + border: 1px solid black; + padding: 2px; +} + +.previewImage { + height: 200px; + overflow: hidden; + object-fit: contain; +} + +@media print { + .items tr { + page-break-inside: avoid; + position: relative; + } +} + +@page { + size: 18cm 26.7cm; + margin: 1cm; +} + +#tbl_subitem tr td { + text-align: center; +}