settings.html 7.08 KB
Newer Older
1 2
<!DOCTYPE html>
<html lang="en">
3 4 5 6
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <link rel="stylesheet" href="../assets/bootstrap.min.css" />
8

9
    <style>
10
      @font-face {
11
        font-family: "Itim";
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
        src: url("../assets/fonts/Itim-Regular.ttf") format("truetype");
      }
      body {
        width: 400px;
        height: 300px;
        background-image: linear-gradient(
          to bottom,
          #416e75,
          #529290,
          #6db7a6,
          #94dbb5,
          #c6ffc1
        );
        font-family: "Itim";
      }
      :root {
        --backgroundColor: rgba(246, 241, 209);
        --colorShadeA: rgb(88, 112, 85);
        --colorShadeB: rgb(88, 112, 85);
        --colorShadeC: rgb(187, 240, 182, 94);
        --colorShadeD: rgb(197, 252, 192, 99);
        --colorShadeE: rgb(198, 255, 193, 100);
      }

      @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
      * {
        box-sizing: border-box;
      }
      *::before,
      *::after {
        box-sizing: border-box;
      }

      button {
        position: relative;
        display: inline-block;
        cursor: pointer;
        outline: none;
        border: 0;
        vertical-align: middle;
        text-decoration: none;
        font-size: 11px;
        color: var(--colorShadeA);
        font-weight: 700;
        text-transform: uppercase;
        font-family: inherit;
        width: 150px;
      }

      button.big-button {
        padding: 1em 2em;
        border: 2px solid var(--colorShadeA);
        border-radius: 1em;
        background: var(--colorShadeE);
        transform-style: preserve-3d;
        transition: all 175ms cubic-bezier(0, 0, 1, 1);
      }
      button.big-button::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--colorShadeC);
        border-radius: inherit;
        box-shadow: 0 0 0 2px var(--colorShadeB),
          0 0.75em 0 0 var(--colorShadeA);
        transform: translate3d(0, 0.75em, -1em);
        transition: all 175ms cubic-bezier(0, 0, 1, 1);
        -webkit-box-shadow: 0px 0px 15px 5px #000000;
        box-shadow: 0px 0px 15px 5px #000000;
      }

      button.big-button:hover {
        background: var(--colorShadeD);
        transform: translate(0, 0.375em);
      }

      button.big-button:hover::before {
        transform: translate3d(0, 0.75em, -1em);
      }

      button.big-button:active {
        transform: translate(0em, 0.75em);
      }

      button.big-button:active::before {
        transform: translate3d(0, 0, -1em);

        box-shadow: 0 0 0 2px var(--colorShadeB),
          0 0.25em 0 0 var(--colorShadeB);
      }

      .custom-control-input:checked ~ .custom-control-label::before {
        color: #fff;
        border-color: #7b1fa2;
      }

      .custom-control-input:checked ~ .custom-control-label.yellow::before {
        background-color: #ffe268;
      }
116
    </style>
117
  </head>
118

119
  <body>
120
    <div class="container">
121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
      <div class="col">
        <div class="row">
          <div
            class="col text-center"
            style="
              margin-top: 30px;
              color: #ffe268;
              text-shadow: 1.5px 1.5px #a87414;
            "
          >
            <h4>AYARLAR</h4>
          </div>
        </div>
        <div
          class="row"
          style="margin-top: 10px; margin-bottom: 10px; font-size: 16px"
        >
          <div class="col-5 align-self-center">Kullanıcı Adı:</div>
          <div class="col-7">
            <input
              class="form-control"
              type="text"
              placeholder="Kullanıcı Adı"
144
              id="kullaniciadi"
145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
            />
          </div>
        </div>
        <div
          class="row"
          style="margin-top: 10px; margin-bottom: 10px; font-size: 16px"
        >
          <div class="col-5">Zorluk Seviyesi:</div>
          <div class="col-7">
            <div class="custom-control custom-radio custom-control-inline">
              <input
                type="radio"
                id="customRadioInline1"
                name="customRadioInline1"
                class="custom-control-input"
160
                value="Kolay"
161 162 163 164 165 166 167
                checked
              />
              <label
                class="custom-control-label yellow"
                for="customRadioInline1"
                >Kolay</label
              >
168
            </div>
169 170 171 172 173 174 175
            <br />
            <div class="custom-control custom-radio custom-control-inline">
              <input
                type="radio"
                id="customRadioInline2"
                name="customRadioInline1"
                class="custom-control-input"
176
                value="Orta"
177 178 179 180 181 182
              />
              <label
                class="custom-control-label yellow"
                for="customRadioInline2"
                >Orta</label
              >
183
            </div>
184 185 186 187 188 189 190
            <br />
            <div class="custom-control custom-radio custom-control-inline">
              <input
                type="radio"
                id="customRadioInline3"
                name="customRadioInline1"
                class="custom-control-input"
191
                value="Zor"
192 193 194 195 196 197
              />
              <label
                class="custom-control-label yellow"
                for="customRadioInline3"
                >Zor</label
              >
198
            </div>
199 200 201 202 203 204 205 206 207 208 209 210 211 212 213
            <br />
            <div class="custom-control custom-radio custom-control-inline">
              <input
                type="radio"
                id="customRadioInline4"
                name="customRadioInline1"
                class="custom-control-input"
                value="Cengaver"
              />
              <label
                class="custom-control-label yellow"
                for="customRadioInline4"
                >Cengaver</label
              >
            </div>
214 215 216 217 218 219 220 221
          </div>
        </div>
        <div class="row" style="margin-top: 10px">
          <div class="col-5"></div>
          <div class="col-7">
            <!--<a href="#" class="btn">Oyuna Dön</a>-->
            <button class="big-button" id="save" type="button">Kaydet</button>
          </div>
222
        </div>
223
      </div>
224
    </div>
225
  </body>
226
  <script src="settings.js"></script>
227
  <script>
228 229
    const remote = require("electron").remote;

230 231
    var atananisim=getUsername();
    document.getElementById("kullaniciadi").value=atananisim;
232
    document.getElementById("save").addEventListener("click", function (e) {
233 234 235 236 237 238 239 240 241 242 243
      var name=document.getElementById("kullaniciadi").value;
      var radios = document.getElementsByName('customRadioInline1');
      var secilen;
      for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
          secilen=radios[i].value;
          break;
        }
      }
      console.log(secilen)
      updateSetting(name,secilen);
244 245
      var window = remote.getCurrentWindow();
      window.close();
246 247
    });
  </script>
248
</html>