diff --git a/POSTSCRIPTUM.md b/POSTSCRIPTUM.md new file mode 100644 index 0000000..5fdde7c --- /dev/null +++ b/POSTSCRIPTUM.md @@ -0,0 +1,27 @@ +## Od MK + +Strona testowana pod kątem większości wiodących rozdzielczości, oraz ok. 100 przeglądarek mobilnych oraz desktopowych z wynikiem pozytywnym ok. 75/100. +### Testy obejmowały: +* ok. 10 przestarzałych przeglądarek desktopowyche(brak wparcia CSS3 lub wsparcie w ograniczonym stopniu) +* ok. 5 przeglądarek tekstowych +* ok. 10 przestarzałych przeglądarek mobilnych +* ok. 30 przeglądarek mobilnych +* ok. 45 przeglądarek desktopowych + +### Testy w 5 różnych rozdzielczościach z wynikiem pozytywnym: +* 370/500 wliczając przeglądarki przestarzałe oraz tekstowe +* 370/375 na przeglądarkach wspierających CSS3 w stopniu przynajmniej dobrym + +### Testy dla wymaganych przeglądarek: +* Chrome 58+ - testowane dla Chrome 51+ z wynikiem pozytywnym w każdej rozdzielczości +* Edge 16+ - testowane dla Edge 16+ z wynikiem pozytywnym +* Safari 10.1+ - testowane dla Safari 9+ z wynikiem pozytywnym +* Firefox 54+ - testowane dla Firefox 54+ z wynikiem pozytywnym + +### Baza danych: +Skrypt `mailPushing.php': +* wymagana baza MySQL +* wymagana tabela codeacademy +* struktura tabeli: +`id - primary` +`email - unique` \ No newline at end of file diff --git a/README.md b/README.md index 92ac9d3..5ae9baa 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,31 @@ # Academy Projekty wykonywane przez społeczność discorda -[helloroman](https://discordapp.com/invite/VTyJc9N) +[helloroman](https://discordapp.com/invite/VTyJc9N) Projekt jest we wczesnej fazie i obecne challenge są testowe. Wszelkie sugestie, propozycje pomocy mile widziane. ## Challenge #1 - Landing Page -Celem wyzwania jest wykonanie warstwy frontendowej Landing Page, zbierającego adresy mail osób zainteresowanych udziałem w akademii. -Stack Technologiczny do wykonania zadania to html/css/js bez żadnych frameworkow, preprocesorow. -Rozwiązanie powinno dzialać na: +Celem wyzwania jest wykonanie warstwy frontendowej Landing Page, zbierającego adresy mail osób zainteresowanych udziałem w akademii. +Stack Technologiczny do wykonania zadania to html/css/js bez żadnych frameworkow, preprocesorow. +Rozwiązanie powinno dzialać na: * Chrome 58+ * Edge 16+ * Safari 10.1+ * Firefox 54+ -Przycisk do wysłania formularza powinien mieć ID: LandingEmail -Wykonane zadanie należy przesyłac jako pull request na branch develop. -Zwrocie uwagę na semantykę html i accessibility. +Przycisk do wysłania formularza powinien mieć ID: LandingEmail +Wykonane zadanie należy przesyłac jako pull request na branch develop. +Zwrocie uwagę na semantykę html i accessibility. ### Grafiki -[Project.pdf](/assets/Layout.pdf) -[Figma](https://www.figma.com/file/gCTf2Ux96ETR0DMxr6T2m039/LandingPage?node-id=1%3A13) -[Zeppelin](https://zpl.io/boKzeQv) +[Project.pdf](/assets/Layout.pdf) +[Figma](https://www.figma.com/file/gCTf2Ux96ETR0DMxr6T2m039/LandingPage?node-id=1%3A13) +[Zeppelin](https://zpl.io/boKzeQv) Marginesy mogą się trochę nie zgadzać, dopiero się uczę figmy -#### Bonus challenge +#### Bonus challenge * Wykonaj zadanie bez użycia javascriptu * Stwórz warstwę backendową(dowolny język) lub podepnij się do firebase -### Termin -Wstępny czas na wykonanie challenga 21.01.2019 - - +### Termin +Wstępny czas na wykonanie challenga 21.01.2019 + + Jak ktoś ma ochotę zrobić lepszy readme, to niech to zrobi :D diff --git a/backend/mailPushing.php b/backend/mailPushing.php new file mode 100644 index 0000000..6c1a0bf --- /dev/null +++ b/backend/mailPushing.php @@ -0,0 +1,44 @@ + 'mysql:host=localhost;dbname=codeacademy;charset=utf8', + 'user' => 'root', + 'pass' => "", + ]; + + function __construct(){ + try{ + $this->db = new PDO($this->config['dsn'], $this->config['user'], $this->config['pass']); + } + catch(PDOException $err) { + exit('Blad polaczenia z baza danych: '.$err->getMessage()); + } + } + + public function pushEmail($mail){ + // przygotowanie zapytania + $insert = $this->db->prepare("INSERT INTO `mails`(`email`) VALUES (:mail)"); + // filtracja wskazanych danych + $insert->bindValue(':mail', $mail, PDO::PARAM_STR); + // właściwe wykonanie + $insert->execute(); + header("Location: ../"); + } + + public function checkMail($mail){ + $checkPreg = '/^[a-zA-Z0-9.\-_]+@[a-zA-Z0-9\-.]+\.[a-zA-Z]$/'; + if(!preg_match($checkPreg, $mail)){ + $_SESSION['error'] = 'Invalid E-mail'; + $_SESSION['mail'] = $mail; + header("Location: ../"); + } + else $this->pushEmail(trim($mail)); + } +} + + $mailPush = new DataBase(); + $mailPush->checkMail($_POST['mail']); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e8c4307 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + Doman's Academy - Challenge 1 + + +
Coming Soon
+
+ +
Code Academy
+
+
+

Leave your email here

+
+
+ + +
+ +
+
+ + + \ No newline at end of file diff --git a/stylesheets/main.css b/stylesheets/main.css new file mode 100644 index 0000000..94d6f58 --- /dev/null +++ b/stylesheets/main.css @@ -0,0 +1,131 @@ +* { +box-sizing: border-box; +} + +body{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + flex-wrap: wrap; +} + +.coming-soon{ + position: absolute; + right: 0; + top: 0; + margin: 0; + padding: 0; +} + +body{ + padding: 0; + margin: 0; + background: linear-gradient(90deg, #83EB94 0%, #47D95E 100%); + color: white; + + font-family: 'Lato'; + line-height: normal; + text-align: center; + mix-blend-mode: normal; +} + +.header{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.page__title{ + font-weight: 100; + font-size: 60px; + letter-spacing: 5px; + text-transform: uppercase; +} + +.logo__image{ + width: 100%; + object-fit: cover; +} + +.main__title{ + font-weight: normal; + font-size: 24px; +} + +.form{ + display: flex; + flex-direction: row; + align-items: flex-end; +} + +.form__label{ + color: #FF3333; + text-align: left; + height: 1.1em; + visibility: hidden; +} + +.form__column{ + display: flex; + flex-direction: column-reverse; +} + +.form__input{ + border-radius: 9px; + box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25); + + font-weight: 300; + font-size: 16px; + text-indent: 10px; + color: #A0A0A0; + + width: 250px; + height: 48px; + margin-right: 50px; + transition: 0.1s; +} + +.form__input:focus{ + border: 2px solid #5AAF65; +} + +.form__input:focus:invalid{ + border: 2px solid #FF3333; +} + +.form__input:focus:invalid + .form__label{ + visibility: visible; +} + +.form__submit{ + background: #0297EC; + border-radius: 9px; + + font-weight: bold; + font-size: 16px; + text-align: center; + border-color: transparent; + + color: #FFFFFF; + width: 250px; + height: 48px; + + transition: 0.3s; +} + +.form__submit:hover{ + border-color: initial; + cursor: pointer; + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); +} + +.footer{ + text-align: center; + font-size: 24px; +} + +.footer__paragraph{ + margin: 0; +} \ No newline at end of file diff --git a/stylesheets/mobile.css b/stylesheets/mobile.css new file mode 100644 index 0000000..ae63aa4 --- /dev/null +++ b/stylesheets/mobile.css @@ -0,0 +1,32 @@ +@media all and (max-width: 500px){ + + .coming-soon{ + display: none; + } + + .page__title{ + font-size: 30px; + } + + .form{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .form__input{ + margin: 0; + margin-bottom: 10px; + } + + .footer{ + font-size: 16px; + } +} + +@media all and (max-height: 500px){ + .logo{ + display: none; + } +} \ No newline at end of file diff --git a/stylesheets/tablet.css b/stylesheets/tablet.css new file mode 100644 index 0000000..b33fa55 --- /dev/null +++ b/stylesheets/tablet.css @@ -0,0 +1,6 @@ +@media all and (max-width: 1000px){ + .footer{ + position: absolute; + bottom: 0; + } +} \ No newline at end of file