Develop

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`

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)
 <sub> Marginesy mogą się trochę nie zgadzać, dopiero się uczę figmy</sub>
-#### 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

backend/mailPushing.php

@@ -0,0 +1,44 @@
+<?php
+
+    session_start();
+
+    class DataBase{
+        private $db;
+        private $config = [
+            'dsn' => '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']);

index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="stylesheets/main.css">
+    <link rel="stylesheet" href="stylesheets/tablet.css">
+    <link rel="stylesheet" href="stylesheets/mobile.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300">
+    <title>Doman's Academy - Challenge 1</title>
+</head>
+<body>
+    <figure class="coming-soon"><img src="assets/coming-soon-ribbon.png" alt="Coming Soon"></figure>
+    <header class="header">
+        <figure class="logo">
+            <img class="logo__image" src="assets/undraw_developer_activity_bv83.svg" alt="Programmer">
+        </figure>
+        <figcaption class="page__title">Code Academy</figcaption>
+    </header>
+    <main class="main">
+        <h2 class="main__title">Leave your email here</h2>
+        <form class="form" action="backend/mailPushing.php" method="post">
+            <div class="form__column">
+                <input
+                class="form__input"
+                type="email"
+                name="mail"
+                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,8}"
+                placeholder="email@example.com"
+                required>
+                <label for="mail" class="form__label">Invalid Email</label>
+            </div>
+            <input id="LandingEmail" class="form__submit" type="submit" value="GET EARLY ACCESS">
+        </form>
+    </main>
+    <footer class="footer">
+        <p class="footer__paragraph">MK&copy; 2019.</p>
+        <p class="footer__paragraph">Made with <img src="assets/love.png" alt="love"> in Poland</p>
+        <p class="footer__paragraph">We are using cookies to improve your experience.</p>
+    </footer>
+</body>
+</html>

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;
+}

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;
+    }
+}

stylesheets/tablet.css

@@ -0,0 +1,6 @@
+@media all and (max-width: 1000px){
+    .footer{
+        position: absolute;
+        bottom: 0;
+    }
+}