Add sandbox example

Author: wnodom

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
+import { SandboxExampleComponent } from './sandbox-example/sandbox-example.component';
 import { PlayingCardExampleComponent } from './playing-card-example/playing-card-example.component';
 import { PlayingCardComponent } from './playing-card/playing-card.component';
 import { ImageGalleryExampleComponent } from './image-gallery-example/image-gallery-example.component';
@@ -16,13 +17,14 @@ import { ChessboardExampleComponent } from './chessboard-example/chessboard-exam
 @NgModule({
   declarations: [
     AppComponent,
+    SandboxExampleComponent
     PlayingCardExampleComponent,
     PlayingCardComponent,
     ImageGalleryExampleComponent,
     CaptionedImageComponent,
     CaptionedImageExampleComponent,
     ChessboardExampleComponent,
-    WelcomeComponent
+    WelcomeComponent,
   ],
   imports: [
     BrowserModule,

src/app/examples.ts

@@ -1,9 +1,11 @@
+import { SandboxExampleComponent } from './sandbox-example/sandbox-example.component';
 import { ImageGalleryExampleComponent } from './image-gallery-example/image-gallery-example.component';
 import { CaptionedImageExampleComponent } from './captioned-image-example/captioned-image-example.component';
 import { PlayingCardExampleComponent } from './playing-card-example/playing-card-example.component';
 import { ChessboardExampleComponent } from './chessboard-example/chessboard-example.component';
 
 export const examples = [
+  { path: 'sandbox-example',         component: SandboxExampleComponent },
   { path: 'image-gallery-example',   component: ImageGalleryExampleComponent },
   { path: 'captioned-image-example', component: CaptionedImageExampleComponent },
   { path: 'playing-card-example',    component: PlayingCardExampleComponent },

src/app/sandbox-example/sandbox-example.component.html

@@ -0,0 +1,50 @@
+<div class="sandbox">
+
+  <header>
+    <h1>Happy Little Sandbox</h1>
+  </header>
+
+  <footer>
+    <h2>We don't make mistakes, just happy little accidents.</h2>
+  </footer>
+
+  <main>
+    <p>
+      You're meant to have fun in life. You gotta think like a tree.
+      Automatically, all of these beautiful, beautiful things will happen. Only
+      think about one thing at a time. As long as you believe.
+    </p>
+
+    <p>
+      You can do anything here - the only pre-requisite is that it makes you
+      happy. The secret to doing anything is believing that you can do it.
+      Anything that you believe you can do strong enough, you can do. Anything.
+      Let's do that again.
+    </p>
+
+    <p>
+      It is a lot of fun. There's nothing wrong with having a tree as a friend.
+      Maybe there's a happy little Evergreen that lives here. I can't think of
+      anything more rewarding than being able to express yourself to others
+      through painting. Only eight colors that you need.
+    </p>
+
+    <p>
+      We artists are a different breed of people. We're a happy bunch. Let's put
+      some highlights on these little trees. The sun wouldn't forget them.
+      Sometimes you learn more from your mistakes than you do from your
+      masterpieces.
+    </p>
+
+    <p>
+      If you don't like it - change it. It's your world. A tree needs to be your
+      friend if you're going to paint him. You can spend all day playing with
+      mountains. Just make little strokes like that. For the lack of a better
+      word I call them hangy downs. It's a super day, so why not make a beautiful
+      sky?
+    </p>
+  </main>
+
+  <img src="/assets/misc/bob.jpg">
+
+</div>

src/app/sandbox-example/sandbox-example.component.scss

@@ -0,0 +1,23 @@
+.sandbox {
+  background-color: gold;
+  padding: 20px;
+}
+
+.sandbox > * {
+  background-color: white;
+  padding: 20px;
+}
+
+img {
+  width: 100%;
+}
+
+header {
+}
+
+main {
+}
+
+footer {
+}
+

src/app/sandbox-example/sandbox-example.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cgp-sandbox-example',
+  templateUrl: './sandbox-example.component.html',
+  styleUrls: ['./sandbox-example.component.scss']
+})
+export class SandboxExampleComponent implements OnInit {
+  static label: string = 'Sandbox';
+}