Jump to content
[MUST READ] Forum Rules ×

Demo Hosting Account


Recommended Posts

Hello, SmallHost here with a suggestion! :)

I was thinking about how iFastNet has a feature where you could demo the iFastNet cPanel. I was wondering if something like that could be done for free hosting providers, so users can try before they sign up. Basically, there'd be a test account and people could try things out, but they can't access or change file stuff (as a security precaution). I was thinking about making a clone of the GUI and running it on a subdomain, however that would be a little complex to code.

What do you think?

Link to comment
Share on other sites

1 hour ago, BastelPichi2 said:

Maybe just create an Account with no disk, only one domain and no subdomains and then change the ns of the domain back so changes arent done? Of course an official implementation would be way cooler. Like the Idea!

I'll try that, however that would be bad from a security standpoint as anyone could change the password. The people using it could also point CNAME records as theres no way to regulate that.

Link to comment
Share on other sites

1 hour ago, BastelPichi2 said:

As I told, you can change the ns to something else so CNAME records dont take affect. For the rest, you can just remove the elements with some js. css would work, but the items would be still there. If you use js, they completely dissapear. The code infinityfree uses is here: https://vpassets.infinityfree.net/vp/cpanel-head.js. You could still change the password, thats true, by going to the files directly. Also you can replace any error messages like "too many domains" with "This is not allowed in demo mode.".

I made a new panel, but there's a HUGE bug. I sat all the resources to 0 and it looks like I have unlimited everything and 6 parked/addon/subdomains.

Screenshot-2021-12-22-084009.png

The script works and I'm trying to find out how it works so I can modify it to block pages like the file manager and databases.

Link to comment
Share on other sites

45 minutes ago, BastelPichi2 said:

So for the password, just make an form with the credentials in hidden fields. For the bandwith, I would set that to maximum, so teh account doesnt get suspended, and maybe one domain. Ill figure this out and get back when i have something working.

Good idea, however the security issue still stands. People can see a form's hidden values by going into the inspect element.

Thank you for helping find a solution! :) 

Link to comment
Share on other sites

31 minutes ago, smallhost said:

After poking around with the inspect element, I think I found a solution! I'll post it here if it works.

So, here's my version of the code...

if(void 0!==PAGE.appGroups){var itemsToRemove={preferences:[["feature","password"],["feature","setlang"],["feature","updatecontact"],["feature","user_manager"]],files:[["feature","diskusageviewer"],["feature","filemanager"],["feature","ftpaccts"]],databases:[["feature","phpmyadmin"],["feature","mysql"],["feature","postgres"]],domains:[["feature","addondomains"],["feature","subdomains"],["feature","parkeddomains"],["feature","redirects"]],email:[["feature","popaccts"],["feature","forwarders"],["feature","changemx"],["feature","zoneedit"],["feature","email_filters"]],metrics:[["feature","errlog"],["feature","rawlog"]],security:[["feature","sslmanager"],["feature","ipdeny"]],software:[["feature","sitereptile"],["feature","attracta_seotips"],["feature","cloudflare"],["feature","softaculous"],["feature","multiphp_configuration"]],advanced:[["feature","cron"],["feature","errpgs"]],support:[["file","createticket"],["file","ShowTickets"],["feature","ShowTickets"]]},itemsToUpdate={databases:[{matchAttr:["feature","phpmyadmin"],newAttributes:[["target",""]],stripAttrsFromUrl:!0}],software:[{matchAttr:["feature","multiphp_configuration"],newAttributes:[["target",""]],stripAttrsFromUrl:!0}],support:[{matchAttr:["feature","cloudflare_analytics"],newAttributes:[["url","https://smallhost.us.to"]]}]};for(h=PAGE.appGroups.length-1;h>=0;h--)if(appGroup=PAGE.appGroups[h],"soft_div"!==appGroup.group){var removeFromGroup=itemsToRemove[appGroup.group],updateInGroup=itemsToUpdate[appGroup.group];for(i=appGroup.items.length-1;i>=0;i--)appItem=appGroup.items[i],void 0!==removeFromGroup&&removeFromGroup.forEach(function(t){appItem[t[0]]===t[1]&&appGroup.items.splice(i,1)}),void 0!==updateInGroup&&updateInGroup.forEach(function(t){appItem[t.matchAttr[0]]===t.matchAttr[1]&&(t.newAttributes.forEach(function(t){appItem[t[0]]=t[1]}),t.stripAttrsFromUrl&&(urlParts=appItem.url.split(" "),appItem.url=urlParts[0]))})}else PAGE.appGroups.splice(h,1)}

It (is supposed to, the CDN I'm using is slow and I don't wanna get my acc suspended for hosting it on the free hosting) disables everything besides the...

  • Getting Started
  • Account Upgrades
  • Directory Privacy
  • Backups
  • Forwarders 
  • Select PHP Version

I'm looking into disabling the Getting Started (it links to the disabled pages, like FTP), Account Upgrades (although I'll probabally have to leave that there, don't want iFastNet to get mad at me) and Forwarders. I don't mind about Select PHP Version as the site is very generic and less than the 1MB limit of disk I sat for the demo account and doesn't use PHP (here's the site's code, its VERY basic).

<h1>SmallHost Demo cPanel</h1>

Now the problem...users can still access the file manager via FTP as all they need's the username and password to connect (which could be found if I sat it up like a form with hidden values).

On a positive note (since I typically don't code in JavaScript), I'm kinda proud of myself for getting this far. I'll keep poking around with things and see if I can find a solution.

Link to comment
Share on other sites

20 hours ago, BastelPichi2 said:

That seems a bit copied from InfinityFree...

Yes, I took InfinityFree's code that you linked and built off it to disable more features for the demo panel. I disabled the majority of the sensitive features that InfinityFree didn't disable (i.e. file manager, CNAME records). If I am to implement this into the client panel, I will provide full credits to InfinityFree for that code.

Edited by smallhost
Link to comment
Share on other sites

I came up with a solution!

Using inspect element, I got the HTML GUI for the cPanel. I then tore it down to the core, removing the majority of the scripts. After running into a bug where it was stuck on Loading (probably because I removed the majority of the scripts), I did a CTRL + F search for "Loading", found where the loading text was displaying and used that area as the body. Since the buttons weren't loading either, I decided to take a screenshot and use that. I use a JavaScript alert to let the user know when they click on a button that this is just a demo. It wouldn't load at all when I removed one of the scripts, but it contained a string named PAGE.securityToken. Changing it to "null" seemed to do the trick.

My version of the demo panel's live at https://smallhostdemo.us.to (planning on adding HTTPS to it) https://smallhostdemo.us.to (just added HTTPS!).

The code's here, feel free to use it! :)


<!DOCTYPE html>
<!--SmallHost cPanel Demo
(c)2021-Present smallhost.us.to, all rights reserved. Powered by ifastnet.com.
This is a demo version of the cPanel that SmallHost and other MOFH-based providers use.
MOFH-based providers are free to use this code (you're welcome!), but they have to change https://cpanel.smallhostdemo.us.to to their cPanel URL and https://smallhost.us.to/register.php with the registration page for their host.
Providing credit to SmallHost is reccomended, but not required.
Enjoy! ^w^-->
<html lang="english" dir="ltr" data-style="basic">
    <head>
        <title> </title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width">
        <meta name="theme-color" content="#293a4a">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-status-bar-style" content="default">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="default">
        <link rel="shortcut icon" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/home.master-ltr.cmb.min.css" />
 <link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/chosen.min.css" />
            <script type="text/javascript" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/js/master-legacy.cmb.min.js"></script>
            <script type="text/javascript" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/js/cjt-min.js?locale=en&locale_optional=1"></script>
<script type="text/javascript">
    PAGE.isRTL = document.getElementsByTagName("HTML")[0].getAttribute("dir") === "rtl";
    PAGE.currentTheme = "paper_lantern";
    PAGE.securityToken = "null";
    PAGE.userName = "smllh_XXXXXXXX";
    PAGE.domain = "smallhostdemo.us.to";
</script>
        <link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/icon_spritemap.css" />
        <link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/styles.css" />
    </head>
    <body id="cpanel_body" class="yui-skin-sam">

        <div id="wrap">
    <header id="masterAppContainer" ng-controller="applicationListController">
        <div class="navbar navbar-inverse navbar-cpanel navbar-fixed-top" role="navigation">
                <div class="navbar-header">
                    <button type="button" id="btnSideBarToggle" class="cp-nav-toggle">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="cp-icon-bar"></span>
                        <span class="cp-icon-bar"></span>
                        <span class="cp-icon-bar"></span>
                    </button>
                        <a id="lnkHeaderHome" class="navbar-brand" target="_top" href="#" title="Home">
                            <!--Your hosting provider's logo--><img id="imgLogo" class="navbar-brand-logo" src="https://images.hostmessage.info/login_logo/452e8662cb1a0ea1323df9b367429b7c.jpg" alt="" /><font style="vertical-align: sub;">
</font>
                        </a>
                    <script type="text/ng-template" id="customTemplate.html">
                      <a href="{{ match.model.url }}" ng-attr-target="{{match.model.target}}" ng-bind-html="match.model.name">
                      </a>
                    </script>
<div class="navbar-preferences form-inline">
                        <div class="btn-group">
                            <button id="btnUserPref" data-toggle="dropdown" class="btn dropdown-toggle user-preferences-btn">
                                <span id="userImg" class="glyphicon glyphicon-user"></span>
                                <span id="lblUserNameTxt" class="hidden-inline-xs">smllh_XXXXXXXX</span>
                                <span id="caretImg" class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">                                
                                <li>
                                </li>
                            </ul>
                        </div>
                        </a><a id="lnkHeaderLogout"  target="_top" href="https://smallhost.us.to/register.php" class="btn link-buttons">
                            <span id="logoutImg" class="glyphicon glyphicon-log-out"></span>
                            <span id="lblLogout" class="hidden-inline-xs">Join SmallHost</span>
                        </a>
                    </div>
                </div>
        </div>
<div id="include-global-header">
</div>
    </header>
    <aside id="sidebar">
        <!--Your hosting provider's registration link--><a id="lnkMenu" href="https://smallhost.us.to/register.php"
            title="Join SmallHost"
            class="active"
            data-toggle="tooltip"
            data-placement="right">
        </a>
        <!--Your hosting provider's registration link--><a id="null" href="https://smallhost.us.to/register.php"
            title="Join SmallHost"
   
            data-toggle="tooltip"
            data-placement="right">
            <img width=28px height=28px src="https://cpanel.smallhostdemo.us.to/panel/images/pl-sidebar-upgrade.png">
        </a>
</a>
<br><br>
    </aside>
    <div id="content" class="container-fluid">
    <div growl limit-messages="1"></div>
<div class="row">
    <div id="main" class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
        <div ng-controller="applicationListController">
    <div class="application-list-loading-indicator" ng-show="::false">
		<!--Put a screenshot of the buttons and stats sidebar here.--><img src="buttons.png" alt="buttons" onclick="alert('THIS IS A DEMO! For security purposes, you can not access features on this demo panel. If you like what you see and want to host a site on SmallHost, sign up!')">
	</div>
    </div>
    <div id="jump-search" class="ng-cloak">

    </div>
</div>
</div>
<!--If you use a WybeNetwork theme, add it BELOW this line. Dark theme is currently active.-->
<link rel="stylesheet" type="text/css" href="https://vpt.cdn.wybenetwork.com/dark/icon_spritemap.css" />
<link rel="stylesheet" type="text/css" href="https://vpt.cdn.wybenetwork.com/dark/styles.css" />
<!--If you use a WybeNetwork theme, add it ABOVE this line. Dark theme is currently active.-->
    <script data-main="app/index.dist" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/require.min.js"></script>
        </div>
<footer>
    <div class="container-fluid">
<br>
<div class="navbar">

                <a id="lnkPoweredByCpanel" href="https://www.cpanel.net" target="cpanel" title="cPanel, Inc." style="display:inline-block; z-index:XXXXXXX; visibility:visible;">
                    <img id="imgPoweredByCpanel" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/powered_by_cpanel.png" alt="cPanel, Inc." style="display:inline-block; z-index:XXXXXXX; visibility:visible;">
                </a>This is a modified version of the SmallHost cPanel so people can see what the cPanel looks like. Like what you see? Join SmallHost, it's free!
                <sub id="txtCpanelVersion" style="display:inline-block; z-index:XXXXXXX; visibility:visible;"></sub>
            </div>
        </div>
    </div>
</footer>
    </body>
</html>

 

Edited by smallhost
Link to comment
Share on other sites

21 hours ago, BastelPichi2 said:

I would hide the elements via css too, if a visitor doesnt has js.

Instead of using JS or CSS, the HTML I sent relies on a screenshot of the buttons instead of the buttons actually being there. When the buttons (screenshot) is clicked, it'll let the user know that they're just viewing the demo and they can't click the buttons. If they don't have JS, it simply will do nothing.

Link to comment
Share on other sites

  • 7 months later...
On 12/27/2021 at 10:16 PM, smallhost said:

I came up with a solution!

Using inspect element, I got the HTML GUI for the cPanel. I then tore it down to the core, removing the majority of the scripts. After running into a bug where it was stuck on Loading (probably because I removed the majority of the scripts), I did a CTRL + F search for "Loading", found where the loading text was displaying and used that area as the body. Since the buttons weren't loading either, I decided to take a screenshot and use that. I use a JavaScript alert to let the user know when they click on a button that this is just a demo. It wouldn't load at all when I removed one of the scripts, but it contained a string named PAGE.securityToken. Changing it to "null" seemed to do the trick.

My version of the demo panel's live at https://smallhostdemo.us.to (planning on adding HTTPS to it) https://smallhostdemo.us.to (just added HTTPS!).

The code's here, feel free to use it! :)


<!DOCTYPE html>
<!--SmallHost cPanel Demo
(c)2021-Present smallhost.us.to, all rights reserved. Powered by ifastnet.com.
This is a demo version of the cPanel that SmallHost and other MOFH-based providers use.
MOFH-based providers are free to use this code (you're welcome!), but they have to change https://cpanel.smallhostdemo.us.to to their cPanel URL and https://smallhost.us.to/register.php with the registration page for their host.
Providing credit to SmallHost is reccomended, but not required.
Enjoy! ^w^-->
<html lang="english" dir="ltr" data-style="basic">
    <head>
        <title> </title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width">
        <meta name="theme-color" content="#293a4a">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-status-bar-style" content="default">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="default">
        <link rel="shortcut icon" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/home.master-ltr.cmb.min.css" />
 <link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/chosen.min.css" />
            <script type="text/javascript" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/js/master-legacy.cmb.min.js"></script>
            <script type="text/javascript" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/js/cjt-min.js?locale=en&locale_optional=1"></script>
<script type="text/javascript">
    PAGE.isRTL = document.getElementsByTagName("HTML")[0].getAttribute("dir") === "rtl";
    PAGE.currentTheme = "paper_lantern";
    PAGE.securityToken = "null";
    PAGE.userName = "smllh_XXXXXXXX";
    PAGE.domain = "smallhostdemo.us.to";
</script>
        <link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/icon_spritemap.css" />
        <link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/styles.css" />
    </head>
    <body id="cpanel_body" class="yui-skin-sam">

        <div id="wrap">
    <header id="masterAppContainer" ng-controller="applicationListController">
        <div class="navbar navbar-inverse navbar-cpanel navbar-fixed-top" role="navigation">
                <div class="navbar-header">
                    <button type="button" id="btnSideBarToggle" class="cp-nav-toggle">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="cp-icon-bar"></span>
                        <span class="cp-icon-bar"></span>
                        <span class="cp-icon-bar"></span>
                    </button>
                        <a id="lnkHeaderHome" class="navbar-brand" target="_top" href="#" title="Home">
                            <!--Your hosting provider's logo--><img id="imgLogo" class="navbar-brand-logo" src="https://images.hostmessage.info/login_logo/452e8662cb1a0ea1323df9b367429b7c.jpg" alt="" /><font style="vertical-align: sub;">
</font>
                        </a>
                    <script type="text/ng-template" id="customTemplate.html">
                      <a href="{{ match.model.url }}" ng-attr-target="{{match.model.target}}" ng-bind-html="match.model.name">
                      </a>
                    </script>
<div class="navbar-preferences form-inline">
                        <div class="btn-group">
                            <button id="btnUserPref" data-toggle="dropdown" class="btn dropdown-toggle user-preferences-btn">
                                <span id="userImg" class="glyphicon glyphicon-user"></span>
                                <span id="lblUserNameTxt" class="hidden-inline-xs">smllh_XXXXXXXX</span>
                                <span id="caretImg" class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">                                
                                <li>
                                </li>
                            </ul>
                        </div>
                        </a><a id="lnkHeaderLogout"  target="_top" href="https://smallhost.us.to/register.php" class="btn link-buttons">
                            <span id="logoutImg" class="glyphicon glyphicon-log-out"></span>
                            <span id="lblLogout" class="hidden-inline-xs">Join SmallHost</span>
                        </a>
                    </div>
                </div>
        </div>
<div id="include-global-header">
</div>
    </header>
    <aside id="sidebar">
        <!--Your hosting provider's registration link--><a id="lnkMenu" href="https://smallhost.us.to/register.php"
            title="Join SmallHost"
            class="active"
            data-toggle="tooltip"
            data-placement="right">
        </a>
        <!--Your hosting provider's registration link--><a id="null" href="https://smallhost.us.to/register.php"
            title="Join SmallHost"
   
            data-toggle="tooltip"
            data-placement="right">
            <img width=28px height=28px src="https://cpanel.smallhostdemo.us.to/panel/images/pl-sidebar-upgrade.png">
        </a>
</a>
<br><br>
    </aside>
    <div id="content" class="container-fluid">
    <div growl limit-messages="1"></div>
<div class="row">
    <div id="main" class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
        <div ng-controller="applicationListController">
    <div class="application-list-loading-indicator" ng-show="::false">
		<!--Put a screenshot of the buttons and stats sidebar here.--><img src="buttons.png" alt="buttons" onclick="alert('THIS IS A DEMO! For security purposes, you can not access features on this demo panel. If you like what you see and want to host a site on SmallHost, sign up!')">
	</div>
    </div>
    <div id="jump-search" class="ng-cloak">

    </div>
</div>
</div>
<!--If you use a WybeNetwork theme, add it BELOW this line. Dark theme is currently active.-->
<link rel="stylesheet" type="text/css" href="https://vpt.cdn.wybenetwork.com/dark/icon_spritemap.css" />
<link rel="stylesheet" type="text/css" href="https://vpt.cdn.wybenetwork.com/dark/styles.css" />
<!--If you use a WybeNetwork theme, add it ABOVE this line. Dark theme is currently active.-->
    <script data-main="app/index.dist" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/require.min.js"></script>
        </div>
<footer>
    <div class="container-fluid">
<br>
<div class="navbar">

                <a id="lnkPoweredByCpanel" href="https://www.cpanel.net" target="cpanel" title="cPanel, Inc." style="display:inline-block; z-index:XXXXXXX; visibility:visible;">
                    <img id="imgPoweredByCpanel" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/powered_by_cpanel.png" alt="cPanel, Inc." style="display:inline-block; z-index:XXXXXXX; visibility:visible;">
                </a>This is a modified version of the SmallHost cPanel so people can see what the cPanel looks like. Like what you see? Join SmallHost, it's free!
                <sub id="txtCpanelVersion" style="display:inline-block; z-index:XXXXXXX; visibility:visible;"></sub>
            </div>
        </div>
    </div>
</footer>
    </body>
</html>

 

I hope you do not mind that I took your idea and decided to implement a demo without the need of a screenshot.

The code is available at https://github.com/WybeNetwork/VistaPanel-Demo, and a live working demo under pretty much the same terms, as well as our CDN, can be seen on vpd.cdn.wybenetwork.com. Feel free to use and customize it to your liking! More pages may be coming at a later date!

To @smallhost: If you feel I haven't credited you properly, let me know to update that.

Link to comment
Share on other sites

9 hours ago, Anyx said:
On 12/27/2021 at 3:16 PM, smallhost said:

I came up with a solution!

Using inspect element, I got the HTML GUI for the cPanel. I then tore it down to the core, removing the majority of the scripts. After running into a bug where it was stuck on Loading (probably because I removed the majority of the scripts), I did a CTRL + F search for "Loading", found where the loading text was displaying and used that area as the body. Since the buttons weren't loading either, I decided to take a screenshot and use that. I use a JavaScript alert to let the user know when they click on a button that this is just a demo. It wouldn't load at all when I removed one of the scripts, but it contained a string named PAGE.securityToken. Changing it to "null" seemed to do the trick.

My version of the demo panel's live at https://smallhostdemo.us.to (planning on adding HTTPS to it) https://smallhostdemo.us.to (just added HTTPS!).

The code's here, feel free to use it! :)


<!DOCTYPE html>
<!--SmallHost cPanel Demo
(c)2021-Present smallhost.us.to, all rights reserved. Powered by ifastnet.com.
This is a demo version of the cPanel that SmallHost and other MOFH-based providers use.
MOFH-based providers are free to use this code (you're welcome!), but they have to change https://cpanel.smallhostdemo.us.to to their cPanel URL and https://smallhost.us.to/register.php with the registration page for their host.
Providing credit to SmallHost is reccomended, but not required.
Enjoy! ^w^-->
<html lang="english" dir="ltr" data-style="basic">
    <head>
        <title> </title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width">
        <meta name="theme-color" content="#293a4a">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-status-bar-style" content="default">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="default">
        <link rel="shortcut icon" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/home.master-ltr.cmb.min.css" />
 <link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/chosen.min.css" />
            <script type="text/javascript" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/js/master-legacy.cmb.min.js"></script>
            <script type="text/javascript" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/js/cjt-min.js?locale=en&locale_optional=1"></script>
<script type="text/javascript">
    PAGE.isRTL = document.getElementsByTagName("HTML")[0].getAttribute("dir") === "rtl";
    PAGE.currentTheme = "paper_lantern";
    PAGE.securityToken = "null";
    PAGE.userName = "smllh_XXXXXXXX";
    PAGE.domain = "smallhostdemo.us.to";
</script>
        <link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/icon_spritemap.css" />
        <link rel="stylesheet" type="text/css" href="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/styles.css" />
    </head>
    <body id="cpanel_body" class="yui-skin-sam">

        <div id="wrap">
    <header id="masterAppContainer" ng-controller="applicationListController">
        <div class="navbar navbar-inverse navbar-cpanel navbar-fixed-top" role="navigation">
                <div class="navbar-header">
                    <button type="button" id="btnSideBarToggle" class="cp-nav-toggle">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="cp-icon-bar"></span>
                        <span class="cp-icon-bar"></span>
                        <span class="cp-icon-bar"></span>
                    </button>
                        <a id="lnkHeaderHome" class="navbar-brand" target="_top" href="#" title="Home">
                            <!--Your hosting provider's logo--><img id="imgLogo" class="navbar-brand-logo" src="https://images.hostmessage.info/login_logo/452e8662cb1a0ea1323df9b367429b7c.jpg" alt="" /><font style="vertical-align: sub;">
</font>
                        </a>
                    <script type="text/ng-template" id="customTemplate.html">
                      <a href="{{ match.model.url }}" ng-attr-target="{{match.model.target}}" ng-bind-html="match.model.name">
                      </a>
                    </script>
<div class="navbar-preferences form-inline">
                        <div class="btn-group">
                            <button id="btnUserPref" data-toggle="dropdown" class="btn dropdown-toggle user-preferences-btn">
                                <span id="userImg" class="glyphicon glyphicon-user"></span>
                                <span id="lblUserNameTxt" class="hidden-inline-xs">smllh_XXXXXXXX</span>
                                <span id="caretImg" class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">                                
                                <li>
                                </li>
                            </ul>
                        </div>
                        </a><a id="lnkHeaderLogout"  target="_top" href="https://smallhost.us.to/register.php" class="btn link-buttons">
                            <span id="logoutImg" class="glyphicon glyphicon-log-out"></span>
                            <span id="lblLogout" class="hidden-inline-xs">Join SmallHost</span>
                        </a>
                    </div>
                </div>
        </div>
<div id="include-global-header">
</div>
    </header>
    <aside id="sidebar">
        <!--Your hosting provider's registration link--><a id="lnkMenu" href="https://smallhost.us.to/register.php"
            title="Join SmallHost"
            class="active"
            data-toggle="tooltip"
            data-placement="right">
        </a>
        <!--Your hosting provider's registration link--><a id="null" href="https://smallhost.us.to/register.php"
            title="Join SmallHost"
   
            data-toggle="tooltip"
            data-placement="right">
            <img width=28px height=28px src="https://cpanel.smallhostdemo.us.to/panel/images/pl-sidebar-upgrade.png">
        </a>
</a>
<br><br>
    </aside>
    <div id="content" class="container-fluid">
    <div growl limit-messages="1"></div>
<div class="row">
    <div id="main" class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
        <div ng-controller="applicationListController">
    <div class="application-list-loading-indicator" ng-show="::false">
		<!--Put a screenshot of the buttons and stats sidebar here.--><img src="buttons.png" alt="buttons" onclick="alert('THIS IS A DEMO! For security purposes, you can not access features on this demo panel. If you like what you see and want to host a site on SmallHost, sign up!')">
	</div>
    </div>
    <div id="jump-search" class="ng-cloak">

    </div>
</div>
</div>
<!--If you use a WybeNetwork theme, add it BELOW this line. Dark theme is currently active.-->
<link rel="stylesheet" type="text/css" href="https://vpt.cdn.wybenetwork.com/dark/icon_spritemap.css" />
<link rel="stylesheet" type="text/css" href="https://vpt.cdn.wybenetwork.com/dark/styles.css" />
<!--If you use a WybeNetwork theme, add it ABOVE this line. Dark theme is currently active.-->
    <script data-main="app/index.dist" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/css/require.min.js"></script>
        </div>
<footer>
    <div class="container-fluid">
<br>
<div class="navbar">

                <a id="lnkPoweredByCpanel" href="https://www.cpanel.net" target="cpanel" title="cPanel, Inc." style="display:inline-block; z-index:XXXXXXX; visibility:visible;">
                    <img id="imgPoweredByCpanel" src="https://cpanel.smallhostdemo.us.to/panel/pl-res/powered_by_cpanel.png" alt="cPanel, Inc." style="display:inline-block; z-index:XXXXXXX; visibility:visible;">
                </a>This is a modified version of the SmallHost cPanel so people can see what the cPanel looks like. Like what you see? Join SmallHost, it's free!
                <sub id="txtCpanelVersion" style="display:inline-block; z-index:XXXXXXX; visibility:visible;"></sub>
            </div>
        </div>
    </div>
</footer>
    </body>
</html>

 

Expand  

I hope you do not mind that I took your idea and decided to implement a demo without the need of a screenshot.

The code is available at https://github.com/WybeNetwork/VistaPanel-Demo, and a live working demo under pretty much the same terms, as well as our CDN, can be seen on vpd.cdn.wybenetwork.com. Feel free to use and customize it to your liking! More pages may be coming at a later date!

To @smallhost: If you feel I haven't credited you properly, let me know to update that.

Looks great, I'm sure many people will benefit from this :)!

Link to comment
Share on other sites

On 8/18/2022 at 10:40 AM, Anyx said:

decided to implement a demo without the need of a screenshot.

Looks really cool! However it does not give the full 'experience' since only the main page can be viewed. Maybe a screenshot of the page can be added in the model instead of just a generic message? Also, the ability to re-arrange and close the tabs is missing, making the "-" symbol a bit misleading.

 

Other then that, I love it!

Link to comment
Share on other sites

On 8/19/2022 at 3:25 PM, BastelPichi said:

wow, amazing!

Thank you! 

13 hours ago, TinkerMan said:

it does not give the full 'experience' since only the main page can be viewed. Maybe a screenshot of the page can be added in the model instead of just a generic message?

I plan on adding the rest of the pages in the future, I'm currently away, but it is in the plans. 

13 hours ago, TinkerMan said:

Also, the ability to re-arrange and close the tabs is missing, making the "-" symbol a bit misleading.

Whoops, missed that. I'll see if I can activate it, or I'll remove it.

13 hours ago, TinkerMan said:

Other then that, I love it!

Nice to hear, thanks!

Link to comment
Share on other sites

  • 1 month later...
  • 4 weeks later...
On 8/18/2022 at 11:40 AM, Anyx said:

I hope you do not mind that I took your idea and decided to implement a demo without the need of a screenshot.

I don't mind at all! It works way better than my screenshot version. In fact, I'm using it for the SmallHost vPanel demo now: https://smallhost.us.to/try/vp/index.html

On 8/18/2022 at 11:40 AM, Anyx said:

To @smallhost: If you feel I haven't credited you properly, let me know to update that.

You credited me properly as per the license, thank you!

Edited by smallhost
Grammar
Link to comment
Share on other sites

SmallHost here with a small (but very useful) development!

Introducing: Customizable vPanel Demo!

Basically, I took the project, hosted it on SmallHost, made a very small PHP file and made it customizable with just the URL bar! So, if you don't want to host the demo yourself or use WybeNetwork's CDN but want to customize it, now you can!

Here's the key differences...

  • SEO Tools Works
  • Softaculous Works (Uses This DemoWhich I Took From iFastNet's Blog)
  • "Disabled In Demo Mode" Notification Encourages Users To Join Your Host

demopopup.jpg

It's hosted at...

Now, you may be asking, "How do I customize it?". Well, look no further than the URL bar! Here's the format (you can do it without customizing, but then it will show a SmallHost-branded demo)...

https://vpanel.fast-page.org/index.php?dom=[YOUR HOSTING PROVIDER WEBSITE]&pre=[5 CHARACTER PREFIX]&logo=[CUSTOM VPANEL LOGO]

Replace [YOUR HOSTING PROVIDER WEBSITE] with the website of your hosting provider (ex: smallhost.us.to), [5 CHARACTER PREFIX] with your 5-character username prefix (ex: smllh), and [CUSTOM VPANEL LOGO] with any image file to take the place of the logo (ex: https://vpanel.fast-page.org/elements/vplogo.png).

Now, you may be wondering, "How do I configure it for my host in particular?". Well, it's pretty simple!

  • Create a subdomain like vpanel, vpdemo or something.
  • In the file manager, make this the .htaccess file...
ErrorDocument 400 /index.php
ErrorDocument 401 /index.php
ErrorDocument 402 /index.php
ErrorDocument 403 /index.php
ErrorDocument 404 /index.php
ErrorDocument 503 /index.php
  • In the file manager, make this the index.php file, using the format above...
<?php
header("Location: https://vpanel.fast-page.org".$_SERVER[REQUEST_URI]."?dom=[YOUR HOSTING PROVIDER WEBSITE]&pre=[5 CHARACTER PREFIX]&logo=[CUSTOM VPANEL LOGO]");
die();
?>
  • Create a subdomain named mysql and do the steps above. I use mysql.(YOUR DOMAIN) as an example, and if someone else claims it they may use it maliciously.

To test it, go to (subdomain you created)/mysql.php. You should see a demo for the MySQL page, and when you click the logo it should take you to the dashboard. Now, share the custom subdomain you created! Ta-da, custom demo!

It won't be updated as frequently as the Github repo and you can't add themes or custom code, however it works! What do you think?

Edited by smallhost
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...