Merge pull request #1 from niborium/Planering-och-förutsättningar

LGTM! Bra jobbat Robin :)
niborium · Apr 5, 2022 · bed0bf0 · bed0bf0
2 parents 7b259b8 + c9894b6
commit bed0bf0
Show file tree

Hide file tree

Showing 13 changed files with 416 additions and 0 deletions.
diff --git a/app.html b/app.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CrowdTest</title>
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+<body>
+    <p>Hello world!</p>
+</body>
+</html>
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CrowdTest</title>
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="./src/index/index.js" defer type="module"></script>
+    <link rel="stylesheet" href="./src/index/index.css"/>
+</head>
+<body>
+    <header>
+        <img src="logotype.png" width=130px height=130px>
+        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div class="container-fluid">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" id="startpage" aria-current="page" href="">Startsida</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" id="businessplan" href="#">Affärsplan</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" id="productidea" href="#">Produktidé</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" id="contact" href="#">Kontakt</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="app.html">App</a>
+                </li>
+                </ul>
+            </div>
+            </div>
+        </nav>
+    </header>
+    <main class="container-fluid">
+        <div class="row flex-nowrap">
+            <div class="col ps-md-2 pt-2">
+                <div class="page-header pt-3" id="pagetitle">
+                </div>
+                <hr>
+                <div class="row">
+                    <div class="col-12">
+                        <div id="main">
+                            <h2>Välkommen till CrowdTest!</h2>
+                            <p>I menyn ovanför kan du läsa om affärsplan, produktidé, hur du kontaktar oss och se applikationen (App).</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer>
+        <hr>
+        &copy; Robin Karlsson @ WU21</p>
+    </footer>
+</body>
+</html>
diff --git a/logotype.png b/logotype.png
diff --git a/src/index/business-plan.js b/src/index/business-plan.js
@@ -0,0 +1,130 @@
+import { pagetitle, main } from "./index.js";
+
+export class Businessplan{
+    constructor(){
+        this.businessname = "CrowdTest";
+        this.businessplanlink = "src/index/docs/CrowdTest-Businessplan.pdf";
+    }
+    changeTitle(){
+        pagetitle.innerHTML = `<h2>Affärsplan</h2>`;
+    }
+    render(){
+        main.innerHTML = `
+        <div class="flex.container">
+        <div id="div">
+            <p>
+            ${this.businessname} är en Crowdsourcing-plattform för att söka testare till sin webbapplikation eller mobilapplikation. När du skapar en ny applikation så vill du få några initiala användare som testar din produkt och utvärderar den innan lansering.
+            <br>
+            Det kan vara svårt att hitta testare bortsett från nära anhöriga (familj & vänner) eller kollegor som kan testa din applikation.<br><br> 
+            Man behöver få en bredare grupp av testare som kan testa  på olika enheter och ge ärlig feedback av produkten. Du kan via plattformen välja krav, åldersgrupp, intressen, välja från olika yrkesroller och enhets specifikt för att få en bra test grupp.
+            <br><br>
+            <div class="m-4">
+            <div class="table-responsive"> 
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>När du publicerar och söker testare så kan du (som företag):</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>1</td>
+                            <td>Bestämma din budget</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Hur många testare du behöver</td>
+                        </tr>
+                        <tr>
+                            <td>3</td>
+                            <td>Kraven på på testet</td>
+                        </tr>
+                        <tr>
+                            <td>4</td>
+                            <td>Hur mycket man får betalt för utfört arbete</td>
+                        </tr>
+                        <tr>
+                            <td>5</td>
+                            <td>Slut datum och tidpunkt för testet (Testperiod)</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div> 
+            </div>
+            <div class="m-4">
+            <div class="table-responsive"> 
+                <table class="table">
+                <thead>
+                <tr>
+                    <th>#</th>
+                    <th>Testare kan ge feedback på exempelvis:</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>1</td>
+                    <td>Buggar/errors</td>
+                </tr>
+                <tr>
+                    <td>2</td>
+                    <td>Användbarhet</td>
+                </tr>
+                <tr>
+                    <td>3</td>
+                    <td>Användargränssnitt</td>
+                </tr>
+                <tr>
+                    <td>4</td>
+                    <td>Generella förbättringsförslag</td>
+                </tr>
+                </tbody>
+                </table>
+                </div> 
+            </div>
+            <div class="m-4">
+            <div class="table-responsive"> 
+            <table class="table">
+            <thead>
+                <tr>
+                    <th>#</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><b>Återrapportering till beställare</b></td>
+                    <td>När testperioden är slut så återfår du en rapport från dina testare och du kan då betygsätta dem (bra testare kan få mer pengar genom att skriva bra rapporter).</td>
+                </tr>
+                <tr>
+                    <td><b>Säkerhet för köpare och testare</b></td>
+                    <td>Efter du valt vilka testare du vill anlita (’testare som ansökt om att bli testare’) så betalar du och då hålls pengarna i deposition (escrow) hos oss tills testperioden är över, detta är dels för att skydda dig som köpare av tjänsten men även för att skydda testarna så att bägge parter fullföljer uppdraget.<br><br>
+                    När uppdraget är slutfört och du är nöjd så distribueras utbetalningarna till testarna.<br>
+                    Är ni inte nöjd med resultatet av en specifik testare så kan du markera den som ’dispyt’ och ha direktkontakt med testaren för att lösa problemet.<br>
+                    Kan varken ni som företag eller testare komma överens så kan ni markera den för utredning så hoppar vår kundtjänst (${this.businessname}) in och hjälper er i det enskilda fallet.</td>
+                </tr>
+                <tr>
+                    <td><b>Hur tjänar ${this.businessname} pengar?</b></td>
+                    <td>Vi tar en serviceavgift för varje order och tar 10% av den totala ordern.<br>
+                    Exempel: du har ett enklare test som du erbjuder 1000 kronor för 2 testare så tar vi 100kr (10% av detta i avgift) som vi tillägger. Vilket resulterar i kostnad 1000+100 (i detta fall) = 1100 kr.<br><br>
+                    Vi kommer även erbjuda att man kan hyra en testare per timme (timpris) där man själv som testare sätter timpriset, även från dessa så tar vi 10% service avgift.</td>
+                </tr>
+            </tbody>
+            </table>
+            </div> 
+            </div>
+            <hr>
+            <img src="src/index/imgs/Anbud.png" class="responsive"><br><br>
+            <img src="src/index/imgs/Per-timme.png" class="responsive">
+            <p>En annan typ vi erbjuder är att anlita specifik testare per timme.<br>
+            Detta flöde skiljer sig inget mer än att det är en enskild testare som accepterar uppdraget (man får bestämma timspriset och antal timmar).<br>
+            Denna annonsen listas inte publikt utan är ett direktkontrakt mellan företaget och testaren.</p>
+            <img src="src/index/imgs/Avgifter.png" class="responsive">
+            </p>
+            <hr>
+        </div>
+        </div>
+        <a href="${this.businessplanlink}" type="application/pdf" runat="server" button type="button" class="btn btn-primary">Läs hela affärsplanen</a>
+    </div>`
+    }
+}
diff --git a/src/index/contact-info.js b/src/index/contact-info.js
@@ -0,0 +1,40 @@
+import { pagetitle, main } from "./index.js";
+
+export class Contact{
+    constructor(){
+    this.name = "Robin";
+    this.email = "robink90@gmail.com";
+    this.linkedin = "https://www.linkedin.com/in/robin-karlsson-81aa1b20b/";
+    this.github = "https://github.com/niborium/CrowdTest";
+    }
+    changeTitle(){
+        pagetitle.innerHTML = `<h2>Kontakt</h2>`;
+    }
+    render(){
+        main.innerHTML = `<div class="flex-container">
+        <div id="div">
+        <h2>Är du intresserad av CrowdTest?</h2><br>
+        Kontakta ${this.name} som är grundare av CrowdTest för att veta mer:<br><br>
+        <a href="${this.linkedin}" target="_blank" button type="button" class="btn btn-success">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
+            <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path>
+            </svg>
+            Kontakta ${this.name} @ LinkedIn
+        </a><br><br>
+        <a href="mailto:${this.email}" button type="button" class="btn btn-success">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
+            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"></path>
+            </svg>
+            Kontakta ${this.name} @ E-post
+        </a><br><br>
+        <hr>
+        <a href="${this.github}" target="_blank" button type="button" class="btn btn-outline-danger">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
+            </svg>
+            Se källkoden för CrowdTest på Github
+        </a>
+        </div>
+    </div>`;
+    }
+}
diff --git a/src/index/docs/CrowdTest-Businessplan.pdf b/src/index/docs/CrowdTest-Businessplan.pdf
diff --git a/src/index/imgs/Anbud.png b/src/index/imgs/Anbud.png
diff --git a/src/index/imgs/Avgifter.png b/src/index/imgs/Avgifter.png
diff --git a/src/index/imgs/Per-timme.png b/src/index/imgs/Per-timme.png
diff --git a/src/index/index.css b/src/index/index.css
@@ -0,0 +1,52 @@
+.navbar-nav {
+    float:none;
+    margin:0 auto;
+    display: block;
+    text-align: center;
+}
+.navbar-nav > li {
+    display: inline-block;
+    float:none;
+}
+.responsive {
+    width: 50%;
+    height: auto;
+}
+hr{
+    border-top: 5px solid black;
+
+}
+.table td, th {
+    text-align: center;   
+}
+a:hover { 
+    -webkit-transform: scale(1.2);
+}
+footer {
+    text-align: center;
+}
+#main{
+    text-align: center;
+}
+#pagetitle{
+    text-align: center;
+}
+header{
+    text-align: center;
+}
+@media screen and (max-width: 680px) {
+    .responsive {
+        width: 100%;
+        height: auto;
+    }
+    .navbar-nav {
+        float:none;
+        margin:0 auto;
+        display: block;
+        text-align: left;
+    } 
+    .navbar-nav > li {
+        display:grid;
+        float:none;
+    }
+}
diff --git a/src/index/index.js b/src/index/index.js
@@ -0,0 +1,24 @@
+import { Businessplan } from './business-plan.js';
+import { renderProductidea } from "./product-idea.js";
+import { Contact } from "./contact-info.js";
+
+export const main = document.getElementById('main');
+export const pagetitle = document.getElementById('pagetitle');
+
+const businessplanBtn = document.getElementById('businessplan');
+const productideaBtn = document.getElementById('productidea');
+const contactBtn = document.getElementById('contact');
+
+businessplanBtn.addEventListener('click', () => {
+    const businessplan = new Businessplan();
+    businessplan.changeTitle();
+    businessplan.render();
+})
+productideaBtn.addEventListener('click', () => {
+    renderProductidea();
+})
+contactBtn.addEventListener('click', () => {
+    const contact = new Contact();
+    contact.changeTitle();
+    contact.render();
+})