archive/theorangeone.net-legacy
Archived
1
Fork 0
Code Releases Packages Activity

Restyled no-js page

Browse source
This commit is contained in:
Jake Howard 2015-11-25 09:37:41 +00:00
parent 01a3bf1013
commit 2cd115c435
2 changed files with 37 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
static/src/less/style.less
View file

@ -105,3 +105,16 @@ footer {
} }
} }
/* @end 404 */ /* @end 404 */
/* @group no-js */
.no-js {
.header {
background-color: #232323;
color: white;
}
#ie-scare {
height: 150px;
float: right;
}
}
/* @end no-js*/

36
templates/core/no-js.html
View file

@ -1,20 +1,28 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load staticfiles %} {% load staticfiles %}
{% block htmltitle %}Javascript is Disabled!{% endblock %} {% block htmltitle %}Javascript is Disabled!{% endblock %}
{% block bodyClass %}no-js{% endblock %}
{% block content %} {% block content %}
<div class="jumbotron" style="background-image: url('{% static 'img/bg.png' %}'); background-attachment: fixed;"><div class="container"><h1>Javascript is disabled!</h1></div></div> <div class="jumbotron header">
<div class="container"> <div class="container">
<p>You appear to have javascript disabled. For my site to function properly, javascript must be enabled! The javascript is used to dynamically change the webpage on your device. Without them then the site will break, cause a tonne of errors, and not look right, all of which aren't very nice, for you or me. </p> <h1>You have Javascript is disabled!</h1>
<p>The javascript on this page won't damage your computer in any way, and has been written entirely by me, or has used trusted and open-source 3rd-party libraries. You can trust this site! Re-enabling the javascript functions inside your browser is very easy, and helpful tutorials can be found below!</p> </div>
</div>
<div class="container message">
<p>
You appear to have javascript disabled. For my site to function properly, javascript must be enabled! The javascript is used to dynamically change the webpage on your device. Without them then the site will break, cause a tonne of errors, and not look right, all of which aren't very nice, for you or me.
</p>
<p>
The javascript on this page won't damage your computer in any way, and has been written entirely by me, or has used trusted and open-source 3rd-party libraries. You can trust this site! Re-enabling the javascript functions inside your browser is very easy, and helpful tutorials can be found below!
</p>
</div> </div>
<div class="container"> <div class="container">
<h2>Re-enabling Javascript in your browser</h2> <h2>Re-enabling Javascript in your browser</h2>
<div class="panel-primary"> <div class="panel panel-primary" id="enable-firefox">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Re-enabling in Firefox</h3> <h3 class="panel-title">Re-enabling in Firefox</h3>
</div> </div>
<div class="panel-body panel black-text"> <div class="panel-body">
<ol> <ol>
<li>Navigate to 'about:config', using the browsers address bar.</li> <li>Navigate to 'about:config', using the browsers address bar.</li>
<li>Accept the security warning, and notice that no dragons lie ahead.</li> <li>Accept the security warning, and notice that no dragons lie ahead.</li>
@ -25,11 +33,11 @@
</div> </div>
</div> </div>
<div class="panel-success"> <div class="panel panel-success" id="enable-chrome">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Re-enabling in Chrome</h3> <h3 class="panel-title">Re-enabling in Chrome</h3>
</div> </div>
<div class="panel-body panel black-text"> <div class="panel-body">
<ol> <ol>
<li>Click the Chrome menu icon (<i class="icon ion-navicon-round"></i>) in the top right hand corder of the window.</li> <li>Click the Chrome menu icon (<i class="icon ion-navicon-round"></i>) in the top right hand corder of the window.</li>
<li>Click 'Settings'.</li> <li>Click 'Settings'.</li>
@ -39,12 +47,12 @@
</div> </div>
</div> </div>
<div class="panel-info"> <div class="panel panel-info" id="enable-ie">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Re-enabling in Internet Explorer</h3> <h3 class="panel-title">Re-enabling in Internet Explorer</h3>
</div> </div>
<img src="{% static 'img/IE-scare.png' %}" height="200px" style="float: right;"/> <div class="panel-body">
<div class="panel-body panel black-text"> <img src="{% static 'img/IE-scare.png' %}" id="ie-scare"/>
<ol> <ol>
<li>Select the gear icon in the top right hand corner <i class="icon ion-ios-gear"></i>, and click 'Internet Options'.</li> <li>Select the gear icon in the top right hand corner <i class="icon ion-ios-gear"></i>, and click 'Internet Options'.</li>
<li>Select Security > Internet > Custom Level.</li> <li>Select Security > Internet > Custom Level.</li>
@ -57,9 +65,9 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<p> <h5>
After enabling javascript, the page should automatically redirect to the homepage. If it doesn't, just refresh the page, or <a href="{% url 'pages:index'%}">Click here</a>. After enabling javascript, the page should automatically redirect to the homepage. If it doesn't, just refresh the page, or <a href="{% url 'pages:index'%}">Click here</a> to return home.
</p> </h5>
</div> </div>
<script>window.location.href=location.href.replace("{% url 'pages:no-js' %}", '');</script> <script>window.location.href=location.href.replace("{% url 'pages:no-js' %}", '');</script>
{% endblock%} {% endblock%}