網站黑色表態原始碼

Lkyjimmy · 發表於 2013-6-4 20:14:31

本帖最後由 Lkyjimmy 於 2013-6-4 20:33 編輯

網站黑色表態原始碼

是日因智慧財產局發佈封網政策關系
導致多個網站在六月四日關站以示不滿

在此分享一些網頁原始碼
讓眾人表態

網路全黑日.html

<html>
<head><title>#網路全黑日</title>
<style type="text/css" media="all">
html,
body {
margin: 0;
padding: 0;
}
#text-shadow-box {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #444;
font-family: Helvetica, Arial, sans-serif;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
}
#text-shadow-box #tsb-text,
#text-shadow-box #tsb-link {
position: absolute;
top: 40%;
left: 0;
width: 100%;
height: 1em;
margin: -0.77em 0 0 0;
font-size: 70px;
line-height: 1em;
font-weight: bold;
text-align: center;
}
#text-shadow-box #tsb-text {
font-size: 100px;
color: transparent;
}
#text-shadow-box #tsb-link a {
color: #999;
text-decoration: none;
}
#text-shadow-box #tsb-box,
#text-shadow-box #tsb-wall {
position: absolute;
top: 40%;
left: 0;
width: 100%;
height: 60%;
}
#text-shadow-box #tsb-wall {
background: #999;
}
#text-shadow-box #tsb-wall p {
font-size: 18px;
line-height: 1.5em;
text-align: justify;
color: #222;
width: 550px;
margin: 1.5em auto;
}
#text-shadow-box #tsb-wall p a {
color: #fff;
}
#text-shadow-box #tsb-wall p a:hover {
text-decoration: none;
color: #000;
background: #fff;
}
#tsb-spot {
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
pointer-events: none;
background: -webkit-gradient(radial, center center, 0, center center, 350, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 350px);
}
</style>
</head>
<body>
<div id="text-shadow-box">
<div id="tsb-box"></div>
<p id="tsb-text">通用每週番組關站一日抗議封網法案構想</p>
<p id="tsb-link"><a target="_blank" href="https://www.facebook.com/events/486224794784563/">通用每週番組關站一日抗議封網法案構想</a></p>
<div id="tsb-wall">
<p>六月四日，網路全黑日。
<p>通用每週番組反對台灣實施任何封網法案。
<p><a target="_blank" href="https://www.facebook.com/events/486224794784563/">#freeandopen</a></p>
<p><a href="./error451.html">繼續瀏覽網頁</a></p> </div>
<div id="tsb-spot"></div>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
/**
* Zachary Johnson
* http://www.zachstronaut.com
* I place the following code in the public domain.
*/
var text = null;
var spot = null;
var box = null;
var boxProperty = '';
init();
function init() {
text = document.getElementById('tsb-text');
spot = document.getElementById('tsb-spot');
box = document.getElementById('tsb-box');
if (typeof box.style.webkitBoxShadow == 'string') {
boxProperty = 'webkitBoxShadow';
} else if (typeof box.style.MozBoxShadow == 'string') {
boxProperty = 'MozBoxShadow';
} else if (typeof box.style.boxShadow == 'string') {
boxProperty = 'boxShadow';
}
if (text && spot && box) {
document.getElementById('text-shadow-box').onmousemove = onMouseMove;
document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
}
onMouseMove({clientX: Math.floor(window.innerWidth / 2), clientY: Math.floor(window.innerHeight / 2.75)});
}
function onMouseMove(e) {
var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4;
var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4;
var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
if (boxProperty) {
box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
}
xm = e.clientX - window.innerWidth;
ym = e.clientY - window.innerHeight;
spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}
</script>
</body>
</html>

複製代碼

以上基本上沒有什麼要修改
主要是font-size: ??px;這個值
因應你的文字多少而決定
文字是要單行
否則後半文字會消失

body
通用每週番組改為你網站名
<p><a href="./error451.html">繼續瀏覽網頁</a></p>
改為你的站的網址
可以不寫上
完全關站

Lkyjimmy · 發表於 2013-6-4 20:16:58

本網頁基於國家法律而封鎖.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ERROR 451:本網頁基於國家法律而封鎖</title>
<style type="text/css" media="all">
body{
background-color: black;
}
a{
text-decoration: none;
}
#warning_box{
position: relative;
margin: 0px auto;
top: 100px;
width: 800px;
height: 400px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #800000;
background-color: #FFFFFF;
}
#warning_title{
color: #830718;
font-weight: bolder;
margin-left: 30px;
line-height: 30px;
font-size: 30px;
font-family:\5FAE\8EDF\6B63\9ED1\9AD4,Microsoft JhengHei,MingLiU,sans-serif;
}
#error_code{
color: #010101;
font-weight: bolder;
margin-left: 30px;
line-height: 18pt;
font-size: 18pt;
font-family:\5FAE\8EDF\6B63\9ED1\9AD4,Microsoft JhengHei,MingLiU,sans-serif;
}
.warning_paragraph{
color: #010101;
margin-left: 30px;
margin-right: 30px;
line-height: 14pt;
font-size: 12pt;
font-family:\5FAE\8EDF\6B63\9ED1\9AD4,Microsoft JhengHei,MingLiU,sans-serif;
}
.quote_paragraph{
color: #989898;
text-align: right;
margin-right: 30px;
line-height: 18pt;
font-size: 12pt;
font-family:\5FAE\8EDF\6B63\9ED1\9AD4,Microsoft JhengHei,MingLiU,sans-serif;
}
#link_to_website{
color: #01184B;
font-weight: bolder;
line-height: 16pt;
font-size: 16pt;
text-align: center;
font-family:\5FAE\8EDF\6B63\9ED1\9AD4,Microsoft JhengHei,MingLiU,sans-serif;
}
</style>
</head>
<body>
<div id="warning_box">
<p id="warning_title"><img src="http://i.imgur.com/Znndiig.png" width="30" height="30" /> 本網頁基於國家法律而封鎖</p>
<p id="error_code">ERROR 451</p>
<p class="warning_paragraph">為何看到這個畫面？</p>
<p class="warning_paragraph">針對中華民國經濟部智慧財產局（以下簡稱智財局）日前發布新聞稿，稱將研議相關法案，針對境外重大侵權網站，擬建立快速處置措施，令網路服務提供者（ISP）予以封鎖乙事，本網站表示強烈反對。並呼籲政府相關單位停止討論任何類似美國SOPA的法案，以維護資訊流通與祕密通訊自由。如果我們不積極爭取，有一天，可能將會真的看到類似如此的 <a href="http://binb.tw/?p=407" target="_blank">ERROR 451</a> 錯誤。</p>
<p class="warning_paragraph">更多訊息請閱讀：<a href="https://www.facebook.com/events/486224794784563/" target="_blank">#freeandopen 斷然反對鎖國！堅決主張百分之百的網路自由！！</a></p>
<p class="quote_paragraph">自由開放的世界仰賴自由開放的網絡
-- <a href="https://www.google.com/takeaction/" target="_blank">Google</a>.</p>
<p id="link_to_website"><a href="./programme.html">繼續瀏覽網頁</a></p>
</div>
</body>
</html>

複製代碼

這個修改的地方很少
只須在<p id="link_to_website"><a href="./programme.html">繼續瀏覽網頁</a></p>
修改就可

Lkyjimmy · 發表於 2013-6-4 20:21:16

blackout.js

//v 201306032133
//套上CSS樣式
var blackout_css = document.createElement("style");
var blackout_css_content = document.createTextNode("#blackout {\n display: block;\n position: absolute;\n \n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n \n padding: 2rem;\n \n border: 1px black solid;\n \n background-color: #A05729;\n background-image: url(http://i.imgur.com/CFnkp58.jpg);\n background-repeat: no-repeat;\n background-size: cover;\n}\n#blackout h1, #blackout h2 {\n color: #FFC0CB;\n text-shadow: 3px 3px 5px #FFC0CB;\n font-weight: bold;\n line-height: 40px; \n}\n#blackout h1 {\n font-size: 32px;\n color: white;\n}\n#blackout h2 {\n margin-left: 2rem;\n margin-top: 0.3rem;\n font-size: 26px;\n}\n#blackout section {\n margin-top: 2rem;\n margin: 2rem auto auto auto;\n width: 70%;\n}\n#blackout p {\n color: white;\n text-shadow: 3px 3px 6px black;\n /*text-indent: 2em;*/\n \n line-height: 1.8em;\n margin-bottom: 1em;\n}\n#blackout a {\n color: #C4FFFE;\n}\n#blackout a:hover {\n color: #76C8E5;\n /*text-shadow: 0px 0px 3px white;*/\n}\n#blackout footer {\n margin-top: 3rem;\n text-align: center;\n}\n#blackout .blackout-btn {\n border: 1px white solid;\n border-radius: 8px;\n box-shadow: 0px 0px 15px white;\n padding: 0.3rem;\n \n background-color: black;\n}\n#blackout .blackout-btn:hover {\n background-color: gray;\n}\n#blackout a.blackout-btn {\n color: white;\n text-decoration: none;\n text-shadow: none;\n}");
blackout_css.appendChild(blackout_css_content);
//騰寫抗議內容
var header = document.createElement("header");
var title = document.createElement("h1");
var title_icon = document.createElement("img");
title_icon.setAttribute("src", "http://i.imgur.com/Znndiig.png");
title_icon.setAttribute("height", "30");
title_icon.setAttribute("width", "30");
var title_content = document.createTextNode("ERROR 451 本網頁基於國家法律而封鎖");
title.appendChild(title_icon);
title.appendChild(title_content);
header.appendChild(title);
var section = document.createElement("section");
var content1 = document.createElement("p");
var content1_content = document.createTextNode("為何看到這個畫面？");
content1.appendChild(content1_content);
var content2 = document.createElement("p");
var content2_content = document.createTextNode("針對中華民國經濟部智慧財產局（以下簡稱智財局）日前發布新聞稿，稱將研議相關法案，針對境外重大侵權網站，擬建立快速處置措施，令網路服務提供者（ISP）予以封鎖乙事，本網站表示強烈反對。並呼籲政府相關單位停止討論任何類似美國SOPA的法案，以維護資訊流通與祕密通訊自由。如果我們不積極爭取，有一天，可能將會真的看到類似如此的");
var content2_content_a1 = document.createElement("a");
content2_content_a1.setAttribute("href", "http://binb.tw/?p=407");
var content2_content_a1_content = document.createTextNode("ERROR 451 錯誤");
content2_content_a1.appendChild(content2_content_a1_content);
var content2_content2 = document.createTextNode("。");
content2.appendChild(content2_content);
content2.appendChild(content2_content_a1);
content2.appendChild(content2_content2);
var content3 = document.createElement("p");
var content3_content = document.createTextNode("更多訊息請閱讀：");
var content3_content_a = document.createElement("a");
content3_content_a.setAttribute("href", "https://www.facebook.com/events/486224794784563/");
content3_content_a.appendChild(document.createTextNode("#freeandopen 斷然反對鎖國！堅決主張百分之百的網路自由！！"));
content3.appendChild(content3_content);
content3.appendChild(content3_content_a);
section.appendChild(content1);
section.appendChild(content2);
section.appendChild(content3);
var footer = document.createElement("footer");
var footer_content_close = document.createElement("a");
footer_content_close.setAttribute("href", "#");
footer_content_close.setAttribute("class", "blackout-btn");
footer_content_close.setAttribute("onclick", "document.getElementById('blackout').style.display = 'none'");
footer_content_close.appendChild(document.createTextNode("繼續瀏覽網頁"));
footer.appendChild(footer_content_close);
//建立抗議內容到#blackout區塊
window.onload = function() {
var element = document.getElementById("blackout");
element.appendChild(blackout_css);
element.appendChild(header);
element.appendChild(section);
element.appendChild(footer);
}

複製代碼

這個是用JS的
該JS是無須編輯

主要在網頁<body>後加上 
<div id="blackout">
</div>
<script src="./blackout.js">
</script>


<script src="./blackout.js">
為該JS檔位置

Lkyjimmy · 發表於 2013-6-4 20:29:23

附上檔案

如有其他
歡迎分享

賬號		自動登錄	找回密碼
密碼			入住紫音

網站黑色表態原始碼

本帖子中包含更多資源