A cool HTML5 "Closed Protection" 404 page

极客人 4 years ago (2015-12-18) Algorithm language | First to comment 2

post score 0 times, average 0.0 ：

[Slideup] Catalog

Create the following content index.php to achieve the entire station 404
Preview

Website's overnight keyword dropped to 0

Wang Baiyuan’s blog was suspected to be lost by Baidu’s search K. Since the last month of the 17th, the number of keywords has been decreasing. Until this month, the number of keywords has dropped to 0. Yesterday it even passed the keywords “Wang Baiyuan’s blog” and “Wang Baiyuan”. The website is not in the top 5 or even can't search my website. The reason for the preliminary judgment may be that www.wangbaiyuan.cn that I analyzed last month went to this website. I did not implement 301 redirect to wangbaiyuan.cn because of negligence, leading Baidu to think that My site is mirrored.Before I found the exact reason, I decided to use the Baidu webmaster platform to take a closed-end protection to prevent unknown reasons from further impact on the website SEO. During the closed protection application period, Baidu requested that the protected website be out of reach: the full station HTTP status code is set to 404, or the server will be shut down.The method of not analyzing the domain name cannot pass the closed-end protection audit.Therefore, if the virtual host user cannot cut off the power of the server, the whole station 404 can be used to apply for closed-end protection.

Create the following content index.php to achieve the entire station 404

You can rename the original index.php file of the original root directory and create a new index.php file as follows:

<?
@header("http/1.1 404 not found"); 
@header("status: 404 not found"); 
?>


<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Closed station protection...</title>

</head>

<body>

<!--
Recreating Apple Watch's Utility face <http://www.apple.com/watch/design/> in HTML+CSS+JS
-->



<style>
    Body {
        Background;
    }

    .clock {
        Position: absolute;
        Opacity: 1;
    }

    .fill .clock {
        Left: 50%;
        Top: 50%;
    }

    .centre {
        Position: absolute;
        Top: 50%;
        Left: 50%;
        Width: 0;
        Height: 0;
    }

    .expand {
        Position: absolute;
        Top: 0;
        Left: 0;
        Transform: translate(-50%, -50%);
    }

    .anchor {
        Position: absolute;
        Top: 0;
        Left: 0;
        Width: 0;
        Height: 0;
    }

    .element {
        Position: absolute;
        Top: 0;
        Left: 0;
    }

    .round {
        Border-radius: 296px;
    }

    .circle-1 {
        Background;
        Width: 12px;
        Height: 12px;
    }

    .circle-2 {
        Background: #FA9F22;
        Width: 8px;
        Height: 8px;
    }

    .circle-3 {
        Background;
        Width: 4px;
        Height: 4px;
    }

    .second {
        Transform: rotate(180deg);
    }

    .minute {
        Transform: rotate(54deg);
    }

    .second-hand {
        Width: 2px;
        Height: 164px;
        Background: #FA9F22;
        Transform: translate(-50%,-100%) translateY(24px);
    }

    .hour {
        Transform: rotate(304.5deg);
    }

    .thin-hand {
        Width: 4px;
        Height: 50px;
        Background;
        Transform: translate(-50%,-100%);
    }

    .fat-hand {
        Width: 10px;
        Height: 57px;
        Border-radius: 10px;
        Background;
        Transform: translate(-50%,-100%) translateY(-18px);
    }

    .minute-hand {
        Height: 112px;
    }

    .hour-text {
        Position: absolute;
        Font: 40px Hei, Helvetica, Arial, sans-serif;
        Color: white;
        Transform: translate(-50%,-50%);
    }

    .hour-10 {
        Padding-left: 0.4ex;
    }
    .hour-11 {
        Padding-left: 0.25ex;
    }

    .minute-text {
        Position: absolute;
        Font: 12px Avenir Next, Helvetica, Arial, sans-serif;
        Color: white;
        Transform: translate(-50%,-50%);
    }

    .minute-line {
        Background;
        Width: 1px;
        Height: 9px;
        Transform: translate(-50%,-100%) translateY(-131px);
        Opacity: 0.34;
    }
</style>
<h1 style="color:white"> Wang Boyuan's blog is under close protection...</h1>
<div class="fill">
    <div class="reference"></div>
    <div class="clock" id="utility-clock">
        <div class="centre">
            <div class="dynamic"></div>
            <div class="expand round circle-1"></div>
            <div class="anchor hour">
                <div class="element thin-hand"></div>
                <div class="element fat-hand"></div>
            </div>
            <div class="anchor minute">
                <div class="element thin-hand"></div>
                <div class="element fat-hand minute-hand"></div>
            </div>
            <div class="anchor second">
                <div class="element second-hand"></div>
            </div>
            <div class="expand round circle-2"></div>
            <div class="expand round circle-3"></div>
        </div>
    </div>
</div>

<script>
    Var clock = document.querySelector('#utility-clock')
    utilityClock(clock)

    If (clock.parentNode.classList.contains('fill')) autoResize(clock, 295 + 32)

    Function utilityClock(container) {
        Var dynamic = container.querySelector('.dynamic')
        Var hourElement = container.querySelector('.hour')
        Var minuteElement = container.querySelector('.minute')
        Var secondElement = container.querySelector('.second')
        Var minute = function(n) {
            Return n % 5 == 0 ? minuteText(n) : minuteLine(n)
        }
        Var minuteText = function(n) {
            Var element = document.createElement('div')
            element.className = 'minute-text'
            element.innerHTML = (n < 10 ? '0' : '') + n
            Position(element, n / 60, 135)
            dynamic.appendChild(element)
        }
        Var minuteLine = function(n) {
            Var anchor = document.createElement('div')
            anchor.className = 'anchor'
            Var element = document.createElement('div')
            element.className = 'element minute-line'
            Rotate(anchor, n)
            anchor.appendChild(element)
            dynamic.appendChild(anchor)
        }
        Var hour = function(n) {
            Var element = document.createElement('div')
            element.className = 'hour-text hour-' + n
            element.innerHTML = n
            Position(element, n / 12, 105)
            dynamic.appendChild(element)
        }
        Var position = function(element, phase, r) {
            Var theta = phase * 2 * Math.PI
            Element.style.top = (-r * Math.cos(theta)).toFixed(1) + 'px'
            Element.style.left = (r * Math.sin(theta)).toFixed(1) + 'px'
        }
        Var rotate = function(element, second) {
            Element.style.transform = element.style.webkitTransform = 'rotate(' + (second * 6) + 'deg)'
        }
        Var animate = function() {
            Var now = new Date()
            Var time = now.getHours() * 3600 +
                    now.getMinutes() * 60 +
                    now.getSeconds() * 1 +
                    now.getMilliseconds() / 1000
            Rotate(secondElement, time)
            Rotate(minuteElement, time / 60)
            Rotate(hourElement, time / 60 / 12)
            requestAnimationFrame(animate)
        }
        For (var i = 1; i <= 60; i ++) minute(i)
        For (var i = 1; i <= 12; i ++) hour(i)
        Animate()
    }

    Function autoResize(element, nativeSize) {
        Var update = function() {
            Var scale = Math.min(window.innerWidth, window.innerHeight) / nativeSize
            Element.style.transform = element.style.webkitTransform = 'scale(' + scale.toFixed(3) + ')'
        }
        Update()
        window.addEventListener('resize', update)
    }
</script>

</body>

</html>
<?
Exit(); 
?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

@header("http/1.1 404 not found");

@header("status: 404 not found");

<!DOCTYPE html>

<html>

<head>

<title>Closed station protection...</title>

</head>

<body>

<!--

Recreating Apple Watch's Utility face <http://www.apple.com/watch/design/> in HTML+CSS+JS

-->

<style>

Body {

Background;

}

.clock {

Position: absolute;

Opacity: 1;

}

.fill .clock {

Left: 50%;

Top: 50%;

}

.centre {

Position: absolute;

Top: 50%;

Left: 50%;

Width: 0;

Height: 0;

}

.expand {

Position: absolute;

Top: 0;

Left: 0;

Transform: translate(-50%, -50%);

}

.anchor {

Position: absolute;

Top: 0;

Left: 0;

Width: 0;

Height: 0;

}

.element {

Position: absolute;

Top: 0;

Left: 0;

}

.round {

Border-radius: 296px;

}

.circle-1 {

Background;

Width: 12px;

Height: 12px;

}

.circle-2 {

Background: #FA9F22;

Width: 8px;

Height: 8px;

}

.circle-3 {

Background;

Width: 4px;

Height: 4px;

}

.second {

Transform: rotate(180deg);

}

.minute {

Transform: rotate(54deg);

}

.second-hand {

Width: 2px;

Height: 164px;

Background: #FA9F22;

Transform: translate(-50%,-100%) translateY(24px);

}

.hour {

Transform: rotate(304.5deg);

}

.thin-hand {

Width: 4px;

Height: 50px;

Background;

Transform: translate(-50%,-100%);

}

.fat-hand {

Width: 10px;

Height: 57px;

Border-radius: 10px;

Background;

Transform: translate(-50%,-100%) translateY(-18px);

}

.minute-hand {

Height: 112px;

}

.hour-text {

Position: absolute;

Font: 40px Hei, Helvetica, Arial, sans-serif;

Color: white;

Transform: translate(-50%,-50%);

}

.hour-10 {

Padding-left: 0.4ex;

}

.hour-11 {

Padding-left: 0.25ex;

}

.minute-text {

Position: absolute;

Font: 12px Avenir Next, Helvetica, Arial, sans-serif;

Color: white;

Transform: translate(-50%,-50%);

}

.minute-line {

Background;

Width: 1px;

Height: 9px;

Transform: translate(-50%,-100%) translateY(-131px);

Opacity: 0.34;

}

</style>

<h1 style="color:white"> Wang Boyuan's blog is under close protection...</h1>

</div>

</div>

</div>

</div>

Var clock = document.querySelector('#utility-clock')

utilityClock(clock)

If (clock.parentNode.classList.contains('fill')) autoResize(clock, 295 + 32)

Function utilityClock(container) {

Var dynamic = container.querySelector('.dynamic')

Var hourElement = container.querySelector('.hour')

Var minuteElement = container.querySelector('.minute')

Var secondElement = container.querySelector('.second')

Var minute = function(n) {

Return n % 5 == 0 ? minuteText(n) : minuteLine(n)

}

Var minuteText = function(n) {

Var element = document.createElement('div')

element.className = 'minute-text'

element.innerHTML = (n < 10 ? '0' : '') + n

Position(element, n / 60, 135)

dynamic.appendChild(element)

}

Var minuteLine = function(n) {

Var anchor = document.createElement('div')

anchor.className = 'anchor'

Var element = document.createElement('div')

element.className = 'element minute-line'

Rotate(anchor, n)

anchor.appendChild(element)

dynamic.appendChild(anchor)

}

Var hour = function(n) {

Var element = document.createElement('div')

element.className = 'hour-text hour-' + n

element.innerHTML = n

Position(element, n / 12, 105)

dynamic.appendChild(element)

}

Var position = function(element, phase, r) {

Var theta = phase * 2 * Math.PI

Element.style.top = (-r * Math.cos(theta)).toFixed(1) + 'px'

Element.style.left = (r * Math.sin(theta)).toFixed(1) + 'px'

}

Var rotate = function(element, second) {

Element.style.transform = element.style.webkitTransform = 'rotate(' + (second * 6) + 'deg)'

}

Var animate = function() {

Var now = new Date()

Var time = now.getHours() * 3600 +

now.getMinutes() * 60 +

now.getSeconds() * 1 +

now.getMilliseconds() / 1000

Rotate(secondElement, time)

Rotate(minuteElement, time / 60)

Rotate(hourElement, time / 60 / 12)

requestAnimationFrame(animate)

}

For (var i = 1; i <= 60; i ++) minute(i)

For (var i = 1; i <= 12; i ++) hour(i)

Animate()

}

Function autoResize(element, nativeSize) {

Var update = function() {

Var scale = Math.min(window.innerWidth, window.innerHeight) / nativeSize

Element.style.transform = element.style.webkitTransform = 'scale(' + scale.toFixed(3) + ')'

}

Update()

window.addEventListener('resize', update)

}

</script>

</body>

</html>

Exit();

This page is accessible but the HTTP status return code is 404, implemented by html5, can meet 404 requirements, and the interface is still cool!

Preview

A cool HTML5 "Closed Protection" 404 page

Web

This article has been printed on copyright and is protected by copyright laws. It must not be reproduced without permission.If you need to reprint, please contact the author or visit the copyright to obtain the authorization. If you feel that this article is useful to you, you can click the "Sponsoring Author" below to call the author!

Reprinted Note Source: Baiyuan's Blog>>https://wangbaiyuan.cn/en/cool-html-5-protection-closed-404-pages-2.html

About极客人

Website's overnight keyword dropped to 0

Create the following content index.php to achieve the entire station 404

Preview

Post comment

No Comment

Favorites

订阅博客周刊

订阅微信公众号

注册

A cool HTML5 "Closed Protection" 404 page

Website's overnight keyword dropped to 0

Create the following content index.php to achieve the entire station 404

Preview

Post comment

No Comment

Favorites

订阅博客周刊

订阅微信公众号

登录

注册