Commit 8e145d43 authored by Pouya Kary's avatar Pouya Kary

awesome new about page

parent d78e5c8e
......@@ -11,21 +11,16 @@
</head>
<body>
<div id="main-background">
<div id="icon"></div>
<div id="main-text">
<h1 id="app-name"></h1>
<p>
Orchestra Studio <span id='orchestra-version'></span><!-- at Commit No. <span id='orchestra-build'></span--> &mdash;
Orchestra Language <span id='quartet-version'>1.0.0</span><br/>
Copyright 2016-present by <a href="javascript:openExternal('http://kary.us/')">Pouya Kary</a> All rights reserved.<br/>
<h2>Legal</h2>
<p>
This software is released under Mozilla Public License, Version 2. Published by Mozilla Foundation and available from <a href="javascript:openExternal('https://www.mozilla.org/en-US/MPL/2.0/')">https://www.mozilla.org/en-US/MPL/2.0/</a>
</p>
<h2>Open Source</h2>
<p>
During the development of Orchestra and Quartet we have benefited of using many open source technologies, thanks a lot to them: Blockly Project, Regulex, Monaco Editor, Kary UI5, Less, Chromium Project, V8 Engine, Visual Studio Code, Electron platform, Node.js, Jump.js, Gulp, Electron Packer, Electron Builder, Git, Bash, Yargs and many more...
</p>
<div id="app-name">Orchestra</div>
<div id="app-text">
Orchestra Hall <span id='orchestra-version'>1.0</span><!-- at Commit No. <span id='orchestra-build'></span--> &bullet;
Orchestra Language <span id='quartet-version'>1.0</span><br>
Copyright 2016-present by <a href="javascript:openExternal('https://kary.us/')">Pouya Kary</a> All rights reserved.<br><br>
This software package is released under <a href="javascript:openExternal('https://www.mozilla.org/en-US/MPL/2.0/')">Mozilla Public License, Version 2</a> as published by Mozilla Foundation
</div>
</div>
</div>
</body>
......
......@@ -10,82 +10,54 @@
*/
html {
font-size: 12px;
font-size: 12px;
}
body {
background-color: black;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
overflow: hidden;
cursor: default;
background-color: #424242;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
overflow: hidden;
}
p {
line-height: 1.5;
}
h1, h2, h3, h4 {
padding: 0;
margin: 0;
}
h2 {
margin-top: 20px;
}
ul {
padding: 0;
}
li {
margin-bottom: 3px;
a {
cursor: pointer;
color: white;
}
#main-background {
background-color: #ECECEC;
padding: 50px;
width: 550px;
height: 290px;
-webkit-app-region: drag;
color: white;
background-image: url( "background.png" );
background-position: top center;
background-size: contain;
background-color: #ECECEC;
padding: 50px;
width: 550px;
height: 290px;
}
#main-text {
position: fixed;
left: 160px;
top: 30px;
width: 450px;
overflow: hidden;
}
#icon {
background-image: url('./icon.png');
width: 120px;
height: 120px;
background-size: contain;
background-position: center;
position: fixed;
top: 30px;
left: 25px;
}
/** dark theme */
.dark > #main-background {
background-color: black;
}
.dark > #main-background > #main-text > h1 {
color: #7DA76F;
}
.dark > #main-background > #main-text > h2 {
color: #A47097;
}
.dark > #main-background > #main-text {
color: #ccc;
}
.dark > #main-background > #main-text > p > a {
color: #668BB7;
position: fixed;
left: 50px;
top: 257px;
width: 550px;
overflow: hidden;
display: flex;
}
#app-name {
flex: auto;
font-size: 3rem;
font-weight: bold;
max-width: fit-content;
}
#app-text {
padding: 0.4rem 0 0 2rem;
flex: 1;
color: #eee;
line-height: 1.5;
}
......@@ -13,10 +13,9 @@
//
const openExternal = require( 'electron' ).shell.openExternal
const fs = require('fs')
const appName = require( 'electron' ).remote.app.getName( )
const { ipcRenderer, webFrame } = require( 'electron' )
const { webFrame } = require( 'electron' )
//
// ─── DISABLE ZOOM ───────────────────────────────────────────────────────────────
......@@ -55,27 +54,6 @@
document.getElementById( 'app-name' ).innerText = appName
document.getElementById( orchestraVersionSpanId ).innerText = windowOptions.orchestraVersion
document.getElementById( quartetVersionSpanId ).innerText = windowOptions.quartetVersion
document.body.className = windowOptions.theme
if ( appName === 'Orchestra Nightly' ) {
document.getElementById( 'icon' ).style.backgroundImage = 'url("./icon-nightly.png")'
}
/*try {
fs.readFile( `${ __dirname }/commit-count.txt`, 'utf8', ( error, data ) => {
if ( error ) alert( error )
document.getElementById( orchestraBuildSpanId ).innerText = data.trim( )
})
} catch ( e ) { alert( e )}*/
}
//
// ─── ON THEME CHANGES ───────────────────────────────────────────────────────────
//
ipcRenderer.on( 'change-theme-to', ( event, mode ) => {
document.body.className = mode
})
// ────────────────────────────────────────────────────────────────────────────────
......@@ -10,178 +10,180 @@
*/
html {
font-family: 'Helvetica Neue', Helvetica, Arial;
user-select: none;
font-family: 'Helvetica Neue', Helvetica, Arial;
user-select: none;
-webkit-user-select: none;
}
body {
/*background-color: #FAFAFA;*/
font-size: 14px;
padding: 0;
margin: 0;
/* background-color: #FAFAFA; */
font-size: 14px;
padding: 0;
margin: 0;
}
sidebar {
position: fixed;
top: 0;
width: 180px;
padding: 30px 15px 100px 15px;
height: calc( 100vh - 130px );
overflow-y: scroll;
position: fixed;
top: 0;
width: 180px;
padding: 30px 15px 100px 15px;
height: calc( 100vh - 130px );
overflow-y: scroll;
/* border-right: 3px #B36D00 solid; */
float: left;
float: left;
}
.sidebar-section-item {
font-size: 1rem;
margin: 0;
padding: 0;
color: #C03207;
margin-bottom: 3px;
font-size: 1rem;
margin: 0;
padding: 0;
color: #C03207;
margin-bottom: 3px;
}
.sidebar-header-item {
display: block;
font-size: 0.8rem;
text-decoration: none;
color: #B36D00;
display: block;
font-size: 0.8rem;
text-decoration: none;
color: #B36D00;
}
.sidebar-section-item,
.sidebar-header-item {
padding: 5px 10px 5px 10px;
border-radius: 5px;
transition-duration: 0.3s;
.sidebar-header-item, .sidebar-section-item {
padding: 5px 10px 5px 10px;
border-radius: 5px;
transition-duration: 0.3s;
}
.sidebar-section-item:hover {
transition-duration: 0.3s;
background-color: #C03207;
color: white;
transition-duration: 0.3s;
background-color: #C03207;
color: white;
}
.sidebar-header-item:hover {
transition-duration: 0.3s;
background-color: #B36D00;
color: white;
transition-duration: 0.3s;
background-color: #B36D00;
color: white;
}
.sidebar-separator-item {
margin: 10px 0 10px 0;
border-bottom: 2px #f4f4f4 solid;
margin: 10px 0 10px 0;
border-bottom: 2px #f4f4f4 solid;
}
#content {
float: right;
/*max-width: 750px;
margin-left: 240px;*/
width: calc( 100vw - 210px );
height: calc( 100vh - 50pt );
overflow-y: scroll;
padding-bottom: 50pt;
float: right;
/* max-width: 750px;
margin-left: 240px; */
width: calc( 100vw - 210px );
height: calc( 100vh - 50pt );
overflow-y: scroll;
padding-bottom: 50pt;
}
.block-group {
max-width: 750px;
margin: auto;
max-width: 750px;
margin: auto;
}
h2 {
font-size: 1.4rem;
margin: 1px 0 2px 0;
color: #9F0D97;
font-size: 1.4rem;
margin: 1px 0 2px 0;
color: #9F0D97;
}
h3 {
font-size: 1.2rem;
margin: 0px 0 2px 0;
color: #5D5D5D;
font-weight: normal;
font-size: 1.2rem;
margin: 0px 0 2px 0;
color: #5D5D5D;
font-weight: normal;
}
h1 {
font-size: 1.6rem;
color: #2A75C0;
margin: 20pt 0 20pt 0;
font-size: 1.6rem;
color: #2A75C0;
margin: 20pt 0 20pt 0;
}
p {
margin: 0;
padding: 0 0 20px 0;
font-size: 1rem;
margin: 0;
padding: 0 0 20px 0;
font-size: 1rem;
}
ul {
margin: 0;
padding: 0 0 0 30px;
margin: 0;
padding: 0 0 0 30px;
}
.block-group {
margin-bottom: 60px;
margin-bottom: 60px;
}
code {
color: #B36D00;
background-color: #FFF5D6;
padding: 1px 5px 2px 5px;
border-radius: 3px;
color: #B36D00;
background-color: #FFF5D6;
padding: 1px 5px 2px 5px;
border-radius: 3px;
}
.unsafe {
background-color: #C03207;
color: white;
text-transform: uppercase;
padding: 2px 5px 2px 6px;
border-radius: 3px;
letter-spacing: 2px;
font-size: 0.8em;
background-color: #C03207;
color: white;
text-transform: uppercase;
padding: 2px 5px 2px 6px;
border-radius: 3px;
letter-spacing: 2px;
font-size: 0.8em;
}
.row {
display: flex;
margin-bottom: 20px;
display: flex;
margin-bottom: 20px;
}
.column {
flex: 3;
flex: 3;
}
.text {
flex: 5;
padding: 0 30px 10px 0;
font-size: 1rem;
line-height: 1.6;
flex: 5;
padding: 0 30px 10px 0;
font-size: 1rem;
line-height: 1.6;
}
.block {
user-select: none;
background-color: #f4f4f4;
padding: 20px;
border-radius: 7px;
-webkit-user-select: none;
user-select: none;
user-select: none;
background-color: #f4f4f4;
padding: 20px;
border-radius: 7px;
-webkit-user-select: none;
user-select: none;
}
.separator {
padding-top: 40pt;
padding-top: 40pt;
}
footer {
margin-top: 100pt;
background-color: #f7f7f7;
padding: 20pt;
border-radius: 5pt;
display: flex;
margin-top: 100pt;
background-color: #f7f7f7;
padding: 20pt;
border-radius: 5pt;
display: flex;
}
.footer-logo {
max-width: 219px;
flex: auto;
margin-right: 20pt;
margin-top: 2pt;
max-width: 219px;
flex: auto;
margin-right: 20pt;
margin-top: 2pt;
}
.footer-text {
flex: auto;
font-size: 12pt;
}
\ No newline at end of file
flex: auto;
font-size: 12pt;
}
......@@ -185,9 +185,10 @@
console.log( parent )
let aboutWindow = new BrowserWindow({
title: 'About Orchestra',
title: 'Orchestra Hall',
titleBarStyle: 'hiddenInset',
width: 650, minWidth: 650, maxWidth: 650,
height: 410, minHeight: 410, maxHeight: 410,
height: 390, minHeight: 390, maxHeight: 390,
//backgroundColor: ( settings.windowThemeStatus === 'dark' )? 'black' : '#ECECEC',
minimizable: false,
maximizable: false,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment