ryzen-controller/index-dark.html
James Craddock-Jones ca1bb86e76 feat: Added Dark mode option and tutorial section.
Ryzen Controller now lives in the dark as well as the light (BETA).
2019-11-07 17:56:10 +01:00

291 lines
11 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Ryzen Controller</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./node_modules/uikit/dist/css/uikit.min.css" />
<script src="https://browser.sentry-cdn.com/5.6.1/bundle.min.js" crossorigin="anonymous"></script>
<script src="./node_modules/uikit/dist/js/uikit.min.js"></script>
<script src="./node_modules/uikit/dist/js/uikit-icons.min.js"></script>
<script src="https://kit.fontawesome.com/c7184454f2.js" crossorigin="anonymous"></script>
<style>
html,
body {
background-color: black;
color: white;
min-width: 800px;
}
h1,
h2,
h3 {
color: white;
}
#release-tab.uk-active {
position: absolute;
display: inline-block;
width: 100%;
height: calc(100vh - 110px);
}
#main-container-selector {
background-color: #222;
color: white;
}
.uk-tab>.uk-active>a {
color: white;
border-color: #1e87f0;
}
.uk-input,
.uk-select,
#logs {
background-color: #333;
color: white;
}
.uk-textarea {
background-color: #555;
color: white;
}
#controller-tab h3 label,
#experimental-tab h3 label {
cursor: pointer;
}
#donation {
background: rgb(232, 91, 70);
}
#discord {
background: rgb(114, 137, 218);
}
#dark {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
margin-left: 35px;
margin-top: 21px;
float: left;
position: absolute;
border: 2px solid;
border-left: none;
border-color: #333;
}
#light {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
margin-right: 0;
float: left;
position: absolute;
margin-left: 10px;
margin-top: 21px;
background-color: black;
border: 2px solid;
border-right: none;
border-color: #333;
}
#dark:hover {
color: #bbb;
}
#light:hover {
color: #bbb;
}
#rcon {
height: 64px;
width: auto;
}
tr {
background-color: #333;
color: white;
}
tr span.uk-text-lead {
color: white;
}
tr:hover {
background-color: #333;
color: white;
}
.preset {
background-color: #555;
}
.autoapply {
color: white;
}
.autoapply:hover {
color: #555;
background-color: #333;
}
#modal-import-preset div,
#modal-export-preset div {
background-color: #333;
}
</style>
</head>
<body class="uk-animation-fade" uk-height-viewport="expand: true">
<h1>
<img id="rcon" src="assets/icon.png">
Ryzen Controller
<span id="version" class="uk-badge"></span>
<a class="uk-badge" id="donation" title="Buy us some beers ❤️" href="#" onClick="require('electron').shell.openExternal('https://www.patreon.com/ryzencontrollerteam')">Patreon</a>
<a class="uk-badge" id="discord" title="Join us on discord" href="#" onClick="require('electron').shell.openExternal('https://discord.gg/EahayUv')">Discord</a>
<a class="uk-badge" id="light" title="Light Mode" href="index.html"><i class="fas fa-sun"></i></a>
<a class="uk-badge" id="dark" title="Dark Mode (BETA)" href="index-dark.html"><i class="fas fa-moon"></i></a>
</h1>
<ul uk-switcher="animation: uk-animation-fade" uk-tab uk-sticky class="uk-background-default uk-margin-remove" id="main-container-selector">
<li><a href="#">Presets</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Releases</a></li>
<li><a href="#">Logs</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
<ul class="uk-switcher uk-margin-remove" id="main-container" uk-height-viewport="expand: true" style="position:relative;">
<li class="uk-margin-top uk-margin-bottom uk-container">
<div id="presetTab"></div>
<p class="uk-margin">
<button class="uk-button uk-button-secondary" uk-toggle="target: #modal-export-preset" type="button" onClick="preset_export()">
Export
</button>
<button class="uk-button uk-button-secondary" uk-toggle="target: #modal-import-preset" type="button">
Import
</button>
</p>
</li>
<li class="uk-margin-top uk-margin-bottom uk-container">
<h3 class="windows-only">Auto start:</h3>
<label class="windows-only"><input class="uk-checkbox" type="checkbox" id="start_at_boot"> When checked, Ryzen Controller will start on session start.</label>
<h3>Auto apply on launch:</h3>
<label><input class="uk-checkbox" type="checkbox" id="apply_last_settings_on_launch"> When checked, Ryzen Controller will try to apply latest used settings on launch.</label>
<h3>Minimize to tray:</h3>
<label><input class="uk-checkbox" type="checkbox" id="minimize_to_tray"> When checked, Ryzen Controller will minimize to tray instead of taskbar.</label><br>
<label><input class="uk-checkbox" type="checkbox" id="start_minimized"> When checked, Ryzen Controller will start minimized when you launch it.</label>
<!-- <h3 class="windows-only">HPET:</h3>
<p class="uk-margin windows-only">
High Precision Event Timer: Allow application to get time with precision below microseconds, but is slower than most other other timer facilities.<br/>
Try running benchmark with and without to see if you get any difference.<br/>
If it doesn't make any difference, it's recommanded to let it enable.<br/>
<em>You must reboot to apply changes.</em>
</p>
<p class="uk-margin windows-only">
<button class="uk-button uk-button-primary" onClick="toggleHpet('true')">Enable</button>
<button class="uk-button uk-button-secondary" onClick="toggleHpet('false')">Disable</button>
</p> -->
<h3>Re-apply ryzenadj periodically:</h3>
<p>Ryzen Controller will re-apply ryzenadj every X seconds. Set to 0 to disable.</p>
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-6">
<input class="uk-input" type="number" min="0" step="10" max="3600" value="0" id="reapply_periodically" repeat="reapply_periodically_range">
</div>
<div class="uk-width-expand">
<input class="uk-range" type="range" min="0" step="10" max="3600" value="0" repeat="reapply_periodically" id="reapply_periodically_range">
</div>
</div>
<h3>Ryzenadj path:</h3>
<div class="uk-grid-small" uk-grid>
<div class="uk-width-2-3@s">
<input class="uk-input" type="text" id="ryzen_adj_path">
</div>
<div class="uk-width-1-3@s">
<button class="uk-button uk-button-default uk-button-small" type="button" onClick="askingForRyzenAdjExecutablePath()">
Select path to ryzenadj.exe
</button>
</div>
</div>
</li>
<li id="release-tab">
<webview style="height:100%;" frameborder="0" src="https://gitlab.com/ryzen-controller-team/ryzen-controller/releases"></webview>
</li>
<li class="uk-margin-top uk-margin-bottom uk-container">
<textarea class="uk-textarea" rows="20" id="logs" readonly></textarea>
</li>
<li class="uk-margin-top uk-margin-bottom uk-container">
<div>
<h2>1. How to set CPU TDP</h2>
<h3>Where to find the STAMP limit</h3>
<p>The main way to change your Ryzen CPUs TDP is by changing the STAMP watt value which you can find under the Heavy Impact menu.</p>
<img src="assets/Heavyimpactlight.JPG" />
<p>You can change this value up if you wish to have a higher TDP which will allow the CPU more headroom for high boost speeds on both CPU and Vega Graphics at the cost of heat or you can choose a lower the value for a lower TDP which will give less head room for the CPU and Vega Graphics to boost but will run cooler.</p>
<img src="assets/STAMPLimitLight.JPG" />
<p>Please note that truning this value up too much may cause crashes and or damage to the device so be careful</p>
<h3>Additional ways to change CPU TDP</h3>
<img src="assets/PPTFastPPTSlowLight.JPG" />
<p>There are also other ways in which the TDP of your CPU can be changed if you were to scroll down from STAMP limit to the bottom of the page you will find PPT Fast Limit and PPT Slow limit. These are the TDP limits that the CPU will use when in boost which is PPT Fast and the TDP limits when the CPU is not boosting PPT Slow limit. Both limits like the STAMP limit can be altered up and down to your liking.</p>
<p>Please note that truning these values up too much may also cause crashes and or damage to the device so be careful</p>
<h3>How to apply changes</h3>
<p>To apply these changes just scroll down to the bottom of the page and press on the blue apply button shown below from this point your changed settings will be set.</p>
<img src="assets/Apply%20Light.JPG" />
<p>Please note if you have any problems with you PC after this a simple reboot will reset your PC back to its default settings.</p>
<p>You can get additional help from the community Discord server <a title="Join us on discord" href="#" onClick="require('electron').shell.openExternal('https://discord.gg/EahayUv'" )>Here</a></p>
</div>
</li>
</ul>
<!-- Add a preset modal -->
<div id="modal-new-preset" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Save current settings to preset</h2>
<p>The current settings will be saved to a new preset. Give it a name then you'll be able to reapply it fastly from the preset tab.</p>
<div class="uk-margin">
<input class="uk-input" type="text" id="new_preset_name" placeholder="Preset name: performance, low energy, unicorn power, ...">
</div>
<button class="uk-button uk-button-primary uk-modal-close" type="button" onClick="preset_createNewPreset()">Save</button>
<button class="uk-button uk-button-secondary uk-modal-close" type="button">Close</button>
</div>
</div>
<!-- Export preset modal -->
<div id="modal-export-preset" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Export presets</h2>
<p>This is the data to be used by Ryzen Controller to import presets.</p>
<div class="uk-margin">
<textarea class="uk-textarea" rows="5" id="modal-export-preset-textarea" readonly></textarea>
</div>
<button class="uk-button uk-button-secondary uk-modal-close" type="button">Close</button>
</div>
</div>
<!-- Import preset modal -->
<div id="modal-import-preset" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Import presets</h2>
<p>Paste here the presets and valid, your current presets will be merged with this.</p>
<div class="uk-margin">
<textarea class="uk-textarea" rows="5" id="modal-import-preset-textarea"></textarea>
</div>
<button class="uk-button uk-button-primary uk-modal-close" type="button" onClick="preset_import()">Import</button>
<button class="uk-button uk-button-secondary uk-modal-close" type="button">Close</button>
</div>
</div>
<script type="text/javascript" src="./js/preset.js"></script>
<script type="text/javascript" src="./js/methods.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
</body>
</html>