summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json27
-rw-r--r--public/img/logo.pngbin0 -> 2825 bytes
-rw-r--r--public/index.html36
-rw-r--r--src/components/navigation/Navbar.js36
-rw-r--r--src/components/navigation/Navbar.sass132
-rw-r--r--src/index.js21
-rw-r--r--src/index.sass12
-rw-r--r--src/pages/Projects.js8
-rw-r--r--src/style-globals/mixins.sass21
-rw-r--r--src/style-globals/variables.sass25
10 files changed, 318 insertions, 0 deletions
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..7178e213
--- /dev/null
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "opendc-frontend-experimental",
+ "version": "0.1.0",
+ "private": true,
+ "dependencies": {
+ "bootstrap": "4.0.0-alpha.6",
+ "history": "^4.6.3",
+ "node-sass-chokidar": "^0.0.3",
+ "npm-run-all": "^4.0.2",
+ "react": "^15.6.1",
+ "react-dom": "^15.6.1",
+ "react-fontawesome": "^1.6.1",
+ "react-google-login": "^2.9.2",
+ "react-mailto": "^0.4.0",
+ "react-router-dom": "^4.1.1",
+ "react-scripts": "1.0.10"
+ },
+ "scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build": "npm run build-css && react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
diff --git a/public/img/logo.png b/public/img/logo.png
new file mode 100644
index 00000000..d743038b
--- /dev/null
+++ b/public/img/logo.png
Binary files differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 00000000..8429885a
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>OpenDC</title>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="theme-color" content="#000000">
+
+ <meta name="description" content="Collaborative Datacenter Simulation and Exploration for Everybody">
+ <meta name="author" content="Alexandru Iosup, Leon Overweel, Georgios Andreadis, Matthijs Bijman">
+ <meta name="keywords" content="OpenDC, Datacenter, Simulation, Simulator, Collaborative, Distributed, Cluster">
+
+ <link rel="manifest" href="/manifest.json">
+ <link rel="shortcut icon" href="/favicon.ico">
+
+ <meta name="google-signin-client_id"
+ content="311799954046-jv2inpg9nu7m0avcg6gulvkuvfgbtgb4.apps.googleusercontent.com">
+
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
+ integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ">
+ <script src="https://use.fontawesome.com/ece66a2e7c.js"></script>
+</head>
+<body>
+<noscript>
+ You need to enable JavaScript to run this app.
+</noscript>
+<div id="root"></div>
+<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
+ integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
+ integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
+ integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"></script>
+</body>
+</html>
diff --git a/src/components/navigation/Navbar.js b/src/components/navigation/Navbar.js
new file mode 100644
index 00000000..a5f0510f
--- /dev/null
+++ b/src/components/navigation/Navbar.js
@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import {Link} from "react-router-dom";
+import "./Navbar.css";
+import Mailto from "react-mailto";
+import FontAwesome from "react-fontawesome";
+
+class Navbar extends Component {
+ render() {
+ return (
+ <div className="opendc-navbar">
+ <Link className="opendc-brand" to="/">
+ <img src="/img/logo.png" alt="OpenDC Logo"/>
+ <div className="opendc-title">
+ Open<strong>DC</strong>
+ </div>
+ </Link>
+ <div className="navigation navbar-button-group">
+ <Link className="projects" title="Projects" to="/projects">Projects</Link>
+ </div>
+ <div className="user-controls navbar-button-group">
+ <Mailto className="support" title="Support" email="opendc.tudelft@gmail.com"
+ headers={{subject: "OpenDC%20Support"}}>
+ <FontAwesome name="question-circle" size="lg"/>
+ </Mailto>
+ <Link className="username" title="My Profile" to="/profile">Profile</Link>
+ <Link className="sign-out" title="Sign out" to="#">
+ <FontAwesome name="power-off" size="lg"/>
+ </Link>
+ </div>
+ <div id="google-signin" className="navbar-right"/>
+ </div>
+ );
+ }
+}
+
+export default Navbar;
diff --git a/src/components/navigation/Navbar.sass b/src/components/navigation/Navbar.sass
new file mode 100644
index 00000000..d40eecfb
--- /dev/null
+++ b/src/components/navigation/Navbar.sass
@@ -0,0 +1,132 @@
+@import ../../style-globals/mixins.sass
+@import ../../style-globals/variables.sass
+
+.opendc-navbar
+ position: relative
+ display: block
+ width: 100%
+ height: $navbar-height
+
+ color: #eee
+ background: #343434
+
+ z-index: 100
+
+ -webkit-box-shadow: -10px 8px 3px 12px #000
+ -moz-box-shadow: -10px 8px 3px 12px #000
+ box-shadow: -10px -10px 3px 12px #000
+
+.opendc-brand
+ display: inline-block
+ float: left
+ margin-left: $global-padding
+
+ padding: 0 10px
+
+ cursor: pointer
+ color: #eee
+ height: 100%
+
+ +transition(background, $transition-length)
+
+ img
+ display: inline-block
+ float: left
+ margin: $navbar-padding 0
+
+ width: $navbar-height - $navbar-padding * 2
+ height: $navbar-height - $navbar-padding * 2
+ vertical-align: middle
+
+ .opendc-title
+ display: inline-block
+ float: right
+ margin-left: 20px
+
+ font-size: 16pt
+ line-height: $navbar-height
+
+.opendc-brand:hover
+ background: $blue
+
+.opendc-brand:active
+ background: $blue-dark
+
+.navbar-button-group
+ display: inline-block
+ height: 100%
+
+ a
+ display: inline-block
+ line-height: $navbar-height
+ text-align: center
+ color: #eee
+
+ border-left: 1px solid #464646
+
+ +clickable
+ +transition(background, $transition-length)
+
+ a:last-of-type
+ border-right: 1px solid #464646
+
+.navigation
+ margin-left: 30px
+
+ .projects
+ float: left
+ padding: 0 20px
+
+ font-size: 12pt
+
+ .projects:hover
+ background: #606060
+
+ .projects:active
+ background: #161616
+
+.user-controls
+ float: right
+ margin-right: $global-padding
+
+ .support
+ float: left
+ margin-top: -1px
+
+ width: $navbar-height
+
+ font-size: 14pt
+
+ .support:hover
+ background: #41a0cd
+
+ .support:active
+ background: #307798
+
+ .username
+ float: left
+ padding: 0 20px
+
+ font-size: 12pt
+
+ .username:hover
+ background: #4eae44
+
+ .username:active
+ background: #2d6527
+
+ .sign-out
+ float: right
+ margin-top: -1px
+ width: $navbar-height
+
+ font-size: 14pt
+
+ .sign-out:hover
+ background: #e3474d
+
+ .sign-out:active
+ background: #a73438
+
+#google-signin
+ display: none
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..25c33e82
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,21 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import {BrowserRouter, Route, Switch} from "react-router-dom";
+import "./index.css";
+import registerServiceWorker from "./registerServiceWorker";
+import Home from "./pages/Home";
+import Projects from "./pages/Projects";
+import NotFound from "./pages/NotFound";
+
+ReactDOM.render(
+ <BrowserRouter>
+ <Switch>
+ <Route exact path="/" component={Home}/>
+ <Route exact path="/projects" component={Projects}/>
+ <Route path="/*" component={NotFound}/>
+ </Switch>
+ </BrowserRouter>,
+ document.getElementById('root')
+);
+
+registerServiceWorker();
diff --git a/src/index.sass b/src/index.sass
new file mode 100644
index 00000000..1ea3b0c5
--- /dev/null
+++ b/src/index.sass
@@ -0,0 +1,12 @@
+body
+ margin: 0
+ padding: 0
+ width: 100%
+ height: 100%
+
+ font-family: Helvetica, Verdana, sans-serif
+ overflow: hidden
+ background: #eee
+
+a, a:hover
+ text-decoration: none
diff --git a/src/pages/Projects.js b/src/pages/Projects.js
new file mode 100644
index 00000000..6d377e92
--- /dev/null
+++ b/src/pages/Projects.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import Navbar from "../components/navigation/Navbar";
+
+const Projects = () => (
+ <Navbar/>
+);
+
+export default Projects;
diff --git a/src/style-globals/mixins.sass b/src/style-globals/mixins.sass
new file mode 100644
index 00000000..40c07a6d
--- /dev/null
+++ b/src/style-globals/mixins.sass
@@ -0,0 +1,21 @@
+=transition($property, $time)
+ -webkit-transition: $property $time
+ -moz-transition: $property $time
+ -o-transition: $property $time
+ transition: $property $time
+
+=user-select-def
+ -webkit-user-select: none
+ -moz-user-select: none
+ -ms-user-select: none
+ user-select: none
+
+=border-radius-def($length)
+ -webkit-border-radius: $length
+ -moz-border-radius: $length
+ border-radius: $length
+
+/* General Button Abstractions */
+=clickable
+ cursor: pointer
+ +user-select-def
diff --git a/src/style-globals/variables.sass b/src/style-globals/variables.sass
new file mode 100644
index 00000000..4386059d
--- /dev/null
+++ b/src/style-globals/variables.sass
@@ -0,0 +1,25 @@
+// Sizes and Margins
+$document-padding: 20px
+$inter-element-margin: 5px
+$standard-border-radius: 5px
+$side-menu-width: 350px
+$color-indicator-width: 140px
+
+$global-padding: 30px
+$side-bar-width: 250px
+$navbar-height: 50px
+$navbar-padding: 10px
+
+// Durations
+$transition-length: 150ms
+
+// Colors
+$gray-dark: #aaa
+$gray-semi-dark: #bbb
+$gray-semi-light: #ccc
+$gray-light: #ddd
+$gray-very-light: #eee
+$blue: #00A6D6
+$blue-dark: #0087b5
+$blue-very-dark: #006182
+$blue-light: #deebf7
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 12:33:22 +0000