Cool_Tools/ImHex
1
0
Fork 0
mirror of synced 2024-11-28 01:20:51 +01:00
Code Releases Wiki Activity

web: More UI and SEO improvements

Browse Source
This commit is contained in:
WerWolv 2023-12-09 12:06:20 +01:00
parent cf13404254
commit 350635d464
3 changed files with 69 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dist/web/source/index.html vendored
View File

@ -9,7 +9,7 @@
<!-- Primary Meta Tags -->
<title>ImHex Web - Free Online Hex Editor for Reverse Engineers</title>
<meta name="title" content="ImHex">
<meta name="description" content="Free and extremely powerful Online Hex Editor">
<meta name="description" content="Free and extremely powerful Online Hex Editor. ImHex is a free and open source Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Open Graph / Facebook -->
@ -67,13 +67,29 @@
<body>
<div id="loading" class="centered">
<img src="https://raw.githubusercontent.com/WerWolv/ImHex/master/plugins/builtin/romfs/assets/dark/banner.png" id="logo"/>
<p id="loading_text">A Free open source Hex Editor available natively and on the web!</p>
<h1>A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.</h1>
<h2>Available both natively and on the web</h2>
<div style="height: 50%"></div>
<div style="height: 50%">
<div style="height: 30%"> </div>
<h2 id="not_working">
Not loading in your Browser? <a href="https://imhex.werwolv.net">Try the native version</a>
</h2>
<div style="height: 50%"></div>
</div>
<div class="loading_ripple">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<div style="height: 10%">
</div>
<div class="footer">
<a href="https://imhex.werwolv.net">Homepage</a>
<p>Made with ♥️ by the ImHex Team</p>
<a href="https://github.com/WerWolv/ImHex">GitHub</a>
</div>
</div>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>

48
dist/web/source/style.css vendored
View File

@ -27,12 +27,54 @@ body {
left: 0;
}
#loading_text {
h1, h2 {
color: #F0F0F0;
font-size: 20px;
font-family: monospace;
width: 100%;
text-align: center;
margin-top: 60px;
margin-bottom: 10px;
}
h2 {
margin-top: 0px;
font-size: 18px;
}
#not_working {
opacity: 0;
}
#not_working.visible {
opacity: 1;
transition: opacity 2s ease;
}
a {
color: #7893ff;
text-decoration: none;
}
a:hover {
text-shadow: #3a4677 0px 0px 10px;
}
.footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
text-align: center;
color: #F0F0F0;
background-color: #0A0A0A;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 10%;
}
.centered {
@ -45,10 +87,6 @@ body {
height: 100%;
}
.loading_ripple {
}
.lds-ripple {
display: inline-block;

8
dist/web/source/wasm-config.js vendored
View File

@ -30,6 +30,10 @@ function glfwCreateStandardCursorCustom(shape) {
return shape
}
var notWorkingTimer = setTimeout(() => {
document.getElementById("not_working").classList.add("visible")
}, 5000);
var Module = {
preRun: [],
postRun: [],
@ -37,9 +41,11 @@ var Module = {
// Triggered when the wasm module is loaded and ready to use.
document.getElementById("loading").style.display = "none"
document.getElementById("canvas").style.display = "initial"
clearTimeout(notWorkingTimer);
},
print: (function() { })(),
printErr: function(text) { },
printErr: function(text) { },
canvas: (function() {
let canvas = document.getElementById('canvas');
// As a default initial behavior, pop up an alert when webgl context is lost. To make your