Codewars/src/components/home/home.html at MenuEtc · csseditor/Codewars · GitHub

1
2
3
4
5
6
7
8
9
10
11
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
<section class="home" ng-init="init()">

  <div class="home-up any-home-div">
    <div class="next-challenge font16-bold">
      <h3 id="your-next-challenge">Your Next Challenge...</h3>
      <div class="challenge-selector-div">
        <select class="home-dropdown" ng-init="selectedLanguage = languageOptions[0]" ng-model="selectedLanguage" ng-options="x for x in languageOptions"></select>
        <select class="home-dropdown" ng-init="selectedProgress = progressOptions[0]" ng-model="selectedProgress" ng-options="x for x in progressOptions"></select>
      </div>
      <div class="challenge-buttons-div">
        <a ui-sref="menu.training({kataid: randomKata.id})"><button id="train-button" class="home-button">Train</button></a>
        <button id="skip-button" class="home-button" ng-click="getRandomKata()">Skip</button>
      </div>
    </div>

    <div class="challenge-details">
      <div class="challenge-details-top">
        <img class="difficulty-icon" src="./assets/imgs/{{randomKata.kyu}}_kyu_icon.png" alt="{{randomKata.kyu}}kyu">
        <h1 class="font16-reg">{{randomKata.name}}</h1>
      </div>
      <div class="random-kata-description-div">
        <p class="font14-reg-gray" id="random-kata-description">{{randomKata.description}}</p>
      </div>
      <div class="taggg-tag-div" ng-repeat="tag in randomKata.tags | limitTo: 3">
        <p class="font10-reg-gray" id="taggg-tag">{{tag}}</p>
      </div>
    </div>
  </div> <!--END OF HOME-UP -->

  <div class="ads any-home-div">
    <img id="codewars-red-icon" src="./assets/imgs/red_icon.png" alt="codwars_red">
    <div class="adsss-right">
      <h6 class="font16-reg-efefef">Upgrade To Clonewars Red!</h6>
      <p class="font14-reg-efefef">Support Clonewars and get some fancy upgrades like Pro Stats, Head-to-head comparisons, No ads, Stream Output and more.</p>
      <a href="https://www.codewars.com/subscribe" target="_blank"><button id="learn-about-red">Learn About Red</button></a>
    </div>
  </div> <!--END OF ADS-->

  <div class="user-completed-katas" >
    <div class="home-completed-top">
      <p class="font20-reg" style="margin-left: 10px">Your Completed Katas:</p>
    </div>
    <div class="repeat-completed-katas" ng-repeat="kata in userKatas track by $index">
      <div class="solutions-main-head">
        <img class="difficulty-icon" ng-src="./assets/imgs/{{kata.kyu}}_kyu_icon.png" alt="{{kata.kyu}}_kyu">
        <p class="font17-reg">{{kata.name}}</p>
        <button class="vote-button" ng-click="voteKata(kata.id, true)">
          <i class="fa fa-thumbs-up" style="color: #efefef; margin: 0 10px 0 5px;" aria-hidden="true"></i>
          <p class="font14-reg-efefef" style="margin: 0 5px 0 0">Satisfied</p>
        </button>
        <button class="vote-button" ng-click="voteKata(kata.id, false)">
          <i class="fa fa-thumbs-down" style="color: #efefef; margin: 0 10px 0 5px;" aria-hidden="true"></i>
          <p class="font14-reg-efefef" style="margin: 0 5px 0 0">Not Satisfied</p>
        </button>
      </div>
      <div class="kata-stats">
        <img class="kata-stats-icon .font14-reg-gray" src="./assets/imgs/satisfaction_icon.png" />
        <p class="kata-stats-info">{{kata.satisfaction}}% satisfied of {{kata.votes}} votes</p>
        <img class="kata-stats-icon .font14-reg-gray" src="./assets/imgs/completion_icon.png"/>
        <p class="kata-stats-info">completion</p>
        <img class="kata-stats-icon .font14-reg-gray" src="./assets/imgs/creator_icon.png"/>
        <p class="kata-stats-info">{{kata.creator}}</p>
      </div>
      <div class="indv-kata-tags">
        <img src="./assets/imgs/tag_icon.png" id="tag-icon" alt="tagggg">
        <div class="tag-tag-div" ng-repeat="tag in kata.tags">
          <p class="font10-reg-gray" id="tag-tag">{{tag}}</p>
        </div>
      </div>
      <div class='home-solutions-div'>
        <div class="home-solution-button-div">
          <p class="font16-reg-efefef show-solutions">Your solutions</p>
          <a class="font16-reg-efefef" id="kata-name" href="/#/solutions/{{kata.id}}">
            <p>See Other Solutions</p>
          </a>
        </div>
        <div class="home-repeated-solutions-div">
          <textarea class="solution-text repeated-completed-solutions-home" id="{{$index}}" codemirror-directive>
          </textarea>
        </div>
      </div>
      <hr class="home-bottom-border-hr">
    </div> <!--END REPEATED COMPLETED-->
  </div> <!--END OF USER-COMPLETED KATAS LIST-->


</section>