├── LICENSE ├── README.md ├── about.html ├── action.lua ├── demostyles.html ├── done.html ├── index.html ├── init.lua ├── schematic.jpg ├── setwifi.lua └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | 167 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ESP8266 SmartButtton with NodeMCU 2 | 3 | 4 | ## Requirements 5 | * ESP8266 ESP-12 or ESP-7 6 | * USB-TTL adapter for debug/programming 7 | * 1k, 10k resistors, push button, rgb led(optional) 8 | 9 | ## Description 10 | 11 | With this code, we send a notification online (in cloud) by pressing a button. 12 | 13 | ## Instructions 14 | 15 | ### Setting up your hardware 16 | 17 | Please read this https://www.hackster.io/iboboc/smartbutton-pro-06ce5d 18 | 19 | ### Code logic explained: 20 | 21 | - set GPIO00 to HIGH (linked to CH_PD) - keep the module enabled after button push 22 | - enable RGB led and light the RED, getting into ON state 23 | - check and load if already is set up SSID name and password and URL 24 | - try to connect to Wi-Fi 25 | - start a timer and if an IP is not set in 10seconds, change the Wi-Fi mode to Access POint with the name "SmartButton" plus the unique ChipID 26 | - start a web server on IP 192.168.1.1 and a form to enter SSID name, password and URL 27 | - on submit, save to internal memmory and restart module 28 | - once connected and an IP is available, change the LED from red to BLUE (connected) 29 | - create a TCP connection and send custom URL 30 | - after sending, LED is changing color from blue to GREEN (success) 31 | - wait 3 seconds (to acknowledge the state) 32 | - close the LED (all colors) 33 | - set GPIO02 to LOW wich will set CH_PD to LOW and module is disabled 34 | - start a timer for 3 sec and reset/clear the config settings (that means that if the module is still powered on, means that button is still pushed, therefore you can reset your config and restart in Access Point mode. 35 | 36 | 37 | ### Connections 38 | - Power. 39 | - +3.3 volts to Vcc 40 | - ground 41 | - Communications. 42 | - TxD on the board to RxD on the adapter 43 | - RxD on the board to TxD on the adapter 44 | - Ground 45 | - Jumpers. 46 | - Connect Vcc to CH_PD to enable the chip 47 | - Connect GPI0 to Vcc to enable bootmode 48 | - Connect GPIO15 to GND to enable UART Download 49 | - Connect GPIO2 to Vcc to enable the ESP (applicable to ESP12/ESP7) 50 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SmartButton configuration 6 | 7 | 8 | 9 |
10 |

About Wi-Fi Smart Button

11 | 14 |

This is an ESP8266 chip based push button that can be configured to 15 | do whatever action needed.
16 | 17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /action.lua: -------------------------------------------------------------------------------- 1 | --action.lua 2 | --URL and host come out of customurl.txt file 3 | print("Sending URL") 4 | print("URL: " .. customurl) 5 | print("Host: " .. customhost) 6 | conn = nil 7 | conn=net.createConnection(net.TCP, 0) 8 | 9 | conn:on("receive", function(conn, payload) 10 | -- show a green LED for 3 seconds before shutting down 11 | gpio.write(red,gpio.LOW) 12 | gpio.write(green,gpio.HIGH) 13 | gpio.write(blue,gpio.LOW) 14 | tmr.delay(3000000) 15 | --Close all LED lights 16 | gpio.write(red,gpio.LOW) 17 | gpio.write(green,gpio.LOW) 18 | gpio.write(blue,gpio.LOW) 19 | -- set GPIO00(3) to LOW linked to CH_PD (will shutdown the module) 20 | gpio.write(3, gpio.LOW) 21 | 22 | --If ESP is enabled after 2 seconds that means the button is still pushed! 23 | --in this case, will reset the configuration 24 | tmr.alarm(0, 2000, 1, function() 25 | print("Button is still pressed.") 26 | reset() 27 | end) 28 | 29 | end) 30 | 31 | conn:on("connection", function(conn, payload) 32 | conn:send("GET " .. customurl 33 | .." HTTP/1.1\r\n" 34 | .."Host: " .. customhost .. "\r\n" 35 | .."Accept: */*\r\n" 36 | .."User-Agent: Mozilla/4.0 (compatible; esp8266 Lua; Windows NT 5.1)\r\n" 37 | .."\r\n") 38 | print("URL request sent.") 39 | end) 40 | 41 | conn:dns(customhost,function(conn,ip) 42 | if (ip) then 43 | print("We can connect to " .. ip) 44 | conn:connect(80,ip) 45 | else 46 | reset() 47 | end 48 | end) 49 | 50 | function reset() 51 | print("Resetting Wifi..") 52 | wifi.sta.disconnect() 53 | wifi.sta.config("","") 54 | file.remove('customurl.txt') 55 | --all values are deleted, on next button press it will go into configuration mode 56 | print("Settings cleared, please restart.") 57 | end 58 | -------------------------------------------------------------------------------- /demostyles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Form Style 6 | 7 | 8 | 9 | 10 | 11 |

Basic Grey

12 |
13 |

Contact Form 14 | Please fill all the texts in the fields. 15 |

16 | 20 | 21 | 25 | 26 | 30 | 36 | 40 |
41 | 42 | 43 |

Elegant Aero

44 |
45 |

Contact Form 46 | Please fill all the texts in the fields. 47 |

48 | 52 | 53 | 57 | 58 | 62 | 68 | 72 |
73 | 74 | 75 | 76 |

Smart Green

77 |
78 |

Contact Form 79 | Please fill all the texts in the fields. 80 |

81 | 85 | 86 | 90 | 91 | 95 | 101 | 105 |
106 | 107 |

White Pink

108 |
109 |

Contact Form 110 | Please fill all the texts in the fields. 111 |

112 | 116 | 117 | 121 | 122 | 126 | 132 | 136 |
137 | 138 | 139 |

Bootstrap Style

140 |
141 |

Contact Form 142 | Please fill all the texts in the fields. 143 |

144 | 148 | 149 | 153 | 154 | 158 | 164 | 168 |
169 | 170 | 171 |

Dark Matter

172 |
173 |

Contact Form 174 | Please fill all the texts in the fields. 175 |

176 | 180 | 181 | 185 | 186 | 190 | 196 | 200 |
201 | 202 | 203 | -------------------------------------------------------------------------------- /done.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SmartButton configuration 6 | 7 | 8 | 9 |
10 |

Wi-Fi Smart Button configuration

11 | Configuration complete!
Restarting....You may close this window.
12 | 13 | 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SmartButton configuration 6 | 7 | 8 | 9 | 10 |
11 |

Wi-Fi Smart Button configuration

12 |
13 |

14 |

15 |

16 | 17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /init.lua: -------------------------------------------------------------------------------- 1 | --init.lua 2 | 3 | -- set GPIO00(3) to HIGH linked to CH_PD 4 | gpio.mode(3, gpio.OUTPUT) 5 | gpio.write(3, gpio.HIGH) 6 | 7 | --define GPIO colors for RGB LED 8 | red = 7 9 | blue = 5 10 | green = 6 11 | 12 | --set the GPIO types 13 | gpio.mode(red,gpio.OUTPUT) 14 | gpio.mode(green,gpio.OUTPUT) 15 | gpio.mode(blue,gpio.OUTPUT) 16 | 17 | --power up the red led 18 | gpio.write(red,gpio.HIGH) 19 | gpio.write(green,gpio.LOW) 20 | gpio.write(blue,gpio.LOW) 21 | 22 | --variable for connecting retries 23 | cnt = 0 24 | 25 | print("Starting SmartButton") 26 | --simple function to check for a file and content 27 | function file_exists(name) 28 | fileresult=file.open(name,"r") 29 | if fileresult~=nil then file.close(fileresult) return true else return false end 30 | end 31 | 32 | -- count the button pushes and store in a local txt file 33 | if file_exists("pushes.txt") then 34 | file.open("pushes.txt", "r") 35 | psh = file.readline() 36 | file.close() 37 | psh = psh+1 38 | print("Button has been pushed "..psh.." times.") 39 | else 40 | print("Button has been pushed for the first time.") 41 | psh = 1 42 | end 43 | file.remove("pushes.txt") 44 | tmr.delay(1000) 45 | file.open("pushes.txt", "w") 46 | file.write(psh) 47 | file.flush() 48 | file.close() 49 | 50 | -- if customurl file is set (exists) then we load the url 51 | if file_exists("customurl.txt") then 52 | print("Custom URL") 53 | file.open("customurl.txt", "r") 54 | customurl = file.readline() 55 | file.close() 56 | customhost = customurl:match('^%w+://([^/]+)') 57 | print(customurl) 58 | print(customhost) 59 | -- try to connect to Wi-Fi ten times 60 | -- if dont get a valid IP go to Wi-Fi set up 61 | -- else do main stuff 62 | tmr.alarm(1, 1000, 1, function() 63 | if wifi.sta.getip()== nil then 64 | cnt = cnt + 1 65 | print("(" .. cnt .. ") Waiting for IP...") 66 | if cnt == 10 then 67 | tmr.stop(1) 68 | --shutdown if cannot connect to wifi 69 | gpio.write(3, gpio.LOW) 70 | --If ESP is enabled after 2 seconds that means the button is still pushed! 71 | --in this case, will reset the configuration 72 | tmr.alarm(0, 2000, 1, function() 73 | print("Button is still pressed.") 74 | wifi.sta.disconnect() 75 | wifi.sta.config("","") 76 | file.remove('customurl.txt') 77 | end) 78 | end 79 | else 80 | tmr.stop(1) 81 | -- change LED color to blue 82 | gpio.write(red,gpio.LOW) 83 | gpio.write(green,gpio.LOW) 84 | gpio.write(blue,gpio.HIGH) 85 | print("Connected to Wifi") 86 | print(wifi.sta.getip()) 87 | dofile("action.lua") 88 | end 89 | end) 90 | -- if custom url is not defined, then reset all Wi-Fi information and change to OTA config mode 91 | else 92 | wifi.sta.disconnect() 93 | wifi.sta.config("","") 94 | dofile("setwifi.lua") 95 | end 96 | -------------------------------------------------------------------------------- /schematic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iboboc/smartbutton/6a1de8b04ccc6a9e2405363dc2f87ad3ac77fd60/schematic.jpg -------------------------------------------------------------------------------- /setwifi.lua: -------------------------------------------------------------------------------- 1 | --setwifi.lua 2 | 3 | -- URL decode function 4 | function unescape (s) 5 | s = string.gsub(s, "+", " ") 6 | s = string.gsub(s, "%%(%x%x)", function (h) 7 | return string.char(tonumber(h, 16)) 8 | end) 9 | return s 10 | end 11 | 12 | -- if not set up in 60s then shutdown 13 | tmr.alarm(0, 60000, 1, function() 14 | print("Button is on and nothing is happening.") 15 | -- set GPIO00(3) to LOW linked to CH_PD (will shutdown the module) 16 | gpio.write(3, gpio.LOW) 17 | end) 18 | 19 | print("Entering wifi setup..") 20 | -- make sure red LED is on 21 | gpio.write(red,gpio.HIGH) 22 | gpio.write(green,gpio.LOW) 23 | gpio.write(blue,gpio.LOW) 24 | 25 | --change to hotspot mode 26 | wifi.setmode(wifi.SOFTAP) 27 | nodessid = "SmartButton" .. node.chipid() 28 | cfg={} 29 | cfg.ssid=nodessid 30 | --cfg.password="12345678" --comment to leave open 31 | wifi.ap.config(cfg) 32 | ipcfg={} 33 | ipcfg.ip="192.168.1.1" 34 | ipcfg.netmask="255.255.255.0" 35 | ipcfg.gateway="192.168.1.1" 36 | wifi.ap.setip(ipcfg) 37 | 38 | -- starting webserver and set up the files to be served 39 | local httpRequest={} 40 | httpRequest["/"]="index.html"; 41 | httpRequest["/index.html"]="index.html"; 42 | httpRequest["/about.html"]="about.html"; 43 | httpRequest["/done.html"]="done.html"; 44 | httpRequest["/style.css"]="style.css"; 45 | 46 | local getContentType={}; 47 | getContentType["/"]="text/html"; 48 | getContentType["/index.html"]="text/html"; 49 | getContentType["/about.html"]="text/html"; 50 | getContentType["/done.html"]="text/html"; 51 | getContentType["/style.css"]="text/css"; 52 | local filePos=0; 53 | 54 | if srv then srv:close() srv=nil end 55 | srv=net.createServer(net.TCP) 56 | srv:listen(80,function(conn) 57 | conn:on("receive", function(conn,request) 58 | print("[New Request]"); 59 | local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP"); 60 | if(method == nil)then 61 | _, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP"); 62 | end 63 | local formDATA = {} 64 | if (vars ~= nil)then 65 | for k, v in string.gmatch(vars, "([^&=]+)=([^&=]+)") do 66 | print("["..k.."="..v.."]"); 67 | k = unescape(k) 68 | v = unescape(v) 69 | formDATA[k] = v 70 | end 71 | if (formDATA.ssid) then 72 | --save URL in text file 73 | print("URL: ".. formDATA.customurl) 74 | file.remove("customurl.txt") 75 | tmr.delay(1000) 76 | file.open("customurl.txt", "w") 77 | file.write(formDATA.customurl) 78 | file.flush() 79 | file.close() 80 | print("Setting to: ".. formDATA.ssid) 81 | tmr.alarm(0, 5000, 1, function() 82 | wifi.setmode(wifi.STATION); 83 | wifi.sta.config(formDATA.ssid,formDATA.password); 84 | print("Settings saved, please restart.") 85 | node.restart() 86 | end) 87 | end 88 | end 89 | if getContentType[path] then 90 | requestFile=httpRequest[path]; 91 | print("[Sending file "..requestFile.."]"); 92 | filePos=0; 93 | conn:send("HTTP/1.1 200 OK\r\nContent-Type: "..getContentType[path].."\r\n\r\n"); 94 | else 95 | print("[File "..path.." not found]"); 96 | conn:send("HTTP/1.1 404 Not Found\r\n\r\n") 97 | conn:close(); 98 | collectgarbage(); 99 | end 100 | end) 101 | conn:on("sent",function(conn) 102 | if requestFile then 103 | if file.open(requestFile,r) then 104 | file.seek("set",filePos); 105 | local partial_data=file.read(512); 106 | file.close(); 107 | if partial_data then 108 | filePos=filePos+#partial_data; 109 | print("["..filePos.." bytes sent]"); 110 | conn:send(partial_data); 111 | if (string.len(partial_data)==512) then 112 | return; 113 | end 114 | end 115 | else 116 | print("[Error opening file"..requestFile.."]"); 117 | end 118 | end 119 | print("[Connection closed]"); 120 | conn:close(); 121 | collectgarbage(); 122 | end) 123 | end) 124 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html,body{ 2 | margin:0px; 3 | padding:0px; 4 | } 5 | h3 { 6 | text-align: center; 7 | font-family: georgia; 8 | color: #727272; 9 | border-bottom: 1px solid #EEE; 10 | padding: 5px; 11 | font-size: x-large; 12 | margin-top: 50px; 13 | } 14 | 15 | /* Basic Grey */ 16 | .basic-grey { 17 | margin-left:auto; 18 | margin-right:auto; 19 | max-width: 500px; 20 | background: #F7F7F7; 21 | padding: 25px 15px 25px 10px; 22 | font: 12px Georgia, "Times New Roman", Times, serif; 23 | color: #888; 24 | text-shadow: 1px 1px 1px #FFF; 25 | border:1px solid #E4E4E4; 26 | } 27 | .basic-grey h1 { 28 | font-size: 25px; 29 | padding: 0px 0px 10px 40px; 30 | display: block; 31 | border-bottom:1px solid #E4E4E4; 32 | margin: -10px -15px 30px -10px;; 33 | color: #888; 34 | } 35 | .basic-grey h1>span { 36 | display: block; 37 | font-size: 11px; 38 | } 39 | .basic-grey label { 40 | display: block; 41 | margin: 0px; 42 | } 43 | .basic-grey label>span { 44 | float: left; 45 | width: 20%; 46 | text-align: right; 47 | padding-right: 10px; 48 | margin-top: 10px; 49 | color: #888; 50 | } 51 | .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select { 52 | border: 1px solid #DADADA; 53 | color: #888; 54 | height: 30px; 55 | margin-bottom: 16px; 56 | margin-right: 6px; 57 | margin-top: 2px; 58 | outline: 0 none; 59 | padding: 3px 3px 3px 5px; 60 | width: 70%; 61 | font-size: 12px; 62 | line-height:15px; 63 | box-shadow: inset 0px 1px 4px #ECECEC; 64 | -moz-box-shadow: inset 0px 1px 4px #ECECEC; 65 | -webkit-box-shadow: inset 0px 1px 4px #ECECEC; 66 | } 67 | .basic-grey textarea{ 68 | padding: 5px 3px 3px 5px; 69 | } 70 | .basic-grey select { 71 | background: #FFF url('down-arrow.png') no-repeat right; 72 | background: #FFF url('down-arrow.png') no-repeat right); 73 | appearance:none; 74 | -webkit-appearance:none; 75 | -moz-appearance: none; 76 | text-indent: 0.01px; 77 | text-overflow: ''; 78 | width: 70%; 79 | height: 35px; 80 | line-height: 25px; 81 | } 82 | .basic-grey textarea{ 83 | height:100px; 84 | } 85 | .basic-grey .button { 86 | background: #E27575; 87 | border: none; 88 | padding: 10px 25px 10px 25px; 89 | color: #FFF; 90 | box-shadow: 1px 1px 5px #B6B6B6; 91 | border-radius: 3px; 92 | text-shadow: 1px 1px 1px #9E3F3F; 93 | cursor: pointer; 94 | } 95 | .basic-grey .button:hover { 96 | background: #CF7A7A 97 | } 98 | 99 | 100 | /* Elegant Aero */ 101 | .elegant-aero { 102 | margin-left:auto; 103 | margin-right:auto; 104 | 105 | max-width: 500px; 106 | background: #D2E9FF; 107 | padding: 20px 20px 20px 20px; 108 | font: 12px Arial, Helvetica, sans-serif; 109 | color: #666; 110 | } 111 | .elegant-aero h1 { 112 | font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; 113 | padding: 10px 10px 10px 20px; 114 | display: block; 115 | background: #C0E1FF; 116 | border-bottom: 1px solid #B8DDFF; 117 | margin: -20px -20px 15px; 118 | } 119 | .elegant-aero h1>span { 120 | display: block; 121 | font-size: 11px; 122 | } 123 | 124 | .elegant-aero label>span { 125 | float: left; 126 | margin-top: 10px; 127 | color: #5E5E5E; 128 | } 129 | .elegant-aero label { 130 | display: block; 131 | margin: 0px 0px 5px; 132 | } 133 | .elegant-aero label>span { 134 | float: left; 135 | width: 20%; 136 | text-align: right; 137 | padding-right: 15px; 138 | margin-top: 10px; 139 | font-weight: bold; 140 | } 141 | .elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select { 142 | color: #888; 143 | width: 70%; 144 | padding: 0px 0px 0px 5px; 145 | border: 1px solid #C5E2FF; 146 | background: #FBFBFB; 147 | outline: 0; 148 | -webkit-box-shadow:inset 0px 1px 6px #ECF3F5; 149 | box-shadow: inset 0px 1px 6px #ECF3F5; 150 | font: 200 12px/25px Arial, Helvetica, sans-serif; 151 | height: 30px; 152 | line-height:15px; 153 | margin: 2px 6px 16px 0px; 154 | } 155 | .elegant-aero textarea{ 156 | height:100px; 157 | padding: 5px 0px 0px 5px; 158 | width: 70%; 159 | } 160 | .elegant-aero select { 161 | background: #fbfbfb url('down-arrow.png') no-repeat right; 162 | background: #fbfbfb url('down-arrow.png') no-repeat right; 163 | appearance:none; 164 | -webkit-appearance:none; 165 | -moz-appearance: none; 166 | text-indent: 0.01px; 167 | text-overflow: ''; 168 | width: 70%; 169 | } 170 | .elegant-aero .button{ 171 | padding: 10px 30px 10px 30px; 172 | background: #66C1E4; 173 | border: none; 174 | color: #FFF; 175 | box-shadow: 1px 1px 1px #4C6E91; 176 | -webkit-box-shadow: 1px 1px 1px #4C6E91; 177 | -moz-box-shadow: 1px 1px 1px #4C6E91; 178 | text-shadow: 1px 1px 1px #5079A3; 179 | 180 | } 181 | .elegant-aero .button:hover{ 182 | background: #3EB1DD; 183 | } 184 | 185 | /*######## Smart Green ########*/ 186 | .smart-green { 187 | margin-left:auto; 188 | margin-right:auto; 189 | 190 | max-width: 500px; 191 | background: #F8F8F8; 192 | padding: 30px 30px 20px 30px; 193 | font: 12px Arial, Helvetica, sans-serif; 194 | color: #666; 195 | border-radius: 5px; 196 | -webkit-border-radius: 5px; 197 | -moz-border-radius: 5px; 198 | } 199 | .smart-green h1 { 200 | font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; 201 | padding: 20px 0px 20px 40px; 202 | display: block; 203 | margin: -30px -30px 10px -30px; 204 | color: #FFF; 205 | background: #9DC45F; 206 | text-shadow: 1px 1px 1px #949494; 207 | border-radius: 5px 5px 0px 0px; 208 | -webkit-border-radius: 5px 5px 0px 0px; 209 | -moz-border-radius: 5px 5px 0px 0px; 210 | border-bottom:1px solid #89AF4C; 211 | 212 | } 213 | .smart-green h1>span { 214 | display: block; 215 | font-size: 11px; 216 | color: #FFF; 217 | } 218 | 219 | .smart-green label { 220 | display: block; 221 | margin: 0px 0px 5px; 222 | } 223 | .smart-green label>span { 224 | float: left; 225 | margin-top: 10px; 226 | color: #5E5E5E; 227 | } 228 | .smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select { 229 | color: #555; 230 | height: 30px; 231 | line-height:15px; 232 | width: 100%; 233 | padding: 0px 0px 0px 10px; 234 | margin-top: 2px; 235 | border: 1px solid #E5E5E5; 236 | background: #FBFBFB; 237 | outline: 0; 238 | -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2); 239 | box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2); 240 | font: normal 14px/14px Arial, Helvetica, sans-serif; 241 | } 242 | .smart-green textarea{ 243 | height:100px; 244 | padding-top: 10px; 245 | } 246 | .smart-green select { 247 | background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%); 248 | background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9)); 249 | appearance:none; 250 | -webkit-appearance:none; 251 | -moz-appearance: none; 252 | text-indent: 0.01px; 253 | text-overflow: ''; 254 | width:100%; 255 | height:30px; 256 | } 257 | .smart-green .button { 258 | background-color: #9DC45F; 259 | border-radius: 5px; 260 | -webkit-border-radius: 5px; 261 | -moz-border-border-radius: 5px; 262 | border: none; 263 | padding: 10px 25px 10px 25px; 264 | color: #FFF; 265 | text-shadow: 1px 1px 1px #949494; 266 | } 267 | .smart-green .button:hover { 268 | background-color:#80A24A; 269 | } 270 | 271 | /* ###### White / Pink #########*/ 272 | .white-pink { 273 | margin-left:auto; 274 | margin-right:auto; 275 | 276 | max-width: 500px; 277 | background: #FFF; 278 | padding: 30px 30px 20px 30px; 279 | box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px; 280 | -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px; 281 | font: 12px Arial, Helvetica, sans-serif; 282 | color: #666; 283 | border-radius: 10px; 284 | -webkit-border-radius: 10px; 285 | } 286 | .white-pink h1 { 287 | font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; 288 | padding: 0px 0px 10px 40px; 289 | display: block; 290 | border-bottom: 1px solid #F5F5F5; 291 | margin: -10px -30px 10px -30px; 292 | color: #969696; 293 | } 294 | .white-pink h1>span { 295 | display: block; 296 | font-size: 11px; 297 | color: #C4C2C2; 298 | } 299 | .white-pink label { 300 | display: block; 301 | margin: 0px 0px 5px; 302 | } 303 | .white-pink label>span { 304 | float: left; 305 | width: 20%; 306 | text-align: right; 307 | padding-right: 10px; 308 | margin-top: 10px; 309 | color: #969696; 310 | } 311 | .white-pink input[type="text"], .white-pink input[type="email"], .white-pink textarea,.white-pink select{ 312 | color: #555; 313 | width: 70%; 314 | padding: 3px 0px 3px 5px; 315 | margin-top: 2px; 316 | margin-right: 6px; 317 | margin-bottom: 16px; 318 | border: 1px solid #e5e5e5; 319 | background: #fbfbfb; 320 | height: 25px; 321 | line-height:15px; 322 | outline: 0; 323 | -webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); 324 | box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); 325 | } 326 | .white-pink textarea{ 327 | height:100px; 328 | padding: 5px 0px 0px 5px; 329 | width: 70%; 330 | } 331 | .white-pink .button { 332 | -moz-box-shadow:inset 0px 1px 0px 0px #fbafe3; 333 | -webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3; 334 | box-shadow:inset 0px 1px 0px 0px #fbafe3; 335 | background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) ); 336 | background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% ); 337 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d'); 338 | background-color:#ff5bb0; 339 | border-radius:9px; 340 | -webkit-border-radius:9px; 341 | -moz-border-border-radius:9px; 342 | border:1px solid #ee1eb5; 343 | display:inline-block; 344 | color:#ffffff; 345 | font-family:Arial; 346 | font-size:15px; 347 | font-weight:bold; 348 | font-style:normal; 349 | height: 40px; 350 | line-height: 30px; 351 | width:100px; 352 | text-decoration:none; 353 | text-align:center; 354 | text-shadow:1px 1px 0px #c70067; 355 | } 356 | .white-pink .button:hover { 357 | background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0) ); 358 | background:-moz-linear-gradient( center top, #ef027d 5%, #ff5bb0 100% ); 359 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0'); 360 | background-color:#ef027d; 361 | } 362 | .white-pink .button:active { 363 | position:relative; 364 | top:1px; 365 | } 366 | .white-pink select { 367 | background: url('down-arrow.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%); 368 | background: url('down-arrow.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9)); 369 | appearance:none; 370 | -webkit-appearance:none; 371 | -moz-appearance: none; 372 | text-indent: 0.01px; 373 | text-overflow: ''; 374 | width: 70%; 375 | line-height: 15px; 376 | height: 30px; 377 | } 378 | 379 | /* #### bootstrap Form #### */ 380 | .bootstrap-frm { 381 | margin-left:auto; 382 | margin-right:auto; 383 | 384 | max-width: 500px; 385 | background: #FFF; 386 | padding: 20px 30px 20px 30px; 387 | font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; 388 | color: #888; 389 | text-shadow: 1px 1px 1px #FFF; 390 | border:1px solid #DDD; 391 | border-radius: 5px; 392 | -webkit-border-radius: 5px; 393 | -moz-border-radius: 5px; 394 | } 395 | .bootstrap-frm h1 { 396 | font: 25px "Helvetica Neue", Helvetica, Arial, sans-serif; 397 | padding: 0px 0px 10px 40px; 398 | display: block; 399 | border-bottom: 1px solid #DADADA; 400 | margin: -10px -30px 30px -30px; 401 | color: #888; 402 | } 403 | .bootstrap-frm h1>span { 404 | display: block; 405 | font-size: 11px; 406 | } 407 | .bootstrap-frm label { 408 | display: block; 409 | margin: 0px 0px 5px; 410 | } 411 | .bootstrap-frm label>span { 412 | float: left; 413 | width: 20%; 414 | text-align: right; 415 | padding-right: 10px; 416 | margin-top: 10px; 417 | color: #333; 418 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 419 | font-weight: bold; 420 | } 421 | .bootstrap-frm input[type="text"], .bootstrap-frm input[type="email"], .bootstrap-frm textarea, .bootstrap-frm select{ 422 | border: 1px solid #CCC; 423 | color: #888; 424 | height: 20px; 425 | line-height:15px; 426 | margin-bottom: 16px; 427 | margin-right: 6px; 428 | margin-top: 2px; 429 | outline: 0 none; 430 | padding: 5px 0px 5px 5px; 431 | width: 70%; 432 | border-radius: 4px; 433 | -webkit-border-radius: 4px; 434 | -moz-border-radius: 4px; 435 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 436 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 437 | -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 438 | } 439 | .bootstrap-frm select { 440 | background: #FFF url('down-arrow.png') no-repeat right; 441 | background: #FFF url('down-arrow.png') no-repeat right; 442 | appearance:none; 443 | -webkit-appearance:none; 444 | -moz-appearance: none; 445 | text-indent: 0.01px; 446 | text-overflow: ''; 447 | width: 70%; 448 | height: 35px; 449 | line-height:15px; 450 | } 451 | .bootstrap-frm textarea{ 452 | height:100px; 453 | padding: 5px 0px 0px 5px; 454 | width: 70%; 455 | } 456 | .bootstrap-frm .button { 457 | background: #FFF; 458 | border: 1px solid #CCC; 459 | padding: 10px 25px 10px 25px; 460 | color: #333; 461 | border-radius: 4px; 462 | } 463 | .bootstrap-frm .button:hover { 464 | color: #333; 465 | background-color: #EBEBEB; 466 | border-color: #ADADAD; 467 | } 468 | 469 | /* #### Dark Matter #### */ 470 | .dark-matter { 471 | margin-left: auto; 472 | margin-right: auto; 473 | max-width: 500px; 474 | background: #555; 475 | padding: 20px 30px 20px 30px; 476 | font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; 477 | color: #D3D3D3; 478 | text-shadow: 1px 1px 1px #444; 479 | border: none; 480 | border-radius: 5px; 481 | -webkit-border-radius: 5px; 482 | -moz-border-radius: 5px; 483 | } 484 | .dark-matter h1 { 485 | padding: 0px 0px 10px 40px; 486 | display: block; 487 | border-bottom: 1px solid #444; 488 | margin: -10px -30px 30px -30px; 489 | } 490 | .dark-matter h1>span { 491 | display: block; 492 | font-size: 11px; 493 | } 494 | .dark-matter label { 495 | display: block; 496 | margin: 0px 0px 5px; 497 | } 498 | .dark-matter label>span { 499 | float: left; 500 | width: 20%; 501 | text-align: right; 502 | padding-right: 10px; 503 | margin-top: 10px; 504 | font-weight: bold; 505 | } 506 | .dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select { 507 | border: none; 508 | color: #525252; 509 | height: 25px; 510 | line-height:15px; 511 | margin-bottom: 16px; 512 | margin-right: 6px; 513 | margin-top: 2px; 514 | outline: 0 none; 515 | padding: 5px 0px 5px 5px; 516 | width: 70%; 517 | border-radius: 2px; 518 | -webkit-border-radius: 2px; 519 | -moz-border-radius: 2px; 520 | -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 521 | background: #DFDFDF; 522 | } 523 | .dark-matter select { 524 | background: #DFDFDF url('down-arrow.png') no-repeat right; 525 | background: #DFDFDF url('down-arrow.png') no-repeat right; 526 | appearance:none; 527 | -webkit-appearance:none; 528 | -moz-appearance: none; 529 | text-indent: 0.01px; 530 | text-overflow: ''; 531 | width: 70%; 532 | height: 35px; 533 | color: #525252; 534 | line-height: 25px; 535 | } 536 | .dark-matter textarea{ 537 | height:100px; 538 | padding: 5px 0px 0px 5px; 539 | width: 70%; 540 | } 541 | .dark-matter .button { 542 | background: #FFCC02; 543 | border: none; 544 | padding: 10px 25px 10px 25px; 545 | color: #585858; 546 | border-radius: 4px; 547 | -moz-border-radius: 4px; 548 | -webkit-border-radius: 4px; 549 | text-shadow: 1px 1px 1px #FFE477; 550 | font-weight: bold; 551 | box-shadow: 1px 1px 1px #3D3D3D; 552 | -webkit-box-shadow:1px 1px 1px #3D3D3D; 553 | -moz-box-shadow:1px 1px 1px #3D3D3D; 554 | } 555 | 556 | .dark-matter .button:hover { 557 | color: #333; 558 | background-color: #EBEBEB; 559 | } 560 | --------------------------------------------------------------------------------