Skip to content

Commit

Permalink
BLZ
Browse files Browse the repository at this point in the history
  • Loading branch information
tyler-ruff committed May 13, 2022
1 parent 505c2fb commit d708c77
Show file tree
Hide file tree
Showing 10 changed files with 179 additions and 61 deletions.
4 changes: 3 additions & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { NavComponent } from './nav/nav.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { LazyLoadDirective } from './lazyload.directive';
Expand All @@ -14,7 +15,8 @@ import { LazyLoadDirective } from './lazyload.directive';
AppComponent,
LazyLoadDirective,
HeaderComponent,
FooterComponent
FooterComponent,
NavComponent
],
imports: [
BrowserModule,
Expand Down
11 changes: 9 additions & 2 deletions src/app/header/header.component.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
.is-active{
text-decoration:underline;
.nav-mobile {
display:none;
}
@media only screen and (max-width: 1023px){

.nav-mobile {
display: block;
}

}
65 changes: 22 additions & 43 deletions src/app/header/header.component.html
Original file line number Diff line number Diff line change
@@ -1,59 +1,33 @@


<header>
<nav class="fixed w-full bg-white">
<nav class="fixed w-full bg-gray-100 border-b">
<div class="container m-auto px-6 md:px-12 lg:px-6">
<div class="flex flex-wrap items-center justify-between py-6 gap-6 md:py-4 md:gap-0">
<div class="w-full flex justify-between lg:w-auto">
<a href="#" aria-label="logo">
<img src="https://blazed.sirv.com/logo/Beaker-Rainbow.png?w=45&h=45" alt="tailus logo" width="45" height="45">

<a href="/" title="Fire Angular" aria-label="logo">
<img src="https://blazed.sirv.com/logo/Beaker-Dark.png?w=45&h=45" width="45" height="45">
</a>

<button aria-label="humburger" id="hamburger" class="relative w-10 h-10 -mr-2 lg:hidden">
<div aria-hidden="true" id="line" class="inset-0 w-6 h-0.5 m-auto rounded bg-gray-500 transtion duration-300"></div>
<div aria-hidden="true" id="line2" class="inset-0 w-6 h-0.5 mt-2 m-auto rounded bg-gray-500 transtion duration-300"></div>
<button (click)="burgerVisible = !burgerVisible" aria-label="humburger" id="hamburger" class="relative w-10 h-10 -mr-2 lg:hidden">
<ng-container *ngIf="burgerVisible">
<svg width="45" height="45" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.646 5.646a.5.5 0 000 .708l8 8a.5.5 0 00.708-.708l-8-8a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M14.354 5.646a.5.5 0 010 .708l-8 8a.5.5 0 01-.708-.708l8-8a.5.5 0 01.708 0z" clip-rule="evenodd"/>
</svg>
</ng-container>
<ng-container *ngIf="!burgerVisible">
<svg width="45" height="45" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.5 13.5A.5.5 0 015 13h10a.5.5 0 010 1H5a.5.5 0 01-.5-.5zm0-4A.5.5 0 015 9h10a.5.5 0 010 1H5a.5.5 0 01-.5-.5zm0-4A.5.5 0 015 5h10a.5.5 0 010 1H5a.5.5 0 01-.5-.5z" clip-rule="evenodd"/>
</svg>
</ng-container>
</button>
</div>

<div hidden class="w-full bg-white md:space-y-0 md:p-0 md:flex-nowrap md:bg-transparent lg:w-auto lg:flex">
<div class="block w-full lg:items-center lg:flex">
<ul class="space-y-6 pb-6 tracking-wide font-medium text-gray-600 lg:pb-0 lg:pr-6 lg:items-center lg:flex lg:space-y-0">
<li>
<a routerLink="/home" routerLinkActive="is-active" class="block md:px-3">
<span>
Home
</span>
</a>
</li>
<li>
<a routerLink="/about" routerLinkActive="is-active" class="block md:px-3">
<span>
About
</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>
Integrations
</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>
Pricing
</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>
Blog
</span>
</a>
</li>
</ul>

<app-nav></app-nav>

<ul class="border-t space-y-2 pt-2 lg:space-y-0 lg:space-x-2 lg:pt-0 lg:pl-2 lg:border-t-0 lg:border-l lg:items-center lg:flex">
<li>
Expand All @@ -76,5 +50,10 @@
</div>
</div>
</div>
<div class="nav-mobile">
<ng-container *ngIf="burgerVisible">
<app-nav></app-nav>
</ng-container>
</div>
</nav>
</header>
2 changes: 2 additions & 0 deletions src/app/header/header.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ export class HeaderComponent implements OnInit {

constructor() { }

burgerVisible: boolean = false;

ngOnInit(): void {
}

Expand Down
22 changes: 10 additions & 12 deletions src/app/home/home.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@
<div class="lg:flex lg:items-center lg:gap-x-16">
<div class="space-y-8 lg:w-7/12">
<h1 class=" font-bold text-gray-900 text-4xl md:text-5xl">
Run successful remote and hybrid teams
Welcome to Fire for Angular.
</h1>

<p class="text-gray-600 lg:w-11/12">
DailyBot takes chat and collaboration to the next level: daily standups, team check-ins, surveys, kudos, best companion bot for your virtual watercooler, 1:1 intros, motivation tracking and more.
This is a boilerplate for Angular with many bells and whistles included. Have a look around, and make yourself at home.
</p>

<span class="block font-semibold">
The best companion bot for your chat app.
We are thrilled to be able to help you realize your goal!
</span>

<div class="grid grid-cols-3 space-x-4 md:space-x-6 md:flex">
Expand All @@ -36,18 +37,18 @@ <h1 class=" font-bold text-gray-900 text-4xl md:text-5xl">

<div>
🔥🌟
<span>Other integrations :</span>
<a href="#" class="font-semibold text-gray-700">
Discord,
<span>Other integrations:</span>
<a href="https://fire-react.netlify.app/" target="_blank" class="font-semibold text-gray-700">
React,
</a>
<a href="#" class="font-semibold text-gray-700">
Telegram
<a href="https://fire-svelte.netlify.app/" target="_blank" class="font-semibold text-gray-700">
Svelte
</a>
</div>
</div>

<div hidden class="lg:block lg:w-5/12">
<img src="https://blazed.sirv.com/logo/Lockscreen-Beaker.png?w=320&h=280" class="w-full" alt="wath illustration" loading="lazy" width="320" height="280">
<img src="https://blazed.sirv.com/logo/Lockscreen-Beaker.png?w=320&h=280" class="w-full" width="320" height="280">
</div>
</div>
</div>
Expand Down Expand Up @@ -78,9 +79,6 @@ <h1 class=" font-bold text-gray-900 text-4xl md:text-5xl">
<div class="flex items-center">
<img src="https://blazed.sirv.com/logo/Beaker-Pink.png?w=150&h=122" alt="client logo" loading="lazy" width="150" height="122">
</div>
<div class="flex items-center">
<img src="https://blazed.sirv.com/logo/Beaker-Blue.png?w=150&h=122" alt="client logo" loading="lazy" width="150" height="122">
</div>
</div>
</div>
</div>
Expand Down
13 changes: 13 additions & 0 deletions src/app/nav/nav.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.is-active{
text-decoration:underline;
}
@media only screen and (max-width: 1023px){
ul{
text-align:center;
margin-top:5px;
}
ul li a{
padding-top:10px;
padding-bottom:10px;
}
}
37 changes: 37 additions & 0 deletions src/app/nav/nav.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<ul class="space-y-6 pb-6 tracking-wide font-medium text-gray-600 lg:pb-0 lg:pr-6 lg:items-center lg:flex lg:space-y-0">
<li>
<a routerLink="/home" routerLinkActive="is-active" class="block md:px-3">
<span>
Home
</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>
About
</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>
Integrations
</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>
Pricing
</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>
Blog
</span>
</a>
</li>
</ul>
25 changes: 25 additions & 0 deletions src/app/nav/nav.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { NavComponent } from './nav.component';

describe('NavComponent', () => {
let component: NavComponent;
let fixture: ComponentFixture<NavComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ NavComponent ]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(NavComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
15 changes: 15 additions & 0 deletions src/app/nav/nav.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}
46 changes: 43 additions & 3 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -1,26 +1,66 @@
<!doctype html>
<html lang="en">
<html lang="en" dir="ltr" itemscope itemtype="https://schema.org/Organization">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://blazed.sirv.com/logo/Beaker-Rainbow.png">
<link rel="apple-touch-icon" href="https://blazed.sirv.com/logo/Beaker-Rainbow.png?w=192&h=192">
<link rel="apple-touch-startup-image" href="https://blazed.sirv.com/logo/Beaker-Rainbow.png?w=180&h=180">
<link rel="manifest" href="manifest.webmanifest">
<link rel="me" href="mailto:hello@blazed.space">
<link rel="dns-prefetch" href="//blazed.sirv.com/">
<link rel="preconnect" href="https://blazed.sirv.com/">
<link rel="dns-prefetch" href="//res.cloudinary.com/">
<link rel="preconnect" href="https://res.cloudinary.com/">
<link rel="license" href="https://res.cloudinary.com/blazed-space/raw/upload/v1637201502/txt/license.txt">
<link rel="author" href="https://res.cloudinary.com/blazed-space/raw/upload/v1637200777/txt/humans.txt">
<title>
Fire Angular
</title>
<meta name="msapplication-config" content="https://res.cloudinary.com/blazed-space/raw/upload/v1652469389/xml/browserconfig.xml">
<meta name="theme-color" content="#515152">
<meta name="application-name" content="Fire Angular">
<meta name="apple-mobile-web-app-title" content="Fire Angular">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@BlazedLabs">
<!--<meta name="twitter:url" content="INSERT_URL_HERE">-->
<meta name="twitter:title" content="Fire Angular">
<meta name="twitter:description" content="Boilerplate for Angular JS.">
<meta name="twitter:image" content="https://blazed.sirv.com/logo/Wallpaper-Beaker.png?w=500&h=500">
<meta name="twitter:image:alt" content="We turn Dreams into Reality.">
<meta property="fb:app_id" content="503698127531557">
<!-- <meta property="og:url" content="INSERT_URL_HERE"> -->
<meta property="og:type" content="website">
<meta property="og:title" content="Fire Angular">
<meta property="og:image" content="https://blazed.sirv.com/logo/Wallpaper-Beaker.png?w=500&h=500">
<meta property="og:image:alt" content="We turn Dreams into Reality.">
<meta property="og:description" content="Boilerplate for Angular JS.">
<meta property="og:site_name" content="Fire Angular">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Blazed Labs LLC">
<meta itemprop="name" content="Fire Angular">
<meta itemprop="description" content="Boilerplate for Angular JS.">
<meta itemprop="image" content="https://blazed.sirv.com/logo/Beaker-Rainbow.png?w=180&h=180">
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<section id="blz-app">
<app-root></app-root>
</section>
<section id="blz-js">
<noscript>
<p>
Please enable JavaScript to continue using this application.
</p>
</noscript>
</section>
</body>
</html>

0 comments on commit d708c77

Please sign in to comment.