Admin Page

[neo305]

Hi any idea why my admin page went from this to this?

[stooged]

style.css is not loading

https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/ESP32_Server_900u.ino#L965

https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/Pages.h#L224

try navigate to http://10.1.1.1/style.css and see if it shows data.

[neo305]

style.css is not loading

https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/ESP32_Server_900u.ino#L965

https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/Pages.h#L224

try navigate to http://10.1.1.1/style.css and see if it shows data.

when i do this page shows

[neo305]

[stooged]

that style.css contains code that is not from this repo. it probably has errors which is preventing the css loading correctly in the browser.

[neo305]

that style.css contains code that is not from this repo. it probably has errors which is preventing the css loading correctly in the browser.

Ok but that’s the same file from first pic so it works. Only difference is the first pic is on a FeatherS2 and the 2nd pic that’s not working is on a S2 Mini

[neo305]

Or sorry same S2 Mini board used on both pics. The only difference I think is in the 1st working I used LittleFS and 2nd pic not working I have to use FatFS

[stooged]

the second picture has a custom style.css file. the hardcoded pages in the repo work regardless of the filesystem used because the internal pages load from memory not the storage.

if you create a custom css file and it has coding errors it can fail to load which will mess up a page that requires it.

the file is being served by the esp board because you can access it using http://10.1.1.1/style.css so that should rule out the esp board and sketch.

i would delete the custom css file and see if the page loads with the internal css

this is the css code for the internal css file https://pastebin.com/H9x8Ew6G

[neo305]

the second picture has a custom style.css file.

the hardcoded pages in the repo work regardless of the filesystem used because the internal pages load from memory not the storage.

if you create a custom css file and it has coding errors it can fail to load which will mess up a page that requires it.

the file is being served by the esp board because you can access it using http://10.1.1.1/style.css so that should rule out the esp board and sketch.

i would delete the custom css file and see if the page loads with the internal css

this is the css code for the internal css file

https://pastebin.com/H9x8Ew6G

Thanks so much. Would you be willing to take a look at my Style.css file cuz I'm not sure what and where I need to edit. I can't delete it cuz then my host page would look like shit lol

[stooged]

upload it to pastebin and post the link here

[neo305]

upload it to pastebin and post the link here

Thanks so much for all your help. yeah I tried just paste what you sent but then changes look of my host web page. https://pastebin.com/EJqgLHLu hope I did this correctly. My first time on paste.bin

[stooged]

Error, this is a private paste or is pending moderation. If this paste belongs to you, please login to Pastebin to view it.

[neo305]

Error, this is a private paste or is pending moderation. If this paste belongs to you, please login to Pastebin to view it.

like I said my first time on it but I made it Public https://pastebin.com/EJqgLHLu via @pastebin

[neo305]

Error, this is a private paste or is pending moderation. If this paste belongs to you, please login to Pastebin to view it.

maybe cuz I put it in a folder? or cuz I just signed up? made another one https://pastebin.com/BQRLuKzG via @pastebin try that please

[stooged]

Still getting the same error. If you created an accout it might be pending approval.

I always just paste as a guest(no login)

[neo305]

Still getting the same error. If you created an accout it might be pending approval.

I always just paste as a guest(no login)

i try that and get this error as soon as I select create paste. wow first time on pastebin and I hate it already lol This page is no longer available. It has either expired, been removed by its creator, or removed by one of the Pastebin staff.

[neo305]

https://drive.google.com/file/d/138UR0pwMulzTAZUFPCao1eGDMETge5My/view?usp=sharing

[neo305]

Still getting the same error. If you created an accout it might be pending approval.

I always just paste as a guest(no login)

will this work? https://drive.google.com/file/d/1hIMYFcX44dhK7y6PUDWKonT4yK6QBQFE/view?usp=sharing

[stooged]

That worked.

Your css file is missing all of the required css for the admin page. add the code from the pastebin link i posted to your css and try it.

[neo305]

That worked.

Your css file is missing all of the required css for the admin page. add the code from the pastebin link i posted to your css and try it.

I noticed that too so that’s what I did but then it changes my host page too much so something is conflicting

[neo305]

That worked.

Your css file is missing all of the required css for the admin page. add the code from the pastebin link i posted to your css and try it.

that or I am just not adding it correctly, can you please try to add it for me and send

[neo305]

I have no idea how this happened cuz I have never edited that file before and it worked before as you see from pic

[stooged]

I dont have access to my pc atm but i tried to add them on my phone, try this code in the css file

html, body{
margin:auto;
font-family:sans-serif;
font-size:20px;
font-weight:lighter;
text-align:left;
color:#FFFFFF;
background-size:cover;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  font-family: BFARNAZ;
  font-size: 18px;
  position: relative;
  background-color: #dddddd;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
.vid
{
    object-fit: inherit;
    position: fixed;
    right: 0;
    z-index: -1;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0.4;
}
.bg-darker {
    background-color: #24272b !important;
}
        .button {
          background:rgba(0,0,0,0.5);
          box-shadow: 0 5px 20px 0 white;
          border: 2px solid black;
          border-radius: 10px;
          color: white;
          text-decoration: none;
          width: 200px;
          height: 40px;
          display:inline-table;
          font-family: system-ui;
          text-align: center;
        }

        .button:focus,
        .button:hover {
          color: White;
          box-shadow: 0 5px 50px 0 white;
          background-color: #0F0F53;
          border-radius: 10px;
        }
#PF {
position:fixed; right:0; top:0;  margin:auto; max-width:100%; max-height:100%;
width:200px;
height:50px;
z-index:10;
}
.bgIMG {
position:fixed; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:100%;
height:100%;
background-size:cover;
z-index:-1;
transition: background-image 0.0s ease-in-out;
}
.PageTop {
margin-top: -10px;
width: 100%;
font-size: 36px;
font-weight: lighter;
opacity: 1;
}
hr {
padding:0;
margin:0;
opacity:0.7;
}

#defaultItem{
position:relative; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:1345px;   
font-size:34px;
display:block;
color:white;
text-decoration:none;
border:4px solid white;
}
#defaultDesc {
position:relative;
margin:0px 0px -2px 0px;
display:block;
width:1215px;
left:100px;
bottom:25px;
font-size:22px;
font-weight:lighter;
opacity:0.7;
}
.item {
position:relative; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:1345px;
}
.item a {
font-size:34px;
display:block;
color:white;
text-decoration:none;
border:4px solid transparent;
}
.item a:hover { 
width:1345px;
border:4px solid white;
}
.iconZ {
font-family:'Icons';
font-weight:normal;
font-style:normal;
font-size:55px;
display:inline-block;
line-height:1;
text-transform:none;
letter-spacing:normal;
word-wrap:normal;
white-space:nowrap;
direction:ltr;
padding:12px 15px 12px 20px;
vertical-align:middle;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.Title {
padding:3px 0px 25px 10px;
margin:0px 0px -15px 0px;
width:1000px;
display:inline-block;
vertical-align:middle;
}
.Desc {
position:relative;
margin:0px 0px -2px 0px;
display:none;
width:1215px;
left:100px;
bottom:25px;
font-size:22px;
font-weight:lighter;
opacity:0.7;
}
.item a:hover .Desc{ 
display:block;
}
.Divider {
width:1260px;
margin:-3px 0px -2px 90px;
vertical-align:middle;
border-style:solid;
border-width:2px 0px 2px 0px;
border-color:transparent transparent rgba(255, 255, 255, 0.3) transparent;
}
.exploitWIN {
position:fixed; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%; 
min-width:100%;
min-height:100%;
overflow:hidden;
}
.txt1 {
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:900;
height:30;
top:0;
bottom:100;
font-size:32px;
text-align:center;
color: yellow;
text-shadow: 4px 4px 4px black;
}
.container {
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:1000px;  
height:15px;
top:80;
border:2px solid rgba(255,255,255,0.6);
}
.txt2 {
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:600;
height:30;
top:180;

font-size:28px;
font-weight:bold;
text-align:center;
text-shadow: 4px 4px 4px black;
opacity:0.7;
}
.AniGif {
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:1000px;
height:15px;
top:80;
border:2px solid rgba(255,255,255,0.6);
}

.Ani0 {
position:absolute;
width:500px;
height:100%;
top:0;
animation:slidez0 2s;
animation-direction:normal;
animation-timing-function:ease-out;
animation-fill-mode:forwards;
}
.Ani1 {
position:absolute;
width:300px;
height:100%;
top:0;
animation:slidez1 1s;
animation-direction:normal;
animation-timing-function:ease-out;
animation-fill-mode:forwards;
}
.Ani2 {
position:absolute;
width:300px;
height:100%;
top:0;
animation:slidez2 1s;
animation-direction:normal;
animation-timing-function:ease-out;
animation-fill-mode:forwards;
}
.Ani3 {
position:absolute;
width:300px;
height:100%;
top:0;
animation:slidez3 1s;
animation-direction:normal;
animation-timing-function:ease-out;
animation-fill-mode:forwards;
}
.AniDone {
position:absolute;
width:300px;
height:100%;
top:0;
animation:slidez4 1s;
animation-direction:normal;
animation-timing-function:ease-out;
animation-fill-mode:forwards;
}
@keyframes slidez0 {
from {left:0px; width:0px; background:rgba(255,255,255,0.9);}
to {left:0px; width:500px;background:rgba(255,255,255,0.9);}
}
@keyframes slidez1 {
from {left:0px; width:0px; background:rgba(255,255,255,0.9);}
to {left:0px; width:300px;background:rgba(255,255,255,0.9);}
}
@keyframes slidez2 {
from {left:0px; width:301px; background:rgba(255,255,255,0.9);}
to {left:0px; width:500px;background:rgba(255,255,255,0.9);}
}
@keyframes slidez3 {
from {left:0px; width:501px; background:rgba(255,255,255,0.9);}
to {left:0px; width:850px;background:rgba(255,255,255,0.9);}
}
@keyframes slidez4 {
from {left:0px; width:851px; background:rgba(255,255,255,0.9);}
to {left:0px; width:1000px;background:rgba(255,255,255,0.9);}
}
#Tick {margin:auto;
display:inline-block;
vertical-align:middle;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXUlEQVRIS7WUO07EMBBAZ+ysqOjR0gIHgArR8FGQQAiJhAvAUiG4CwXQ8qkQxUppNtmCxDWcgII7QJ3ERo7IAomTdbyJS8t6bzw/hI4PdsyHVgUb3uH8XBIPQte/ygNvTSDhvSQeI8C6ALhmrn8pJa0I/sJ/U463kTO6mFmghv9ohLiZSVAH58A5RXpmLNCBh87ozkigCzcq8jQ4Ag6YG9yX2nT7+WBRkMRDKs7Do/GragCbwic/yOA0ZQCwxAG+KOG7RYkJPBPYnt1PE4sJgOU8aimxQNgvbvAm70zhmWBruBeBgM1SSjj/FEjtuGe95xNafCNbEQWesuPgoWqn4c5wfyVJRUQI9FUSQPwAxDUT+KQGtRJFaDqRl7pIVyLhBMlJ5PiPOqv+36BNkzSFKwetSmICr5zkosQUXrsqcgkQvtAk58W61C47KUmBrzIneNIpqOqN0TZtIutc8A0EzeZ95hEC7AAAAABJRU5ErkJggg===) no-repeat center center;
height:50px;
width:50px;
border:0px solid #ccc;
}
#PSBUTTON {
margin:auto;
display:inline-block;
vertical-align:middle;
background:url(data:image/png;base64,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) no-repeat center center;
height:30px;
width:30px;
border:0px solid #ccc;
}
.info {
position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%;
width:1200px;
height:30px;
bottom:180px;
font-size:32px;
text-align:center;
}
.txt {
position:absolute;
left:235px;
top:390px;
width:265px;
height:54px;
text-align:center;
font-weight:normal;
line-height:24px;
letter-spacing:2px;
padding:3 0 0 0;
z-index:100;
}
#cacheInfo{
position:absolute;bottom:10px;left:15px;font-size:32px;text-shadow: 4px 4px 4px black;font-weight:bold;display:inline-block;z-index:1;
}

#CacheProgress {
position:fixed;left:0;right:0;top:50;bottom:10px;max-width:100%;max-height:100%;margin:auto;
width:1076px;height:15px;
background-color:#1B3D8F;box-shadow:0 0 0 2px #BBCEEF;
}
#CacheBar {
width:0%;height:100%;background-color:green;
}
.cacheUPDbg {transition:opacity 1000ms;
position:fixed;left:0;right:0;top:0;bottom:0;max-width:100%;max-height:100%;margin:auto;    
width:100%;height:100%;
background:url("1.jpg");
opacity:1;display:none;z-index:900;
}
.cacheUPD {
position:fixed;left:0%;right:0;top:280px;bottom:0px;max-width:100%;max-height:100%;margin:auto; 
width:1100px;height:400px;
line-height:30px;align-items:left;
font-family:sans-serif;font-size:32px;text-shadow: 4px 4px 4px black;text-align:center;color:white;z-index:901;
}
#clock{
 float:right;
 margin-right:2.25%;
 margin-top: 18px;
 font-weight:bold;
 font-size:28px;
  color: white;
}
#date {
 float:left;
 margin-left:1.25%;
 font-weight:bold;
 margin-top: 18px;
 font-size:28px;
 color: white;
}
#donate2{
 float:right;
 margin-right:2.25%;
 margin-top: 11px;
 font-weight:bold;
 font-size:28px;
  color: white;
}
#donate {
 float:left;
 margin-left:1.25%;
 font-weight:bold;
 margin-top: 11px;
 font-size:28px;
 color: white;
}
#msgs2 {
 font-weight:bold;
 text-shadow: 4px 4px 4px black;
 padding-right: 00px;
 margin-right: 00px;
 font-size:17px;
}
.pointer {cursor: pointer;}

#msgs {
text-shadow: 4px 4px 4px black;
 font-size:32px;
}
#done {
text-shadow: 4px 4px 4px black;

 font-size:32px;
}
#fail {
text-shadow: 4px 4px 4px black;
 font-size:32px;
}
.about a{
 float:left;
 margin-left:1.25%;
 font-weight:bold;
 margin-top: -5px;
 font-size:25px;
 color:#87FF33;
 text-shadow: 4px 4px 4px black;
}
.about2 a{
 float:right;
 margin-left:1.25%;
 font-weight:bold;
 margin-top: -5px;
 font-size:25px;
 color:#87FF33;
 text-shadow: 4px 4px 4px black;
}
.theme a{
 float:right;
 margin-right:1.25%;
 font-weight:bold;
 margin-top: 11px;
 font-size:25px;
 color:#7CFD96;
 text-shadow: 4px 4px 4px black;
}
.card {
 width:12%;
 margin:6.5px;
 background:rgba(0,0,0,0.5);
 display:inline-block;
 margin-left:15px;
}
.card-action div{
 font-size:15px;
 line-height:20px;
}
 .alert 
{
    display:inline-block;
    width: 70%;
    height:8%; 
    margin: auto;
    text-align: center;
    padding: 5;
    background-color: rgba(255, 0, 0, 0.3);/* red with opacity */
  }

.btn {
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
font-weight: bold;
}

.btn:hover {
background-color: RoyalBlue;
}

.main {
margin-left: 150px;     
padding: 10px 10px; 
position: absolute; 
top: 0; 
right: 0;
bottom: 0; 
left: 0;
overflow-y:hidden;
}

.plmain {
  padding: 0px 0px;
  position: absolute; 
  top: 0; 
  right: 0;
  bottom: 0; 
  left: 0;
  overflow-y:hidden;
}

a:link {
color: #ffffff; 
text-decoration: none;
} 

a:visited {
color: #ffffff; 
text-decoration: none;
} 

a:hover {
color: #ffffff; 
text-decoration: underline;
} 

a:active {
color: #ffffff; 
text-decoration: underline;
} 

table {
font-family: arial, sans-serif; 
border-collapse: collapse; 
width: 100%;
} 

td, th {
border: 1px solid #dddddd; text-align: left; padding: 8px;
} 

input[type="submit"]:hover { 
background: #ffffff;
color: green; 
}

input[type="submit"]:active { 
outline-color: green;
color: green;
background: #ffffff; 
}

input[type="button"]:hover {
background: #ffffff;
color: #000000;
}

input[type="button"]:active {
outline-color: #000000;
color: #000000;
background: #ffffff;
}

#selfile {  
font-size: 16px;  
font-weight: normal;
}

.sidenav {
width: 140px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #6495ED;
overflow-x: hidden;
padding: 8px 0;
}

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 14px;
color: #ffffff;
display: block;
}

.sidenav a:hover {
color: #1451AE;
}

msg {
color: #ffffff; 
font-weight: 
normal; 
text-shadow: none;
}

#prog {
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
margin: auto;
top: 12px;
left: 0;
right: 0;
bottom: 0;
width: 870px;
height: 60px;
border: 3px solid #fff;
}

#prog span {
background-color: 1451AE;
position: absolute;
width: 100%;
display: block;
text-align: center;
font-size: 25px;
color: #ffffff;
font-weight: bold;
line-height: 60px;
}

#prog span#progper {
bottom: 100%;
}

#prog span.proglbl {
top: 100%;
text-transform: uppercase;
}

#prog #progani {
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.125s;
transition-duration: 0.125s;
width: 0;
min-width: 5px;
max-width: 864px;
z-index: 2000;
display: block;
position: absolute;
left: 0;
top: 0;
height: 60px;
-webkit-background-size: 54px 54px;
background-size: 54px 54px;
background-image: 
-webkit-linear-gradient(45deg, transparent 33%, rgba(0, 0, 0, .1) 33%,  rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top, rgba(30, 144, 255, 0.9),  rgba(30, 144, 255, 0.9)),
-webkit-linear-gradient(left,rgba(30, 144, 255, 0.9), rgba(30, 144, 255, 0.9));
border-radius: 2px; 
background-size: 5px 2px, 100% 100%, 100% 100%;
-webkit-animation: animate-stripes 10s linear infinite;
animation: animate-stripes 10s linear infinite;
color: DodgerBlue;
}

@-webkit-keyframes animate-stripes {
100% { background-position: 100px 0px; }
}

@keyframes animate-stripes {
100% { background-position: 100px 0px; }
}

#loader {  
z-index: 1;  
width: 50px;  
height: 50px;  
margin: 0 0 0 0;  
border: 6px solid #f3f3f3;  
border-radius: 50%;  
border-top: 6px solid #3498db;  
width: 50px;  
height: 50px;  
-webkit-animation: spin 2s linear infinite;  
animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
0%{ -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% {transform: rotate(360deg); }
}

#status {
font-size: 16px;
font-weight: normal;
}

#msgfmt {
font-size: 16px;  
font-weight: normal;
}

[neo305]

ok when I do the only problem I can see for now is it pushes all the icons up almost half a page. it goes from this to this when I add what you said from above

[neo305]

Maybe I am just pasting it in the wrong area?

[neo305]

Ok thanks I added all but body part. Flashing now. Cuz if I add body then I have 2 body and that’s why my page gets pushed up but if I leave it out then page looks the same how it should.

[neo305]

almost got it lol

[neo305]

That’s me adding what you said above and replacing the current body

[neo305]

Something is conflicted and stopping that blue from loading. Could it be Modal Content?

[neo305]

this is what it looks like when I only use what you said above. anyway to get my settings button back to green?

[stooged]

The simplest way is to rename your original custom css file to style2.css and change the html payload menu page to use style2.css make sure there is no "style.css" file on the storage and the internal css will be used for the admin menus.

[neo305]

The simplest way is to rename your original custom css file to style2.css and change the html payload menu page to use style2.css make sure there is no "style.css" file on the storage and the internal css will be used for the admin menus.

Yes!!!!!!!!! Thank You!!!!!!!!!!1 that was the easiest way lol while I have you can you tell me how fix all my errors please lol https://drive.google.com/file/d/1lpxOXfgqbSpGERGQwk46k0OGklP6vL6L/view?usp=sharing

[neo305]

The simplest way is to rename your original custom css file to style2.css and change the html payload menu page to use style2.css make sure there is no "style.css" file on the storage and the internal css will be used for the admin menus.

Ok spoke too soon. Do I have to edit anything else? Cuz it loaded your page and not mine in user guide.

[stooged]

you should not need to change anything but the css file name, you are leaving the original style.css to be used for the esp boards admin files and you use style2.css for your main payload menu.

the user guide will load index.html and if you have no index.html on the storage it will load the internal index.html page.

those errors/warnings you are getting are coming from a library in "C:\Users\laz30\Documents\Arduino\libraries\WiFi\"

it looks like it has issues so update it or remove it or just leave it if the esp board is working fine with wifi.

[neo305]

you should not need to change anything but the css file name, you are leaving the original style.css to be used for the esp boards admin files and you use style2.css for your main payload menu.

the user guide will load index.html and if you have no index.html on the storage it will load the internal index.html page.

those errors/warnings you are getting are coming from a library in "C:\Users\laz30\Documents\Arduino\libraries\WiFi"

it looks like it has issues so update it or remove it or just leave it if the esp board is working fine with wifi.

I know that’s all I did was change my file to Style2.css and now it won’t load my index page it loads yours.

[stooged]

If it is loading the internal index page then there is no index.html on the storage. It only loads the internal page when the index.html file is not found on the storage.

Check the filesystem and partition info and reflash your html to the board.

[neo305]

If it is loading the internal index page then there is no index.html on the storage. It only loads the internal page when the index.html file is not found on the storage.

Check the filesystem and partition info and reflash your html to the board.

All I know is it was all working before except for the admin page. Now nothing works.

[stooged]

set the filesystem to spiffs, it is the best option to use on low memory devices because it has less overhead for each file.

fatfs and littlefs were added because people asked for them but for the usage case of providing a simple webserver for the ps4 they offer no real benefit and consume more memory per file.

i only use spiffs on my board for my ps4.

the only real reason you would need to use the other file systems is if you are using directories within your hosts html files.

the issue you are having now is storage related, the esp board cannot find index.html in the storage so it is loading the data from progmem.

you will see in the code https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/ESP32_Server_900u.ino#L944 server.onNotFound([](AsyncWebServerRequest *request){

the server not found function is triggered when the file you are attempting to load is not in the storage.

it then checks the path and finds you are looking for index.html https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/ESP32_Server_900u.ino#L958

    if (path.endsWith("index.html") || path.endsWith("index.htm") || path.endsWith("/"))
    {
        AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", index_gz, sizeof(index_gz));
        response->addHeader("Content-Encoding", "gzip");
        request->send(response);
        return;
    }

and it sends the hard coded index_gz from the progmem

https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/Pages.h#L12

[neo305]

Awesome thanks I’ll give it a try

[neo305]

set the filesystem to spiffs, it is the best option to use on low memory devices because it has less overhead for each file.

fatfs and littlefs were added because people asked for them but for the usage case of providing a simple webserver for the ps4 they offer no real benefit and consume more memory per file.

i only use spiffs on my board for my ps4.

the only real reason you would need to use the other file systems is if you are using directories within your hosts html files.

the issue you are having now is storage related, the esp board cannot find index.html in the storage so it is loading the data from progmem.

you will see in the code https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/ESP32_Server_900u.ino#L944 server.onNotFound([](AsyncWebServerRequest *request){

the server not found function is triggered when the file you are attempting to load is not in the storage.

it then checks the path and finds you are looking for index.html https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/ESP32_Server_900u.ino#L958

    if (path.endsWith("index.html") || path.endsWith("index.htm") || path.endsWith("/"))
    {
        AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", index_gz, sizeof(index_gz));
        response->addHeader("Content-Encoding", "gzip");
        request->send(response);
        return;
    }

and it sends the hard coded index_gz from the progmem

https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/Pages.h#L12

here is what I get wh en I try Spiffs

[neo305]

set the filesystem to spiffs, it is the best option to use on low memory devices because it has less overhead for each file.

fatfs and littlefs were added because people asked for them but for the usage case of providing a simple webserver for the ps4 they offer no real benefit and consume more memory per file.

i only use spiffs on my board for my ps4.

the only real reason you would need to use the other file systems is if you are using directories within your hosts html files.

the issue you are having now is storage related, the esp board cannot find index.html in the storage so it is loading the data from progmem.

you will see in the code https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/ESP32_Server_900u.ino#L944 server.onNotFound([](AsyncWebServerRequest *request){

the server not found function is triggered when the file you are attempting to load is not in the storage.

it then checks the path and finds you are looking for index.html https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/ESP32_Server_900u.ino#L958

    if (path.endsWith("index.html") || path.endsWith("index.htm") || path.endsWith("/"))
    {
        AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", index_gz, sizeof(index_gz));
        response->addHeader("Content-Encoding", "gzip");
        request->send(response);
        return;
    }

and it sends the hard coded index_gz from the progmem

https://github.com/stooged/ESP32-Server-900u/blob/main/ESP32_Server_900u/Pages.h#L12

Do you have a S2 Mini? wanna see if you can get it all too work? https://drive.google.com/file/d/1OaEJLNWynRcS5HlVJM8_sM4nOtDac_DK/view?usp=sharing

[neo305]

Ok this is blowing my mind. So I got Spiffs to flash, but when I load admin page which looks good, I load file manager it says no files. And info show like 3mb free space. So wtf did it flash? So I upload all files. And everything works perfectly. Now my only problem is that I can’t create a bin file 😝

[stooged]

in the code you uploaded it has #define USEFAT true

if you set the partition in the board settings to spiffs and did not change that to false it will have issues

[neo305]

in the code you uploaded it has #define USEFAT true

if you set the partition in the board settings to spiffs and did not change that to false it will have issues

Right that was an old upload but I got spiffs to flash and yeah changed true and false but when I go to smashing page it says no files. So I upload them and everything works fine. So now my only problem is it won’t create a bin file after flash. Cuz there’s no files lol

[stooged]

index loaded for me and the admin page loaded

i did have to use the no ota 1mb app / 3mb spiffs partition because your files are 1.8mb in size you are including goldhen in your files so you should set int hen to false to free up used space #define INTHEN false

[stooged]

it also works fine using fatfs.

[neo305]

it also works fine using fatfs.

so you're saying this should work?

[neo305]

index loaded for me and the admin page loaded

i did have to use the no ota 1mb app / 3mb spiffs partition because your files are 1.8mb in size you are including goldhen in your files so you should set int hen to false to free up used space #define INTHEN false

Awesome thanks so much!!!!!! so....