diff --git a/wecker_manufaktur/files/autoload.inc b/wecker_manufaktur/files/autoload.inc index b0c0f00..568315f 100644 --- a/wecker_manufaktur/files/autoload.inc +++ b/wecker_manufaktur/files/autoload.inc @@ -2,4 +2,5 @@ \SYSTEM\autoload::registerFolder(dirname(__FILE__)); \SYSTEM\FILES\files::registerFolder(dirname(__FILE__).'/img/','img','*.*'); \SYSTEM\FILES\files::registerFolder(dirname(__FILE__).'/persons/','persons','*.*'); -\SYSTEM\FILES\files::registerFolder(dirname(__FILE__).'/projects/','projects','*.*'); \ No newline at end of file +\SYSTEM\FILES\files::registerFolder(dirname(__FILE__).'/projects/','projects','*.*'); +\SYSTEM\FILES\files::registerFolder(dirname(__FILE__).'/font/','font','*.*'); \ No newline at end of file diff --git a/wecker_manufaktur/files/font/SanFranciscoDisplay-Bold.otf b/wecker_manufaktur/files/font/SanFranciscoDisplay-Bold.otf new file mode 100644 index 0000000..e59de06 Binary files /dev/null and b/wecker_manufaktur/files/font/SanFranciscoDisplay-Bold.otf differ diff --git a/wecker_manufaktur/files/font/SanFranciscoDisplay-Light.otf b/wecker_manufaktur/files/font/SanFranciscoDisplay-Light.otf new file mode 100644 index 0000000..ca7f429 Binary files /dev/null and b/wecker_manufaktur/files/font/SanFranciscoDisplay-Light.otf differ diff --git a/wecker_manufaktur/files/font/SanFranciscoDisplay-Semibold.otf b/wecker_manufaktur/files/font/SanFranciscoDisplay-Semibold.otf new file mode 100644 index 0000000..53203ff Binary files /dev/null and b/wecker_manufaktur/files/font/SanFranciscoDisplay-Semibold.otf differ diff --git a/wecker_manufaktur/page/default_page/css/default_page.scss b/wecker_manufaktur/page/default_page/css/default_page.scss index 889be1d..e617c84 100644 --- a/wecker_manufaktur/page/default_page/css/default_page.scss +++ b/wecker_manufaktur/page/default_page/css/default_page.scss @@ -5,11 +5,14 @@ $color_black: rgb(0,0,0); $color_green_1: rgb(12,22,11); $color_green_2: rgb(21,26,16); $color_green_3: rgb(29,48,25); +$color_orange: #F5A623; // Distances $distance_huge: 250px; $distance_big: 100px; +$distance_xlarge: 75px; $distance_large: 50px; +$distance_xmedium: 30px; $distance_medium: 25px; $distance_small: 10px; @@ -17,14 +20,23 @@ $distance_small: 10px; $home_img: url(./files/img/wecker_manufaktur.jpg); // Font Size +$font_size_20: 20px; +$font_size_25: 25px; $font_size_50: 50px; $font_size_70: 70px; body { color: $color_white; + font-family: 'sf-pro-light'; } +p{ + padding:0; + margin:0; +} + + .fullpage { min-height: 100vh; overflow-y: hidden; @@ -37,37 +49,54 @@ body { #menu { padding-left: $distance_big; padding-right: $distance_big; + position: absolute; + width: 100%; +} + +strong { + font-family: 'sf-pro-bold'; } #home { background-image: $home_img; background-size: cover; text-align: center; - display: flex; - flex-direction: column; padding-left: $distance_big; padding-right: $distance_big; + .container { + display: flex; + flex-direction: column; + height: 100vh; + } + h1{ display: flex; flex: 1 0 auto; align-self: center; align-items: center; font-size: $font_size_70; + padding-top: $distance_large; } h4 { align-self: bottom; + font-size: $font_size_25 } a{ font-size: $font_size_50; color: $color_grey; - margin-top: -25px; - margin-bottom: -20px; + margin-top: -15px; + margin-bottom: $distance_small; } } +.badge { + margin-right: $distance_small; + //height: 22px; +} + #content { background-image: linear-gradient($color_green_1,$color_green_3); text-align: center; @@ -75,10 +104,22 @@ body { padding-right: $distance_big; #philosophy{ + text-align: center; + display: flex; + flex-direction: column; + justify-content: space-around; + div{ + align-self: center; + } + h2{ + font-size: $font_size_50; padding-top: $distance_large; padding-bottom: $distance_medium; } + span{ + font-size: $font_size_25; + } } #persons{ @@ -86,45 +127,81 @@ body { padding-bottom: $distance_medium; .person { + padding-top: $distance_xlarge; + padding-bottom: $distance_medium; img { object-fit: cover; - width: 300px; - height: 300px; + width: $distance_huge; + height: $distance_huge; } - .disabled{ - filter: grayscale(100%); + &.disabled{ + opacity: 0.5; + } + + .person-img-name { + padding-top: $distance_medium; + color: $color_white; + font-size: $font_size_20; } } .person-details{ text-align: left; + padding-left: $distance_medium; + font-size: $font_size_20; + .table td, .table th { + border:0; + } + .badge { + font-size: $font_size_20; + } } } #projects{ + padding-top: $distance_large; + padding-bottom: $distance_medium; h2{ + font-size: $font_size_50; padding-top: $distance_large; padding-bottom: $distance_medium; } + span{ + font-size: $font_size_25; + } .project{ + padding-bottom: $distance_medium; img { object-fit: cover; - width: 300px; - height: 300px; + width: $distance_huge; + height: $distance_huge; } - .disabled{ - filter: grayscale(100%); + &.disabled{ + opacity: 0.5; + } + + .project-img-name { + padding-top: $distance_medium; + color: $color_white; + font-size: $font_size_20; } } .project-details{ text-align: left; - + padding-left: $distance_medium; + font-size: $font_size_20; + .table td, .table th { + border:0; + } + .badge { + font-size: $font_size_20; + } img { object-fit: cover; - width: 75px; - height: 75px; + width: 50px; + height: 50px; } } } @@ -132,10 +209,16 @@ body { #apply{ padding-bottom: $distance_medium; - h2 { + h2{ + font-size: $font_size_50; padding-top: $distance_large; padding-bottom: $distance_medium; } + span{ + font-size: $font_size_25; + padding-bottom: $distance_xlarge; + display: block; + } input, textarea { background-image: linear-gradient(to right, $color_green_1,$color_green_3); @@ -144,6 +227,7 @@ body { border: 0; padding: $distance_small; border-radius: $distance_small; + font-size: $font_size_20; } input::placeholder, textarea::placeholder{ @@ -161,10 +245,25 @@ body { #apply-send-box { text-align: left; + a { + color: $color_white; + font-size: $font_size_20; + &.disabled{ + pointer-events: none; + } + } } #apply-count-box { text-align: right; + font-size: $font_size_20; + padding-bottom: $distance_medium; + span{ + font-size: $font_size_20; + font-weight: bold; + display: contents; + padding: 0; + } } } @@ -178,20 +277,48 @@ body { } } -#footer-links { +#footer { background-color: $color_green_2; - padding-left: $distance_big; - padding-right: $distance_big; - padding-top: $distance_small; - padding-bottom: $distance_small; -} + #footer-links { + padding-top: $distance_large; + padding-bottom: $distance_large; + #footer-nl-email{ + margin-top: $distance_medium; + width: 100%; + } + #footer-nl-subscribe{ + margin-top: $distance_small; + background-color: $color_orange; + } + a { + color: $color_white; + display: block; + font-size: $font_size_20; + margin-top: $distance_small; + } + #footer-sm{ + display: flex; + a > i { + font-size: 26px; + color: #fff; + padding-top: 10px; + border: #fff 2px solid; + width: 50px; + height: 50px; + border-radius: 25px; + text-align: center; + margin-right: $distance_small; + } + } + } -#footer-bottomline { - background-color: $color_black; - padding: $distance_small; - padding-left: $distance_big; - padding-right: $distance_big; - text-align: center; + #footer-bottomline { + background-color: $color_black; + padding: $distance_small; + padding-left: $distance_big; + padding-right: $distance_big; + text-align: center; + } } .modal { diff --git a/wecker_manufaktur/page/default_page/css/font.css b/wecker_manufaktur/page/default_page/css/font.css new file mode 100644 index 0000000..284b3f0 --- /dev/null +++ b/wecker_manufaktur/page/default_page/css/font.css @@ -0,0 +1,13 @@ +@font-face { + font-family: 'sf-pro-bold'; + src: url('./files/font/SanFranciscoDisplay-Bold.otf') format('truetype'); +} +@font-face { + font-family: 'sf-pro-light'; + src: url('./files/font/SanFranciscoDisplay-Light.otf') format('truetype'); +} + +@font-face { + font-family: 'sf-pro-semibold'; + src: url('./files/font/SanFranciscoDisplay-Semibold.otf') format('truetype'); +} \ No newline at end of file diff --git a/wecker_manufaktur/page/default_page/default_page.php b/wecker_manufaktur/page/default_page/default_page.php index 6fa475a..d8bb925 100644 --- a/wecker_manufaktur/page/default_page/default_page.php +++ b/wecker_manufaktur/page/default_page/default_page.php @@ -13,6 +13,7 @@ class default_page implements \SYSTEM\PAGE\DefaultPage { return \SYSTEM\HTML\html::link(\SYSTEM\CACHE\cache_css::minify(array( \LIB\lib_bootstrap::css(), \LIB\lib_font_awesome::css(), + new PPAGE('default_page/css/font.css'), new PPAGE('default_page/css/default_page.scss') ))); } diff --git a/wecker_manufaktur/page/default_page/js/default_page.js b/wecker_manufaktur/page/default_page/js/default_page.js index 4a90239..f5c5de4 100644 --- a/wecker_manufaktur/page/default_page/js/default_page.js +++ b/wecker_manufaktur/page/default_page/js/default_page.js @@ -1,15 +1,16 @@ $(document).ready(function() { - //new SYSTEM('./api.php',1,'start'); - - $('.person-link').click(function(e){showPerson(e,$(this).attr('person'),false,true)}) + //new SYSTEM('./api.php',1,'start'); + + $('.person-link').click(function(e){showPerson(e,$(this).attr('person'),false,true)}) + $('.project-link').click(function(e){showProject(e,$(this).attr('project'),false,true)}) - $('.person-project-link').click(function(e){showProject(e,$(this).attr('project'),true,false)}) + $('.person-link').hover(function(){hoverPerson($(this).attr('person'),true)},function(){hoverPerson($(this).attr('person'),false)}); + $('.project-link').hover(function(){hoverProject($(this).attr('project'),true)},function(){hoverProject($(this).attr('project'),false)}); - $('.project-link').click(function(e){showProject(e,$(this).attr('project'),false,true)}) + $('.person-project-link').click(function(e){showProject(e,$(this).attr('project'),true,false)}) + $('.project-person-link').click(function(e){showPerson(e,$(this).attr('person'),true,false)}) - $('.project-person-link').click(function(e){showPerson(e,$(this).attr('person'),true,false)}) - - $("#apply-send").click(function(e){ + $("#apply-send").click(function(e){ e.preventDefault(); var data = { name: $('#apply-name').val(), email: $('#apply-email').val(), @@ -34,6 +35,7 @@ $(document).ready(function() { sendMail(data,function(data){ if(data && data.status){ $("#apply-message").val('') + $('#apply-message').trigger('keyup'); alert("Danke! Deine Nachricht wurde versendet."); } else { alert("Deine Nachricht konnte nicht versendet weden. Bitte versuche es später noch einmal. Danke."); @@ -42,9 +44,13 @@ $(document).ready(function() { }); $('#apply-message').on('keyup',function(){ - $('#apply-count').html($(this).val().length+'/500'); + $('#apply-count').html($(this).val().length); + checkApply(); }); + $('#apply-name').on('keyup',checkApply) + $('#apply-email').on('keyup',checkApply) + $('#footer-nl-subscribe').click(function(e){ e.preventDefault(); var email = $('#footer-nl-email').val(); @@ -78,76 +84,130 @@ $(document).ready(function() { }); }); -function showPerson(event,subject_id,jump,toggle){ - // Jump to anchor - if(!jump){ - event.preventDefault(); - } - - // Is the element already shown? - isHidden = $('#person-details-'+subject_id).hasClass('d-none'); +function checkApply(){ + name = $('#apply-name').val(), + email = $('#apply-email').val(), + message = $('#apply-message').val(); - // Grey out all - if(isHidden){ + if (name.length >= 3 && + validateEmail(email) && + message.length <= 500 && + message.length > 0){ + + $("#apply-send").removeClass('disabled'); + } else { + $("#apply-send").addClass('disabled'); + } +} + +function hoverPerson(subject_id,hoverin){ + detailsShown = $('.person-details:not(.d-none)').length; + + // Grey out all + if(!detailsShown){ + if(hoverin){ $('.person').addClass('disabled'); $('#person-'+subject_id).removeClass('disabled'); - } else { + } else { $('.person').removeClass('disabled'); - } - // Hide all details - $('.person-details').addClass('d-none'); + } + } +} - // Toggle or ensure visibility of specific detail - console.log(toggle, isHidden) - if(!toggle || isHidden){ - $('#person-details-'+subject_id).removeClass('d-none'); - } +function hoverProject(subject_id,hoverin){ + detailsShown = $('.project-details:not(.d-none)').length; + + // Grey out all + if(!detailsShown){ + if(hoverin){ + $('.project').addClass('disabled'); + $('#project-'+subject_id).removeClass('disabled'); + } else { + $('.project').removeClass('disabled'); + } + } +} + +function showPerson(event,subject_id,jump,toggle){ + // Jump to anchor + if(!jump){ + event.preventDefault(); + } + + // Arrows + $('.person i').removeClass('fa-angle-up'); + $('.person i').addClass('fa-angle-down'); + + // Is the element already shown? + isHidden = $('#person-details-'+subject_id).hasClass('d-none'); + + // Grey out all + if(isHidden){ + $('.person').addClass('disabled'); + $('#person-'+subject_id).removeClass('disabled'); + $('#person-'+subject_id+' i').removeClass('fa-angle-down'); + $('#person-'+subject_id+' i').addClass('fa-angle-up'); + } else { + $('.person').removeClass('disabled'); + } + // Hide all details + $('.person-details').addClass('d-none'); + + // Toggle or ensure visibility of specific detail + if(!toggle || isHidden){ + $('#person-details-'+subject_id).removeClass('d-none'); + } } function showProject(event,subject_id,jump,toggle){ - // Jump to anchor - if(!jump){ - event.preventDefault(); - } - - // Is the element already shown? - isHidden = $('#project-details-'+subject_id).hasClass('d-none'); + // Jump to anchor + if(!jump){ + event.preventDefault(); + } - // Grey out all others - if(isHidden){ - $('.project').addClass('disabled'); - $('#project-'+subject_id).removeClass('disabled'); - } else { - $('.project').removeClass('disabled'); - } + // Arrows + $('.project i').removeClass('fa-angle-up'); + $('.project i').addClass('fa-angle-down'); + + // Is the element already shown? + isHidden = $('#project-details-'+subject_id).hasClass('d-none'); - // Hide all details - $('.project-details').addClass('d-none'); + // Grey out all others + if(isHidden){ + $('.project').addClass('disabled'); + $('#project-'+subject_id).removeClass('disabled'); + $('#project-'+subject_id+' i').removeClass('fa-angle-down'); + $('#project-'+subject_id+' i').addClass('fa-angle-up'); + } else { + $('.project').removeClass('disabled'); + } - // Toggle or ensure visibility of specific detail - console.log(toggle, isHidden) - if(!toggle || isHidden){ - $('#project-details-'+subject_id).removeClass('d-none'); - } + // Hide all details + $('.project-details').addClass('d-none'); + + // Toggle or ensure visibility of specific detail + if(!toggle || isHidden){ + $('#project-details-'+subject_id).removeClass('d-none'); + } } function sendMail(data,callback){ - $.ajax({ - async: true, - url: './api.php', - type: 'GET', - dataType: 'JSON', - data: { - call: 'send_mail', - data: data - }, - success: function(data){ - callback(data); - }, - error: function(){ - callback(false); - } - }); + $.ajax({ + async: true, + url: './api.php', + type: 'GET', + dataType: 'JSON', + data: { + call: 'send_mail', + data: data + }, + success: function(data){ + callback(data); + }, + error: function(){ + callback(false); + } + }); } function validateEmail(email) { diff --git a/wecker_manufaktur/page/default_page/tpl/content_apply.tpl b/wecker_manufaktur/page/default_page/tpl/content_apply.tpl index 7084d2c..40125b1 100644 --- a/wecker_manufaktur/page/default_page/tpl/content_apply.tpl +++ b/wecker_manufaktur/page/default_page/tpl/content_apply.tpl @@ -1,17 +1,19 @@ -
-
- -
-
- -
-
- -
-
- ${content_apply_send} -
-
- 0/500 +
+
+
+ +
+
+ +
+
+ +
+ +
+ 0/500 +
\ No newline at end of file diff --git a/wecker_manufaktur/page/default_page/tpl/content_row.tpl b/wecker_manufaktur/page/default_page/tpl/content_row.tpl index 2ba508b..e7450d6 100644 --- a/wecker_manufaktur/page/default_page/tpl/content_row.tpl +++ b/wecker_manufaktur/page/default_page/tpl/content_row.tpl @@ -1,4 +1,6 @@ -
- ${_content_imgs} - ${_content_details} +
+
+ ${_content_imgs} + ${_content_details} +
\ No newline at end of file diff --git a/wecker_manufaktur/page/default_page/tpl/default_page.tpl b/wecker_manufaktur/page/default_page/tpl/default_page.tpl index f9a33bb..4f447f3 100644 --- a/wecker_manufaktur/page/default_page/tpl/default_page.tpl +++ b/wecker_manufaktur/page/default_page/tpl/default_page.tpl @@ -33,7 +33,7 @@ -