add mycard css

.gitignore

@@ -3,7 +3,7 @@
 /node_modules/
 /dist/
 /typings/
-/npm-dubug.log
+/npm-debug.log
 /.idea/
 .DS_Store
-Thumbs.db
\ No newline at end of file
+Thumbs.db

app/mycard.component.css

-.nav-right {
-    float: right;
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
+}
+
+nav {
+    -webkit-app-region: drag;
+}
+nav.darwin {
+    padding-left: 80px;
+}
+
+.navbar-right {
+    float: right
+}
+
+.navbar-right > div, #user > .item {
+    float: left;
+    margin: 0 0.5rem
 }
 
 #avatar {
@@ -7,5 +23,24 @@
     float: left;
     border-radius: 50%;
     height: 2rem;
-    padding: 0.175rem;
-}
\ No newline at end of file
+    margin-top: 0.175rem;
+}
+
+.item {
+    display: block;
+    float: left;
+    padding-top: .425rem;
+    padding-bottom: .425rem;
+    margin-left: 4px;
+    color: #eceeef;
+    text-decoration: none;
+}
+
+.item:hover {
+    color: #fff;
+}
+
+a {
+    cursor: default;
+}
+

app/mycard.component.html

-<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
-    <a class="navbar-brand" href="#">Project name</a>
+<nav class="navbar navbar-fixed-top navbar-dark bg-inverse" [class.darwin]="platform == 'darwin'">
+    <a class="navbar-brand" href="#">MyCard</a>
     <ul class="nav navbar-nav">
         <li class="nav-item active">
-            <a class="nav-link" href="#">商店<span class="sr-only">(current)</span></a>
+            <a class="nav-link" href="#">商店</a>
         </li>
         <li class="nav-item">
-            <a class="nav-link" href="#">About</a>
+            <a class="nav-link" href="#">游戏<span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
-            <a class="nav-link" href="#">Contact</a>
+            <a class="nav-link" href="#">社区</a>
         </li>
-        <div class="nav-right">
-            <a href="#">
-                <img class="img-circle" id="avatar" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_156e9ce46fa%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_156e9ce46fa%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="image">
+    </ul>
+    <div class="navbar-right">
+        <div id="user">
+            <a href="#forum" class="require-login profile">
+                <img id="avatar" src="https://ygobbs.com/letter_avatar_proxy/v2/letter/a/e47774/36.png" alt="image">
             </a>
+            <a href="#forum" class="require-login profile item" id="username"></a>
+            <a href="#ygopro" id="logout" class="require-login item">切换账号</a>
+            <a href="#ygopro" id="refresh" class="item">刷新</a>
         </div>
-    </ul>
+        <div id="window-buttons" hidden>
+            <i id="minimize" class="icon-minimize"></i>
+            <i id="maximize" class="icon-maximize"></i>
+            <i id="restore" class="icon-restore" hidden></i>
+            <i id="close" class="icon-close"></i>
+        </div>
+    </div>
 </nav>
 
 

app/mycard.component.ts

 import { Component } from '@angular/core';
+declare var process;
 @Component({
   selector: 'mycard',
   templateUrl: 'app/mycard.component.html',
   styleUrls: ['app/mycard.component.css'],
+
 })
-export class MyCardComponent { }
+
+export class MyCardComponent {
+  platform = process.platform;
+}