├── favicon.ico
├── img
    ├── arrow.png
    ├── hand.png
    └── baidu_logo.png
├── .gitattributes
├── .gitignore
├── LICENSE
├── index.html
├── js
    └── script.js
└── css
    └── style.css


/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuxizhe/google/HEAD/favicon.ico


--------------------------------------------------------------------------------
/img/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuxizhe/google/HEAD/img/arrow.png


--------------------------------------------------------------------------------
/img/hand.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuxizhe/google/HEAD/img/hand.png


--------------------------------------------------------------------------------
/img/baidu_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuxizhe/google/HEAD/img/baidu_logo.png


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | # Folder config file
 6 | Desktop.ini
 7 | 
 8 | # Recycle Bin used on file shares
 9 | $RECYCLE.BIN/
10 | 
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 | 
17 | # Windows shortcuts
18 | *.lnk
19 | 
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 | 
24 | # OSX
25 | # =========================
26 | 
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 | 
31 | # Thumbnails
32 | ._*
33 | 
34 | # Files that might appear on external disk
35 | .Spotlight-V100
36 | .Trashes
37 | 
38 | # Directories potentially created on remote AFP share
39 | .AppleDB
40 | .AppleDesktop
41 | Network Trash Folder
42 | Temporary Items
43 | .apdisk
44 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 mengkun
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html xmlns="http://www.w3.org/1999/xhtml">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="renderer" content="webkit">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta http-equiv="Cache-Control" content="no-transform">
 8 |     <meta http-equiv="Cache-Control" content="no-siteapp">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1">
10 |     
11 |     <title>让我帮你google一下 | Let Me google For You</title>
12 |     
13 |     <link rel="shortcut icon" href="favicon.ico">
14 |     <link rel="stylesheet" href="css/style.css" />
15 |     
16 |     <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
17 |     <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
18 |     <script src="js/script.js"></script>
19 |     <script>
20 |     var _hmt = _hmt || [];
21 |     (function() {
22 |     var hm = document.createElement("script");
23 |     hm.src = "https://hm.baidu.com/hm.js?749f15788c7a9ca7a2ea4d3e7f9fb03e";
24 |     var s = document.getElementsByTagName("script")[0]; 
25 |     s.parentNode.insertBefore(hm, s);
26 |     })();
27 |     </script>
28 | 
29 | </head>
30 | <body>
31 |     <section id="search">
32 |         <div class="search-header">
33 |             <h2>
34 |                 <span class="let-me" style="margin-right: 10px">让我帮你 </span> 
35 |                 <img src="https://image.uisdc.com/wp-content/uploads/2015/09/gl20150902.gif" alt="google" title="让我帮你google一下"> 
36 |                 <span class="for-you">一下</span>
37 |             </h2>
38 |         </div>
39 |         
40 |         <form id="search-form">
41 |             <div class="search-form-group">
42 |                 <div class="search-form-input">
43 |                     <input type="search" id="kw" maxlength="255" autocomplete="off" required>
44 |                 </div>
45 |                 <button id="search-submit">google一下</button>
46 |             </div>
47 |         </form>
48 |     </section>
49 |     
50 |     <section id="function">
51 |         <p id="tips">输入一个问题，然后点击google一下</p>
52 |         
53 |         <button id="stop">快停下！我是自己人</button>
54 |         
55 |         <div id="output">
56 |             <textarea id="url-output" rows="3" readonly></textarea>
57 |             <div class="tool-btns">
58 |                 <button data-clipboard-target="#url-output">复制</button>
59 |                 <button id="preview">预览</button>
60 |             </div>
61 |         </div>
62 |     </section>
63 |     
64 |     <footer id="footer">
65 |         
66 |         <ul class="footer-right">
67 |             <li>* 本站与google公司没有任何联系，google 以及本站出现的google公司 Logo 是google公司的商标</li>
68 |         </ul>
69 |     </footer>
70 |     
71 |     <div id="arrow"></div>
72 | </body>
73 | </html>


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 让我帮你百度一下【重制版】
  3 |  * GitHub 开源地址：https://github.com/mengkunsoft/lmbtfy
  4 |  **
  5 |  * 原始版本来自 bangbang(http://lmbtfy.cn/)，mengkun(https://mkblog.cn) 在原作的基础上进行了重制，风格变更为新版百度 UI，并适配了移动端
  6 |  * 交互效果参考了 不会百度么？(http://buhuibaidu.me/)
  7 |  **
  8 |  * 转载或使用时，还请保留以上信息，谢谢！
  9 |  */
 10 | 
 11 | /* 低版本 IE polyfill */
 12 | if (!window.location.origin) {
 13 |     window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
 14 | }
 15 | 
 16 | /* 扩展一个getUrlParam的方法 */
 17 | $.getUrlParam = function (name) {
 18 |     var query = window.location.search.substring(1);
 19 |     var vars = query.split("&");
 20 |     for (var i = 0; i < vars.length; i++) {
 21 |         var pair = vars[i].split("=");
 22 |         if (pair[0] == name) { return pair[1]; }
 23 |     }
 24 |     return (false);
 25 | };
 26 | 
 27 | $(function () {
 28 |     var $kw = $('#kw'),
 29 |         $searchSubmit = $('#search-submit');
 30 |     $urlOutput = $('#url-output'),
 31 |         $tips = $('#tips'),
 32 |         $stop = $('#stop'),
 33 |         $arrow = $('#arrow');
 34 | 
 35 |     var stepTimeout, typeInterval;
 36 | 
 37 |     /* 获取并解析查询参数 */
 38 |     var query = $.getUrlParam('q');
 39 |     if (!!query) {
 40 |         try {
 41 |             query = decodeURIComponent(query);
 42 |         } catch (e) {
 43 |             console.log(e);
 44 |         }
 45 |     }
 46 | 
 47 |     /* 有参数，启动百度教程 */
 48 |     if (!!query) {
 49 |         $tips.html('让我来教你正确的打开方式');
 50 |         $stop.fadeIn();
 51 | 
 52 |         stepTimeout = setTimeout(function () {
 53 |             $tips.html('1、找到输入框并选中');
 54 | 
 55 |             $arrow.removeClass('active').show().animate({
 56 |                 left: $kw.offset().left + 20 + 'px',
 57 |                 top: ($kw.offset().top + $kw.outerHeight() / 2) + 'px'
 58 |             }, 2000, function () {
 59 |                 $tips.html('2、输入你要找的内容');
 60 |                 $arrow.addClass('active');
 61 | 
 62 |                 stepTimeout = setTimeout(function () {
 63 |                     $arrow.fadeOut();
 64 | 
 65 |                     var i = 0;
 66 |                     typeInterval = setInterval(function () {
 67 |                         $kw.val(query.substr(0, i));
 68 |                         if (++i > query.length) {
 69 |                             clearInterval(typeInterval);
 70 |                             $tips.html('3、点击下“google一下”按钮');
 71 | 
 72 |                             $arrow.removeClass('active').fadeIn().animate({
 73 |                                 left: $searchSubmit.offset().left + $searchSubmit.width() / 2 + 'px',
 74 |                                 top: $searchSubmit.offset().top + $searchSubmit.height() / 2 + 'px'
 75 |                             }, 1000, function () {
 76 |                                 $tips.html('<strong>怎么样，学会了吗？</strong>');
 77 |                                 $arrow.addClass('active');
 78 | 
 79 |                                 stepTimeout = setTimeout(function () {
 80 |                                     window.location = 'https://g.dappwind.com/search?q=' + encodeURIComponent(query);
 81 |                                 }, 1000);
 82 |                             });
 83 |                         }
 84 |                     }, 200);
 85 |                 }, 500);
 86 |             });
 87 |         }, 1000);
 88 |     }
 89 | 
 90 |     /* 自己人，停下 */
 91 |     $stop.click(function () {
 92 |         clearTimeout(stepTimeout);
 93 |         clearInterval(typeInterval);
 94 |         $stop.hide();
 95 |         $arrow.stop().hide();
 96 |         $kw.val(query);
 97 |         query = false;
 98 |         $tips.html('输入一个问题，然后点击google一下');
 99 |     });
100 | 
101 |     /* 提交 */
102 |     $('#search-form').submit(function () {
103 |         if (!!query) return false;
104 | 
105 |         var question = $.trim($kw.val());
106 |         if (!question) {
107 |             $tips.html('<span style="color: red">搜了个寂寞？</span>');
108 |             $kw.val('');
109 |         } else {
110 |             $tips.html('↓↓↓ 复制下面的链接，教伸手党使用google');
111 |             $('#output').fadeIn();
112 |             $urlOutput.val(window.location.origin + window.location.pathname + '?q=' + encodeURIComponent(question)).focus().select();
113 |         }
114 |         return false;
115 |     });
116 | 
117 |     /* 复制结果 */
118 |     var clipboard = new ClipboardJS('[data-clipboard-target]');
119 |     clipboard.on('success', function (e) {
120 |         $tips.html('<span style="color: #4caf50">复制成功！赶紧把链接甩给伸手党们！</span>');
121 |     });
122 |     clipboard.on('error', function (e) {
123 |         $tips.html('<span style="color: red">复制失败，请手动复制...</span>');
124 |     });
125 | 
126 |     /* 预览 */
127 |     $('#preview').click(function () {
128 |         var link = $urlOutput.val();
129 |         if (!!link) {
130 |             window.open(link);
131 |         }
132 |     });
133 | });


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | 
  3 | html, body, 
  4 | div, section, header, footer,
  5 | button, input, textarea,
  6 | p, ul, li {
  7 |     margin: 0;
  8 |     padding: 0;
  9 |     box-sizing: border-box;
 10 |     font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
 11 | } 
 12 | 
 13 | img {
 14 |     outline: none;
 15 | }
 16 | 
 17 | html, body {
 18 |     width: 100%;
 19 |     height: 100%;
 20 |     overflow-x: hidden;
 21 | }
 22 | 
 23 | 
 24 | /* 搜索框 */
 25 | #search {
 26 |     position: relative;
 27 |     height: 40%;
 28 |     min-height: 314px;
 29 |     max-height: 510px;
 30 |     margin: 0 auto;
 31 |     text-align: center;
 32 | }
 33 | 
 34 | #search-form {
 35 |     position: absolute;
 36 |     width: 100%;
 37 |     bottom: 0;
 38 | }
 39 | 
 40 | .search-form-group {
 41 |     position: relative;
 42 |     max-width: 655px;
 43 |     margin: 0 auto;
 44 | }
 45 | 
 46 | .search-form-input {
 47 |     position: absolute;
 48 |     left: 0;
 49 |     right: 108px;
 50 |     vertical-align: top;
 51 |     overflow: hidden;
 52 | }
 53 | 
 54 | .search-form-input input {
 55 |     width: 100%;
 56 |     height: 44px;
 57 |     padding: 12px 16px;
 58 |     font-size: 16px;
 59 |     outline: 0;
 60 |     box-shadow: none;
 61 |     border-radius: 10px 0 0 10px;
 62 |     border: 2px solid #c4c7ce;
 63 |     border-right: none;
 64 |     background: #fff;
 65 |     color: #222;
 66 | }
 67 | .search-form-group input:hover {
 68 |     border-color: #9195a3;
 69 | }
 70 | .search-form-group input:focus {
 71 |     border-color: #4e6ef2;
 72 | }
 73 | 
 74 | .search-form-group button {
 75 |     cursor: pointer;
 76 |     width: 108px;
 77 |     height: 44px;
 78 |     line-height: 45px;
 79 |     padding: 0;
 80 |     background: #4e6ef2;
 81 |     border-radius: 0 10px 10px 0;
 82 |     font-size: 17px;
 83 |     color: #fff;
 84 |     box-shadow: none;
 85 |     font-weight: 400;
 86 |     border: none;
 87 |     outline: 0;
 88 |     float: right;
 89 |     z-index: 1;
 90 | }
 91 | .search-form-group button:active {
 92 |     background-color: #4662d9;
 93 | }
 94 | .search-form-group button:hover {
 95 |     background-color: #4662d9;
 96 | }
 97 | 
 98 | .search-header {
 99 |     position: absolute;
100 |     bottom: 60px;
101 |     width: 100%;
102 | }
103 | 
104 | .search-header h2 {
105 |     font-size: 24px;
106 |     font-weight: 900;
107 | }
108 | 
109 | .search-header img {
110 |     display: inline-block;
111 |     width: 270px;
112 |     margin: 0 -12px -16px;
113 | }
114 | 
115 | /* 功能区 */
116 | #function {
117 |     position: absolute;
118 |     width: 100%;
119 |     min-height: 220px;
120 |     text-align: center;
121 |     margin-top: 80px;
122 | }
123 | 
124 | #tips {
125 |     color: #9195a3;
126 |     font-size: 16px;
127 | }
128 | 
129 | #stop {
130 |     display: none;
131 |     border: none;
132 |     padding: 8px 15px;
133 |     border-radius: 100px;
134 |     color: #bababa;
135 |     background: #f1f1f1;
136 |     outline: none;
137 |     cursor: pointer;
138 |     margin-top: 50px;
139 | }
140 | 
141 | #output {
142 |     display: none;
143 |     width: 100%;
144 |     max-width: 400px;
145 |     margin: 20px auto;
146 | }
147 | 
148 | #output textarea {
149 |     width: 100%;
150 |     padding: 5px 8px;
151 |     border-radius: 3px;
152 |     border: 1px solid #c8c8c8;
153 |     outline: none;
154 | }
155 | #output textarea:focus {
156 |     border-color: #4285f4;
157 |     box-shadow: 0 0 2px #4285f4;
158 | }
159 | 
160 | #output .tool-btns {
161 |     text-align: right;
162 |     margin-top: 8px;
163 | }
164 | 
165 | #output button {
166 |     outline: none;
167 |     cursor: pointer;
168 |     color: #fff;
169 |     background: #3f89ec;
170 |     border: none;
171 |     margin-left: 8px;
172 |     padding: 6px 14px;
173 |     border-radius: 3px;
174 | }
175 | #output button:hover {
176 |     background: #4490f7;
177 | }
178 | #output button:focus {
179 |     background: #3a84e8;
180 | }
181 | 
182 | 
183 | /* 页脚 */
184 | #footer {
185 |     width: 100%;
186 |     position: fixed;
187 |     z-index: 100;
188 |     bottom: 0;
189 |     left: 0;
190 |     height: 40px;
191 |     line-height: 40px;
192 |     font-size: 12px;
193 |     overflow: hidden;
194 |     background-color: #fafafa;
195 |     padding: 0 20px;
196 | }
197 | 
198 | #footer li {
199 |     list-style: none;
200 |     display: inline-block;
201 |     float: left;
202 |     padding: 0 10px;
203 | }
204 | 
205 | .footer-left, .footer-left a {
206 |     color: #9195a3;
207 |     text-decoration: none;
208 | }
209 | 
210 | .footer-right {
211 |     float: right;
212 | }
213 | .footer-right, .footer-right a {
214 |     color: #bbb;
215 | }
216 | 
217 | 
218 | /* 鼠标指示箭头 */
219 | #arrow {
220 |     display: none;
221 |     position: absolute;
222 |     left: 0;
223 |     top: 0;
224 |     width: 50px;
225 |     height: 50px;
226 |     z-index: 999;
227 |     background: url(../img/arrow.png) no-repeat;
228 | }
229 | 
230 | #arrow::after {
231 |     content: '';
232 |     position: absolute;
233 |     top: -13px;
234 |     left: -15px;
235 |     z-index: -1;
236 |     border-radius: 9em;
237 |     box-shadow: 0 0 0 7px rgba(0,0,0,.4);
238 |     width: 30px;
239 |     height: 30px;
240 |     opacity: 0;
241 | }
242 | 
243 | #arrow.active::after {
244 |     -webkit-animation: bubble-scale 1s ease;
245 |             animation: bubble-scale 1s ease;
246 | }
247 | 
248 | @-webkit-keyframes bubble-scale {
249 |     from {
250 |         transform: scale(0);
251 |         opacity: 1
252 |     }
253 |     to {
254 |         transform:scale(2);
255 |         opacity: 0
256 |     }
257 | }
258 | 
259 | @keyframes bubble-scale {
260 |     from {
261 |         transform: scale(0);
262 |         opacity: 1
263 |     }
264 |     to {
265 |         transform: scale(2);
266 |         opacity: 0
267 |     }
268 | }
269 | 
270 | 
271 | 
272 | /* 响应式优化 */
273 | @media screen and (max-width: 650px) {  
274 |     #search {
275 |         margin: 0 10px;
276 |         height: auto;
277 |         min-height: 200px;
278 |     }
279 |     
280 |     .search-header img {
281 |         width: 180px;
282 |         margin: 0 -16px -12px;
283 |     }
284 |     
285 |     #search-form {
286 |         bottom: 10px;
287 |         border: 1px solid #363636;
288 |     }
289 |     
290 |     .search-form-input {
291 |         right: 81px;
292 |     }
293 |     
294 |     .search-form-input input {
295 |         border: none;
296 |         border-radius: 0;
297 |         padding: 12px;
298 |     }
299 |     
300 |     .search-form-group button {
301 |         width: 81px;
302 |         height: 44px;
303 |         padding: 0 10px;
304 |         border: none;
305 |         border-left: 1px solid #e8e8e8;
306 |         border-radius: 0;
307 |         font-size: 16px;
308 |         font-weight: 700;
309 |         line-height: 46px;
310 |         white-space: nowrap;
311 |         letter-spacing: -1px;
312 |         color: #38f;
313 |         background: #fff;
314 |     }
315 |     
316 |     .search-form-group button:active {
317 |         background-color: #fdfafa;
318 |     }
319 |     .search-form-group button:hover {
320 |         background-color: #fdfafa;
321 |     }
322 |     
323 |     #function {
324 |         position: relative;
325 |         top: 0;
326 |         margin-top: 50px;
327 |         padding: 0 10px;
328 |     }
329 |     
330 |     #stop {
331 |         margin-top: 30px;
332 |     }
333 |     
334 |     #footer {
335 |         padding: 0;
336 |     }
337 |     
338 |     #arrow {
339 |         background: url(../img/hand.png) no-repeat;
340 |     }
341 | }


--------------------------------------------------------------------------------