In this article you will find information on how redirect all traffic and all site visitors to the maintenance information page while the site is being updated.

I'll show you how create a placeholder page with information about the work being carried out, How put the site into maintenance mode and how to return it online without restarting Apache.

You will find out how redirect traffic virtual host Apache to stub page using as config VirtualHost, so .HTAccess file.

Creating a Placeholder Page

First of all, you need to create 2 files in the site root (document root):

Create a page maintenance.html, to which visitors will be redirected and which will inform them that the site is under maintenance.

As an example, you can use the following HTML code stub pages(demo):

Website Closed for Maintenance

We apologize for the inconvenience, but this moment The site is undergoing maintenance.

We'll be back online soon!

In the site root (document root) create empty file With name maintenance.enable.

We will use it for TURNING ON and OFF the stub without restarting Apache.

We will configure Apache so that when a file is found maintenance.enable in the root of the site, the mode will be turned on Maintenance and all site visitors will be redirected to a stub page. Otherwise (file maintenance.enable missing) the site will operate normally.

Thus, if we need enable site redirect during maintenance, we create an empty file maintenance.enable.

And when we need return the site online after maintenance, we will simply delete the file maintenance.enable.

Redirect Apache Vhost to Stub Page

Add the following rules to your Vhost config ( Apache VirtualHost) For redirect all site visitors to a stub page:

RewriteEngine On RewriteCond %(REMOTE_ADDR) !^123\.456\.789\.000 RewriteCond %(DOCUMENT_ROOT)/maintenance.html -f RewriteCond %(DOCUMENT_ROOT)/maintenance.enable -f RewriteCond %(SCRIPT_FILENAME) !maintenance.html RewriteRule ^.*$ /maintenance.html ErrorDocument 503 /maintenance.html Header Set Cache-Control "max-age=0, no-store"

Restart Apache for the changes to take effect:

# apachectl graceful

Now you can TURN ON and OFF the site maintenance mode using the file maintenance.enable without restarting Apache every time.

Redirect to a Stub Page using HTAccess

For redirecting all visitors to a stub page, place the following code in .htaccess file located at the root of the site:

This piece must be inserted before all other redirects and states.

RewriteEngine On RewriteCond %(REMOTE_ADDR) !^123\.456\.789\.000 RewriteCond %(DOCUMENT_ROOT)/maintenance.html -f RewriteCond %(DOCUMENT_ROOT)/maintenance.enable -f RewriteCond %(SCRIPT_FILENAME) !maintenance.html RewriteRule ^.*$ /maintenance.html ErrorDocument 503 /maintenance.html Header Set Cache-Control "max-age=0, no-store"

Explanation

1. Turn on Rewrite Engine.

RewriteEngine On

2. (optional) Exclude your IP address. Use this directive to avoid redirecting traffic from the specified IP address to maintenance.html.

RewriteCond %(REMOTE_ADDR) !^123\.456\.789\.000

You can specify multiple IP addresses:

RewriteCond %(REMOTE_ADDR) !^192\.168\.0\.1 RewriteCond %(REMOTE_ADDR) !^192\.168\.1\.100 RewriteCond %(REMOTE_ADDR) !^172\.16\.10\. 15

3. Make sure that maintenance.html exists.

RewriteCond %(DOCUMENT_ROOT)/maintenance.html -f

4. Check the existence of the maintenance.enable file (with this check we turn on and off the maintenance mode).

RewriteCond %(DOCUMENT_ROOT)/maintenance.enable -f

5. We need this rule to prevent looping.

RewriteCond %(SCRIPT_FILENAME) !maintenance.html

6. Actually the 503rd redirect to the stub page.

RewriteRule ^.*$ /maintenance.html ErrorDocument 503 /maintenance.html

503 Service Unavailable— HTTP status code, meaning that the server is temporarily unable to process requests via technical reasons(maintenance, overload, etc.).

7. Turn off caching.

Header Set Cache-Control "max-age=0, no-store"

You flip through web pages this way, opening the most popular ones. With a fast and reliable Internet connection, you are confident that you can open any website right away. And suddenly you come across him. To a site that does not open due to technical reasons that require elimination. It's annoying, isn't it? Visitor/user - of course. But for the owner of this website, the situation is much more complicated. Capable of causing any trouble. You can lose subscribers and, of course, reduce the profitability of the resource. Such accidents cannot be avoided, but it is impossible to prevent them. However, there are things that web page owners can do to ensure that their visitors and subscribers continue to have access to information about the progress of their site restoration.

Templates for online pages preparing for launch and undergoing reconstruction are very useful things that help keep visitors and subscribers on the site, despite technical problems and protracted restoration work. In addition, truly original or bold design solutions can also prolong the patience of your visitors.

Today, we're offering website owners and designers a selection of 50 neat, pre-launch and refurbishment page templates to help protect them against website crashes and other mishaps. All listed templates paid, but they are quite inexpensive. Feel free to browse this great list and try out samples in action.

Peculiarities:
Six different color options to choose from
Newsletter Subscription Form
jQuery form labels
Well-formatted PSD files make editing a breeze

Peculiarities:
Two color schemes to choose from
jQuery time counter before start
Subscribe to email newsletters through the FeedBurner service
Ability to connect to a social network

Peculiarities:
4 color options
Subscription form with confirmation field and PHP
Animated display of the degree of readiness showing it as a percentage
Valid XHTML + CSS3 markup

Peculiarities:
AJAX email subscription form
6 color options
Based on the frame of the modular grid 960 Grid System
Passed XHTML validation according to the intermediate version 1 .0 standard

Peculiarities:
Easy to adapt time counter until start
Connecting Twitter newsletters
Three different color options

Peculiarities:
Animated jQuery time counter + readiness display
Automatic output of text help about the degree of readiness as a percentage
Text summary file with subscriber data (NO DATABASE NEEDED)
Fully functional AJAX form feedback+ validation

Peculiarities:
Compatible browsers: FireFox 2, FireFox 3, IE6, IE7, IE8, Opera, Safari
Sticky markup
Contained files: CSS files, HTML files, JPG image, JS files, PSD (layered), PHP files
PSD file included

Peculiarities:
Scroll area built using jQuery, for adding, if necessary, large amounts of text
Easy to edit HTML encoding complete with convenient documentation file
PSD file included
A neat animated slider showing project progress (e.g. 50% complete)

Peculiarities:
High-quality XHTML and CSS encoding with amendments for IE6 and 7, ensuring its functionality in all modern browsers
3 color schemes – grey/blue/red
Ajax form “Email updates”
Complete PDF documentation and instructions

Peculiarities:
Reliable HTML encoding
Contained files: CSS files, HTML files, JS files, PSD (layered), PHP files
PSD file included

Peculiarities:
Tableless CSS layout
Cross-browser compatibility and visual appeal
Speed ​​and ease of installation
Autoresponder based on Ajax

Peculiarities:
6 color schemes(clove, matte blue, pale green, deep orange, purple and dry grass colors)
Detailed layered Photoshop document
Universal time counter until your website launches
Connect to Twitter to share your latest notes

Peculiarities:
Supports major browsers: Firefox, IE6, 7, 8, Safari 3, 4, Chrome, Opera 9, 10
High-quality XHTML markup according to the intermediate version 1 .0/CSS standard
Pie chart with values ​​from 0 to 100% with 10% divisions, easy to use. Contains a fully layered PSD file
(the download link for the free font is in the documentation)

Peculiarities:
HTML 5 + CSS3
Fully functional AJAX email subscription form - database on MySql based need not
Changing fonts using the CUFON method
A range of recognition programs for mobile browsers to choose from

Peculiarities:
Compatible browsers: FireFox 2, FireFox 3, IE6, IE7, IE8, Safari
Clarity in design
PSD file included
Sticky markup

Peculiarities:
Layered PSD files
Compatible browsers: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE6, IE7, IE8, Opera, Safari
Contained files: CSS files, HTML files, JPG image, JS files, PNG (layered), PSD (layered), PHP files
PSD file included

Peculiarities:
High-quality XHTML and CSS markup that has been checked for correctness and W3C validation...
jQuery counter
Built-in PHP mail program for sending emails
Free Cufon font

Peculiarities:
7 options color scheme: blue, green, yellow, red, violet, gray, iridescent
jQuery counter (with smooth transitions)
AJAX/PHP feedback form
Great built-in Twitter messaging mechanism

Peculiarities:
Fully functional, valid PHP/Ajax feedback form
Four different color options
Display days, hours, minutes and even seconds remaining until launch

Peculiarities:
XHTML 1.0 intermediate version
Readiness scale display
Counter-timer
Layered PSD file included

Peculiarities:
Readiness display with javascript animation
Ajax registration form for receiving updates (easily deleted)
The template is strictly certified according to version 1.0 of the XHTML standard
Displaying the start date of a resource

Peculiarities:
Customizable jQuery counter and readiness display
Connect to social networks
Saving email addresses in the database MySQL data and in XML file
Customize the title area and content window

Peculiarities:
Contains a good documentation package
Contains PSD files
Counter program with animation
Possibility to use your own fonts for free

Peculiarities:
Powered by jQuery
The current function of accepting applications for newsletter distribution
Contains PHP/MySQL files
Change pages smoothly ( Homepage, "About us", "Feedback")

Peculiarities:
Valid XHTML/CSS template
jQuery counter built software
Modern and distinct design
Chapter latest updates site

Peculiarities:
Fully functional PHP/Ajax contact form with confirmation field - just enter your email address!
Custom designed counter
Moving scale display of the degree of readiness
The function of fluent editing of Photoshop files for their easiest adaptation

Peculiarities:
Distinctive and modern exterior design with simulated volumetricity
The current function of accepting PHP/Ajax requests for sending updates by email through a form with a confirmation field
PSD files, layered in Photoshop
High-quality XHTML and CSS markup

Peculiarities:
Icons social networks
Twitter connection with display of the latest note
Cross-browser HTML markup
Layered PSD file

Peculiarities:
Ajax feedback and registration forms
Both Ajax forms are our popular iPhorms, which cost $6 individually! Valid HTML 5 markup included for free
Compatible with all major browsers
Possibility of multilingual text formatting in UTF-8

Peculiarities:
Valid XHTML and CSS markup
Styled jQuery counter
Ajax/PHP email subscription form (without reopening the page)
jQuery fixer for PNG files in IE6

Peculiarities:
Supports all major browsers: Firefox, IE6/7/8, Safari 3/4, Chrome, Opera 9/10
Valid XHTML markup according to Interim 1.0 standard
Changing fonts using the CUFON method
Possibility of combining social network icons in the design theme

Peculiarities:
Valid AJAX feedback form
Displaying pictures in a window simulating Macbook Pro or iMac
Macbook Pro and iMac layered - http://images.naldzgraphics.net/2011/01 - contained in the PSD file
Easy to adapt counter-timer - dark and light options

Peculiarities:
Static version and Flash version
Valid XHTML markup
A simple counter program
Compatible browsers: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari

Peculiarities:
Fully functional AJAX (jQuery) newsletter subscription form
jQuery counter/timer and readiness display
Program for correcting PNG files for IE6
Valid (strictly 4.01), cross-browser HTML and CSS markup

Peculiarities:
jQuery counter set for any date
Contains a PHP/AJAX form
jQuery animation of social media icons
4 color options

Peculiarities:
HTML and WordPress versions
Detailed supporting documentation for both WordPress and HTML versions
Newsletter subscription form
Easy-to-adapt layered PSD files with markings

Peculiarities:
Easy to adapt jQuery counter/timer
Ultra-fine readiness display with a beautiful text box containing explanations
Contains a set of social network icons
Well-crafted PSD file

JQuery programmatic counter
Peculiarities:
Fixed layout 900 pixels
Working contact form
Compatible browsers: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera
Contained files: CSS, HTML, JPG, JS, PSD sorted by layers, PHP

Peculiarities:
Completely ready-made code (HTML, CSS, jQUERY, PHP, AJAX)
Fully working ajax contact form
Unique icons optimized for black and light backgrounds
Working countdown in jQuery

Peculiarities:
Counter in jQuery
jQuery Content Slider
Built-in working contact form
Lightweight HTML version

Peculiarities:
Extensibility with jQuery
Countdown plugin
Social icons and tips
Separate layers in PSD

A beautiful website remains in the visitor’s memory for a very long time, and this is undoubtedly wonderful. Today we would like to talk about a wonderful plug for your site, namely an interactive animated page that will constantly be in motion, in addition to responding to the mouse cursor and performing actions. The idea is to create a land and an airplane that will constantly be in gliding; when the cursor moves, the airplane will change its position. This kind of interactive looks very cool and pleasant.

SOURCES

This page can be used as a website background, a page with a small text message, or a placeholder on a page; in any case, you can’t go wrong. This effect is achieved thanks to the jQuery-Three.js 3D library.

Step 1. HTML

Our markup and styles will be quite simple, since Three.js will do all the work, and the parameters that we specified in JS, all we have to do is call these functions by assigning id="world":

The styles are also quite simple, so we won’t dwell on them and move straight to the next step.

Step 2. JS

All event processing will be performed by JS and Three.js. To implement such a layout, we set the following values ​​for the looping, random event.

Var Colors = ( red: 0xf25346, yellow: 0xedeb27, white: 0xd8d0d1, brown: 0x59332e, pink: 0xF5986E, brownDark: 0x23190f, blue: 0x68c3c0, green: 0x458248, purple: 0x551A8B, lightgreen: 0x629 265, ); var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container; function createScene() ( // Get the width and height of the screen // and use them to adjust the // camera aspect ratio and renderer size. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Create the scene. scene = new THREE .Scene(); // Add a FOV fog effect to the scene. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Create a camera aspectRatio = WIDTH / HEIGHT; fieldOfView = 60; nearPlane = 1; farPlane = 10000; camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); // Camera position camera.position.x = 0; camera.position.y = 150; camera.position.z = 100; // Create a renderer renderer = new THREE.WebGLRenderer(( // Make the background transparent, anti-aliasing performance alpha: true, antialias: true )); // set the renderer size to full screen renderer.setSize(WIDTH, HEIGHT); // enable shadow rendering renderer .shadowMap.enabled = true;//Add Renderer to DOM and DIV events container = document.getElementById("world"); container.appendChild(renderer.domElement); //Responsiveness window.addEventListener("resize", handleWindowResize, false); ) //Responsiveness of functions function handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) var hemispshereLight, shadowLight ; function createLights() ( // Color gradient light sky, ground, intensity hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Parallel rays shadowLight = new THREE.DirectionalLight(0xffffff, .9); shadowLight.position. set(0, 350, 350); shadowLight.castShadow = true; // define the visible area of ​​the projected shadow shadowLight.shadow.camera.left = -650; shadowLight.shadow.camera.right = 650; shadowLight.shadow.camera.top = 650; shadowLight.shadow.camera.bottom = -650; shadowLight.shadow.camera.near = 1; shadowLight.shadow.camera.far = 1000; // Shadow map size shadowLight.shadow.mapSize.width = 2048; shadowLight .shadow.mapSize.height = 2048; // Add lights to the scene scene.add(hemisphereLight); scene.add(shadowLight); ) Land = function() ( var geom = new THREE. CylinderGeometry(600, 600, 1700, 40, 10); //rotation along the x axis geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //create a material var mat = new THREE.MeshPhongMaterial(( color: Colors.lightgreen, shading: THREE.FlatShading, )); //create a mesh of the object this.mesh = new THREE.Mesh(geom, mat); //receive shadows this.mesh.receiveShadow = true; ) Orbit = function() ( var geom = new THREE.Object3D(); this.mesh = geom; //this.mesh.add(Sun); ) Sun = function() ( this.mesh = new THREE.Object3D( ); var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial(( color: Colors.yellow, shading: THREE.FlatShading, )); var sun = new THREE.Mesh(sunGeom , sunMat); sun.castShadow = false; sun.receiveShadow = false; this.mesh.add(sun); ) Cloud = function() ( // Create an empty container for the cloud this.mesh = new THREE.Object3D(); // Cube geometry and material var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(( color: Colors.white, )); var nBlocs = 3 + Math.floor(Math.random( ) * 3); for (var i = 0; i

As a result, we get a wonderful site plugin with responsiveness and adaptability.

A stub is a page that is placed on a site when it is unavailable for one reason or another. For example, when you are finalizing or changing the design of the site and at this time it is unavailable or is displayed somehow incorrectly. It would be advisable to put up a stub page at this time, on which it will be written that the site is under maintenance.

So let's get started...

We will make a simple placeholder with a background image and text that .

Let's create a folder on the computer in which we will place all the necessary files for our stub.

In this folder we will create another folder with the name images. In it we will place our background image and, possibly, other images that may be needed during the work.

Open the Notepad++ program (or a similar one, for example Notepad). Let's create a new document. Next - File - Save As, select our folder with a stub and save the document with the name index.html

This is what should now be in our folder:

Open the file index.html in our editor (after saving it should be open for you). Now we need to make sure that the encoding of this file is set correctly. To do this, go to the “Encodings” menu item and click on “Convert to UTF-8″

In order not to accidentally lose the achieved result while working, I recommend periodically saving the document while working. This can be done in the "File" menu or with the keyboard shortcut "Ctrl + S".

We write the following code in the editor:

Any web page consists of these tags.

Now let’s add a title to our page, because it won’t be very nice when someone opens it and sees index.html in the title of the browser tab (you can open the page in the browser and see what happens). For this purpose between And let's add the following code:

Background picture

Now let's select a background image for our placeholder, and then return to editing the page.

To do this, go to Google Images and look for an interesting picture that could serve as a background for our page. It is important to select an image with a width of at least 1920 pixels so that big screens our page looked good. I entered into the search bar and selected one of the pictures.

Open the picture in full size and save it to your folder images. Then we rename it. Let's call her bg(don’t forget about the image format, in my case it’s jpg).

Here's what I picked up. This is a photo of the city of Chicago. In my opinion, it is quite suitable for the background image of the site.

We attach background image to the page, for this we use CSS styles:

The text will consist of a title and, in fact, a paragraph of text.

Here's what happened:

Now we will add our contacts so that visitors can contact us immediately, and not wait until the work on the site is completed.

Let's add 3 blocks containing the phone, Email and Skype.

All that remains is to work with the styles.

Let's enlarge the title, align it to the center and lower it closer to the center of the screen.

Let's increase the font of the text paragraph to twenty pixels and make a small indent from the heading. We will also make a border at the bottom of the text, which will separate it from the contacts.

Let's make blocks with contacts in 3 columns, increase the font, align each block to the center and change the text color.

As a result, we have a placeholder page that we can use when the site is undergoing technical work.